/*
 * Tekniseri design system — faithful port of the tekniseri.joowa.cloud design.
 *
 * Loads after the parent base.css. Every value below is taken from the design
 * prototype's dark ("Tumma") theme so the WordPress site renders pixel-for-
 * pixel like the reference. Responsive rules at the end are the prototype's own
 * and key off the same data-pad / data-grid / data-r attributes.
 */

@layer wpsa.tokens, wpsa.base, wpsa.layout, wpsa.components, wpsa.utilities;

@layer wpsa.tokens {
	:root {
		--tk-bg: #0e0e15;
		--tk-surface: #171622;
		--tk-border: #2a2938;
		--tk-text: #f6f5f2;
		--tk-muted: #918ea4;
		--tk-body: #c9c6d4;
		--tk-accent: #fc5c07;
		--tk-on-accent: #ffffff;
		--tk-inv-bg: #0b3358;
		--tk-inv-text: #f6f5f2;
		--tk-inv-muted: #93badf;
		--tk-inv-border: #1b4e7e;
		--tk-inv-accent: #fb74b6; /* was #f2429b; lifted to pass WCAG AA on the blue band */
		--tk-grid-line: rgba(246, 245, 242, 0.04);
		--tk-sec: #2a94ec; /* was #0579d7; lifted to pass WCAG AA (5.9:1) on the dark surfaces */
		--tk-sec-light: #54acf7;
		--tk-badge: #dc026e;
		--tk-ov25: rgba(14, 14, 21, 0.25);
		--tk-ov55: rgba(14, 14, 21, 0.55);
		--tk-glass: rgba(14, 14, 21, 0.55);
		--tk-glass-hover: rgba(14, 14, 21, 0.3);
		--tk-footer-bg: #0c0d0f;
		--tk-footer-text: #8a8a85;
		--tk-cta-text: #ededea;
		--tk-cta-muted: #b9b9b2;
		--tk-mono: "IBM Plex Mono", monospace;
		--tk-sans: "Archivo", sans-serif;
		--tk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	html,
	body {
		margin: 0;
		padding: 0;
		background: var(--tk-footer-bg);
	}

	body {
		font-family: var(--tk-sans);
		color: var(--tk-text);
	}

	.wpsa-site-body,
	.wpsa-site-main {
		background: var(--tk-bg);
		color: var(--tk-text);
	}

	.wpsa-site-header,
	.wpsa-site-footer {
		background: transparent;
	}
}

@layer wpsa.base {
	* {
		box-sizing: border-box;
	}

	/* The prototype relies on browser defaults: 16px, line-height normal. The
	   parent base layer sets 17px / 1.65, so the override lives in this layer. */
	body {
		font-family: var(--tk-sans);
		font-size: 16px;
		line-height: normal;
		color: var(--tk-text);
	}

	.wpsa-site-main h1,
	.wpsa-site-main h2,
	.wpsa-site-main h3,
	.wpsa-site-main h4 {
		font-family: var(--tk-sans);
		line-height: normal;
	}

	::selection {
		background: var(--tk-accent);
		color: #fff;
	}

	.wpsa-site-main {
		display: block;
		min-height: 100vh;
		overflow-x: hidden;
		padding: 0;
		margin: 0;
		max-width: none;
	}

	.wpsa-site-main h1,
	.wpsa-site-main h2,
	.wpsa-site-main h3,
	.wpsa-site-main h4,
	.wpsa-site-main p {
		margin: 0;
	}

	.wpsa-site-main a {
		color: inherit;
	}

	.wpsa-site-main :focus-visible,
	.wpsa-site-header :focus-visible,
	.wpsa-site-footer :focus-visible {
		outline: 2px solid var(--tk-accent);
		outline-offset: 3px;
	}

	.wpsa-skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
		z-index: 500;
		padding: 10px 16px;
		background: var(--tk-accent);
		color: #fff;
	}

	.wpsa-skip-link:focus {
		left: 12px;
		top: 12px;
	}

	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	@keyframes tkHeroUp {
		from {
			opacity: 0;
			transform: translateY(60px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes tkRevealUp {
		from {
			opacity: 0;
			transform: translateY(36px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	@keyframes tkFadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes tkMarquee {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-50%);
		}
	}

	@keyframes tkPulseDot {
		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.3;
		}
	}

	@keyframes tkWfDraw {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes tkWfMarch {
		to {
			stroke-dashoffset: -24px;
		}
	}

	@keyframes tkWfSpin {
		to {
			transform: rotate(360deg);
		}
	}

	[data-reveal] {
		animation: tkRevealUp 0.8s var(--tk-ease) both;
	}

	[data-reveal]:nth-child(2) {
		animation-delay: 0.08s;
	}

	[data-reveal]:nth-child(3) {
		animation-delay: 0.16s;
	}

	[data-reveal]:nth-child(4) {
		animation-delay: 0.24s;
	}

	[data-reveal]:nth-child(5) {
		animation-delay: 0.32s;
	}

	[data-reveal]:nth-child(6) {
		animation-delay: 0.4s;
	}
}

@layer wpsa.layout {
	/* Section shell: 1440px column with 48px gutters, like the prototype. */
	.tk-wrap {
		max-width: 1440px;
		margin: 0 auto;
	}

	.tk-section {
		padding: 120px 48px;
		max-width: 1440px;
		margin: 0 auto;
	}

	.tk-section--t0 {
		padding-top: 0;
	}

	.tk-band {
		border-top: 1px solid var(--tk-border);
	}

	.tk-band__inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 56px 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		flex-wrap: wrap;
	}

	/* Section head: display heading left, mono numbering right. */
	.tk-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 48px;
	}

	/* Display heading — Archivo 900, expanded, uppercase. */
	.tk-display {
		margin: 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(36px, 4.4vw, 64px);
		line-height: normal;
		text-transform: uppercase;
		letter-spacing: -1.5px;
		color: inherit;
	}

	.tk-display--md {
		font-size: clamp(32px, 3.4vw, 52px);
		letter-spacing: -1.2px;
		line-height: 1.02;
	}

	.tk-display--sm {
		font-size: clamp(24px, 2.6vw, 36px);
		letter-spacing: -0.8px;
		line-height: 1.05;
	}

	.tk-display--xl {
		font-size: clamp(48px, 6vw, 96px);
		line-height: 0.95;
		letter-spacing: -2.5px;
	}

	.tk-display--hero {
		font-size: clamp(40px, 5.6vw, 92px);
		line-height: 0.94;
		letter-spacing: -2px;
	}

	/* German compounds ("Kennzeichnung") outgrow the 40px floor on phones. */
	/* The German headline carries 22-letter compounds, so it runs smaller at
	   every width and hyphenates only at the soft hyphens in the text. */
	:lang(de) .tk-display--hero {
		font-size: clamp(27px, 4.3vw, 70px);
	}

	.tk-display--why {
		font-size: clamp(36px, 4vw, 58px);
		line-height: 1;
	}

	.tk-display .tk-accent,
	.tk-display .tekniseri-split__line--accent,
	.tk-display .tekniseri-hero__accent {
		color: var(--tk-accent);
	}

	.tk-display > span {
		display: block;
	}

	.tk-display > span.tk-inline {
		display: inline;
	}

	/* Mono labels. */
	.tk-mono {
		font-family: var(--tk-mono);
		font-size: 13px;
		letter-spacing: 2px;
		color: var(--tk-sec);
		text-transform: uppercase;
	}

	.tk-mono--accent {
		color: var(--tk-accent);
	}

	.tk-mono--muted {
		color: var(--tk-muted);
	}

	.tk-mono--light {
		color: var(--tk-sec-light);
	}

	.tk-mono--body {
		color: var(--tk-body);
	}

	.tk-mono--sm {
		font-size: 12px;
	}

	.tk-mono--xs {
		font-size: 11px;
		letter-spacing: 1.5px;
	}

	.tk-eyebrow {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 28px;
	}

	.tk-eyebrow__dot {
		width: 8px;
		height: 8px;
		background: var(--tk-accent);
		flex: 0 0 auto;
		animation: tkPulseDot 2s infinite;
	}

	.tk-eyebrow .tk-mono {
		color: var(--tk-body);
	}

	.tk-lead {
		margin: 0;
		font-size: 17px;
		line-height: 1.65;
		color: var(--tk-body);
		max-width: 560px;
	}

	.tk-lead p {
		margin: 0;
	}

	.tk-lead p + p {
		margin-top: 1em;
	}

	/* Two-column split grid. */
	.tk-split {
		display: grid;
		grid-template-columns: 1fr 1.15fr;
		gap: 64px;
		align-items: center;
	}

	.tk-split--why {
		grid-template-columns: 1.4fr 1fr;
		position: relative;
	}

	.tk-split--cta {
		grid-template-columns: 1.3fr 1fr;
	}

	.tk-split--even {
		grid-template-columns: 1fr 1fr;
	}

	.tk-grid {
		display: grid;
		gap: 16px;
	}

	.tk-grid--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.tk-grid--4 {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}

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

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

@layer wpsa.components {
	/* -- Buttons ------------------------------------------------------ */
	.tk-btn {
		display: inline-block;
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		text-decoration: none;
		padding: 18px 34px;
		font-weight: 800;
		font-size: 16px;
		letter-spacing: 0.3px;
		border: 0;
		border-radius: 0;
		cursor: pointer;
		font-family: inherit;
		transition: background 0.25s, color 0.25s, transform 0.25s var(--tk-ease), box-shadow 0.25s;
	}

	.tk-btn:hover {
		background: var(--tk-text);
		color: var(--tk-bg);
		transform: translateY(-3px);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
	}

	.tk-btn--ghost {
		background: transparent;
		border: 1px solid var(--tk-border);
		color: var(--tk-text);
		font-weight: 600;
		letter-spacing: 0;
		transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s var(--tk-ease);
	}

	.tk-btn--ghost:hover {
		border-color: var(--tk-accent);
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		box-shadow: none;
	}

	.tk-btn--light {
		background: var(--tk-inv-text);
		color: var(--tk-inv-bg);
		font-weight: 700;
		letter-spacing: 0;
	}

	.tk-btn--light:hover {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	}

	.tk-btn--mid {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 16px 28px;
		font-weight: 700;
		font-size: 15px;
		letter-spacing: 0;
		transition: transform 0.25s var(--tk-ease), box-shadow 0.25s, filter 0.25s;
	}

	.tk-btn--mid:hover {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
		filter: brightness(1.06);
	}

	.tk-btn--outline {
		display: inline-flex;
		align-items: center;
		border: 1px solid rgba(237, 237, 234, 0.3);
		background: transparent;
		color: var(--tk-cta-text);
		padding: 14px 26px;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0;
		white-space: nowrap;
		transition: background 0.25s, color 0.25s, border-color 0.25s;
	}

	.tk-btn--outline:hover {
		background: var(--tk-accent);
		border-color: var(--tk-accent);
		color: #fff;
		transform: none;
		box-shadow: none;
	}

	.tk-btn--small {
		padding: 12px 22px;
		font-size: 13px;
	}

	/* Text link with mono label + badge (hero "UUTTA ESITTEET →"). */
	.tk-badge-link {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--tk-text);
		text-decoration: none;
		padding: 18px 8px;
		font-family: var(--tk-mono);
		font-size: 13px;
		letter-spacing: 1px;
		transition: color 0.25s, gap 0.25s var(--tk-ease);
	}

	.tk-badge-link:hover {
		color: var(--tk-accent);
		gap: 16px;
	}

	.tk-badge {
		background: var(--tk-badge);
		color: #fff;
		font-weight: 700;
		font-size: 10px;
		letter-spacing: 1.5px;
		padding: 4px 8px;
	}

	.tk-arrow-link {
		color: var(--tk-text);
		text-decoration: none;
		font-weight: 600;
		font-size: 13.5px;
	}

	.tk-arrow-link:hover {
		color: var(--tk-accent);
	}

	/* -- Header ------------------------------------------------------- */
	.tk-nav {
		position: fixed;
		top: 14px;
		left: 50%;
		transform: translateX(-50%);
		width: min(1520px, calc(100% - 28px));
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 12px 10px clamp(18px, 2.4vw, 28px);
		border-radius: 999px;
		background: rgba(14, 14, 21, 0.45);
		border: 1px solid rgba(246, 245, 242, 0.08);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		box-shadow: none;
		transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
	}

	.tk-nav.is-scrolled {
		background: rgba(14, 14, 21, 0.85);
		border-color: var(--tk-border);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	}

	.tk-nav__brand {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		text-decoration: none;
	}

	.tk-nav__brand img {
		height: 36px;
		width: auto;
		display: block;
	}

	.tk-nav__est {
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-accent);
		letter-spacing: 1px;
		white-space: nowrap;
		align-self: center;
		margin-top: 6px;
	}

	.tk-nav__brandtext {
		font-weight: 900;
		font-size: 20px;
		color: var(--tk-text);
	}

	.tk-nav__links {
		display: flex;
		align-items: center;
		gap: clamp(10px, 1.4vw, 22px);
		font-size: 13px;
		font-weight: 500;
		min-width: 0;
	}

	.tk-nav__links > a {
		color: var(--tk-text);
		text-decoration: none;
		white-space: nowrap;
		transition: color 0.2s;
	}

	.tk-nav__links > a:hover,
	.tk-nav__links > a[aria-current] {
		color: var(--tk-accent);
	}

	.tk-mega {
		position: static;
	}

	.tk-mega__btn {
		display: flex;
		align-items: center;
		gap: 6px;
		background: transparent;
		border: 0;
		cursor: pointer;
		padding: 9px 11px;
		margin-right: -11px;
		border-radius: 999px;
		font-family: var(--tk-sans);
		font-size: 13px;
		font-weight: 500;
		color: var(--tk-text);
		white-space: nowrap;
	}

	.tk-mega__btn span {
		display: inline-flex;
		transition: transform 0.25s;
	}

	.tk-mega.is-open .tk-mega__btn {
		background: rgba(246, 245, 242, 0.1);
		color: var(--tk-accent);
	}

	.tk-mega.is-open .tk-mega__btn span {
		transform: rotate(180deg);
	}

	.tk-mega__panel {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		background: var(--tk-bg);
		border: 1px solid var(--tk-border);
		border-radius: 28px;
		box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
		padding: 28px;
		animation: tkFadeIn 0.22s ease both;
	}

	.tk-mega__panel[hidden] {
		display: none;
	}

	.tk-mega__grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 14px;
	}

	.tk-mega__col {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.tk-mega__card {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: var(--tk-text);
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		border-radius: 18px;
		overflow: hidden;
		transition: border-color 0.2s;
	}

	.tk-mega__card:hover {
		border-color: var(--tk-accent);
	}

	.tk-mega__media {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.tk-mega__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.75;
		filter: grayscale(25%);
	}

	.tk-mega__shade {
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgba(10, 10, 14, 0.95) 0%, rgba(10, 10, 14, 0.6) 38%, rgba(10, 10, 14, 0) 68%);
	}

	.tk-mega__caption {
		position: absolute;
		left: 14px;
		bottom: 12px;
		text-align: left;
	}

	.tk-mega__num {
		font-family: var(--tk-mono);
		font-size: 10px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
		margin-bottom: 4px;
	}

	.tk-mega__name {
		font-weight: 700;
		font-size: 14.5px;
		line-height: 1.25;
		letter-spacing: -0.2px;
		color: #fff;
	}

	.tk-mega__subs {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 0 6px;
	}

	.tk-mega__subs a {
		display: flex;
		align-items: center;
		gap: 7px;
		color: var(--tk-body);
		text-decoration: none;
		font-size: 12.5px;
		line-height: 1.3;
		padding: 5px 8px;
		border-radius: 8px;
		transition: color 0.2s, background 0.2s;
	}

	.tk-mega__subs a::before {
		content: "";
		width: 4px;
		height: 4px;
		background: var(--tk-accent);
		flex-shrink: 0;
	}

	.tk-mega__subs a:hover {
		color: var(--tk-accent);
		background: var(--tk-surface);
	}

	.tk-mega__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		margin-top: 22px;
		padding-top: 18px;
		border-top: 1px solid var(--tk-border);
	}

	.tk-mega__foot-left {
		display: flex;
		align-items: center;
		gap: 26px;
	}

	.tk-pill {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--tk-text);
		text-decoration: none;
		font-weight: 700;
		font-size: 13.5px;
		border: 1.5px solid var(--tk-accent);
		border-radius: 999px;
		padding: 9px 20px;
		transition: background 0.2s, color 0.2s;
	}

	.tk-pill:hover {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
	}

	.tk-pill--solid {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		border: 0;
		padding: 12px 26px;
		font-size: 13px;
		white-space: nowrap;
		transition: transform 0.25s var(--tk-ease), box-shadow 0.25s, filter 0.25s;
	}

	.tk-pill--solid:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
		filter: brightness(1.06);
	}

	.tk-nav__search {
		display: flex;
		align-items: center;
	}

	.tk-nav__search button {
		background: transparent;
		border: 0;
		cursor: pointer;
		padding: 8px 6px;
		display: flex;
		color: var(--tk-muted);
		transition: color 0.2s;
	}

	.tk-nav__search button:hover {
		color: var(--tk-accent);
	}

	.tk-nav__search input {
		width: 0;
		opacity: 0;
		transition: width 0.35s var(--tk-ease), opacity 0.25s ease;
		background: transparent;
		border: 0;
		border-bottom: 1px solid transparent;
		color: var(--tk-text);
		font-family: var(--tk-mono);
		font-size: 12px;
		padding: 6px 0;
		outline: none;
	}

	.tk-nav__search.is-open input {
		width: clamp(90px, 10vw, 150px);
		opacity: 1;
		border-bottom-color: var(--tk-border);
	}

	.tk-nav__lang {
		position: relative;
	}

	.tk-nav__langbtn {
		display: flex;
		align-items: center;
		gap: 6px;
		background: transparent;
		border: 0;
		cursor: pointer;
		padding: 8px 4px;
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-muted);
		letter-spacing: 1px;
		white-space: nowrap;
		transition: color 0.2s;
	}

	.tk-nav__langbtn:hover {
		color: var(--tk-accent);
	}

	.tk-nav__langbtn span {
		font-size: 8px;
		display: inline-block;
		transition: transform 0.25s;
	}

	.tk-nav__langbtn[aria-expanded="true"] span {
		transform: rotate(180deg);
	}

	.tk-nav__langmenu {
		position: absolute;
		top: calc(100% + 16px);
		right: 0;
		min-width: 156px;
		background: var(--tk-bg);
		border: 1px solid var(--tk-border);
		box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
		border-radius: 16px;
		padding: 6px;
		display: flex;
		flex-direction: column;
		animation: tkFadeIn 0.2s ease both;
	}

	.tk-nav__langmenu[hidden] {
		display: none;
	}

	.tk-nav__langmenu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		background: transparent;
		color: var(--tk-muted);
		text-align: left;
		padding: 9px 12px;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1px;
		border-radius: 10px;
		white-space: nowrap;
		text-decoration: none;
		transition: color 0.2s;
	}

	.tk-nav__langmenu a span:last-child {
		font-family: var(--tk-sans);
		font-weight: 500;
		font-size: 12.5px;
		letter-spacing: 0;
	}

	.tk-nav__langmenu a[aria-current] {
		background: rgba(246, 245, 242, 0.08);
		color: var(--tk-text);
	}

	.tk-nav__langmenu a:hover {
		color: var(--tk-accent);
	}

	.tk-nav__cta {
		color: var(--tk-on-accent) !important;
		background: var(--tk-accent);
		text-decoration: none;
		padding: 11px 22px;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.3px;
		white-space: nowrap;
		border-radius: 999px;
		transition: background 0.25s, color 0.25s, transform 0.25s var(--tk-ease), box-shadow 0.25s;
	}

	.tk-nav__cta:hover {
		background: var(--tk-text);
		color: var(--tk-bg) !important;
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	}

	.tk-nav__toggle {
		display: none;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--tk-text);
		flex-shrink: 0;
		margin-right: -6px;
	}

	.tk-drawer {
		position: fixed;
		inset: 0;
		z-index: 99;
		background: var(--tk-bg);
		color: var(--tk-text);
		padding: 96px 22px 36px;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		animation: tkFadeIn 0.2s ease both;
	}

	.tk-drawer[hidden] {
		display: none;
	}

	.tk-drawer__group {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 2px;
		color: var(--tk-sec);
		margin: 6px 0 8px;
		text-transform: uppercase;
	}

	.tk-drawer__group + .tk-drawer__group,
	.tk-drawer a + .tk-drawer__group {
		margin-top: 30px;
	}

	.tk-drawer a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		color: var(--tk-text);
		text-decoration: none;
		font-weight: 600;
		font-size: 20px;
		padding: 13px 0;
		border-bottom: 1px solid var(--tk-border);
	}

	.tk-drawer a.tk-drawer__product {
		font-weight: 700;
		font-size: 18px;
	}

	.tk-drawer a .tk-drawer__num {
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-accent);
		flex-shrink: 0;
	}

	.tk-drawer a.tk-drawer__cta {
		margin-top: 30px;
		display: block;
		text-align: center;
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		padding: 18px;
		font-weight: 800;
		font-size: 16px;
		border: 0;
	}

	/* -- Hero --------------------------------------------------------- */
	.tk-hero {
		position: relative;
		min-height: calc(100vh - 58px);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 0 48px 56px;
	}

	.tk-hero__grid {
		position: absolute;
		inset: 0;
		background-image: linear-gradient(var(--tk-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tk-grid-line) 1px, transparent 1px);
		background-size: 72px 72px;
		pointer-events: none;
	}

	.tk-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		width: 44%;
		height: 100%;
		overflow: hidden;
	}

	.tk-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.5;
		filter: grayscale(35%) contrast(1.1);
		animation: tkFadeIn 1.6s ease both;
	}

	.tk-hero__fade {
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--tk-bg) 0%, var(--tk-ov25) 60%, var(--tk-ov55) 100%);
	}

	.tk-hero__body {
		position: relative;
		z-index: 2;
	}

	.tk-hero__body .tk-eyebrow {
		animation: tkHeroUp 0.9s 0.1s var(--tk-ease) both;
	}

	.tk-hero__body h1 {
		animation: tkHeroUp 1s 0.22s var(--tk-ease) both;
	}

	.tk-hero__after {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		margin-top: 44px;
		animation: tkHeroUp 1s 0.38s var(--tk-ease) both;
	}

	.tk-hero__lead {
		margin: 0;
		max-width: 520px;
		font-size: 18px;
		line-height: 1.55;
		color: var(--tk-body);
	}

	.tk-hero__actions {
		display: flex;
		gap: 14px;
	}

	/* Subpage hero: image right, breadcrumb, eyebrow, heading, lead. */
	.tk-page-hero {
		position: relative;
		padding: 150px 48px 64px;
		overflow: hidden;
		border-bottom: 1px solid var(--tk-border);
	}

	.tk-page-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		width: 44%;
		height: 100%;
		overflow: hidden;
	}

	.tk-page-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.5;
		filter: grayscale(35%) contrast(1.1);
	}

	.tk-page-hero__body {
		position: relative;
		z-index: 2;
		max-width: 1440px;
		margin: 0 auto;
	}

	.tk-crumbs {
		display: flex;
		gap: 10px;
		margin: 0 0 28px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--tk-muted);
	}

	.tk-crumbs a {
		color: var(--tk-muted);
		text-decoration: none;
	}

	.tk-crumbs a:hover {
		color: var(--tk-accent);
	}

	.tk-crumbs [aria-current] {
		color: var(--tk-sec);
	}

	/* -- Marquee ------------------------------------------------------ */
	.tk-marquee {
		border-top: 1px solid var(--tk-border);
		border-bottom: 1px solid var(--tk-border);
		overflow: hidden;
		padding: 18px 0;
		background: var(--tk-bg);
	}

	.tk-marquee__track {
		display: flex;
		gap: 0;
		width: max-content;
		animation: tkMarquee 80s linear infinite;
		white-space: nowrap;
	}

	.tk-marquee__text {
		font-family: var(--tk-mono);
		font-size: 14px;
		letter-spacing: 2px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	/* -- Intro (image + copy) ---------------------------------------- */
	.tk-figure {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.tk-figure img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(30%) contrast(1.05);
	}

	.tk-figure__caption {
		position: absolute;
		left: 0;
		bottom: 0;
		background: var(--tk-bg);
		padding: 10px 16px 0 0;
	}

	.tk-figure__caption span {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	.tk-certs {
		display: flex;
		gap: 14px;
		align-items: center;
		margin-top: 28px;
	}

	.tk-certs__eco {
		width: 88px;
		height: 88px;
		object-fit: contain;
	}

	.tk-certs__dnv {
		background: #fff;
		border: 1px solid var(--tk-border);
		width: 84px;
		height: 84px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tk-certs__dnv img {
		width: 66px;
		height: 66px;
		object-fit: contain;
	}

	.tk-certs__label {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.2px;
		color: var(--tk-muted);
		max-width: 190px;
		line-height: 1.6;
		text-transform: uppercase;
	}

	.tk-certs--lg {
		flex-shrink: 0;
		margin-top: 0;
	}

	.tk-certs--lg .tk-certs__eco-box {
		width: 132px;
		height: 132px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tk-certs--lg .tk-certs__eco {
		width: 128px;
		height: 128px;
	}

	.tk-certs--lg .tk-certs__dnv {
		width: 132px;
		height: 132px;
	}

	.tk-certs--lg .tk-certs__dnv img {
		width: 104px;
		height: 104px;
	}

	/* -- Product cards ------------------------------------------------ */
	.tk-pcard {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: var(--tk-text);
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		overflow: hidden;
		transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--tk-ease);
	}

	.tk-pcard:hover {
		border-color: var(--tk-accent);
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
		transform: translateY(-4px);
	}

	.tk-pcard__media {
		position: relative;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		background: var(--tk-surface);
	}

	.tk-pcard__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s var(--tk-ease);
	}

	.tk-pcard:hover .tk-pcard__media img {
		transform: scale(1.04);
	}

	.tk-pcard__num {
		position: absolute;
		top: 14px;
		left: 14px;
		font-family: var(--tk-mono);
		font-size: 11px;
		color: #fff;
		letter-spacing: 2px;
		background: rgba(12, 13, 15, 0.55);
		padding: 4px 8px;
		backdrop-filter: blur(4px);
	}

	.tk-pcard__strip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 16px 18px;
		border-top: 1px solid var(--tk-border);
		margin-top: auto;
	}

	.tk-pcard__title {
		font-weight: 800;
		font-size: 16px;
		letter-spacing: -0.3px;
		line-height: 1.2;
	}

	.tk-pcard__arrow {
		font-size: 20px;
		color: var(--tk-accent);
		transition: transform 0.3s var(--tk-ease);
	}

	.tk-pcard:hover .tk-pcard__arrow {
		transform: translateX(5px);
	}

	/* -- Services (numbered columns) --------------------------------- */
	.tk-service {
		border-top: 2px solid var(--tk-border);
		padding-top: 20px;
		position: relative;
		transition: border-color 0.25s;
	}

	.tk-service:hover {
		border-color: var(--tk-accent);
	}

	.tk-service__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	.tk-service__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
	}

	.tk-service__arrow {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-muted);
	}

	.tk-service__title {
		font-weight: 800;
		font-size: 20px;
		letter-spacing: -0.3px;
		margin: 0 0 8px;
		color: var(--tk-text);
	}

	.tk-service__text {
		margin: 0;
		font-size: 14px;
		line-height: 1.55;
		color: var(--tk-body);
	}

	/* -- Why (inverted blue band) ------------------------------------ */
	.tk-why {
		background: var(--tk-inv-bg);
		color: var(--tk-inv-text);
		padding: 120px 48px;
		position: relative;
		overflow: hidden;
	}

	.tk-why__wire {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0.14;
		pointer-events: none;
	}

	.tk-why__wire .wf-draw {
		animation: tkWfDraw 2.6s 0.2s ease forwards;
	}

	.tk-why__wire .wf-march {
		animation: tkWfMarch 1.6s linear infinite;
	}

	.tk-why__wire .wf-spin {
		animation: tkWfSpin 24s linear infinite;
		transform-origin: 0 0;
	}

	.tk-why__inner {
		max-width: 1440px;
		margin: 0 auto;
	}

	.tk-why h2 {
		margin: 20px 0 28px;
		color: var(--tk-inv-text);
	}

	.tk-why__lead {
		margin: 0 0 36px;
		font-size: 18px;
		line-height: 1.6;
		color: var(--tk-inv-muted);
		max-width: 560px;
	}

	.tk-why__lead p {
		margin: 0;
	}

	.tk-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--tk-inv-border);
		border: 1px solid var(--tk-inv-border);
		align-self: start;
	}

	.tk-stat {
		background: var(--tk-inv-bg);
		padding: 32px 28px;
	}

	.tk-stat__value {
		display: block;
		font-weight: 900;
		font-stretch: 112%;
		font-size: 44px;
		letter-spacing: -1px;
		color: var(--tk-inv-text);
		font-variant-numeric: tabular-nums;
	}

	.tk-stat__label {
		display: block;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1.5px;
		color: var(--tk-inv-muted);
		margin-top: 6px;
		text-transform: uppercase;
	}

	.tk-stat__mark {
		color: var(--tk-accent);
	}

	.tk-why__note {
		max-width: 1440px;
		margin: 14px auto 0;
		padding: 0 48px;
		text-align: right;
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-inv-muted);
		opacity: 0.7;
		text-transform: uppercase;
	}

	.tk-why__note .tk-stat__mark {
		color: var(--tk-accent);
	}

	/* Plain (non-inverted) stats row, used on the company page hero. */
	.tk-stats--dark {
		background: var(--tk-border);
		border-color: var(--tk-border);
		grid-template-columns: repeat(4, 1fr);
	}

	.tk-stats--dark .tk-stat {
		background: var(--tk-bg);
	}

	.tk-stats--dark .tk-stat__value {
		color: var(--tk-accent);
	}

	.tk-stats--dark .tk-stat__label {
		color: var(--tk-muted);
	}

	/* -- Units / people cards ---------------------------------------- */
	.tk-unit {
		border: 1px solid var(--tk-border);
		background: var(--tk-surface);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: border-color 0.25s;
	}

	.tk-unit:hover {
		border-color: var(--tk-accent);
	}

	.tk-unit__media {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.tk-unit__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 25%;
		filter: grayscale(100%);
		transition: filter 0.5s ease, transform 0.6s var(--tk-ease);
	}

	.tk-unit:hover .tk-unit__media img {
		filter: grayscale(0%);
		transform: scale(1.04);
	}

	.tk-unit__who {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 40px 22px 16px;
		background: linear-gradient(180deg, transparent, rgba(12, 13, 15, 0.82));
	}

	.tk-unit__name {
		font-weight: 800;
		font-size: 18px;
		color: #ededea;
	}

	.tk-unit__role {
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-accent);
		letter-spacing: 1px;
		margin-top: 4px;
		text-transform: uppercase;
	}

	.tk-unit__quote {
		margin: 0;
		padding: 22px 24px 26px;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--tk-body);
		flex: 1;
	}

	.tk-unit__quote::before {
		content: "\201C";
	}

	.tk-unit__quote::after {
		content: "\201D";
	}

	/* -- Locations ---------------------------------------------------- */
	.tk-locations {
		border-top: 1px solid var(--tk-border);
		position: relative;
		overflow: hidden;
	}

	.tk-locations__map {
		position: absolute;
		inset: 24px 0;
		overflow: hidden;
		pointer-events: none;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.tk-locations__map img {
		height: 114.9%;
		width: auto;
		flex-shrink: 0;
		clip-path: inset(0 0 13% 0);
		opacity: 0.22;
		filter: invert(1);
		display: block;
	}

	.tk-locations__inner {
		padding: 100px 48px;
		max-width: 1440px;
		margin: 0 auto;
		position: relative;
	}

	.tk-locgrid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border: 1px solid var(--tk-border);
	}

	.tk-loc {
		padding: 32px 28px;
		box-shadow: inset -1px 0 0 var(--tk-border), inset 0 -1px 0 var(--tk-border);
		transition: background 0.25s;
	}

	.tk-loc:hover {
		background: var(--tk-glass-hover);
	}

	.tk-loc__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}

	.tk-loc__city {
		font-weight: 800;
		font-size: 20px;
		margin: 0;
		color: var(--tk-text);
	}

	.tk-loc__country {
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
	}

	.tk-loc__addr {
		font-family: var(--tk-mono);
		font-size: 13px;
		line-height: 1.7;
		color: var(--tk-muted);
		white-space: pre-line;
		margin: 0;
	}

	.tk-loc__entity {
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		text-transform: uppercase;
		margin-top: 12px;
	}

	/* -- Responsibility band ----------------------------------------- */
	.tk-resp__inner {
		padding: 64px 48px;
		gap: 36px;
	}

	.tk-resp__copy {
		max-width: 640px;
	}

	.tk-resp__copy .tk-mono {
		display: block;
		font-size: 12px;
		margin-bottom: 14px;
	}

	.tk-resp__text {
		margin: 14px 0 0;
		font-size: 15.5px;
		line-height: 1.6;
		color: var(--tk-body);
		max-width: 560px;
	}

	.tk-resp__text p {
		margin: 0;
	}

	/* -- Contact / CTA section --------------------------------------- */
	.tk-cta {
		position: relative;
		overflow: hidden;
		padding: 130px 48px;
		color: var(--tk-cta-text);
		scroll-margin-top: 80px;
	}

	.tk-cta__bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		filter: grayscale(35%);
	}

	.tk-cta__shade {
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(12, 13, 15, 0.93) 0%, rgba(12, 13, 15, 0.82) 45%, rgba(12, 13, 15, 0.55) 100%);
	}

	.tk-cta__inner {
		max-width: 1440px;
		margin: 0 auto;
		position: relative;
	}

	.tk-cta .tk-eyebrow {
		margin-bottom: 24px;
	}

	.tk-cta .tk-eyebrow .tk-mono {
		color: var(--tk-cta-muted);
	}

	.tk-cta h2 {
		color: var(--tk-cta-text);
	}

	.tk-cta__lead {
		margin: 28px 0 0;
		max-width: 480px;
		font-size: 17px;
		line-height: 1.6;
		color: var(--tk-cta-muted);
	}

	.tk-cta__lead p {
		margin: 0;
	}

	.tk-cta .tk-btn--outline {
		margin-top: 34px;
	}

	.tk-cta__panel {
		background: var(--tk-glass);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 1px solid rgba(237, 237, 234, 0.14);
	}

	.tk-cta__row {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 20px;
		color: var(--tk-cta-text);
		text-decoration: none;
		padding: 28px 30px;
		border-bottom: 1px solid rgba(237, 237, 234, 0.14);
		position: relative;
		transition: background 0.25s, color 0.25s;
	}

	.tk-cta__row:hover {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
	}

	.tk-cta__label {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		opacity: 0.65;
		margin-bottom: 8px;
		text-transform: uppercase;
	}

	.tk-cta__value {
		font-weight: 800;
		font-size: 24px;
		letter-spacing: -0.3px;
	}

	.tk-cta__arrow {
		font-size: 26px;
		transition: transform 0.3s var(--tk-ease);
	}

	.tk-cta__row:hover .tk-cta__arrow {
		transform: translateX(6px);
	}

	.tk-cta__status {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 18px 30px;
		font-family: var(--tk-mono);
		font-size: 11.5px;
		letter-spacing: 1px;
		color: var(--tk-cta-muted);
		text-transform: uppercase;
	}

	.tk-cta__status-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #3ddc84;
		animation: tkPulseDot 2s infinite;
	}

	.tk-cta__langs {
		margin-left: auto;
		opacity: 0.7;
	}

	.tk-sales {
		max-width: 1440px;
		margin: 56px auto 0;
		position: relative;
	}

	.tk-sales__head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 18px;
	}

	.tk-sales__head span:first-child {
		font-family: var(--tk-mono);
		font-size: 11.5px;
		letter-spacing: 2px;
		color: var(--tk-cta-muted);
		text-transform: uppercase;
	}

	.tk-sales__rule {
		flex: 1;
		height: 1px;
		background: rgba(237, 237, 234, 0.16);
	}

	.tk-sales__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tk-person {
		background: rgba(12, 13, 15, 0.6);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(237, 237, 234, 0.14);
		padding: 20px 22px;
		color: var(--tk-cta-text);
	}

	.tk-person__name {
		font-weight: 800;
		font-size: 16.5px;
		letter-spacing: -0.2px;
	}

	.tk-person__role {
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-sec);
		margin-top: 4px;
		text-transform: uppercase;
	}

	.tk-person__meta {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-top: 12px;
	}

	.tk-person__meta a {
		color: var(--tk-cta-text);
		text-decoration: none;
		font-size: 13.5px;
		transition: color 0.2s;
	}

	.tk-person__meta a + a {
		color: var(--tk-cta-muted);
		font-size: 12.5px;
		overflow-wrap: anywhere;
	}

	.tk-person__meta a:hover {
		color: var(--tk-accent);
	}

	/* -- Footer ------------------------------------------------------- */
	.tk-footer {
		background: var(--tk-footer-bg);
		color: var(--tk-footer-text);
	}

	.tk-footer__inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 26px 48px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		flex-wrap: wrap;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.tk-footer__links {
		display: flex;
		gap: 22px;
		flex-wrap: wrap;
	}

	.tk-footer a {
		color: var(--tk-footer-text);
		text-decoration: none;
		transition: color 0.2s;
	}

	.tk-footer a:hover {
		color: var(--tk-cta-text);
	}

	/* -- Back to top + cookie --------------------------------------- */
	.tk-totop {
		position: fixed;
		bottom: 36px;
		right: 16px;
		z-index: 290;
		width: 46px;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--tk-accent);
		color: #fff;
		border: 0;
		cursor: pointer;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
		opacity: 0;
		transform: translateY(12px);
		pointer-events: none;
		transition: opacity 0.3s ease, transform 0.35s var(--tk-ease), background 0.25s, color 0.25s;
	}

	.tk-totop.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.tk-totop:hover {
		background: var(--tk-text);
		color: var(--tk-bg);
	}

	.tk-totop__label {
		position: absolute;
		top: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		font-family: var(--tk-mono);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 2px;
		color: var(--tk-accent);
		opacity: 0;
		transition: opacity 0.25s;
		pointer-events: none;
	}

	.tk-totop:hover .tk-totop__label {
		opacity: 1;
	}

	.tk-cookie {
		position: fixed;
		bottom: 24px;
		left: 24px;
		z-index: 300;
		max-width: 320px;
		background: rgba(12, 13, 15, 0.94);
		backdrop-filter: blur(10px);
		border: 1px solid #2a2b2e;
		padding: 18px 20px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	}

	.tk-cookie[hidden] {
		display: none;
	}

	.tk-cookie p {
		margin: 0 0 14px;
		font-size: 12.5px;
		line-height: 1.55;
		color: var(--tk-cta-muted);
	}

	.tk-cookie button {
		background: var(--tk-cta-text);
		color: var(--tk-footer-bg);
		border: 0;
		padding: 9px 20px;
		font-weight: 700;
		font-size: 12px;
		cursor: pointer;
		font-family: var(--tk-mono);
		letter-spacing: 1px;
		transition: background 0.25s, color 0.25s, transform 0.2s;
	}

	.tk-cookie button:hover {
		background: var(--tk-accent);
		color: #fff;
		transform: translateY(-1px);
	}

	/* -- Rows list (services detail, timeline) ----------------------- */
	.tk-rows {
		border-top: 1px solid var(--tk-border);
	}

	.tk-row {
		display: grid;
		grid-template-columns: 90px 1.1fr 1.4fr auto;
		gap: 28px;
		align-items: start;
		padding: 34px 0;
		border-bottom: 1px solid var(--tk-border);
		text-decoration: none;
		color: inherit;
		transition: background 0.25s;
	}

	.tk-row__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
		padding-top: 8px;
	}

	.tk-row__title {
		margin: 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(22px, 2.2vw, 32px);
		text-transform: uppercase;
		letter-spacing: -0.8px;
		line-height: 1.05;
		color: var(--tk-text);
	}

	.tk-row__text {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-row__arrow {
		font-size: 20px;
		color: var(--tk-accent);
		padding-top: 4px;
		transition: transform 0.3s var(--tk-ease);
	}

	.tk-row:hover .tk-row__arrow {
		transform: translateX(6px);
	}

	.tk-timeline .tk-row {
		grid-template-columns: 120px 1fr 1.6fr;
	}

	.tk-timeline .tk-row__year {
		font-family: var(--tk-mono);
		font-weight: 500;
		font-size: 30px;
		letter-spacing: -1px;
		color: var(--tk-sec);
		line-height: 1;
	}

	.tk-timeline .tk-row__title {
		font-family: var(--tk-sans);
		font-weight: 800;
		font-stretch: 100%;
		font-size: 17px;
		text-transform: none;
		letter-spacing: -0.3px;
		padding-top: 4px;
	}

	.tk-timeline .tk-row {
		padding: 30px 0;
	}

	.tk-notes {
		margin: 26px 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: 8px;
	}

	.tk-notes li {
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	.tk-notes li::before {
		content: "* ";
		color: var(--tk-accent);
	}

	/* -- Process steps (5 across, thin top border) ------------------- */
	.tk-step {
		border-top: 1px solid var(--tk-inv-border);
		padding-top: 18px;
	}

	.tk-step__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
		margin-bottom: 10px;
	}

	.tk-step__title {
		font-weight: 800;
		font-size: 17px;
		letter-spacing: -0.3px;
		margin: 0 0 8px;
		color: inherit;
	}

	.tk-step__text {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.55;
		color: var(--tk-inv-muted);
	}

	.tk-inv-band {
		background: var(--tk-inv-bg);
		color: var(--tk-inv-text);
	}

	.tk-inv-band .tk-display {
		color: var(--tk-inv-text);
	}

	.tk-inv-band .tk-mono {
		color: var(--tk-sec-light);
	}

	.tk-inv-band__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		flex-wrap: wrap;
		margin-top: 56px;
		padding-top: 28px;
		border-top: 1px solid var(--tk-inv-border);
	}

	.tk-inv-band__foot .tk-mono {
		color: var(--tk-inv-muted);
		font-size: 11px;
	}

	.tk-inv-band__foot strong {
		font-weight: 700;
		font-size: 15px;
		margin-left: 14px;
	}

	.tk-btn--inv-outline {
		display: inline-flex;
		align-items: center;
		border: 1px solid var(--tk-inv-border);
		background: transparent;
		color: var(--tk-inv-text);
		padding: 12px 22px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		font-weight: 500;
		transition: background 0.25s, color 0.25s, border-color 0.25s;
	}

	.tk-btn--inv-outline:hover {
		background: var(--tk-inv-text);
		border-color: var(--tk-inv-text);
		color: var(--tk-inv-bg);
		transform: none;
		box-shadow: none;
	}

	/* -- Tile grid (materials 2x2 on services page) ------------------ */
	.tk-tiles {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--tk-border);
		border: 1px solid var(--tk-border);
	}

	.tk-tile {
		background: var(--tk-surface);
		padding: 26px 28px;
	}

	.tk-tile__num {
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
		margin-bottom: 12px;
	}

	.tk-tile__title {
		font-weight: 800;
		font-size: 17px;
		letter-spacing: -0.3px;
		margin: 0 0 6px;
		color: var(--tk-text);
	}

	.tk-tile__text {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.55;
		color: var(--tk-body);
	}

	/* -- Feature columns (no number) --------------------------------- */
	.tk-feat {
		border-top: 2px solid var(--tk-border);
		padding-top: 20px;
	}

	.tk-feat__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
		margin-bottom: 12px;
	}

	.tk-feat__title {
		font-weight: 800;
		font-size: 18px;
		letter-spacing: -0.3px;
		margin: 0 0 8px;
		color: var(--tk-text);
	}

	.tk-feat__text {
		margin: 0;
		font-size: 14px;
		line-height: 1.55;
		color: var(--tk-body);
	}

	.tk-feat__link {
		display: inline-block;
		margin-top: 12px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-accent);
		text-decoration: none;
		text-transform: uppercase;
	}

	.tk-feat__link:hover {
		color: var(--tk-text);
	}

	/* -- Prose (rich text) ------------------------------------------- */
	.tk-prose {
		font-size: 17px;
		line-height: 1.65;
		color: var(--tk-body);
		max-width: 560px;
	}

	.tk-prose p {
		margin: 0;
	}

	.tk-prose p + p {
		margin-top: 1em;
	}

	.tk-prose a {
		color: var(--tk-accent);
	}

	.tk-prose ul,
	.tk-prose ol {
		padding-left: 1.3em;
		margin: 1em 0 0;
	}

	.tk-prose h2,
	.tk-prose h3 {
		margin: 1.6em 0 0.5em;
		color: var(--tk-text);
		font-weight: 800;
		letter-spacing: -0.3px;
	}

	.tk-prose h2 {
		font-size: 24px;
	}

	.tk-prose h3 {
		font-size: 19px;
	}

	/* -- Reference cards --------------------------------------------- */
	.tk-ref {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		border: 1px solid var(--tk-border);
		background: var(--tk-surface);
		text-decoration: none;
		color: inherit;
		overflow: hidden;
		transition: border-color 0.25s;
	}

	.tk-ref:hover {
		border-color: var(--tk-accent);
	}

	.tk-ref__media {
		position: relative;
		min-height: 280px;
		overflow: hidden;
	}

	.tk-ref__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(35%) contrast(1.05);
		transition: transform 0.6s var(--tk-ease);
	}

	.tk-ref:hover .tk-ref__media img {
		transform: scale(1.04);
	}

	.tk-ref__body {
		padding: 32px 30px;
		display: flex;
		flex-direction: column;
	}

	.tk-ref__tag {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		text-transform: uppercase;
		margin-bottom: 14px;
	}

	.tk-ref__title {
		font-weight: 900;
		font-stretch: 112%;
		font-size: 26px;
		text-transform: uppercase;
		letter-spacing: -0.8px;
		line-height: 1.05;
		margin: 0 0 12px;
		color: var(--tk-text);
	}

	.tk-ref__text {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-ref__more {
		margin-top: auto;
		padding-top: 22px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-accent);
		text-transform: uppercase;
	}

	/* -- Quote block --------------------------------------------------- */
	.tk-bigquote {
		margin: 0;
		padding: 56px 48px;
		border: 1px solid var(--tk-border);
		background: var(--tk-surface);
	}

	.tk-bigquote p {
		margin: 0;
		font-weight: 800;
		font-size: clamp(22px, 2.2vw, 30px);
		line-height: 1.3;
		letter-spacing: -0.5px;
		color: var(--tk-text);
	}

	.tk-bigquote footer {
		margin-top: 22px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	/* -- FAQ ----------------------------------------------------------- */
	.tk-faq__item {
		border-top: 1px solid var(--tk-border);
	}

	.tk-faq__item:last-child {
		border-bottom: 1px solid var(--tk-border);
	}

	.tk-faq__item summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 22px 0;
		cursor: pointer;
		font-weight: 700;
		font-size: 17px;
		color: var(--tk-text);
		list-style: none;
	}

	.tk-faq__item summary::-webkit-details-marker {
		display: none;
	}

	.tk-faq__item summary::after {
		content: "+";
		font-family: var(--tk-mono);
		color: var(--tk-accent);
		font-size: 20px;
		line-height: 1;
	}

	.tk-faq__item[open] summary::after {
		content: "−";
	}

	.tk-faq__answer {
		padding: 0 0 24px;
		max-width: 70ch;
		font-size: 15px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-faq__answer p {
		margin: 0;
	}

	/* -- Form ----------------------------------------------------------- */
	.tk-form {
		display: grid;
		gap: 18px;
	}

	.tk-form__row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

	.tk-field {
		display: grid;
		gap: 8px;
	}

	.tk-field label {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: var(--tk-muted);
	}

	.tk-field input,
	.tk-field select,
	.tk-field textarea {
		width: 100%;
		padding: 14px 16px;
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		border-radius: 0;
		color: var(--tk-text);
		font-family: inherit;
		font-size: 15px;
	}

	.tk-field textarea {
		min-height: 160px;
		resize: vertical;
	}

	.tk-field input:focus,
	.tk-field select:focus,
	.tk-field textarea:focus {
		border-color: var(--tk-accent);
		outline: none;
	}

	.tk-field__hint,
	.tk-form__hint {
		margin: 0;
		font-size: 13px;
		line-height: 1.55;
		color: var(--tk-muted);
	}

	.tk-check {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		font-size: 13.5px;
		line-height: 1.5;
		color: var(--tk-body);
	}

	.tk-check input {
		width: 18px;
		height: 18px;
		margin-top: 2px;
		accent-color: var(--tk-accent);
	}

	.tk-notice {
		padding: 18px 20px;
		border: 1px solid var(--tk-border);
		background: var(--tk-surface);
		font-size: 15px;
		line-height: 1.55;
	}

	.tk-notice p {
		margin: 0;
	}

	.tk-notice ul {
		margin: 8px 0 0;
		padding-left: 1.2em;
	}

	.tk-notice--success {
		border-color: #2f8f5b;
	}

	.tk-notice--error {
		border-color: #c2410c;
	}

	/* -- Info panel (contact page) ------------------------------------ */
	.tk-panel {
		border: 1px solid var(--tk-border);
		background: var(--tk-surface);
	}

	.tk-panel__row {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 20px;
		padding: 26px 28px;
		border-bottom: 1px solid var(--tk-border);
		color: var(--tk-text);
		text-decoration: none;
		transition: background 0.25s, color 0.25s;
	}

	.tk-panel__row:last-child {
		border-bottom: 0;
	}

	a.tk-panel__row:hover {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
	}

	.tk-panel__label {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		opacity: 0.65;
		margin-bottom: 8px;
		text-transform: uppercase;
	}

	.tk-panel__value {
		font-weight: 800;
		font-size: 22px;
		letter-spacing: -0.3px;
	}

	.tk-panel__arrow {
		font-size: 24px;
	}

	/* -- Post cards (blog) --------------------------------------------- */
	.tekniseri-post-card {
		display: flex;
		flex-direction: column;
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
	}

	.tekniseri-post-card__media {
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.tekniseri-post-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tekniseri-post-card__body {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 22px 24px 26px;
	}

	.tekniseri-post-card__date {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	.tekniseri-post-card__title {
		margin: 0;
		font-size: 20px;
		line-height: 1.25;
		font-weight: 800;
	}

	.tekniseri-post-card__title a {
		text-decoration: none;
	}

	.tekniseri-post-card__excerpt {
		margin: 0;
		font-size: 15px;
		line-height: 1.55;
		color: var(--tk-body);
	}

	.tekniseri-post-card__more {
		margin-top: 6px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-accent);
		text-transform: uppercase;
	}

	/* Legacy class aliases used by shared partials. */
	.tekniseri-wrap {
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 48px;
	}

	.tekniseri-section {
		padding: 120px 0;
	}

	.tekniseri-grid {
		display: grid;
		gap: 16px;
	}

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

	.tekniseri-page-head {
		padding: 150px 48px 64px;
		max-width: 1440px;
		margin: 0 auto;
	}

	.tekniseri-page-head h1 {
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(36px, 4.4vw, 64px);
		text-transform: uppercase;
		letter-spacing: -1.5px;
		line-height: 1;
	}

	.tekniseri-eyebrow {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 0 18px;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--tk-sec);
	}

	.tekniseri-lead,
	.tekniseri-prose {
		font-size: 17px;
		line-height: 1.65;
		color: var(--tk-body);
		max-width: 620px;
	}

	.tekniseri-btn {
		display: inline-block;
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		text-decoration: none;
		padding: 18px 34px;
		font-weight: 800;
		font-size: 16px;
	}
}

@layer wpsa.utilities {
	/* The prototype's own responsive rules, keyed to the same attributes. */
	@media (max-width: 1010px) {
		.nav-secondary {
			display: none !important;
		}
	}

	@media (max-width: 1180px) {
		[data-grid="many"] {
			grid-template-columns: repeat(3, 1fr) !important;
		}
	}

	@media (max-width: 1024px) {
		[data-pad] {
			padding-left: 32px !important;
			padding-right: 32px !important;
		}

		[data-grid="many"],
		[data-grid="3"] {
			grid-template-columns: repeat(2, 1fr) !important;
		}

		.tk-row {
			grid-template-columns: 70px 1fr !important;
		}

		.tk-row__arrow {
			display: none;
		}

		.tk-timeline .tk-row {
			grid-template-columns: 100px 1fr !important;
		}
	}

	@media (max-width: 900px) {
		.tk-nav__links {
			display: none !important;
		}

		.tk-nav__toggle {
			display: flex !important;
		}
	}

	@media (max-width: 768px) {
		[data-pad] {
			padding-left: 22px !important;
			padding-right: 22px !important;
		}

		[data-pad="s"] {
			padding-top: 72px !important;
			padding-bottom: 72px !important;
		}

		[data-pad="t0"] {
			padding-bottom: 72px !important;
		}

		header[data-pad="s"],
		.tk-page-hero[data-pad] {
			padding-top: 104px !important;
			padding-bottom: 48px !important;
		}

		[data-grid="split"],
		[data-grid="2"],
		[data-grid="row"] {
			grid-template-columns: 1fr !important;
		}

		[data-grid="row"] {
			gap: 10px !important;
		}

		[data-gap] {
			gap: min(24px, 5vw) !important;
		}

		[data-r="head"] {
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 10px !important;
		}

		[data-r="wrap"] {
			flex-wrap: wrap !important;
		}

		[data-r="heroimg"] {
			width: 100% !important;
			opacity: 0.45;
		}

		[data-r="prodimg"] {
			aspect-ratio: 16 / 7 !important;
		}

		h1 {
			letter-spacing: -1px !important;
		}

		.tk-form__row {
			grid-template-columns: 1fr;
		}

		.tk-ref {
			grid-template-columns: 1fr;
		}

		.tk-tiles {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 640px) {
		[data-pad] {
			padding-left: 18px !important;
			padding-right: 18px !important;
		}

		[data-grid="many"],
		[data-grid="3"] {
			grid-template-columns: 1fr !important;
		}

		.tk-stats {
			grid-template-columns: 1fr 1fr !important;
		}
	}

	@media (max-width: 980px) {
		.nav-tertiary {
			display: none !important;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.tk-marquee__track,
		[data-reveal],
		.tk-hero__body .tk-eyebrow,
		.tk-hero__body h1,
		.tk-hero__after,
		.tk-eyebrow__dot,
		.tk-cta__status-dot {
			animation: none;
		}
	}
}

/* -- Subpage components -------------------------------------------- */
@layer wpsa.components {
	/* Page hero: breadcrumb, eyebrow, display heading, lead; photo right. */
	.tk-phero {
		position: relative;
		padding: 150px 48px 0;
		max-width: 1536px;
		margin: 0 auto;
	}

	.tk-phero__crumbs {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 10px;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
		text-transform: uppercase;
		animation: tkHeroUp 0.8s 0.05s var(--tk-ease) both;
	}

	.tk-phero__crumbs a {
		color: var(--tk-muted);
		text-decoration: none;
	}

	.tk-phero__crumbs a:hover {
		color: var(--tk-accent);
	}

	.tk-phero__crumbs .tk-sep {
		opacity: 0.5;
	}

	.tk-phero__crumbs [aria-current] {
		color: var(--tk-sec);
	}

	.tk-phero__body {
		position: relative;
		z-index: 2;
		max-width: 860px;
		padding: 44px 0 80px;
	}

	.tk-phero__body--wide {
		max-width: 900px;
		padding-bottom: 64px;
	}

	.tk-phero__body .tk-eyebrow {
		margin-bottom: 22px;
		animation: tkHeroUp 0.9s 0.12s var(--tk-ease) both;
	}

	.tk-phero__body h1 {
		animation: tkHeroUp 1s 0.22s var(--tk-ease) both;
	}

	.tk-display--page {
		font-size: clamp(40px, 5.2vw, 84px);
		line-height: 0.96;
		letter-spacing: -2px;
	}

	.tk-display--h48 {
		font-size: clamp(30px, 3.4vw, 48px);
		letter-spacing: -1px;
	}

	.tk-phero__lead {
		margin: 28px 0 0;
		max-width: 560px;
		font-size: 17.5px;
		line-height: 1.6;
		color: var(--tk-body);
		animation: tkHeroUp 1s 0.34s var(--tk-ease) both;
	}

	.tk-phero__lead--wide {
		max-width: 600px;
	}

	.tk-phero__stats {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
		background: var(--tk-border);
		border: 1px solid var(--tk-border);
		animation: tkHeroUp 1s 0.44s var(--tk-ease) both;
	}

	.tk-phero__stats .tk-stat {
		background: var(--tk-surface);
		padding: 28px 30px;
	}

	.tk-phero__stats .tk-stat__value {
		color: var(--tk-accent);
	}

	.tk-phero__stats .tk-stat__label {
		font-size: 11.5px;
		color: var(--tk-muted);
		margin-top: 8px;
	}

	/* Section shells used on subpages. */
	.tk-sec {
		max-width: 1440px;
		margin: 0 auto;
		padding: 96px 48px;
	}

	.tk-sec--inv {
		padding: 110px 48px;
	}

	.tk-sec .tk-head {
		margin-bottom: 56px;
	}

	.tk-sec .tk-head--tight {
		margin-bottom: 44px;
	}

	.tk-band--bottom {
		border-top: 0;
		border-bottom: 1px solid var(--tk-border);
	}

	.tk-inv-band .tk-head .tk-mono {
		color: var(--tk-inv-muted);
	}

	/* Service rows (services overview). */
	.tk-srow {
		display: grid;
		grid-template-columns: 120px 1fr 1.2fr auto;
		gap: 32px;
		align-items: baseline;
		padding: 34px 12px;
		margin: 0 -12px;
		border-top: 1px solid var(--tk-border);
		transition: background 0.2s;
		color: var(--tk-text);
		text-decoration: none;
	}

	.tk-srow:hover {
		background: var(--tk-surface);
	}

	.tk-srow__num {
		font-family: var(--tk-mono);
		font-size: 13px;
		color: var(--tk-sec);
		letter-spacing: 1.5px;
	}

	.tk-srow__title {
		margin: 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(22px, 2.4vw, 34px);
		letter-spacing: -0.6px;
		text-transform: uppercase;
		color: var(--tk-text);
	}

	.tk-srow__text {
		margin: 0;
		font-size: 15.5px;
		line-height: 1.65;
		color: var(--tk-body);
	}

	.tk-srow__arrow {
		font-size: 20px;
		color: var(--tk-accent);
		align-self: center;
	}

	/* Process steps on the inverted band. */
	.tk-pstep {
		border-top: 2px solid var(--tk-inv-border);
		padding-top: 22px;
	}

	.tk-pstep__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-inv-accent);
		letter-spacing: 1.5px;
		margin-bottom: 14px;
	}

	.tk-pstep__title {
		margin: 0 0 10px;
		font-weight: 800;
		font-size: 18px;
		letter-spacing: -0.3px;
		color: inherit;
	}

	.tk-pstep__text {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.6;
		color: var(--tk-inv-muted);
	}

	.tk-inv-foot {
		display: flex;
		align-items: center;
		gap: 18px;
		margin-top: 64px;
		padding-top: 28px;
		border-top: 1px solid var(--tk-inv-border);
		flex-wrap: wrap;
	}

	.tk-inv-foot .tk-mono {
		font-size: 12px;
		color: var(--tk-inv-muted);
	}

	.tk-inv-foot__text {
		font-size: 15px;
		font-weight: 600;
		margin: 0;
	}

	.tk-inv-foot__btn {
		margin-left: auto;
		color: var(--tk-inv-text);
		text-decoration: none;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1px;
		border: 1px solid var(--tk-inv-border);
		padding: 12px 20px;
		text-transform: uppercase;
		transition: border-color 0.25s, background 0.25s, color 0.25s;
	}

	.tk-inv-foot__btn:hover {
		border-color: var(--tk-accent);
		background: var(--tk-accent);
		color: #fff;
	}

	/* Materials teaser tiles (blue numbering). */
	.tk-tiles--sec .tk-tile {
		padding: 24px 26px;
	}

	.tk-tiles--sec .tk-tile__num {
		color: var(--tk-sec);
		margin-bottom: 10px;
	}

	.tk-tiles--sec .tk-tile__title {
		font-size: 16.5px;
		letter-spacing: -0.2px;
	}

	.tk-tiles--sec .tk-tile__text {
		font-size: 13px;
	}

	.tk-teaser__text {
		margin: 22px 0 30px;
		font-size: 16px;
		line-height: 1.65;
		color: var(--tk-body);
		max-width: 480px;
	}

	.tk-teaser__text p {
		margin: 0;
	}

	.tk-btn--ghost-sm {
		padding: 15px 28px;
		font-size: 14.5px;
	}

	/* Framed figure with a tag (company intro). */
	.tk-figure--framed {
		border: 1px solid var(--tk-border);
	}

	.tk-figure--framed img {
		filter: grayscale(20%);
	}

	.tk-figure__tag {
		position: absolute;
		top: 18px;
		left: 20px;
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-sec);
		letter-spacing: 2px;
		background: var(--tk-bg);
		padding: 4px 8px;
		text-transform: uppercase;
	}

	.tk-copy {
		font-size: 16px;
		line-height: 1.7;
		color: var(--tk-body);
	}

	.tk-copy p {
		margin: 22px 0 0;
	}

	.tk-copy p + p {
		margin-top: 16px;
	}

	/* Timeline rows. */
	.tk-trow {
		display: grid;
		grid-template-columns: 160px 1fr 1.4fr;
		gap: 32px;
		align-items: baseline;
		padding: 28px 12px;
		margin: 0 -12px;
		border-top: 1px solid var(--tk-border);
		transition: background 0.2s;
	}

	.tk-trow:hover {
		background: var(--tk-surface);
	}

	.tk-trow__year {
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(24px, 2.6vw, 36px);
		letter-spacing: -0.8px;
		color: var(--tk-sec);
	}

	.tk-trow__title {
		margin: 0;
		font-weight: 800;
		font-size: 19px;
		letter-spacing: -0.3px;
		color: var(--tk-text);
	}

	.tk-trow__text {
		margin: 0;
		font-size: 15px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-tnote {
		padding: 16px 12px 0;
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	.tk-tnote--after {
		margin: 26px 0 0;
		padding: 0;
		font-size: 11px;
	}

	/* Unit cards on the inverted band (company page). */
	.tk-iunit {
		border: 1px solid var(--tk-inv-border);
		display: flex;
		flex-direction: column;
	}

	.tk-iunit__media {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.tk-iunit__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Portrait originals (Linköping) keep the face in frame. */
		object-position: center 18%;
		filter: grayscale(100%);
	}

	.tk-iunit__body {
		padding: 22px 24px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		flex: 1;
	}

	.tk-iunit__name {
		font-weight: 800;
		font-size: 17px;
		letter-spacing: -0.2px;
	}

	.tk-iunit__role {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-inv-accent);
		margin-top: 4px;
		text-transform: uppercase;
	}

	.tk-iunit__quote {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.6;
		color: var(--tk-inv-muted);
	}

	.tk-iunit__quote::before,
	.tk-iunit__quote::after {
		content: "\"";
	}

	.tk-iunit--link {
		align-items: flex-start;
		justify-content: flex-end;
		gap: 14px;
		padding: 24px;
		text-decoration: none;
		color: var(--tk-inv-text);
		transition: border-color 0.3s, background 0.3s;
	}

	.tk-iunit--link:hover {
		border-color: var(--tk-accent);
		background: rgba(252, 92, 7, 0.08);
	}

	.tk-iunit--link .tk-mono {
		font-size: 12px;
		color: var(--tk-inv-muted);
	}

	.tk-iunit__big {
		font-weight: 900;
		font-stretch: 112%;
		font-size: 26px;
		letter-spacing: -0.6px;
		text-transform: uppercase;
	}

	.tk-status {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 18px 30px;
		font-family: var(--tk-mono);
		font-size: 11.5px;
		letter-spacing: 1px;
		color: var(--tk-cta-muted);
		text-transform: uppercase;
	}

	.tk-status .tk-cta__langs {
		margin-left: auto;
		opacity: 0.7;
	}

	/* Company tiles. */
	.tk-ctile {
		background: var(--tk-surface);
		padding: 24px 26px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.tk-ctile__role {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		text-transform: uppercase;
	}

	.tk-ctile__name {
		margin: 0;
		font-weight: 800;
		font-size: 17px;
		letter-spacing: -0.2px;
		color: var(--tk-text);
	}

	.tk-ctile__text {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-ctile__link {
		margin-top: auto;
		padding-top: 4px;
		color: var(--tk-accent);
		text-decoration: none;
		font-weight: 700;
		font-size: 13px;
	}

	.tk-ctile__link:hover {
		text-decoration: underline;
	}

	.tk-tiles--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.tk-tiles--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	/* Values columns (blue numbering). */
	.tk-val {
		border-top: 2px solid var(--tk-border);
		padding-top: 22px;
		transition: border-color 0.3s;
	}

	.tk-val:hover {
		border-color: var(--tk-accent);
	}

	.tk-val__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-sec);
		letter-spacing: 1.5px;
		margin-bottom: 14px;
	}

	.tk-val__title {
		margin: 0 0 10px;
		font-weight: 800;
		font-size: 20px;
		letter-spacing: -0.3px;
		color: var(--tk-text);
	}

	.tk-val__text {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.65;
		color: var(--tk-body);
	}
}

@layer wpsa.utilities {
	@media (max-width: 1024px) {
		.tk-srow {
			grid-template-columns: 80px 1fr !important;
		}

		.tk-srow__arrow {
			display: none;
		}

		.tk-phero__stats {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	@media (max-width: 768px) {
		.tk-phero {
			padding-top: 104px !important;
		}

		.tk-trow {
			grid-template-columns: 1fr !important;
			gap: 10px !important;
		}
	}
}

/* -- Materials & references ---------------------------------------- */
@layer wpsa.components {
	.tk-frow {
		display: grid;
		grid-template-columns: 120px 1fr 1.3fr;
		gap: 32px;
		padding: 32px 12px;
		margin: 0 -12px;
		border-top: 1px solid var(--tk-border);
		transition: background 0.2s;
	}

	.tk-frow:hover {
		background: var(--tk-surface);
	}

	.tk-frow__num {
		font-family: var(--tk-mono);
		font-size: 13px;
		color: var(--tk-sec);
		letter-spacing: 1.5px;
	}

	.tk-frow__title {
		margin: 0 0 8px;
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(20px, 2.2vw, 30px);
		letter-spacing: -0.5px;
		text-transform: uppercase;
		color: var(--tk-text);
	}

	.tk-frow__text {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		align-content: flex-start;
	}

	.tk-chips span {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1px;
		color: var(--tk-text);
		border: 1px solid var(--tk-border);
		padding: 7px 12px;
		text-transform: uppercase;
	}

	.tk-guide__text {
		margin: 24px 0 0;
		font-size: 16px;
		line-height: 1.65;
		color: var(--tk-inv-muted);
		max-width: 480px;
	}

	.tk-guide__text p {
		margin: 0;
	}

	.tk-crit {
		display: flex;
		gap: 22px;
		align-items: baseline;
		padding: 16px 0;
		border-bottom: 1px solid var(--tk-inv-border);
	}

	.tk-crit__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-inv-accent);
		letter-spacing: 1.5px;
		flex-shrink: 0;
	}

	.tk-crit__title {
		font-weight: 800;
		font-size: 16px;
		letter-spacing: -0.2px;
	}

	.tk-crit__text {
		font-size: 14px;
		color: var(--tk-inv-muted);
	}

	.tk-display--faq {
		font-size: clamp(26px, 3vw, 42px);
		letter-spacing: -0.8px;
		line-height: 1.02;
	}

	.tk-faq__intro {
		margin: 16px 0 0;
		font-size: 15px;
		line-height: 1.65;
		color: var(--tk-body);
		max-width: 340px;
	}

	.tk-faq__intro p {
		margin: 0;
	}

	.tk-underline-link {
		display: inline-block;
		margin-top: 22px;
		color: var(--tk-text);
		text-decoration: none;
		font-weight: 700;
		font-size: 14.5px;
		border-bottom: 2px solid var(--tk-accent);
		padding-bottom: 3px;
		transition: color 0.2s;
	}

	.tk-underline-link:hover {
		color: var(--tk-accent);
	}

	.tk-faqlist {
		display: flex;
		flex-direction: column;
		gap: 1px;
		background: var(--tk-border);
		border: 1px solid var(--tk-border);
	}

	.tk-faqitem {
		background: var(--tk-surface);
	}

	.tk-faqitem summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		padding: 22px 26px;
		cursor: pointer;
		font-weight: 700;
		font-size: 16px;
		letter-spacing: -0.2px;
		list-style: none;
		color: var(--tk-text);
	}

	.tk-faqitem summary::-webkit-details-marker {
		display: none;
	}

	.tk-faqitem__plus {
		color: var(--tk-accent);
		font-size: 20px;
		flex-shrink: 0;
	}

	.tk-faqitem[open] .tk-faqitem__plus {
		display: none;
	}

	.tk-faqitem[open] summary::after {
		content: "−";
		color: var(--tk-accent);
		font-size: 20px;
	}

	.tk-faqitem p {
		margin: 0;
		padding: 0 26px 24px;
		font-size: 14.5px;
		line-height: 1.7;
		color: var(--tk-body);
		max-width: 720px;
	}

	.tk-cases {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;
	}

	.tk-case {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: var(--tk-text);
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		transition: border-color 0.3s, transform 0.3s var(--tk-ease);
	}

	.tk-case--3 {
		grid-column: span 3;
	}

	.tk-case--2 {
		grid-column: span 2;
	}

	.tk-case:hover {
		border-color: var(--tk-accent);
		transform: translateY(-4px);
	}

	.tk-case__media {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--tk-bg);
	}

	.tk-case__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.6s var(--tk-ease);
	}

	.tk-case:hover .tk-case__media img {
		transform: scale(1.04);
	}

	.tk-case__tag {
		position: absolute;
		top: 16px;
		left: 18px;
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-sec);
		letter-spacing: 2px;
		background: var(--tk-bg);
		padding: 4px 8px;
		text-transform: uppercase;
	}

	.tk-case__body {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 22px 24px;
		flex: 1;
	}

	.tk-case__name {
		margin: 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: 22px;
		letter-spacing: -0.5px;
		text-transform: uppercase;
		color: var(--tk-text);
	}

	.tk-case__title {
		font-weight: 700;
		font-size: 15px;
		letter-spacing: -0.2px;
		line-height: 1.35;
	}

	.tk-case__text {
		margin: 0;
		font-size: 13.5px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-case__more {
		margin-top: auto;
		padding-top: 8px;
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-accent);
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.tk-quote-sec {
		max-width: 1100px;
		margin: 0 auto;
		padding: 110px 48px;
		text-align: center;
	}

	.tk-quote-sec__text {
		margin: 28px 0 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: clamp(26px, 3vw, 42px);
		line-height: 1.15;
		letter-spacing: -0.8px;
		text-transform: uppercase;
	}

	.tk-quote-sec__who {
		margin-top: 26px;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1.5px;
		color: var(--tk-inv-muted);
		text-transform: uppercase;
	}
}

@layer wpsa.utilities {
	@media (max-width: 1024px) {
		.tk-frow {
			grid-template-columns: 80px 1fr !important;
		}

		.tk-frow .tk-chips {
			grid-column: 2;
		}

		.tk-cases {
			grid-template-columns: 1fr 1fr !important;
		}

		.tk-case--3,
		.tk-case--2 {
			grid-column: span 1;
		}
	}

	@media (max-width: 640px) {
		.tk-cases {
			grid-template-columns: 1fr !important;
		}
	}
}

/* -- Industries, whistleblowing, contact pages ---------------------- */
@layer wpsa.components {
	.tk-display--ind {
		font-size: clamp(38px, 4.6vw, 72px);
		line-height: 0.96;
		letter-spacing: -2px;
	}

	.tk-display--wb {
		font-size: clamp(36px, 4.6vw, 72px);
		line-height: 0.96;
		letter-spacing: -1.8px;
		animation: tkHeroUp 1s 0.18s var(--tk-ease) both;
	}

	.tk-display--cform {
		font-size: clamp(38px, 4.6vw, 74px);
		line-height: 0.96;
		letter-spacing: -1.8px;
		animation: tkHeroUp 1s 0.22s var(--tk-ease) both;
	}

	.tk-ind {
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		padding: 30px 32px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		transition: border-color 0.3s;
	}

	.tk-ind:hover {
		border-color: var(--tk-accent);
	}

	.tk-ind__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.tk-ind__name {
		margin: 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: 24px;
		letter-spacing: -0.5px;
		text-transform: uppercase;
		color: var(--tk-text);
	}

	.tk-ind__num {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
	}

	.tk-ind__text {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.65;
		color: var(--tk-body);
	}

	.tk-ind__links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-top: auto;
		padding-top: 8px;
	}

	.tk-ind__links a {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1px;
		color: var(--tk-text);
		text-decoration: none;
		border: 1px solid var(--tk-border);
		padding: 7px 12px;
		text-transform: uppercase;
		transition: border-color 0.25s, background 0.25s, color 0.25s;
	}

	.tk-ind__links a:hover {
		border-color: var(--tk-accent);
		background: var(--tk-accent);
		color: var(--tk-on-accent);
	}

	/* Whistleblowing */
	.tk-wb__lead {
		max-width: 620px;
		font-size: 17px;
		line-height: 1.65;
		animation: tkHeroUp 1s 0.3s var(--tk-ease) both;
	}

	.tk-wb__lead p {
		margin: 0;
	}

	.tk-wb__body {
		display: block;
	}

	.tk-wb__body h2,
	.tk-wb__body h3 {
		margin: 0 0 14px;
		font-weight: 800;
		font-size: 22px;
		letter-spacing: -0.4px;
		color: var(--tk-text);
	}

	.tk-wb__body p {
		margin: 0;
		font-size: 15.5px;
		line-height: 1.7;
		color: var(--tk-body);
	}

	.tk-wb__body p + h2,
	.tk-wb__body p + h3 {
		margin-top: 40px;
	}

	.tk-wb__card {
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		padding: 34px 36px;
		position: sticky;
		top: 100px;
	}

	.tk-wb__eyebrow {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		margin-bottom: 14px;
		text-transform: uppercase;
	}

	.tk-wb__text {
		margin: 0 0 24px;
		font-size: 14.5px;
		line-height: 1.65;
		color: var(--tk-body);
	}

	.tk-wb__text p {
		margin: 0;
	}

	.tk-wb__btn {
		display: block;
		text-align: center;
		padding: 17px 28px;
		font-size: 15.5px;
	}

	.tk-wb__btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	}

	.tk-wb__provider {
		margin: 18px 0 0;
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-muted);
		line-height: 1.6;
		text-transform: uppercase;
	}

	/* Contact form page */
	.tk-cform {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 1fr 1.05fr;
		gap: 64px;
		align-items: start;
		padding: 44px 0 90px;
		scroll-margin-top: 90px;
	}

	.tk-cform__lead {
		margin: 26px 0 0;
		max-width: 460px;
		font-size: 16.5px;
		line-height: 1.65;
		color: var(--tk-body);
		animation: tkHeroUp 1s 0.34s var(--tk-ease) both;
	}

	.tk-cform__sales {
		margin-top: 36px;
		animation: tkHeroUp 1s 0.44s var(--tk-ease) both;
	}

	.tk-cform__sales-head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 14px;
	}

	.tk-cform__sales-head span:first-child {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 2px;
		color: var(--tk-sec);
		text-transform: uppercase;
	}

	.tk-cform__rule {
		flex: 1;
		height: 1px;
		background: var(--tk-border);
	}

	.tk-cform__list {
		display: flex;
		flex-direction: column;
		gap: 1px;
		background: var(--tk-border);
		border: 1px solid var(--tk-border);
	}

	.tk-cform__row {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 14px;
		align-items: center;
		background: var(--tk-surface);
		padding: 14px 20px;
	}

	.tk-cform__name {
		font-weight: 800;
		font-size: 15.5px;
		letter-spacing: -0.2px;
	}

	.tk-cform__role {
		font-family: var(--tk-mono);
		font-size: 10px;
		letter-spacing: 1px;
		color: var(--tk-sec);
		margin-top: 3px;
		text-transform: uppercase;
	}

	.tk-cform__meta {
		display: flex;
		flex-direction: column;
		gap: 5px;
		text-align: right;
	}

	.tk-cform__meta a {
		color: var(--tk-text);
		text-decoration: none;
		font-size: 13px;
		white-space: nowrap;
		transition: color 0.2s;
	}

	.tk-cform__meta a + a {
		color: var(--tk-muted);
		font-size: 12px;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.tk-cform__meta a:hover {
		color: var(--tk-accent);
	}

	.tk-cform__links {
		display: flex;
		gap: 22px;
		margin-top: 14px;
		flex-wrap: wrap;
	}

	.tk-cform__switch {
		color: var(--tk-text);
		text-decoration: none;
		font-size: 13.5px;
		font-weight: 600;
	}

	.tk-cform__offices {
		color: var(--tk-muted);
		text-decoration: none;
		font-size: 13.5px;
	}

	.tk-cform__switch:hover,
	.tk-cform__offices:hover {
		color: var(--tk-accent);
	}

	.tk-cform__right {
		animation: tkHeroUp 1s 0.3s var(--tk-ease) both;
	}

	.tk-cform__card {
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		padding: 40px 42px;
	}

	.tk-cform__num {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		margin-bottom: 12px;
		text-transform: uppercase;
	}

	.tk-cform__title {
		margin: 0;
		font-weight: 900;
		font-stretch: 112%;
		font-size: 24px;
		letter-spacing: -0.5px;
		text-transform: uppercase;
		color: var(--tk-text);
	}

	.tk-cform__error {
		margin: 0 0 20px;
		font-size: 13.5px;
		font-weight: 600;
		color: var(--tk-accent);
	}

	.tk-cform__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22px 20px;
	}

	.tk-cform__field {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.tk-cform__field--full {
		grid-column: 1 / -1;
	}

	.tk-cform__field > span {
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	.tk-cform__field input,
	.tk-cform__field select,
	.tk-cform__field textarea {
		width: 100%;
		background: var(--tk-bg);
		border: 1px solid var(--tk-border);
		border-radius: 0;
		color: var(--tk-text);
		font-family: var(--tk-sans);
		font-size: 14.5px;
		padding: 13px 14px;
		outline: none;
	}

	.tk-cform__field select {
		appearance: auto;
	}

	.tk-cform__field textarea {
		line-height: 1.6;
		resize: vertical;
	}

	.tk-cform__field input:focus,
	.tk-cform__field select:focus,
	.tk-cform__field textarea:focus {
		border-color: var(--tk-accent);
	}

	.tk-cform__field ::placeholder {
		color: var(--tk-muted);
		opacity: 0.7;
	}

	.tk-cform__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		margin-top: 28px;
		flex-wrap: wrap;
	}

	.tk-cform__hint {
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-muted);
		max-width: 320px;
		line-height: 1.6;
		text-transform: uppercase;
	}

	.tk-cform__submit {
		background: var(--tk-accent);
		color: var(--tk-on-accent);
		border: 0;
		padding: 16px 34px;
		font-family: var(--tk-sans);
		font-weight: 800;
		font-size: 15.5px;
		letter-spacing: 0.3px;
		cursor: pointer;
		transition: background 0.25s, color 0.25s, transform 0.25s var(--tk-ease), box-shadow 0.25s;
	}

	.tk-cform__submit:hover {
		background: var(--tk-text);
		color: var(--tk-bg);
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	}

	.tk-cform__note {
		margin: 14px 0 0;
		font-family: var(--tk-mono);
		font-size: 10.5px;
		letter-spacing: 1px;
		color: var(--tk-muted);
		text-transform: uppercase;
	}

	.tk-cform__done {
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		padding: 64px 48px;
		text-align: center;
	}

	.tk-cform__check {
		width: 64px;
		height: 64px;
		margin: 0 auto 24px;
		border-radius: 50%;
		background: var(--tk-accent);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--tk-on-accent);
		font-size: 28px;
		font-weight: 900;
	}

	.tk-cform__done-title {
		font-weight: 900;
		font-stretch: 112%;
		font-size: 30px;
		letter-spacing: -0.6px;
		text-transform: uppercase;
	}

	.tk-cform__done-text {
		margin: 16px auto 0;
		max-width: 380px;
		font-size: 15px;
		line-height: 1.65;
		color: var(--tk-body);
	}

	.tk-cform__again {
		margin-top: 28px;
		padding: 13px 26px;
		font-size: 14px;
	}

	/* Contact details page */
	.tk-btn--contact {
		padding: 17px 32px;
		font-size: 15.5px;
	}

	.tk-tiles--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.tk-stile {
		background: var(--tk-surface);
		padding: 24px 26px;
	}

	.tk-stile__name {
		font-weight: 800;
		font-size: 17px;
		letter-spacing: -0.2px;
	}

	.tk-stile__role {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		margin: 6px 0 16px;
		text-transform: uppercase;
	}

	.tk-stile__meta {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.tk-stile__meta a {
		color: var(--tk-text);
		text-decoration: none;
		font-size: 14px;
		font-weight: 600;
		transition: color 0.2s;
	}

	.tk-stile__meta a + a {
		color: var(--tk-body);
		font-size: 13px;
		font-weight: 400;
		word-break: break-all;
	}

	.tk-stile__meta a:hover {
		color: var(--tk-accent);
	}

	.tk-offices {
		position: relative;
		overflow: hidden;
	}

	.tk-offices__map {
		position: absolute;
		inset: 24px 0;
		width: 100%;
		height: calc(100% - 48px);
		object-fit: contain;
		opacity: 0.07;
		filter: invert(1);
		pointer-events: none;
	}

	.tk-offices__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 48px;
	}

	.tk-office {
		border-top: 2px solid var(--tk-border);
		padding-top: 18px;
	}

	.tk-office__co {
		font-family: var(--tk-mono);
		font-size: 10px;
		letter-spacing: 1.2px;
		color: var(--tk-accent);
		margin-bottom: 7px;
		text-transform: uppercase;
	}

	.tk-office__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 10px;
	}

	.tk-office__city {
		font-weight: 800;
		font-size: 19px;
		letter-spacing: -0.3px;
	}

	.tk-office__country {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
	}

	.tk-office__addr {
		margin: 0;
		font-size: 14px;
		line-height: 1.7;
		color: var(--tk-body);
		white-space: pre-line;
	}

	.tk-btiles {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: var(--tk-inv-border);
		border: 1px solid var(--tk-inv-border);
	}

	.tk-btile {
		background: var(--tk-inv-bg);
		padding: 24px 26px;
	}

	.tk-btile__key {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-inv-accent);
		margin-bottom: 12px;
		text-transform: uppercase;
	}

	.tk-btile__value {
		font-size: 15px;
		line-height: 1.7;
		white-space: pre-line;
	}

	.tk-btiles__note {
		margin: 22px 0 0;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1px;
		color: var(--tk-inv-muted);
		text-transform: uppercase;
	}

	.tk-btiles__note::before {
		content: "* ";
	}
}

@layer wpsa.utilities {
	@media (max-width: 1024px) {
		.tk-tiles--3,
		.tk-btiles,
		.tk-offices__grid {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}

	@media (max-width: 768px) {
		.tk-cform {
			grid-template-columns: 1fr !important;
		}

		.tk-cform__grid {
			grid-template-columns: 1fr !important;
		}

		.tk-cform__card {
			padding: 28px 22px;
		}

		.tk-wb__card {
			position: static;
		}
	}

	@media (max-width: 640px) {
		.tk-tiles--3,
		.tk-btiles,
		.tk-offices__grid,
		.tk-grid--2 {
			grid-template-columns: 1fr !important;
		}
	}
}

@layer wpsa.components {
	.tk-cta--compact,
	.tk-cta--sub {
		padding: 110px 48px;
	}

	.tk-display--cta-compact {
		font-size: clamp(42px, 5vw, 80px);
		line-height: 0.95;
		letter-spacing: -2px;
	}

	.tk-cform__note::before {
		content: "* ";
	}
}

/*
 * Unlayered on purpose: WordPress prints theme.json global styles inline and
 * unlayered, which would otherwise beat every layered rule above. The
 * prototype renders on browser defaults (16px, line-height normal).
 */
body,
.wpsa-site-main,
.wpsa-site-header,
.wpsa-site-footer {
	font-family: var(--tk-sans);
	font-size: 16px;
	line-height: normal;
}

/* -- Record templates: product group, product, reference, service ---- */
@layer wpsa.components {
	.tk-rhero {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		gap: 56px;
		align-items: center;
		padding: 44px 0 72px;
	}

	.tk-rhero--tight {
		padding: 30px 0 48px;
	}

	.tk-rhero--ref {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.tk-rhero__lead {
		margin: 28px 0 0;
		max-width: 520px;
		font-size: 17.5px;
		line-height: 1.6;
		color: var(--tk-body);
		animation: tkHeroUp 1s 0.34s var(--tk-ease) both;
	}

	.tk-rhero__lead--sm {
		margin-top: 20px;
		font-size: 17px;
	}

	.tk-rhero__actions {
		display: flex;
		gap: 14px;
		margin-top: 36px;
		flex-wrap: wrap;
		animation: tkHeroUp 1s 0.44s var(--tk-ease) both;
	}

	.tk-rhero__actions--tight {
		margin-top: 26px;
	}

	.tk-rhero__chips {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin-top: 26px;
		animation: tkHeroUp 1s 0.54s var(--tk-ease) both;
	}

	.tk-rhero__chips span {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-body);
		border: 1px solid var(--tk-border);
		padding: 7px 12px;
		text-transform: uppercase;
	}

	.tk-rhero__media {
		position: relative;
		animation: tkFadeIn 1.4s 0.2s ease both;
	}

	.tk-rhero__frame {
		position: relative;
		aspect-ratio: 4 / 3.4;
		overflow: hidden;
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
	}

	.tk-rhero__frame--43 {
		aspect-ratio: 4 / 3;
	}

	.tk-rhero__frame--1610 {
		aspect-ratio: 16 / 10;
	}

	.tk-rhero__frame img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tk-rhero__tag {
		position: absolute;
		top: 18px;
		left: 20px;
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-sec);
		letter-spacing: 2px;
		background: var(--tk-bg);
		padding: 4px 8px;
	}

	.tk-display--group {
		font-size: clamp(36px, 4.6vw, 76px);
		line-height: 0.96;
		letter-spacing: -1.8px;
	}

	.tk-display--product {
		font-size: clamp(34px, 4vw, 64px);
		line-height: 0.96;
		letter-spacing: -1.8px;
	}

	.tk-display--refname {
		font-size: clamp(40px, 5vw, 82px);
		line-height: 0.96;
		letter-spacing: -2px;
	}

	.tk-display--h42 {
		font-size: clamp(28px, 3vw, 42px);
		letter-spacing: -1px;
	}

	.tk-link-underline {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--tk-text);
		text-decoration: none;
		padding: 17px 10px;
		font-weight: 600;
		font-size: 15.5px;
		border-bottom: 2px solid var(--tk-accent);
		transition: color 0.25s;
	}

	.tk-link-underline:hover {
		color: var(--tk-accent);
	}

	/* Product list rows on a group page. */
	.tk-prow {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 24px;
		align-items: center;
		text-decoration: none;
		color: var(--tk-text);
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		padding: 28px 30px;
		transition: border-color 0.3s, transform 0.3s var(--tk-ease);
	}

	.tk-prow:hover {
		border-color: var(--tk-accent);
		transform: translateY(-4px);
	}

	.tk-prow__num {
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-sec);
		letter-spacing: 2px;
		margin-bottom: 10px;
	}

	.tk-prow__name {
		margin: 0 0 8px;
		font-weight: 800;
		font-size: 21px;
		letter-spacing: -0.4px;
		color: var(--tk-text);
	}

	.tk-prow__text {
		margin: 0;
		font-size: 14px;
		line-height: 1.55;
		color: var(--tk-body);
	}

	.tk-prow__arrow {
		color: var(--tk-accent);
		font-size: 22px;
		transition: transform 0.3s var(--tk-ease);
	}

	.tk-prow:hover .tk-prow__arrow {
		transform: translateX(4px);
	}

	/* Feature columns (blue numbering, min height). */
	.tk-gfeat {
		border-top: 2px solid var(--tk-border);
		padding-top: 22px;
		min-height: 170px;
		transition: border-color 0.3s;
	}

	.tk-gfeat:hover {
		border-color: var(--tk-accent);
	}

	.tk-gfeat__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-sec);
		letter-spacing: 1.5px;
		margin-bottom: 14px;
	}

	.tk-gfeat__title {
		margin: 0 0 10px;
		font-weight: 800;
		font-size: 19px;
		letter-spacing: -0.3px;
		color: var(--tk-text);
	}

	.tk-gfeat__text {
		margin: 0;
		font-size: 14px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	/* Surface-coloured process/structure band. */
	.tk-surface-band {
		background: var(--tk-surface);
		color: var(--tk-text);
		border-top: 1px solid var(--tk-border);
	}

	.tk-surface-band .tk-head .tk-mono {
		color: var(--tk-muted);
	}

	.tk-layer {
		display: flex;
		gap: 22px;
		align-items: baseline;
		padding: 18px 0;
		border-bottom: 1px solid var(--tk-border);
	}

	.tk-layer__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		color: var(--tk-accent);
		letter-spacing: 1.5px;
		flex-shrink: 0;
	}

	.tk-layer__title {
		font-weight: 800;
		font-size: 17px;
		letter-spacing: -0.2px;
	}

	.tk-layer__text {
		font-size: 13.5px;
		line-height: 1.55;
		color: var(--tk-muted);
		margin-top: 4px;
	}

	.tk-aside {
		position: sticky;
		top: 110px;
	}

	.tk-aside__lead {
		margin: 0 0 26px;
		font-size: 16.5px;
		line-height: 1.65;
		color: var(--tk-text);
		max-width: 520px;
	}

	.tk-aside__text {
		margin: 0 0 34px;
		font-size: 14.5px;
		line-height: 1.65;
		color: var(--tk-muted);
		max-width: 520px;
	}

	/* Other groups / related cards. */
	.tk-gcard {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: var(--tk-text);
		background: var(--tk-bg);
		border: 1px solid var(--tk-border);
		transition: border-color 0.3s, transform 0.3s var(--tk-ease);
	}

	.tk-gcard:hover {
		border-color: var(--tk-accent);
		transform: translateY(-4px);
	}

	.tk-gcard__media {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--tk-surface);
	}

	.tk-gcard__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.8;
		filter: grayscale(25%);
	}

	.tk-gcard--ref .tk-gcard__media img {
		opacity: 0.85;
		filter: none;
	}

	.tk-gcard__num {
		position: absolute;
		top: 16px;
		left: 18px;
		font-family: var(--tk-mono);
		font-size: 11px;
		color: var(--tk-sec);
		letter-spacing: 2px;
		background: var(--tk-bg);
		padding: 3px 7px;
	}

	.tk-gcard__strip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 16px 18px;
		border-top: 1px solid var(--tk-border);
	}

	.tk-gcard__name {
		font-weight: 800;
		font-size: 15px;
		letter-spacing: -0.3px;
	}

	.tk-gcard--lg .tk-gcard__name {
		font-size: 16px;
	}

	.tk-gcard__arrow {
		color: var(--tk-accent);
		font-size: 17px;
	}

	/* Product page TOC bar. */
	.tk-toc {
		border-top: 1px solid var(--tk-border);
	}

	.tk-toc__inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 48px;
		display: flex;
		align-items: center;
		gap: 28px;
		overflow-x: auto;
	}

	.tk-toc__inner a {
		padding: 15px 0;
		color: var(--tk-muted);
		text-decoration: none;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		white-space: nowrap;
		border-bottom: 2px solid transparent;
		text-transform: uppercase;
		transition: color 0.2s, border-color 0.2s;
	}

	.tk-toc__inner a:hover {
		color: var(--tk-text);
		border-bottom-color: var(--tk-accent);
	}

	.tk-toc__inner a.tk-toc__cta {
		margin-left: auto;
		color: var(--tk-accent);
		border-bottom-color: transparent;
	}

	.tk-toc__inner a.tk-toc__cta:hover {
		text-decoration: underline;
	}

	/* Specs. */
	.tk-specs {
		border-top: 2px solid var(--tk-text);
	}

	.tk-spec {
		display: grid;
		grid-template-columns: 220px 1fr;
		gap: 24px;
		padding: 16px 12px;
		margin: 0 -12px;
		border-bottom: 1px solid var(--tk-border);
		transition: background 0.2s;
	}

	.tk-spec:hover {
		background: var(--tk-surface);
	}

	.tk-spec__key {
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
		text-transform: uppercase;
		padding-top: 2px;
	}

	.tk-spec__value {
		font-size: 15.5px;
		line-height: 1.55;
		font-weight: 500;
	}

	.tk-uses__label {
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 2px;
		color: var(--tk-sec);
		margin-bottom: 18px;
		text-transform: uppercase;
	}

	.tk-uses {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 16px;
	}

	.tk-uses span {
		font-size: 14px;
		font-weight: 600;
		border: 1px solid var(--tk-border);
		padding: 10px 16px;
	}

	.tk-uses span:hover {
		border-color: var(--tk-accent);
	}

	.tk-uses__more {
		display: inline-block;
		margin-bottom: 40px;
		color: var(--tk-muted);
		text-decoration: none;
		font-family: var(--tk-mono);
		font-size: 11.5px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	.tk-uses__more:hover {
		color: var(--tk-accent);
	}

	.tk-infobox {
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		padding: 26px 28px;
	}

	.tk-infobox__title {
		font-weight: 800;
		font-size: 17px;
		margin-bottom: 8px;
	}

	.tk-infobox__text {
		margin: 0 0 18px;
		font-size: 14px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-infobox__link {
		display: inline-block;
		color: var(--tk-accent);
		text-decoration: none;
		font-family: var(--tk-mono);
		font-size: 13px;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.tk-infobox__link:hover {
		text-decoration: underline;
	}

	/* Accordion with body links (services around a product). */
	.tk-faqitem__body {
		padding: 0 26px 24px;
		max-width: 760px;
	}

	.tk-faqitem__body p {
		margin: 0 0 14px;
		padding: 0;
		font-size: 14.5px;
		line-height: 1.7;
		color: var(--tk-body);
		max-width: none;
	}

	.tk-faqitem__body a {
		color: var(--tk-text);
		text-decoration: none;
		font-weight: 700;
		font-size: 14px;
		border-bottom: 2px solid var(--tk-accent);
		padding-bottom: 2px;
	}

	.tk-faqitem__body a:hover {
		color: var(--tk-accent);
	}

	/* Reference case. */
	.tk-ref__sub {
		margin: 18px 0 0;
		font-weight: 800;
		font-size: clamp(19px, 1.8vw, 26px);
		letter-spacing: -0.4px;
		line-height: 1.25;
		color: var(--tk-accent);
		animation: tkHeroUp 1s 0.3s var(--tk-ease) both;
	}

	.tk-ref__intro {
		margin: 22px 0 0;
		max-width: 540px;
		font-size: 16.5px;
		line-height: 1.65;
		color: var(--tk-body);
		animation: tkHeroUp 1s 0.4s var(--tk-ease) both;
	}

	.tk-ref__para {
		margin: 0 0 18px;
		font-size: 16px;
		line-height: 1.75;
		color: var(--tk-body);
	}

	.tk-inv-band .tk-ref__para {
		color: var(--tk-inv-text);
	}

	.tk-ref__site {
		display: inline-block;
		margin-top: 10px;
		font-family: var(--tk-mono);
		font-size: 13px;
		letter-spacing: 1px;
		color: var(--tk-accent);
		text-decoration: none;
	}

	.tk-ref__site:hover {
		text-decoration: underline;
	}

	.tk-facts {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1px;
		background: var(--tk-border);
		border: 1px solid var(--tk-border);
		position: sticky;
		top: 100px;
	}

	.tk-fact {
		background: var(--tk-surface);
		padding: 18px 22px;
		display: grid;
		grid-template-columns: 130px 1fr;
		gap: 16px;
		align-items: baseline;
	}

	.tk-fact__key {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		text-transform: uppercase;
	}

	.tk-fact__value {
		font-weight: 600;
		font-size: 14.5px;
	}

	.tk-ref__links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 26px;
	}

	.tk-ref__links a {
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1px;
		color: var(--tk-inv-text);
		text-decoration: none;
		border: 1px solid var(--tk-inv-border);
		padding: 11px 18px;
		text-transform: uppercase;
		transition: border-color 0.25s, background 0.25s, color 0.25s;
	}

	.tk-ref__links a:hover {
		border-color: var(--tk-accent);
		background: var(--tk-accent);
		color: #fff;
	}

	.tk-ref__frame2 {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid var(--tk-inv-border);
	}

	.tk-ref__frame2 img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Service detail blocks + aside card. */
	.tk-sblock {
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 20px;
	}

	.tk-sblock__num {
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1px;
		color: var(--tk-sec);
		padding-top: 5px;
	}

	.tk-sblock__title {
		margin: 0 0 12px;
		font-weight: 800;
		font-size: 22px;
		letter-spacing: -0.4px;
		color: var(--tk-text);
	}

	.tk-sblock__text {
		font-size: 15.5px;
		line-height: 1.7;
		color: var(--tk-body);
	}

	.tk-sblock__text p {
		margin: 0;
	}

	.tk-sblocks {
		display: flex;
		flex-direction: column;
		gap: 44px;
	}

	.tk-scard__btns {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.tk-scard__btns .tk-btn {
		display: block;
		text-align: center;
		padding: 16px 28px;
		font-size: 15px;
	}

	.tk-scard__btns .tk-btn--ghost {
		padding: 15px 28px;
		font-size: 14px;
	}

	.tk-scard__btns .tk-btn--ghost:hover {
		background: transparent;
		color: var(--tk-accent);
		border-color: var(--tk-accent);
		transform: none;
	}

	.tk-scard__facts {
		margin-top: 26px;
		padding-top: 22px;
		border-top: 1px solid var(--tk-border);
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.tk-scard__fact {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		font-size: 13px;
	}

	.tk-scard__fact span:first-child {
		color: var(--tk-muted);
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding-top: 1px;
	}

	.tk-scard__fact span:last-child {
		text-align: right;
		font-weight: 600;
	}

	/* Blog / archive / search / 404 shells. */
	.tk-simple {
		max-width: 900px;
	}

	.tk-postcard {
		display: flex;
		flex-direction: column;
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		transition: border-color 0.3s;
	}

	.tk-postcard:hover {
		border-color: var(--tk-accent);
	}

	.tk-postcard__media {
		aspect-ratio: 16 / 10;
		overflow: hidden;
		background: var(--tk-bg);
	}

	.tk-postcard__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tk-postcard__body {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 22px 24px 26px;
		flex: 1;
	}

	.tk-postcard__date {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-sec);
		text-transform: uppercase;
	}

	.tk-postcard__title {
		margin: 0;
		font-weight: 800;
		font-size: 20px;
		line-height: 1.25;
		letter-spacing: -0.3px;
	}

	.tk-postcard__title a {
		text-decoration: none;
		color: var(--tk-text);
	}

	.tk-postcard__title a:hover {
		color: var(--tk-accent);
	}

	.tk-postcard__excerpt {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--tk-body);
	}

	.tk-postcard__more {
		margin-top: auto;
		padding-top: 8px;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1px;
		color: var(--tk-accent);
		text-transform: uppercase;
	}

	.tk-search {
		display: flex;
		gap: 10px;
		max-width: 520px;
	}

	.tk-search input {
		flex: 1;
		background: var(--tk-surface);
		border: 1px solid var(--tk-border);
		color: var(--tk-text);
		font-family: var(--tk-sans);
		font-size: 14.5px;
		padding: 13px 14px;
		outline: none;
	}

	.tk-search input:focus {
		border-color: var(--tk-accent);
	}

	.tk-search button {
		padding: 13px 22px;
		font-size: 14px;
	}

	.tk-pagination {
		margin-top: 48px;
		font-family: var(--tk-mono);
		font-size: 12px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	.tk-pagination .nav-links {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.tk-pagination a,
	.tk-pagination span {
		display: inline-block;
		padding: 10px 14px;
		border: 1px solid var(--tk-border);
		color: var(--tk-text);
		text-decoration: none;
	}

	.tk-pagination .current {
		background: var(--tk-accent);
		border-color: var(--tk-accent);
		color: #fff;
	}

	.tk-post-meta {
		display: flex;
		gap: 10px;
		margin-top: 22px;
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: var(--tk-muted);
	}

	.tk-post-nav .nav-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.tk-post-nav a {
		text-decoration: none;
		font-weight: 700;
		color: var(--tk-text);
	}

	.tk-post-nav .nav-next {
		text-align: right;
	}

	.tk-post-nav .tk-mono {
		display: block;
		font-size: 11px;
		color: var(--tk-muted);
		margin-bottom: 6px;
	}

	.tk-prose--article {
		max-width: none;
		font-size: 17px;
		line-height: 1.7;
	}

	.tk-prose--article img {
		max-width: 100%;
		height: auto;
	}

	.tk-prose--article p + p {
		margin-top: 1.2em;
	}
}

@layer wpsa.utilities {
	@media (max-width: 1024px) {
		.tk-rhero {
			grid-template-columns: 1fr !important;
		}

		.tk-spec {
			grid-template-columns: 1fr !important;
			gap: 6px !important;
		}

		.tk-aside,
		.tk-facts {
			position: static;
		}
	}
}

@layer wpsa.components {
	.single-tekniseri_product .tk-cta--sub {
		padding: 120px 48px;
	}
}

@layer wpsa.utilities {
	@media (max-width: 1024px) {
		.tk-srow__text,
		.tk-frow .tk-chips {
			grid-column: 2;
		}

		.tk-srow__title {
			font-size: clamp(22px, 5vw, 30px);
		}
	}
}

/* -- Mobile & accessibility hardening ------------------------------ */
@layer wpsa.utilities {
	/* Inline text links get a 24px+ hit area (WCAG 2.5.8) without moving
	   the layout: vertical padding is offset by an equal negative margin. */
	.tk-footer__links a,
	.tk-person__meta a,
	.tk-stile__meta a,
	.tk-cform__meta a,
	.tk-phero__crumbs a,
	.tk-cform__switch,
	.tk-cform__offices,
	.tk-ref__site,
	.tk-uses__more,
	.tk-infobox__link,
	.tk-ctile__link,
	.tk-arrow-link,
	.tk-toc__inner a,
	.tk-underline-link,
	.tk-link-underline,
	.tk-faqitem__body a,
	.tk-nav__links > a:not(.tk-nav__cta),
	.tk-nav__est {
		display: inline-block;
		padding-top: 6px;
		padding-bottom: 6px;
		margin-top: -6px;
		margin-bottom: -6px;
	}

	.tk-toc__inner a {
		padding-top: 15px;
		padding-bottom: 15px;
		margin: 0;
	}

	.tk-underline-link,
	.tk-link-underline,
	.tk-faqitem__body a {
		padding-bottom: 3px;
		margin-bottom: 0;
	}

	.tk-link-underline {
		padding-top: 17px;
		padding-bottom: 17px;
		margin: 0;
	}

	/* Cookie notice must not sit under the back-to-top button on phones. */
	@media (max-width: 640px) {
		.tk-cookie {
			left: 16px;
			bottom: 16px;
			max-width: calc(100% - 96px);
		}

		.tk-totop {
			bottom: 16px;
		}

		/* 10px mono labels are hard to read on a phone; lift them to 11px. */
		.tk-badge,
		.tk-cform__role,
		.tk-office__co,
		.tk-cform__hint,
		.tk-cform__note,
		.tk-wb__provider,
		.tk-tnote,
		.tk-person__role,
		.tk-why__note,
		.tk-mega__num {
			font-size: 11px;
		}

		/* Nav pill: keep the logo and toggle comfortably inside 360px. */
		.tk-nav {
			padding-left: 16px;
		}

		.tk-nav__brand img {
			height: 30px;
		}
	}

	/* Users who ask for less motion get static reveals and no marquee. */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.001s !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.001s !important;
		}

		.tk-cta__bg {
			background-attachment: scroll;
		}
	}

	/* iOS Safari renders fixed backgrounds poorly; scroll them on touch. */
	@media (hover: none) and (pointer: coarse) {
		.tk-cta__bg {
			background-attachment: scroll;
		}
	}
}

@layer wpsa.utilities {
	/* Stacked phone + email links: 24px hit boxes that no longer overlap. */
	.tk-person__meta,
	.tk-stile__meta,
	.tk-cform__meta {
		gap: 10px;
	}

	.tk-person__meta a,
	.tk-stile__meta a,
	.tk-cform__meta a {
		padding-top: 5px;
		padding-bottom: 5px;
		margin-top: -5px;
		margin-bottom: -5px;
	}

	.tk-postcard__title a,
	.tk-gcard__name {
		display: inline-block;
		padding: 4px 0;
		margin: -4px 0;
	}
}

@layer wpsa.components {
	/* On the blue band the dimmed language line falls under AA; keep it solid. */
	.tk-inv-band .tk-status .tk-cta__langs {
		opacity: 1;
		color: var(--tk-inv-muted);
	}

	.tk-inv-band .tk-status {
		color: var(--tk-inv-muted);
	}
}

/* -- Salesperson portraits ------------------------------------------ */
@layer wpsa.components {
	.tk-avatar {
		flex: 0 0 auto;
		width: 60px;
		height: 60px;
		overflow: hidden;
		border: 1px solid var(--tk-border);
		background: var(--tk-bg);
	}

	.tk-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		filter: grayscale(100%) contrast(1.05);
		transition: filter 0.4s ease;
	}

	.tk-person:hover .tk-avatar img,
	.tk-stile:hover .tk-avatar img,
	.tk-cform__row:hover .tk-avatar img {
		filter: grayscale(0%);
	}

	.tk-avatar--lg {
		width: 88px;
		height: 88px;
	}

	.tk-avatar--sm {
		width: 52px;
		height: 52px;
	}

	.tk-person--photo,
	.tk-stile--photo {
		display: flex;
		gap: 16px;
		align-items: flex-start;
	}

	.tk-person__body,
	.tk-stile__body {
		min-width: 0;
		flex: 1;
	}

	.tk-cform__who {
		display: flex;
		gap: 12px;
		align-items: center;
		min-width: 0;
	}
}

/* -- Mobile hardening, round two (2026-09-22) ---------------------------- */
@layer wpsa.utilities {
	/* Grid and flex children may shrink below their longest word, so a long
	   compound ("Konstruktionsleistungen") or an email address no longer
	   pushes a whole column past the viewport edge. */
	.tk-rhero > *,
	.tk-cform > *,
	.tk-cform__row > *,
	.tk-cform__who > *,
	.tk-phero__body,
	.tk-srow > *,
	.tk-frow > *,
	.tk-ind,
	.tk-ind > *,
	.tk-stat,
	[data-grid] > * {
		min-width: 0;
	}

	.tk-ind__head,
	.tk-ind__links {
		flex-wrap: wrap;
	}

	/* Long words in display headings hyphenate on phones instead of being
	   cut off. The home hero keeps its hand-placed soft hyphens. */
	@media (max-width: 600px) {
		.tk-display:not(.tk-display--hero),
		.tk-ind__name,
		.tk-srow__title,
		.tk-frow__title,
		.tk-cform__title,
		.tk-cform__name,
		.tk-mega__name {
			-webkit-hyphens: auto;
			hyphens: auto;
			/* Only long words hyphenate; balanced lines stop the greedy
			   "KOKO PORTFO-LIO" break when "PORTFOLIO" fits on its own line. */
			hyphenate-limit-chars: 10 4 4;
			text-wrap: balance;
			overflow-wrap: anywhere;
		}

		.tk-cform__field > span {
			font-size: 11.5px;
		}

		.tk-display--hero {
			font-size: clamp(34px, 10.2vw, 92px);
		}

		:lang(de) .tk-display--hero {
			font-size: clamp(27px, 4.3vw, 70px);
		}
	}

	@media (max-width: 640px) {
		.tk-cform__row {
			grid-template-columns: 1fr !important;
			gap: 8px;
		}

		.tk-cform__meta {
			text-align: left;
			align-items: flex-start;
		}

		.tk-cform__meta a {
			white-space: normal;
			overflow-wrap: anywhere;
		}

		.tk-phero__stats,
		.tk-stats {
			grid-template-columns: 1fr 1fr !important;
		}

		.tk-phero__stats .tk-stat,
		.tk-stat {
			padding: 22px 18px;
		}

		.tk-stat__value {
			font-size: 36px;
		}

		.tk-stat__label {
			overflow-wrap: anywhere;
		}

		.tk-ind {
			padding: 24px 20px;
		}

		.tk-toc__inner {
			gap: 20px;
		}

		.tk-toc__inner a.tk-toc__cta {
			margin-left: 8px;
		}

		.tk-why__note,
		.tk-cform__note {
			font-size: 11px;
		}
	}

	/* iOS zooms into any field under 16px; keep phone fields at 16px. */
	@media (max-width: 768px) {
		.tk-cform__field input,
		.tk-cform__field select,
		.tk-cform__field textarea,
		.tk-search input {
			font-size: 16px;
		}
	}

	/* Drawer: search field and language switcher for phones. */
	.tk-drawer .tk-search {
		max-width: none;
		margin: 0 0 22px;
	}

	.tk-drawer .tk-search input {
		min-width: 0;
	}

	.tk-drawer .tk-search button {
		flex: 0 0 auto;
	}

	.tk-drawer__langs {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.tk-drawer__langs a {
		flex: 1 1 calc(50% - 8px);
		justify-content: flex-start;
		gap: 10px;
		border: 1px solid var(--tk-border);
		padding: 12px 14px;
		font-size: 15px;
		font-weight: 600;
	}

	.tk-drawer__langs a span:first-child {
		font-family: var(--tk-mono);
		font-size: 11px;
		letter-spacing: 1.5px;
		color: var(--tk-accent);
	}

	.tk-drawer__langs a[aria-current] {
		border-color: var(--tk-accent);
	}

	.tk-drawer__langs + .tk-drawer__cta {
		margin-top: 30px;
	}
}

/* -- Group management tiles on the company page (2026-09-23) ------------ */
@layer wpsa.components {
	.tk-tiles__label {
		margin: 0 0 14px;
		color: var(--tk-muted);
		letter-spacing: 1.5px;
	}

	.tk-tiles--mgmt {
		margin-bottom: 28px;
	}

	.tk-avatar--initials {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--tk-surface-2, var(--tk-surface));
		border-color: var(--tk-border);
	}

	.tk-avatar--initials span {
		font-family: var(--tk-mono);
		font-size: 15px;
		letter-spacing: 1.5px;
		color: var(--tk-muted);
	}
}

/* -- Billing tiles follow the number of companies (2026-09-23) ----------- */
@layer wpsa.components {
	.tk-btiles[data-grid="2"] {
		grid-template-columns: 1fr 1fr;
	}

	.tk-btiles[data-grid="1"] {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

/* -- UL and 3M Preferred Converter badges (2026-10-08) ------------------- */
@layer wpsa.components {
	.tk-certs--wrap {
		flex-wrap: wrap;
	}

	.tk-certs--wrap .tk-certs__label {
		flex-basis: 100%;
		max-width: none;
	}

	/* White box like the DNV badge, for logos drawn on white. */
	.tk-certs__box {
		background: #fff;
		border: 1px solid var(--tk-border);
		width: 84px;
		height: 84px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tk-certs__box img {
		display: block;
		width: 66px;
		height: 66px;
		object-fit: contain;
	}

	.tk-certs__box--wide {
		width: auto;
		padding: 0 14px;
	}

	.tk-certs__box--wide img {
		width: auto;
		height: 56px;
	}
}