/* =====================================================================
   Technical Parts Solutions — main.css
   Premium B2B industrial design system. No page builder.
   ================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--navy-900: #06182e;
	--navy-800: #0a2540;
	--navy-700: #0e3358;
	--navy:     #0b4488;   /* logo navy */
	--navy-cyan: #15a6e0;
	--accent:   #15a6e0;   /* logo light blue */
	--accent-600: #0e88bd;
	--accent-700: #0b6e9a;
	--accent-soft: rgba(21,166,224,.12);

	--ink:      #0f1b2a;
	--steel-700:#33425a;
	--steel:    #5b6b7e;
	--steel-300:#9aa7b5;

	--paper:    #f5f7fa;
	--paper-2:  #eef2f7;
	--white:    #ffffff;

	--line:     #e3e8ef;
	--line-2:   #d4dbe5;
	--line-dark: rgba(255,255,255,.10);
	--line-dark-2: rgba(255,255,255,.16);

	--mark-light: #eaf1f8;
	--mark-accent: #15a6e0;

	--font-display: "Archivo", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;
	--skew: -7deg;          /* diagonal divider angle */

	--container: 1200px;
	--radius: 4px;
	--radius-lg: 8px;

	--shadow-sm: 0 1px 2px rgba(15,27,42,.05);
	--shadow: 0 18px 40px -24px rgba(11,32,60,.35);
	--shadow-lg: 0 30px 60px -30px rgba(11,32,60,.45);

	--ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--white);
	line-height: 1.6;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); }

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

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

.screen-reader-text,
.skip-link {
	position: absolute; width: 1px; height: 1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 12px; left: 12px; width: auto; height: auto;
	clip: auto; z-index: 200; background: var(--navy); color: #fff;
	padding: 10px 16px; border-radius: var(--radius);
}

/* ---------- 3. Layout primitives ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.section { padding-block: clamp(64px, 9vw, 120px); }
.section--alt { background: var(--paper); border-block: 1px solid var(--line); }
.section--dark {
	background: var(--navy-900);
	color: #cdd8e6;
	position: relative;
	overflow: hidden;
}
.section--dark h2, .section--dark h3 { color: #fff; }

/* ---------- 4. Eyebrow + section head ---------- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-mono);
	font-size: 12px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent-600);
	margin-bottom: 18px;
}
.eyebrow--light { color: var(--accent); }
.eyebrow__idx {
	font-weight: 500; color: var(--steel-300);
	padding-right: 10px; margin-right: 2px;
	border-right: 1px solid var(--line-2);
}
.section--dark .eyebrow__idx, .eyebrow--light .eyebrow__idx { border-color: var(--line-dark-2); }
.eyebrow__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.section-lead { margin-top: 16px; color: var(--steel); font-size: 1.075rem; max-width: 60ch; }
.section--dark .section-lead { color: #9fb0c4; }

/* ---------- 5. Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-display); font-weight: 600;
	font-size: .95rem; letter-spacing: .01em;
	padding: 13px 22px; border-radius: var(--radius);
	border: 1px solid transparent; cursor: pointer;
	transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
	white-space: nowrap;
}
.btn .tps-icon { transition: transform .25s var(--ease); }
.btn:hover .tps-icon { transform: translateX(3px); }

.btn--primary { background: var(--accent); color: #021321; box-shadow: 0 12px 24px -14px rgba(21,166,224,.7); }
.btn--primary:hover { background: #2bb6ee; }

.btn--outline { background: transparent; color: #fff; border-color: var(--line-dark-2); }
.btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.06); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-600); }

.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: #eef2f7; }

.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--sm { padding: 10px 16px; font-size: .85rem; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- 6. Icons ---------- */
.tps-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tps-icon--xs { width: 16px; height: 16px; stroke-width: 2; }
.tps-icon--sm { width: 18px; height: 18px; stroke-width: 1.8; }

/* ---------- 7. Header (white, Alco-style) ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(11,32,60,.5); }
.site-header__inner { display: flex; align-items: center; gap: 28px; height: 84px; }

.tps-logo { display: inline-flex; align-items: center; margin-right: auto; flex: none; }
.tps-logo__image { display: block; width: 178px; height: auto; aspect-ratio: 672.4521 / 280.5714; object-fit: contain; }

.primary-nav__list { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.primary-nav__list > li { position: relative; }
.primary-nav a {
	font-family: var(--font-display); font-size: .8rem; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
	position: relative; padding-block: 8px;
	transition: color .2s var(--ease);
	white-space: nowrap;
}
.tps-lang-tr .primary-nav__list { gap: clamp(11px, 1.25vw, 20px); }
.tps-lang-tr .primary-nav a { font-size: .76rem; letter-spacing: .045em; }
.tps-lang-tr .header-actions { gap: 13px; }
.primary-nav__item--has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.tps-icon--nav { width: 13px; height: 13px; stroke-width: 2; transition: transform .2s var(--ease); }
.primary-nav__item--has-children:hover .tps-icon--nav,
.primary-nav__item--has-children:focus-within .tps-icon--nav { transform: rotate(180deg); }
.primary-nav a::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 0; height: 3px; background: var(--accent);
	transition: width .25s var(--ease);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--accent); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { width: 100%; }

.nav-dropdown {
	position: absolute; left: 50%; top: calc(100% + 16px); z-index: 20;
	width: 292px; padding: 10px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.primary-nav__item--has-children:hover .nav-dropdown,
.primary-nav__item--has-children:focus-within .nav-dropdown {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-dropdown li + li { border-top: 1px solid var(--line); }
.nav-dropdown a {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 11px 12px; color: var(--steel-700); font-size: .74rem;
	letter-spacing: .035em; line-height: 1.35;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a .tps-icon { color: var(--accent); opacity: 0; transform: translateX(-5px); transition: opacity .2s, transform .2s; }
.nav-dropdown a:hover .tps-icon { opacity: 1; transform: none; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .8rem; color: var(--steel-300); }
.lang-switch a { padding: 2px 2px; transition: color .2s; }
.lang-switch a.is-active { color: var(--accent); }
.lang-switch a:not(.is-active):hover { color: var(--navy); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); }
.nav-toggle__bar { width: 18px; height: 2px; background: var(--navy); transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	position: fixed;
	inset: 84px 0 0;
	z-index: 99;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(6,24,46,.985);
	border-top: 1px solid var(--line-dark);
	padding: 24px max(24px, calc((100vw - var(--container)) / 2 + 24px)) 40px;
	box-shadow: 0 24px 60px rgba(0,0,0,.28);
	animation: mobile-nav-in .32s var(--ease) both;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list a { display: block; padding: 14px 0; color: #d6e1ee; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line-dark); }
.mobile-nav__sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 4px 0 12px 16px; border-bottom: 1px solid var(--line-dark); }
.mobile-nav__sub a { padding: 8px 0; border: 0; color: #9fb0c4; font-size: .84rem; font-weight: 400; }
.mobile-nav__item--has-children > a { color: #fff; border-bottom: 0; padding-bottom: 6px; }
.mobile-nav .btn { margin-top: 20px; }
.mobile-nav__lang { display: flex; gap: 18px; margin-top: 20px; font-family: var(--font-mono); font-size: .85rem; }
.mobile-nav__lang a { color: var(--steel-300); }
.mobile-nav__lang a.is-active { color: var(--accent); }

body.nav-is-open { overflow: hidden; }

@keyframes mobile-nav-in {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: none; }
}

/* ---------- 8. Hero (full-bleed image + diagonal) ---------- */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: clamp(560px, 84vh, 820px);
	display: flex; align-items: center; color: #fff;
}
.hero::before {
	content: ""; position: absolute; inset: -30% -10%; z-index: -1; pointer-events: none;
	background: radial-gradient(circle at var(--pointer-x,72%) var(--pointer-y,38%), rgba(21,166,224,.18), transparent 24%);
	transition: background-position .2s linear;
}
.hero__media {
	position: absolute; inset: -5% 0; background-size: cover; background-position: center; z-index: -2;
	transform: translate3d(0, var(--parallax-y,0px), 0) scale(1.09);
	animation: hero-breathe 18s ease-in-out infinite alternate;
	will-change: transform;
}
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(102deg, rgba(6,18,33,.94) 0%, rgba(6,18,33,.80) 36%, rgba(6,18,33,.40) 66%, rgba(11,32,60,.55) 100%);
}
.hero__inner { position: relative; padding-block: clamp(96px,12vw,150px) clamp(140px,17vw,210px); }
.hero__content { max-width: 780px; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 6.2vw, 4.9rem); line-height: 1.0; letter-spacing: -.025em; color: #fff; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__subtitle { margin-top: 24px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #ccd6e2; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
/* Red diagonal wedge connecting hero to the statement band */
.hero__wedge { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(70px,11vw,150px); background: #0d56a6; clip-path: polygon(0 100%, 100% 0, 100% 101%, 0 101%); z-index: -1; }

/* ---------- 9. Partner strip ---------- */
.partners { padding-block: 30px; border-bottom: 1px solid var(--line); background: var(--white); }
.partners__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-300); text-align: center; margin-bottom: 18px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: tps-marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #9aa7b5; letter-spacing: .01em; white-space: nowrap; transition: color .2s; }
.marquee__item:hover { color: var(--navy); }
@keyframes tps-marquee { to { transform: translateX(-50%); } }

/* ---------- 9b. Eyebrow on coloured grounds ---------- */
.eyebrow--onred { color: #fff; }
.eyebrow--onred .eyebrow__dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.eyebrow--ondark { color: var(--accent); }

/* ---------- 9c. Statement band (red, diagonal) ---------- */
.statement {
	position: relative; color: #fff;
	background: linear-gradient(118deg, #0d56a6 0%, #0b4488 52%, #0a386d 100%);
	margin-top: clamp(-90px, -9vw, -56px);
	padding-block: clamp(120px,15vw,190px) clamp(80px,10vw,140px);
	clip-path: polygon(0 var(--slant,90px), 100% 0, 100% 100%, 0 100%);
}
:root { --slant: clamp(50px, 8vw, 130px); }
.statement__title {
	font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
	font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1.05; letter-spacing: -.01em;
	color: #fff; max-width: 24ch;
}
.statement__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: 940px; margin-top: 34px; }
.statement__cols p { color: rgba(255,255,255,.94); font-size: 1.02rem; }

/* ---------- 9d. Feature band (dark image, diagonal) ---------- */
.feature {
	position: relative; isolation: isolate; overflow: hidden; color: #fff;
	background: #0a1622; margin-top: clamp(-70px,-7vw,-44px);
	padding-block: clamp(150px,17vw,230px) clamp(120px,14vw,180px);
	clip-path: polygon(0 var(--slant,90px), 100% 0, 100% 100%, 0 calc(100% - var(--slant,90px)));
}
.feature__media { position: absolute; inset: -8% 0; background-size: cover; background-position: center; z-index: -2; transform: translate3d(0,var(--parallax-y,0px),0) scale(1.08); will-change: transform; }
.feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,16,28,.93) 0%, rgba(7,16,28,.72) 45%, rgba(7,16,28,.45) 100%); }
.feature__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem,3.2vw,2.7rem); line-height: 1.05; max-width: 24ch; color: #fff; }
.feature__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: 940px; margin-top: 30px; }
.feature__cols p { color: #c2cedb; font-size: 1.02rem; }

/* ---------- 9e. Featured supply (Alco colour-block 4-up) ---------- */
.featured__head { margin-bottom: 34px; }
.featured__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	width: min(1320px, calc(100vw - 72px));
	margin-inline: calc(50% - min(660px, calc(50vw - 36px)));
	box-shadow: var(--shadow); border-radius: var(--radius-lg); overflow: hidden;
	perspective: 1500px;
}
.feat-card { display: flex; flex-direction: column; min-height: 100%; }
.feat-card__img { aspect-ratio: 16 / 11; background-size: cover; background-position: center; filter: saturate(1.02); }
.feat-card__body { min-height: 258px; padding: 32px 30px 34px; flex: 1 1 auto; display: flex; flex-direction: column; }
.feat-card__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.feat-card__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.18rem, 1.45vw, 1.38rem); line-height: 1.1; margin: 7px 0 16px; }
.feat-card__text { font-size: .96rem; line-height: 1.6; }
.feat-card__more {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px;
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
}
.feat-card {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	--spot-x: 50%;
	--spot-y: 50%;
	--image-x: 0px;
	--image-y: 0px;
	--image-drift: 0px;
	--scroll-lift: 0px;
	--hover-lift: 0px;
	position: relative;
	overflow: hidden;
	transform: translate3d(0, calc(var(--scroll-lift) + var(--hover-lift)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .32s var(--ease), box-shadow .45s var(--ease);
}
.feat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(380px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.24), transparent 62%);
	mix-blend-mode: soft-light;
	transition: opacity .3s var(--ease);
}
.feat-card::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
	background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.22) 48%, transparent 70%);
	transform: translateX(-120%); transition: opacity .25s;
}
.feat-card:hover { --hover-lift: -10px; box-shadow: 0 28px 58px -28px rgba(6,24,46,.68); z-index: 2; }
.feat-card:hover::before { opacity: 1; }
.feat-card:hover::after { opacity: 1; animation: card-sheen .9s var(--ease); }
.feat-card__img {
	position: relative;
	z-index: 1;
	transform: translate3d(var(--image-x), calc(var(--image-y) + var(--image-drift)), 0) scale(1.07);
	will-change: transform;
	transition: transform .6s var(--ease), filter .6s var(--ease);
}
.feat-card__body { position: relative; z-index: 2; transition: transform .35s var(--ease); }
.feat-card:hover .feat-card__img {
	transform: translate3d(var(--image-x), calc(var(--image-y) + var(--image-drift)), 0) scale(1.13);
	filter: saturate(1.12) contrast(1.03);
}
.feat-card:hover .feat-card__body { transform: translateZ(18px); }
.feat-card__more .tps-icon { transition: transform .3s var(--ease); }
.feat-card:hover .feat-card__more .tps-icon { transform: translateX(5px); }
.feat-card--light .feat-card__body { background: var(--paper-2); color: var(--ink); }
.feat-card--light .feat-card__label { color: var(--accent); }
.feat-card--muted .feat-card__body { background: #d9dee5; color: var(--ink); }
.feat-card--muted .feat-card__label { color: var(--accent); }
.feat-card--navy .feat-card__body { background: var(--navy-800); color: #d7e2ef; }
.feat-card--navy .feat-card__label { color: var(--navy-cyan); }
.feat-card--navy .feat-card__title { color: #fff; }
.feat-card--red  .feat-card__body { background: #0b6e9a; color: #fff; }
.feat-card--red  .feat-card__label { color: #bfe6f7; }
.feat-card--red .feat-card__title { color: #fff; }

/* ---------- 9f. Approvals / animated brand rail ---------- */
.brand-marquee {
	--brand-gap: 14px;
	position: relative;
	overflow: hidden;
	margin: 36px 0 42px;
	padding: 14px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-marquee::before,
.brand-marquee::after {
	content: ""; position: absolute; top: 4px; bottom: 4px; z-index: 2; width: 82px;
	pointer-events: none; opacity: .75;
}
.brand-marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.brand-marquee::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.brand-marquee__track {
	display: flex; width: max-content;
	animation: brand-rail 38s linear infinite;
	will-change: transform;
}
.brand-marquee__group {
	display: flex; align-items: center; gap: var(--brand-gap);
	padding-right: var(--brand-gap);
	flex: none;
}
.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }
.brand-logo {
	--brand-pad-x: 18px;
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; gap: 12px;
	min-width: 0; min-height: 72px;
	color: var(--steel-700);
	background:
		linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,247,250,.96)),
		radial-gradient(circle at 16% 20%, rgba(21,166,224,.17), transparent 32%);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 12px var(--brand-pad-x) 12px 12px;
	box-shadow: 0 16px 34px -28px rgba(6,24,46,.55);
	white-space: nowrap;
	transition: transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease), background .32s var(--ease);
}
.brand-logo::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: linear-gradient(110deg, transparent 22%, rgba(21,166,224,.16), transparent 68%);
	opacity: 0; transition: opacity .32s var(--ease);
}
.brand-logo__mark {
	display: grid; place-items: center; flex: none;
	width: 72px; height: 48px; border-radius: 16px;
	font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; font-weight: 600;
	color: var(--navy);
	background:
		linear-gradient(145deg, #fff, #f6f9fc),
		radial-gradient(circle at 20% 10%, rgba(21,166,224,.12), transparent 44%);
	border: 1px solid rgba(219,226,234,.9);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 12px 24px -20px rgba(6,24,46,.7);
	overflow: hidden;
	transition: transform .32s var(--ease), border-color .32s var(--ease);
}
.brand-logo__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 56px;
	max-height: 34px;
	object-fit: contain;
}
.brand-logo__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: .98rem;
	letter-spacing: .015em;
	line-height: 1.05;
}
.brand-logo:hover {
	border-color: rgba(21,166,224,.58);
	background: #fff;
	transform: translateY(-4px);
	box-shadow: 0 20px 38px -24px rgba(6,24,46,.52);
}
.brand-logo:hover::after { opacity: 1; }
.brand-logo:hover .brand-logo__mark { border-color: rgba(21,166,224,.36); transform: translateY(-1px); }
.brand-logo--directory {
	width: 100%;
	justify-content: flex-start;
	border-radius: var(--radius);
	padding: 16px;
}
.brand-logo--directory .brand-logo__name { white-space: normal; line-height: 1.12; }
.brand-logo--directory .brand-logo__mark { width: 82px; height: 56px; }
.brand-logo--directory .brand-logo__image { max-width: 66px; max-height: 40px; }
.approvals__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 940px; margin-top: 8px; }
.approvals__notes p { color: var(--steel); }

@keyframes brand-rail {
	to { transform: translate3d(-50%,0,0); }
}

/* ---------- 10. Cards ---------- */
.cards { display: grid; gap: 22px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px 28px;
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
	overflow: hidden;
}
.card::before {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
	background: var(--accent); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	transition: width .3s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: var(--shadow); }
.card:hover::before { width: 100%; }
.card::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
	background: radial-gradient(280px circle at var(--card-x,50%) var(--card-y,50%), rgba(21,166,224,.14), transparent 58%);
	transition: opacity .3s var(--ease);
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card__icon { transition: transform .45s var(--ease), background .35s, color .35s; }
.card:hover .card__icon { transform: translateY(-3px) rotate(-3deg) scale(1.06); background: var(--accent); color: var(--navy-900); }
.card--link { display: block; color: inherit; }
.card--link:focus-visible { outline-offset: 4px; }
.card__link-label {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
	font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--accent-600);
}
.section--alt .card { background: var(--white); }

.card__icon {
	display: inline-grid; place-items: center;
	width: 52px; height: 52px; border-radius: var(--radius);
	background: var(--navy-900); color: var(--accent);
	margin-bottom: 22px;
}
.card__icon .tps-icon { width: 26px; height: 26px; }
.card__icon--sm { width: 44px; height: 44px; margin-bottom: 18px; }
.card__icon--sm .tps-icon { width: 22px; height: 22px; }
.card__icon--ghost { background: var(--accent-soft); color: var(--accent-600); }

.card__title { font-size: 1.25rem; margin-bottom: 10px; }
.card__title--sm { font-size: 1.08rem; }
.card__text { color: var(--steel); font-size: .96rem; }

.card__num {
	position: absolute; top: 22px; right: 24px;
	font-family: var(--font-mono); font-size: .85rem; color: var(--steel-300);
}
.card__rule { display: block; width: 28px; height: 2px; background: var(--line-2); margin-top: 22px; transition: width .3s var(--ease), background .3s var(--ease); }
.card:hover .card__rule { width: 48px; background: var(--accent); }

.industry-cards { position: relative; }
.industry-cards .card--industry { min-height: 260px; }

.section--industries {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 4% 14%, rgba(21,166,224,.15), transparent 30%),
		radial-gradient(circle at 100% 94%, rgba(21,166,224,.12), transparent 28%),
		linear-gradient(180deg, #f7fbfd 0%, #fff 42%, #f4fbfd 100%);
}
.industry-mosaic {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-areas:
		"oil oil oil oil petro petro"
		"power power sub sub telecom telecom"
		"power power industrial industrial industrial industrial";
	gap: 18px;
	margin-top: 8px;
	perspective: 1500px;
}
.industry-tile {
	--tilt-x: 0deg;
	--tilt-y: 0deg;
	--spot-x: 50%;
	--spot-y: 50%;
	--image-x: 0px;
	--image-y: 0px;
	--image-drift: 0px;
	--scroll-lift: 0px;
	--hover-lift: 0px;
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: 220px;
	align-items: flex-end;
	overflow: hidden;
	border: 1px solid rgba(21,166,224,.24);
	border-radius: var(--radius);
	padding: 28px;
	color: #fff;
	background-size: cover;
	background-position: center;
	box-shadow: 0 22px 46px -34px rgba(6,24,46,.65);
	transform: translate3d(0, calc(var(--scroll-lift) + var(--hover-lift)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
	transform-style: preserve-3d;
	will-change: transform;
	transition: transform .32s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.industry-tile:nth-child(1) { grid-area: oil; }
.industry-tile:nth-child(2) { grid-area: petro; }
.industry-tile:nth-child(3) { grid-area: power; }
.industry-tile:nth-child(4) { grid-area: sub; }
.industry-tile:nth-child(5) { grid-area: telecom; }
.industry-tile:nth-child(6) { grid-area: industrial; }
.industry-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: inherit;
	background-size: cover;
	background-position: inherit;
	transform: translate3d(var(--image-x), calc(var(--image-y) + var(--image-drift)), 0) scale(1.08);
	will-change: transform;
	transition: transform .7s var(--ease), filter .7s var(--ease);
}
.industry-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(78,203,255,.24), transparent 58%),
		linear-gradient(180deg, rgba(5,18,30,.36) 0%, rgba(5,18,30,.86) 100%),
		linear-gradient(90deg, rgba(3,45,62,.72), rgba(6,18,33,.42));
}
.industry-tile:hover {
	--hover-lift: -7px;
	border-color: rgba(21,166,224,.62);
	box-shadow: 0 28px 60px -34px rgba(6,24,46,.7);
}
.industry-tile:hover::before {
	transform: translate3d(var(--image-x), calc(var(--image-y) + var(--image-drift)), 0) scale(1.14);
	filter: saturate(1.08) contrast(1.05);
}
.industry-tile__icon {
	position: absolute;
	top: 28px;
	left: 28px;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: var(--radius);
	background: rgba(255,255,255,.08);
	color: #eaf8ff;
	backdrop-filter: blur(7px);
	transform: translateZ(24px);
	transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.industry-tile:hover .industry-tile__icon { transform: translateZ(30px) scale(1.08); border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.14); }
.industry-tile__icon .tps-icon { width: 21px; height: 21px; }
.industry-tile__body {
	display: grid;
	gap: 9px;
	max-width: 62ch;
	padding-top: 70px;
	transform: translateZ(18px);
	transition: transform .35s var(--ease);
}
.industry-tile:hover .industry-tile__body { transform: translate3d(0,-3px,24px); }
.industry-tile__title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.08rem, 1.45vw, 1.34rem);
	font-weight: 800;
	line-height: 1.12;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0,0,0,.34);
}
.industry-tile__text {
	display: block;
	color: rgba(255,255,255,.9);
	font-size: .98rem;
	line-height: 1.55;
	max-width: 52ch;
}
.industry-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255,255,255,.88);
}
.industry-tile__more .tps-icon { transition: transform .3s var(--ease); }
.industry-tile:hover .industry-tile__more .tps-icon { transform: translateX(5px); }

/* supply lists */
.card--supply .card__list { margin-top: 4px; display: grid; gap: 9px; }
.card--supply .card__list li {
	position: relative; padding-left: 18px;
	font-size: .9rem; color: var(--steel-700);
}
.card--supply .card__list li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 6px; height: 6px; border: 1.5px solid var(--accent);
	transform: rotate(45deg);
}

.card--value .card__num, .card--service .card__num { color: var(--accent); font-weight: 500; }

/* ---------- 11. Process ---------- */
.process { display: grid; gap: 0; counter-reset: step; max-width: 920px; }
.process__step {
	display: grid; grid-template-columns: auto 1fr; gap: 28px;
	padding: 30px 0; border-top: 1px solid var(--line-dark);
}
.process__step:last-child { border-bottom: 1px solid var(--line-dark); }
.process__num { font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent); padding-top: 4px; min-width: 44px; }
.process__title { font-size: 1.3rem; margin-bottom: 8px; }
.process__text { color: #9fb0c4; max-width: 60ch; }

/* ---------- 12. CTA band ---------- */
.cta {
	position: relative; isolation: isolate; overflow: hidden; color: #fff;
	background: #0a1622;
	clip-path: polygon(0 var(--slant,90px), 100% 0, 100% 100%, 0 100%);
	margin-top: clamp(-50px,-5vw,-30px);
}
.cta__media { position: absolute; inset: -10% 0; background-size: cover; background-position: center; z-index: -2; transform: translate3d(0,var(--parallax-y,0px),0) scale(1.08); will-change: transform; }
.cta__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(13,86,166,.93) 0%, rgba(11,68,136,.86) 42%, rgba(7,16,28,.84) 100%); }
.cta__inner {
	position: relative; display: grid; grid-template-columns: 1.4fr auto;
	gap: 40px; align-items: center;
	padding-block: clamp(96px, 12vw, 150px) clamp(64px, 8vw, 96px);
}
.cta__title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: #fff; max-width: 22ch; }
.cta__lead { margin-top: 14px; color: #aebfd2; max-width: 52ch; }
.cta__actions { display: flex; flex-direction: column; gap: 14px; min-width: 230px; }

/* ---------- 13. Page hero ---------- */
.page-hero {
	position: relative; overflow: hidden;
	background: radial-gradient(120% 140% at 85% -20%, var(--navy-700), var(--navy-900) 65%);
	color: #fff; padding-block: clamp(64px, 9vw, 110px) clamp(48px, 6vw, 72px);
}
.page-hero__grid-bg {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 52px 52px;
	mask-image: radial-gradient(110% 90% at 50% 0%, #000 45%, transparent 100%);
	transform: translate3d(var(--grid-x,0), var(--parallax-y,0), 0);
	will-change: transform;
	animation: grid-drift 16s linear infinite alternate;
}
.page-hero__inner { position: relative; max-width: 820px; min-width: 0; padding-bottom: clamp(10px,3vw,30px); }
.page-hero__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.page-hero__lead { margin-top: 18px; font-size: 1.12rem; color: #adbed1; max-width: 62ch; }
.page-hero__wedge { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px,7vw,90px); background: var(--accent); clip-path: polygon(0 100%, 100% 0, 100% 101%, 0 101%); }

/* ---------- 13b. Breadcrumbs ---------- */
.breadcrumbs { margin: -28px 0 44px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--steel-300); }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--line-2); }
.breadcrumbs a:hover { color: var(--accent-600); }
.breadcrumbs [aria-current="page"] { color: var(--steel-700); }

/* ---------- 13c. Detail pages ---------- */
.detail-page__intro { display: grid; grid-template-columns: 88px minmax(0, 760px); gap: 30px; align-items: center; margin-bottom: 54px; }
.detail-page__icon { display: grid; place-items: center; width: 88px; height: 88px; background: var(--navy-900); color: var(--accent); border-radius: var(--radius-lg); }
.detail-page__icon .tps-icon { width: 42px; height: 42px; }
.detail-page__lede { font-family: var(--font-display); font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 600; line-height: 1.35; color: var(--navy); }
.detail-page__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); background: var(--paper); }
.detail-panel h2 { margin: 12px 0 26px; font-size: 1.55rem; }
.detail-panel--dark { background: var(--navy-900); color: #d8e3ef; border-color: var(--navy-900); }
.detail-panel--dark h2 { color: #fff; }
.detail-list { display: grid; gap: 15px; }
.detail-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--steel-700); }
.detail-list .tps-icon { margin-top: 4px; color: var(--accent-600); }
.detail-panel--dark .detail-list li { color: #b8c7d8; }
.detail-panel--dark .detail-list .tps-icon { color: var(--accent); }
.detail-support { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.related-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--steel-700); transition: color .2s, border-color .2s, transform .2s; }
.related-links a:hover { color: var(--navy); border-color: var(--accent); transform: translateY(-2px); }
.related-links .tps-icon { color: var(--accent); }

/* ---------- 13d. Brands and company pages ---------- */
.brand-directory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.brand-directory__item {
	min-height: 108px; display: grid; place-items: stretch;
	padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
	background:
		linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,248,251,.96)),
		radial-gradient(circle at 90% 0%, rgba(21,166,224,.12), transparent 34%);
	text-align: left;
}
.brand-note { display: flex; align-items: flex-start; gap: 14px; max-width: 900px; margin-top: 36px; padding: 20px 22px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--steel-700); font-size: .9rem; }
.brand-note .tps-icon { color: var(--accent-600); margin-top: 3px; }
.company-timeline { max-width: 920px; margin-inline: auto; border-top: 1px solid var(--line); }
.company-timeline__item { display: grid; grid-template-columns: 130px 1fr; gap: 34px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.company-timeline__year { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; color: var(--accent-600); }
.company-timeline__item h2 { font-size: 1.35rem; margin-bottom: 10px; }
.company-timeline__item p { color: var(--steel); max-width: 64ch; }

/* ---------- 14. About story ---------- */
.about-story { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.about-story__aside .eyebrow { margin-bottom: 12px; }
.about-story__est { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--navy); }
.about-story__body { display: grid; gap: 20px; font-size: 1.08rem; color: var(--steel-700); max-width: 64ch; }
.about-story__body p:first-child { font-size: 1.2rem; color: var(--ink); }

/* ---------- 15. Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: start; }
.contact__form-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow); }
.contact__form-title { font-size: 1.5rem; margin-bottom: 24px; }

.rfq-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rfq-form__hp { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--steel-700); letter-spacing: .01em; }
.field .req { color: var(--accent-600); }
.field input, .field textarea {
	font: inherit; font-size: .95rem; color: var(--ink);
	padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius);
	background: var(--paper); transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus {
	outline: none; border-color: var(--accent); background: #fff;
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { resize: vertical; }
.rfq-form .btn { margin-top: 6px; }
.rfq-form__consent { margin-top: 14px; font-size: .8rem; color: var(--steel-300); text-align: center; }

.notice { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius); margin-bottom: 24px; font-size: .95rem; }
.notice--success { background: rgba(21,166,224,.10); border: 1px solid rgba(21,166,224,.35); color: var(--navy); }
.notice--success .tps-icon { color: var(--accent-600); }
.notice--error { background: #fdecec; border: 1px solid #f3c4c4; color: #9c2a2a; }

.contact__panel {
	position: relative; overflow: hidden;
	background: var(--navy-900); color: #cdd8e6;
	border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px);
}
.contact__panel-title { color: #fff; font-size: 1.4rem; }
.contact__panel-text { margin-top: 12px; color: #9fb0c4; font-size: .96rem; }
.contact__list { margin-top: 30px; display: grid; gap: 22px; }
.contact__list li { display: flex; gap: 16px; align-items: flex-start; }
.contact__list-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line-dark-2); border-radius: var(--radius); color: var(--accent); }
.contact__list-body { display: flex; flex-direction: column; gap: 3px; }
.contact__list-label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-300); }
.contact__list-body a, .contact__list-body span:not(.contact__list-label) { color: #e4ecf4; font-size: 1rem; }
.contact__list-body a:hover { color: var(--accent); }
.contact__panel-foot { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.contact__panel-foot img { width: 190px; padding: 10px 12px; background: #fff; border-radius: var(--radius); }

/* ---------- 16. Footer ---------- */
.site-footer { background: var(--navy-900); color: #9fb0c4; padding-top: clamp(56px, 7vw, 84px); }
.site-footer .tps-logo { width: fit-content; padding: 10px 12px; background: #fff; border-radius: var(--radius); }
.site-footer .tps-logo__image { width: 185px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: 48px; padding-bottom: 56px; }
.site-footer__about { margin-top: 20px; max-width: 42ch; font-size: .96rem; }
.site-footer__est { margin-top: 16px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--steel-300); }
.site-footer__heading { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); margin-bottom: 18px; font-weight: 500; }
.site-footer__col ul { display: grid; gap: 12px; }
.site-footer__col a { font-size: .96rem; color: #c2d0e0; transition: color .2s; }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__contact li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.site-footer__contact .tps-icon { color: var(--accent); }
.site-footer__contact .btn { margin-top: 8px; }
.site-footer__bar {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
	padding-block: 24px; border-top: 1px solid var(--line-dark);
	font-size: .85rem; color: var(--steel-300);
}
.site-footer__mark { font-family: var(--font-mono); letter-spacing: .08em; }

/* ---------- 17. Motion system ---------- */
.reveal {
	opacity: 0;
	transform: translate3d(0,34px,0) scale(.985);
	filter: blur(5px);
	transition:
		opacity .8s var(--ease) var(--reveal-delay,0ms),
		transform .9s var(--ease) var(--reveal-delay,0ms),
		filter .8s var(--ease) var(--reveal-delay,0ms);
}
.reveal[data-reveal="left"] { transform: translate3d(-42px,0,0); }
.reveal[data-reveal="right"] { transform: translate3d(42px,0,0); }
.reveal[data-reveal="scale"] { transform: scale(.92); }
.reveal[data-reveal="tile"] { transform: translate3d(0,52px,0) scale(.965); filter: blur(8px) saturate(.86); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
.feat-card.reveal.is-visible,
.industry-tile.reveal.is-visible {
	transform: translate3d(0, calc(var(--scroll-lift, 0px) + var(--hover-lift, 0px)), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.hero .reveal:nth-child(1) { --reveal-delay: 80ms; }
.hero .reveal:nth-child(2) { --reveal-delay: 180ms; }
.hero .reveal:nth-child(3) { --reveal-delay: 300ms; }
.hero .reveal:nth-child(4) { --reveal-delay: 420ms; }
.cards .reveal:nth-child(2), .featured__grid .feat-card:nth-child(2), .industry-mosaic .industry-tile:nth-child(2) { --reveal-delay: 80ms; }
.cards .reveal:nth-child(3), .featured__grid .feat-card:nth-child(3), .industry-mosaic .industry-tile:nth-child(3) { --reveal-delay: 160ms; }
.cards .reveal:nth-child(4), .featured__grid .feat-card:nth-child(4), .industry-mosaic .industry-tile:nth-child(4) { --reveal-delay: 240ms; }
.cards .reveal:nth-child(5) { --reveal-delay: 320ms; }
.cards .reveal:nth-child(6) { --reveal-delay: 400ms; }
.industry-mosaic .industry-tile:nth-child(5) { --reveal-delay: 320ms; }
.industry-mosaic .industry-tile:nth-child(6) { --reveal-delay: 400ms; }
.process__step { transition: border-color .35s, background .35s, padding-left .35s var(--ease); }
.process__step:hover { padding-left: 14px; border-color: rgba(21,166,224,.42); background: linear-gradient(90deg, rgba(21,166,224,.07), transparent 72%); }
.process__num { transition: transform .35s var(--ease), color .35s; }
.process__step:hover .process__num { transform: translateX(5px) scale(1.08); color: #fff; }

.scroll-progress {
	position: fixed; left: 0; top: 0; z-index: 300; width: 100%; height: 3px;
	transform: scaleX(var(--scroll-progress,0)); transform-origin: left center;
	background: linear-gradient(90deg, var(--accent), #68d3ff);
	box-shadow: 0 0 12px rgba(21,166,224,.55);
	pointer-events: none;
}

.btn {
	--mag-x: 0px; --mag-y: 0px; --btn-lift: 0px;
	transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--btn-lift)), 0);
	will-change: transform;
}
.btn--primary:hover, .btn--light:hover { --btn-lift: -2px; }

@keyframes hero-breathe {
	from { transform: translate3d(0,var(--parallax-y,0px),0) scale(1.09); }
	to { transform: translate3d(0,var(--parallax-y,0px),0) scale(1.14); }
}
@keyframes card-sheen {
	to { transform: translateX(120%); }
}
@keyframes grid-drift {
	to { background-position: 28px 18px, 28px 18px; }
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 1080px) {
	.cards--4 { grid-template-columns: repeat(2, 1fr); }
	.featured__grid { grid-template-columns: repeat(2, 1fr); width: 100%; margin-inline: 0; }
	.industry-mosaic {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"oil oil petro petro"
			"power power sub sub"
			"power power telecom telecom"
			"industrial industrial industrial industrial";
	}
	.site-header__inner { gap: 18px; }
}
@media (max-width: 1240px) and (min-width: 961px) {
	.primary-nav__list { gap: 12px; }
	.primary-nav a { font-size: .74rem; letter-spacing: .035em; }
	.header-actions { gap: 11px; }
	.tps-logo__image { width: 158px; }
}
@media (max-width: 960px) {
	body { padding-top: 84px; }
	.site-header { position: fixed; inset: 0 0 auto; width: 100%; }
	.primary-nav, .header-actions__cta { display: none; }
	.nav-toggle { display: flex; }
	.cards--3 { grid-template-columns: repeat(2, 1fr); }
	.statement__cols, .feature__cols, .approvals__notes { grid-template-columns: 1fr; gap: 22px; }
	.industry-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"oil oil"
			"petro sub"
			"power power"
			"telecom telecom"
			"industrial industrial";
	}
	.industry-tile { min-height: 210px; }
	.about-story { grid-template-columns: 1fr; gap: 28px; }
	.contact__grid { grid-template-columns: 1fr; }
	.cta__inner { grid-template-columns: 1fr; }
	.cta__actions { flex-direction: row; flex-wrap: wrap; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.site-footer__brand { grid-column: 1 / -1; }
	.detail-page__grid { grid-template-columns: 1fr; }
	.brand-directory { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	body { padding-top: 74px; }
	.container { padding-inline: 18px; }
	.site-header__inner { height: 74px; gap: 10px; }
	.mobile-nav { inset-block-start: 74px; padding: 18px 20px 34px; }
	.site-header .lang-switch { display: none; }
	.tps-logo { min-width: 0; }
	.tps-logo__image { width: 142px; }
	.page-hero__title { font-size: clamp(1.55rem, 7.6vw, 2rem); overflow-wrap: anywhere; hyphens: auto; }
	.page-hero__lead { font-size: 1rem; overflow-wrap: anywhere; }
	.tps-lang-tr .page-hero__title { font-size: clamp(1.28rem, 5.9vw, 1.72rem); line-height: 1.1; padding-right: 12px; }
	.tps-lang-tr .page-hero__lead { padding-right: 14px; }
	.cards--3, .cards--4 { grid-template-columns: 1fr; }
	.industry-cards {
		display: flex;
		gap: 14px;
		margin-inline: -18px;
		padding: 4px 18px 20px;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 18px;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--accent) var(--paper-2);
	}
	.industry-cards::-webkit-scrollbar { height: 4px; }
	.industry-cards::-webkit-scrollbar-track { background: var(--paper-2); border-radius: 99px; margin-inline: 18px; }
	.industry-cards::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }
	.industry-cards .card--industry {
		flex: 0 0 min(82vw, 310px);
		min-height: 228px;
		padding: 24px 22px 22px;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: grid;
		grid-template-columns: 50px 1fr;
		grid-template-rows: auto auto 1fr auto;
		column-gap: 16px;
		align-content: start;
	}
	.industry-cards .card--industry .card__num {
		top: 17px; right: 18px; font-size: .72rem;
	}
	.industry-cards .card--industry .card__icon {
		grid-column: 1; grid-row: 1 / span 2;
		width: 50px; height: 50px; margin: 0;
	}
	.industry-cards .card--industry .card__title {
		grid-column: 2; grid-row: 1;
		align-self: end;
		margin: 3px 28px 7px 0;
		font-size: 1.08rem;
		line-height: 1.15;
	}
	.industry-cards .card--industry .card__text {
		grid-column: 1 / -1; grid-row: 3;
		margin-top: 22px;
		font-size: .93rem;
		line-height: 1.62;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.industry-cards .card--industry .card__rule {
		grid-column: 1 / -1; grid-row: 4;
		width: 54px; margin-top: 20px; background: var(--accent);
	}
	.industry-cards .card--industry .card__link-label {
		grid-column: 1 / -1; grid-row: 4;
		margin-top: 20px;
	}
	.industry-mosaic {
		grid-template-columns: 1fr;
		grid-template-areas:
			"oil"
			"petro"
			"power"
			"sub"
			"telecom"
			"industrial";
		gap: 14px;
	}
	.industry-tile { min-height: 235px; padding: 24px 22px; }
	.industry-tile__icon { top: 22px; left: 22px; }
	.industry-tile__body { padding-top: 64px; }
	.industry-tile__text { font-size: .94rem; }
	.featured__grid { grid-template-columns: 1fr; width: 100%; margin-inline: 0; }
	.feat-card__body { min-height: 230px; padding: 28px 24px 30px; }
	.rfq-form__row { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: 1fr; }
	.process__step { grid-template-columns: 1fr; gap: 10px; }
	.cta__actions { flex-direction: column; }
	.mobile-nav__sub { grid-template-columns: 1fr; }
	.detail-page__intro { grid-template-columns: 1fr; gap: 20px; }
	.detail-page__icon { width: 70px; height: 70px; }
	.detail-support { grid-template-columns: 1fr; }
	.related-links { grid-template-columns: 1fr; }
	.brand-directory { grid-template-columns: repeat(2, 1fr); }
	.company-timeline__item { grid-template-columns: 1fr; gap: 8px; }
	.brand-marquee { --brand-gap: 10px; margin-inline: -18px; padding-inline: 18px; }
	.brand-marquee::before, .brand-marquee::after { width: 36px; }
	.brand-logo { min-height: 52px; --brand-pad-x: 15px; }
	.brand-logo__mark { width: 54px; height: 38px; border-radius: 13px; font-size: .62rem; }
	.brand-logo__image { max-width: 42px; max-height: 27px; }
	.brand-logo__name { font-size: .84rem; }
	.brand-logo--directory { min-height: 60px; padding: 11px; }
	.brand-logo--directory .brand-logo__mark { width: 60px; height: 42px; }
	.brand-logo--directory .brand-logo__image { max-width: 48px; max-height: 30px; }
}

/* ---------- 19. Prose (generic page/post content) ---------- */
.prose { max-width: 72ch; color: var(--steel-700); font-size: 1.05rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.4em; }
.prose a { color: var(--accent-600); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: 20px; color: var(--ink); font-style: italic; }
.prose img { border-radius: var(--radius-lg); }
.prose .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); margin-right: 6px; }
.prose .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; filter: none; }
	.marquee__track { animation: none; }
	.brand-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: thin; }
	.brand-marquee::before, .brand-marquee::after { display: none; }
	.brand-marquee__track { animation: none; }
	.brand-marquee__group[aria-hidden="true"] { display: none; }
	.hero__media, .feature__media, .cta__media, .page-hero__grid-bg { transform: none !important; }
	.feat-card, .industry-tile, .feat-card.reveal.is-visible, .industry-tile.reveal.is-visible { transform: none !important; }
	.feat-card__img, .industry-tile::before { transform: none !important; }
	.scroll-progress { display: none; }
}