/* ==========================================================================
   YIMEIDE — English homepage
   Design system: industrial cold chain. Ink navy, brand blue, frost light.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
 --ink:        #060a12;
 --ink-2:      #0b1424;
 --ink-3:      #131f34;
 --blue:       #00319f;
 --blue-hi:    #0a44c4;
 --frost:      #9ecbff;
 --ice:        #cfe4ff;
 --paper:      #f4f7fc;
 --white:      #ffffff;
 --ink-text:   #10182a;
 --muted:      #5a6a85;
 --muted-2:    #8a99b1;
 --line-dark:  rgba(255,255,255,.14);
 --line-light: rgba(6,10,18,.10);
 --hdr: 88px;
 /* --edge: clamp(20px, 5vw, 64px); */
 --maxw: 80%;
 --font-d: 'Sora', 'Segoe UI', system-ui, -apple-system, 'Microsoft YaHei', sans-serif;
 --font-b: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Microsoft YaHei', sans-serif;
 --ease: cubic-bezier(.2, .7, .2, 1);
}
/* ---------- reset ---------- */
*, *::before, *::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--ink);
	color: var(--ink-text);
	font: 400 16px/1.7 var(--font-b);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, ol, ul {
	margin: 0;
	padding: 0;
}
ol, ul {
	list-style: none;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}
::selection {
	background: var(--blue);
	color: #fff;
}
.skip-link {
	position: fixed;
	top: -100px;
	left: 24px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--blue);
	color: #fff;
	font-size: 13px;
	transition: top .2s;
}
.skip-link:focus {
	top: 20px;
}
/* ---------- layout ---------- */
.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--edge);
}
section[id], footer[id] {
	scroll-margin-top: calc(var(--hdr) + 18px);
}
/* ---------- type ---------- */
.kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 11px/1 var(--font-d);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 20px;
}
.kicker::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .75;
}
.kicker-light {
	color: var(--frost);
}
.sec-title {
	font: 500 clamp(1.5rem, 2.7vw, 2rem)/1.08 var(--font-d);
	letter-spacing: -.028em;
	color: var(--ink-text);
}
.sec-sub {
	margin-top: 20px;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.78;
	color: var(--muted);
}
.sec-head {
	max-width: 100%;
}
.label {
	font: 400 12.5px/1.6 var(--font-b);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--muted-2);
}
/* ---------- buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	height: 54px;
	padding: 0 30px;
	border-radius: 3px;
	font: 500 12.5px/1 var(--font-d);
	letter-spacing: .13em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .35s var(--ease), background .3s, box-shadow .35s, color .3s, border-color .3s;
}
.btn svg {
	width: 16px;
	height: 16px;
	transition: transform .35s var(--ease);
}
.btn:hover svg {
	transform: translateX(4px);
}
.btn-primary {
	/* background: var(--blue); */
	color: #fff;
	border: 1px solid #fff;/* box-shadow: 0 16px 34px -18px rgba(0,49,159,.95), inset 0 1px 0 rgba(255,255,255,.22); */
}
header.is-scrolled .btn-primary {
	color: #000;
	border: 1px solid #000;
}
.btn-primary:hover {
	background: #499de4;
	color: #fff;
	/* transform: translateY(-2px); */
	border-color: #499de4;/* box-shadow: 0 22px 42px -18px rgba(0,49,159,1), inset 0 1px 0 rgba(255,255,255,.25); */
}
header.is-scrolled .btn-primary:hover {
	color: #fff;
	border-color: #499de4;
}
.btn-ghost {
	color: #fff;
	border: 1px solid rgba(255,255,255,.32);
	background: rgba(255,255,255,.05);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.btn-ghost:hover {
	background: rgba(255,255,255,.13);
	border-color: rgba(255,255,255,.55);
}
.btn-sm {
	height: 44px;
	padding: 0 22px;
	font-size: 15px;
}
.btn-lg {
	height: 60px;
	padding: 0 36px;
}
/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120;
	height: var(--hdr);
	transition: background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s;
}
.header-inner {
	height: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	/* padding-inline: var(--edge); */
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 52px);
}
.logo {
	flex: 0 0 auto;
}
.logo img {
	height: 40px;
	width: auto;
	transition: filter .4s var(--ease), opacity .3s;
}
.nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
	margin-left: auto;
	/* stretch to the full header height so dropdown panels anchor to its bottom edge */
	align-self: stretch;
}
.nav-link {
	position: relative;
	font: 500 15px/1 var(--font-d);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255,255,255,.82);
	padding: 8px 0;
	transition: color .3s;
}
.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s var(--ease);
}
.nav-link:hover::after {
	transform: scaleX(1);
}
/* ==========================================================================
   PRODUCTS DROPDOWN — level 1 panel, level 2 flyout
   ========================================================================== */
.nav-item {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
}
.nav-link--parent {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.chev {
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	transition: transform .35s var(--ease);
}
.nav-item.has-mega:hover .chev, .nav-item.has-mega:focus-within .chev {
 transform: rotate(180deg);
}
.mega {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, 6px);
	/* transparent bridge that keeps the hover alive over the header gutter */
	padding-top: 12px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s var(--ease), transform .38s var(--ease), visibility .3s;
	z-index: 10;
}
.nav-item.has-mega:hover .mega, .nav-item.has-mega:focus-within .mega {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translate(-50%, 0);
}
.mega-panel {
	width: 264px;
	padding: 8px 0;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 34px 64px -30px rgba(6,10,18,.45), 0 0 0 1px rgba(6,10,18,.07);
}
.mega-l1 > li {
	position: relative;
}
.mega-l1-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 16px 13px 20px;
	font: 500 12.5px/1.25 var(--font-d);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-text);
	transition: background .25s, color .25s;
}
/* accent bar that slides in on the hovered category */
.mega-l1-link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	bottom: 7px;
	width: 2px;
	background: var(--blue);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .35s var(--ease);
}
.mega-l1 > li:hover > .mega-l1-link, .mega-l1 > li:focus-within > .mega-l1-link {
 background: var(--paper);
 color: var(--blue);
}
.mega-l1 > li:hover > .mega-l1-link::before, .mega-l1 > li:focus-within > .mega-l1-link::before {
 transform: scaleY(1);
}
.chev-r {
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	color: var(--muted-2);
	transition: color .25s, transform .3s var(--ease);
}
.mega-l1 > li:hover > .mega-l1-link .chev-r, .mega-l1 > li:focus-within > .mega-l1-link .chev-r {
 color: var(--blue);
 transform: translateX(2px);
}
/* level 2 opens to the right of the hovered level 1 row */
.mega-l2 {
	position: absolute;
	left: 100%;
	top: -8px;
	width: 330px;
	max-height: min(64vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 0;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 34px 64px -30px rgba(6,10,18,.45), 0 0 0 1px rgba(6,10,18,.07);
	opacity: 0;
	visibility: hidden;
	transform: translateX(8px);
	transition: opacity .3s var(--ease), transform .38s var(--ease), visibility .3s;
}
.mega-l1 > li:hover > .mega-l2, .mega-l1 > li:focus-within > .mega-l2 {
 opacity: 1;
 visibility: visible;
 transform: none;
}
.mega-l2 li a {
	display: block;
	padding: 10px 20px;
	font: 400 14px/1.35 var(--font-b);
	color: var(--muted);
	transition: background .25s, color .25s, padding-left .25s var(--ease);
}
.mega-l2 li a:hover {
	background: var(--paper);
	color: var(--ink-text);
	padding-left: 24px;
}
.mega-l2::-webkit-scrollbar {
 width: 6px;
}
.mega-l2::-webkit-scrollbar-thumb {
 background: rgba(6,10,18,.18);
 border-radius: 3px;
}
.nav-foot {
	display: none;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 26px);
}
/* a phone number reads better with tighter tracking than a label */
.btn.header-cta {
	letter-spacing: .06em;
}
.header-cta .ico-phone {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}
/* the phone glyph stays put, unlike the arrow icons elsewhere */
.header-cta:hover .ico-phone {
	transform: none;
}
/* ---------- language dropdown ---------- */
.lang-select {
	position: relative;
}
.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 11px;
	border: 1px solid rgba(255,255,255,.36);
	border-radius: 3px;
	color: rgba(255,255,255,.9);
	font: 500 11.5px/1 var(--font-d);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .3s, border-color .3s, background .3s;
}
.lang-toggle:hover,
.lang-select.is-open .lang-toggle {
	color: #fff;
	border-color: #fff;
}
.lang-toggle .ico-globe {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}
.lang-toggle .lang-chev {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	transition: transform .35s var(--ease);
}
.lang-select.is-open .lang-chev {
	transform: rotate(180deg);
}
.lang-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 158px;
	padding: 6px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 34px 64px -30px rgba(6,10,18,.45), 0 0 0 1px rgba(6,10,18,.07);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
	z-index: 10;
}
.lang-select.is-open .lang-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}
.lang-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 10px 12px;
	border-radius: 4px;
	font: 500 13px/1.2 var(--font-b);
	color: var(--ink-text);
	transition: background .25s, color .25s;
}
.lang-menu a:hover {
	background: var(--paper);
	color: var(--blue);
}
.lang-menu a.is-active {
	color: var(--blue);
}
.lang-menu a.is-active::after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}
.menu-toggle {
	display: none;
	width: 34px;
	height: 34px;
	position: relative;
}
.menu-toggle span {
	position: absolute;
	left: 6px;
	right: 6px;
	height: 1.5px;
	background: #fff;
	border-radius: 2px;
	transition: transform .35s var(--ease), opacity .25s, background .4s;
}
.menu-toggle span:first-child {
	top: 13px;
}
.menu-toggle span:last-child {
	top: 19px;
}
/* transparent over hero */
.site-header.is-top .logo img {
	filter: brightness(0) invert(1);
}
/* frosted after scroll */
.site-header.is-scrolled {
	background: rgba(255,255,255,1);
	/* no backdrop-filter here: the background is fully opaque so the blur adds
	   nothing, but it would make the header the containing block for the fixed
	   mobile .nav overlay and clip it down to the header bar */
	box-shadow: 0 1px 0 rgba(6,10,18,.07), 0 22px 46px -34px rgba(6,10,18,.6);
}
.site-header.is-scrolled .nav-link {
	color: #000;
}
.site-header.is-scrolled .nav-link:hover {
	color: var(--blue);
}
.site-header.is-scrolled .lang-toggle {
	color: rgba(16,24,42,.82);
	border-color: rgba(16,24,42,.22);
}
.site-header.is-scrolled .lang-toggle:hover,
.site-header.is-scrolled .lang-select.is-open .lang-toggle {
	color: #fff;
	background: #499de4;
	border-color: #499de4;
}
.site-header.is-scrolled .menu-toggle span {
	background: var(--ink-text);
}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--hdr) + 40px);
	padding-bottom: 96px;
	color: #fff;
}
.hero-media {
	position: absolute;
	left: 0;
	right: 0;
	top: -8%;
	bottom: -8%;
	z-index: -3;
	overflow: hidden;
}
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.3s var(--ease);
}
.hero-slide.is-active {
	opacity: 1;
}
.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}
/* slow push-in on whichever slide is on screen */
.hero-slide.is-active img {
	animation: heroIn 2.2s var(--ease) both;
}
@keyframes heroIn {
from {
transform:scale(1.14);
}
to {
	transform: scale(1);
}
}
.hero-veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* centred scrim: keeps the middle band readable now that the copy is centred,
	   while the vignette holds the four edges darker */
	background: radial-gradient(120% 100% at 50% 50%, rgba(3,7,14,.56) 0%, rgba(3,7,14,.5) 48%, rgba(3,7,14,.88) 100%);
}
.hero-grain {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 100% 96px;
	-webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 85%);
	mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 85%);
	opacity: .5;
}
.hero-arcs {
	position: absolute;
	right: -6%;
	bottom: -8%;
	width: clamp(340px, 44vw, 660px);
	z-index: -1;
	pointer-events: none;
	opacity: .75;
	animation: arcPulse 9s ease-in-out infinite;
}
@keyframes arcPulse {
0%, 100% {
opacity:.55;
}
50% {
opacity:.95;
}
}
.hero-inner {
	position: relative;
	width: 100%;
	text-align: center;
}
.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	font: 500 11px/1 var(--font-d);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(255,255,255,.68);
	animation: fadeUp .9s var(--ease) .12s both;
}
.brand-tag {
	color: #fff;
	letter-spacing: .34em;
}
.eyebrow-sep {
	width: 26px;
	height: 1px;
	background: rgba(255,255,255,.45);
}
.hero-title {
	margin-top: 26px;
	font: 500 clamp(2.7rem, 2.6vw, 2.4rem)/1.02 var(--font-d);
	letter-spacing: -.032em;
	color: #fff;
}
.hero-title .line {
	display: block;
	overflow: hidden;
	padding-bottom: .08em;
}
/* base state stays visible: if animations are unavailable the headline still shows */
.hero-title .line>span {
	display: block;
	animation: lineUp 1s var(--ease) both;
}
.hero-title .line:first-child>span {
	animation-delay: .2s;
}
.hero-title .line:last-child>span {
	animation-delay: .32s;
}
@keyframes lineUp {
from {
transform:translateY(110%);
}
to {
	transform: translateY(0);
}
}
.hero-sub {
	margin-top: 28px;
	margin-inline: auto;
	max-width: 44ch;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.78;
	color: rgba(255,255,255,.8);
	animation: fadeUp 1s var(--ease) .62s both;
}
.hero-actions {
	margin-top: 44px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	animation: fadeUp 1s var(--ease) .76s both;
}
/* thin bars that double as the slide indicator */
.hero-dots {
	position: absolute;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 9px;
}
.hero-dots button {
	width: 28px;
	height: 2px;
	background: rgba(255,255,255,.3);
	transition: background .3s var(--ease);
}
.hero-dots button:hover {
	background: rgba(255,255,255,.62);
}
.hero-dots button.is-active {
	background: #fff;
}
@keyframes fadeUp {
from {
opacity:0;
transform:translateY(20px);
}
to {
	opacity: 1;
	transform: none;
}
}
.hero-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 0 var(--edge) 30px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	animation: fadeUp 1s var(--ease) 1s both;
}
.hero-scroll {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 10.5px/1 var(--font-d);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
}
.hero-scroll i {
	display: block;
	width: 44px;
	height: 1px;
	background: rgba(255,255,255,.5);
	position: relative;
	overflow: hidden;
}
.hero-scroll i::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #fff;
	transform: translateX(-100%);
	animation: sweep 2.4s var(--ease) infinite;
}
@keyframes sweep {
0% {
transform:translateX(-100%);
}
60%, 100% {
transform:translateX(100%);
}
}
.hero-fact {
	font-size: 12.5px;
	letter-spacing: .01em;
	color: rgba(255,255,255,.5);
	text-align: right;
}
/* ==========================================================================
   PARTNERS MARQUEE
   ========================================================================== */
.partners {
	background: #fff;
	padding: clamp(48px, 6vw, 76px) 0 clamp(40px, 5vw, 60px);
}
.partners-head {
	margin-bottom: clamp(28px, 3vw, 44px);
}
.partners .label {
	/* max-width: 70ch; */
	color: var(--muted-2);
}
.marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
	display: flex;
	width: max-content;
	animation: marquee 52s linear infinite;
}
.marquee:hover .marquee-track {
	animation-play-state: paused;
}
@keyframes marquee {
to {
transform:translateX(-50%);
}
}
.marquee-set {
	display: flex;
	align-items: center;
}
.marquee-set li {
	width: 206px;
	height: 104px;
	display: grid;
	place-items: center;
	padding: 0 16px;
	flex: 0 0 auto;
}
.marquee-set img {
	height: 74px;
	width: auto;
	max-width: none;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.marquee-set li:hover img {
	filter: grayscale(0);
	opacity: 1;
}
/* ==========================================================================
   SCALE / NUMBERS
   ========================================================================== */
.scale {
	position: relative;
	overflow: hidden;
	background: var(--paper);
	padding: clamp(80px, 10vw, 60px) 0;
}
/* ---------- two light-blue flow lines behind the numbers ---------- */
.scale-flow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	/* fixed mask: the lines surface on the left and dissolve into the right,
	   while the waves themselves travel underneath it */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.scale-flow-svg {
	position: absolute;
	left: -60%;
	/* wider than the section so the loop never exposes an edge */
	width: 220%;
	/* the band is capped and centred, so the weave keeps the same gentle
	   amplitude whether the section is short (desktop) or tall (stacked mobile) */
	top: 50%;
	height: min(360px, 100%);
 margin-top: calc(-0.5 * min(360px, 100%));
	animation: flowScroll 16s linear infinite;
}
/* the wave repeats every quarter of the viewBox, so -25% is one seamless cycle */
@keyframes flowScroll {
 from {
 transform: translateX(0);
}
to {
	transform: translateX(-25%);
}
}
/* the content sits above the texture */
.scale .container {
	position: relative;
	z-index: 1;
}
.scale-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.scale-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line-light);
	border-left: 1px solid var(--line-light);
}
.scale-stats li {
	padding: 32px 28px;
	border-right: 1px solid var(--line-light);
	border-bottom: 1px solid var(--line-light);
}
.stat-value {
	display: block;
	font: 500 clamp(2.1rem, 3.3vw, 3rem)/1 var(--font-d);
	letter-spacing: -.035em;
	color: var(--ink-text);
	font-variant-numeric: tabular-nums;
}
.stat-value em {
	font-style: normal;
	font-size: .4em;
	margin-left: .22em;
	color: var(--muted-2);
	font-weight: 400;
	letter-spacing: 0;
}
.stat-label {
	display: block;
	margin-top: 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
}
/* ==========================================================================
   PRODUCT FAMILIES
   ========================================================================== */
.products {
	position: relative;
	overflow: hidden;
	background: #1a459b;
	color: #fff;
	padding: clamp(80px, 11vw, 80px) 0;
}
.products-grid-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 86px 86px;
	-webkit-mask-image: radial-gradient(120% 80% at 72% 26%, #000, transparent 78%);
	mask-image: radial-gradient(120% 80% at 72% 26%, #000, transparent 78%);
}
.products .kicker {
	color: var(--frost);
}
.products .sec-title {
	color: #fff;
}
.products .sec-sub {
	color: rgba(255,255,255,.62);
}
.prod-grid {
	position: relative;
	margin-top: clamp(48px, 6vw, 80px);
	display: grid;
grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(36px, 5vw, 84px);
	align-items: start;
}
.prod-list {
	border-top: 1px solid var(--line-dark);
}
.prod-row {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: clamp(14px, 2vw, 26px);
	align-items: center;
	padding: 26px 4px 26px 20px;
	border-bottom: 1px solid var(--line-dark);
	cursor: pointer;
	outline: none;
	transition: background .4s var(--ease);
}
.prod-row::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--frost);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .55s var(--ease);
}
.prod-row.is-active::before {
	transform: scaleY(1);
}
.prod-row:focus-visible {
background:rgba(255,255,255,.05);
}
.prod-num {
	font: 500 11.5px/1 var(--font-d);
	letter-spacing: .18em;
	color: rgba(255,255,255,.36);
	transition: color .4s;
}
.prod-row.is-active .prod-num {
	color: var(--frost);
}
.prod-name {
	font: 500 clamp(1.3rem, 2.1vw, 1.8rem)/1.15 var(--font-d);
	letter-spacing: -.022em;
	color: rgba(255,255,255,.6);
	transition: color .4s var(--ease);
}
.prod-row.is-active .prod-name {
	color: #fff;
}
.prod-items {
	margin-top: 10px;
	max-width: 48ch;
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(255,255,255,.36);
	transition: color .4s var(--ease);
}
.prod-row.is-active .prod-items {
	color: rgba(255,255,255,.68);
}
.prod-marker {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	position: relative;
	flex: 0 0 auto;
	transition: border-color .4s;
}
.prod-marker::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--frost);
	opacity: 0;
	box-shadow: 0 0 16px var(--frost);
	transition: opacity .4s;
}
.prod-row.is-active .prod-marker {
	border-color: rgba(158,203,255,.7);
}
.prod-row.is-active .prod-marker::after {
	opacity: 1;
}
.prod-stage {
	position: relative;
	min-height: clamp(340px, 42vw, 540px);
}
.prod-plane {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transform: scale(1.015);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.prod-plane.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}
.plane-stack {
	position: relative;
	flex: 1;
	min-height: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #e9edf2;
	box-shadow: 0 50px 90px -46px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.09);
}
.plane-main {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.plane-inset {
	position: absolute;
	right: 6%;
	bottom: 6%;
	width: 38%;
	border-radius: 3px;
	box-shadow: 0 26px 50px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.3);
	object-fit: cover;
}
.prod-plane figcaption {
	margin-top: 16px;
	font: 500 11px/1 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
}
/* ==========================================================================
   APPLICATIONS
   ========================================================================== */
.apps {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(80px, 11vw, 80px) 0;
	color: #fff;
	background: #0a2a7a;
	background-image: linear-gradient(135deg, #0a2a7a 0%, #1138a0 40%, #0d3194 100%);
}
.apps-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(ellipse at 85% 20%, rgba(158,203,255,.18) 0%, transparent 55%),  radial-gradient(ellipse at 10% 85%, rgba(10,68,196,.35) 0%, transparent 55%);
}
.apps > .container {
	position: relative;
	z-index: 1;
}
.apps-head {
/* max-width: 780px; */
}
.apps .sec-title {
	color: #fff;
}
.apps .sec-sub {
	color: rgba(255,255,255,.68);
}
/* ---------- card grid ---------- */
.apps-grid {
	margin-top: clamp(40px, 5vw, 64px);
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(10px, 1.2vw, 18px);
}
.app-card {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.app-card a {
	display: block;
	height: 100%;
}
.app-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.app-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.app-card:hover .app-media img {
	transform: scale(1.06);
}
.app-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(3,7,14,.85) 0%, rgba(3,7,14,.45) 45%, rgba(3,7,14,.1) 80%, rgba(3,7,14,.0) 100%);
}
.app-foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(12px, 1.5vw, 18px) clamp(12px, 1.6vw, 20px);
	color: #fff;
	transform: translateY(0);
	transition: transform .4s var(--ease);
}
.app-cat {
	display: block;
	font: 500 10px/1 var(--font-d);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(158,203,255,.8);
	margin-bottom: 8px;
}
.app-foot h3 {
 font: 500 clamp(.95rem, 1vw, 1rem)/1.2 var(--font-d);
	/* letter-spacing: -.01em; */
	color: #fff;/* white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
}
.app-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 54px -30px rgba(0,0,0,.6);
}
.app-card:hover .app-foot {
	transform: translateY(-4px);
}
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
.apps-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.app-card {
	aspect-ratio: 4 / 3;
}
}
@media (max-width: 700px) {
.apps-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.app-card {
	aspect-ratio: 3 / 4;
}
}
@media (max-width: 420px) {
.apps-grid {
	grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
   ABOUT
   ========================================================================== */
.about {
	background: #fff;
	padding: clamp(20px, 11vw, 80px) 0;
}
.about-grid {
	display: grid;
grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);
	gap: clamp(40px, 6vw, 42px);
	align-items: center;
}
.about-media {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 44px 80px -44px rgba(6,10,18,.55);
}
.about-media img {
	width: 100%;/* aspect-ratio: 4/3.3;
	object-fit: cover; */
}
.about-badge {
	position: absolute;
	left: 20px;
	top: 20px;
	padding: 10px 16px;
	border-radius: 2px;
	background: rgba(10,18,32,.4);
	border: 1px solid rgba(255,255,255,.34);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font: 500 10.5px/1 var(--font-d);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
}
.about-copy p {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--muted);
	max-width: 100%;
}
.about-copy .sec-head+.reveal {
	margin-top: 26px;
}
.about-specs {
	margin-top: 38px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--line-light);
}
.about-specs li {
	padding: 18px 20px 20px 0;
	border-bottom: 1px solid var(--line-light);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-text);
}
.about-specs li span {
	display: block;
	margin-bottom: 8px;
	font: 500 10.5px/1 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-2);
}
/* ==========================================================================
   VALUES
   ========================================================================== */
.values {
	background: var(--paper);
	padding: clamp(80px, 9vw, 80px) 0;
}
.values-lead {
	margin-top: 18px;
	max-width: 100%;
	font: 400 clamp(1.2rem, 2.1vw, 1.62rem)/1.5 var(--font-d);
	letter-spacing: -.018em;
	color: var(--ink-text);
}
.values-head {
	max-width: 100%;
}
.values-grid {
	margin-top: clamp(30px, 5vw, 30px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--line-light);
	border-left: 1px solid var(--line-light);
}
.values-grid li {
	padding: 30px 26px 34px;
	border-right: 1px solid var(--line-light);
	border-bottom: 1px solid var(--line-light);
}
.values-grid h3 {
	font: 500 1.02rem/1.3 var(--font-d);
	letter-spacing: -.012em;
	color: var(--ink-text);
	margin-bottom: 10px;
}
.values-grid p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--muted);
}
/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(80px, 12vw, 80px) 0;
	color: #fff;
}
.cta-media {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
}
.cta-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(125% 115% at 24% 46%, rgba(3,7,14,.94) 0%, rgba(3,7,14,.84) 34%, rgba(3,7,14,.56) 66%, rgba(3,7,14,.8) 100%), linear-gradient(to bottom, rgba(3,7,14,.5), transparent 34%, transparent 62%, rgba(3,7,14,.72));
}
.cta-arcs {
	position: absolute;
	left: -6%;
	bottom: -10%;
	width: clamp(300px, 36vw, 520px);
	z-index: -1;
	pointer-events: none;
	opacity: .6;
}
.cta-title {
	font: 500 clamp(2rem, 2.5vw, 2vw)/1.08 var(--font-d);
	letter-spacing: -.03em;
	color: #fff;
}
.cta .sec-title, .cta .sec-sub {
	color: #fff;
}
.cta .sec-sub {
	color: rgba(255,255,255,.68);
}
.cta-body {
	margin-top: clamp(44px, 5vw, 68px);
	display: grid;
 grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.cta-contact {
	border-top: 1px solid rgba(255,255,255,.22);
}
.cta-contact li {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 22px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255,255,255,.22);
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255,255,255,.9);
}
.c-label {
	font: 500 10.5px/1.4 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
	padding-top: 4px;
}
.cta-contact a {
	transition: color .3s;
}
.cta-contact a:hover {
	color: var(--frost);
}
.cta-panel {
	display: grid;
	gap: 20px;/* justify-items: start; */
}
.cta-panel p {
	font: 400 1.2rem/1.4 var(--font-d);
	letter-spacing: -.015em;
	color: rgba(255,255,255,.86);
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	background: var(--paper);
	color: var(--muted);
	padding: clamp(64px, 7vw, 100px) 0 30px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(40px, 4vw, 56px);
	border-bottom: 1px solid var(--line-light);
}
.footer-brand img {
	width: 196px;
	height: auto;
}
.footer-brand p {
	margin-top: 20px;
	font-size: 13.5px;
	line-height: 1.75;
}
.footer-col h4 {
	font: 500 10.5px/1 var(--font-d);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: 20px;
}
.footer-col ul {
	display: grid;
	gap: 12px;
}
.footer-col a {
	font-size: 14px;
	color: var(--ink-text);
	transition: color .25s;
}
.footer-col a:hover {
	color: var(--blue);
}
/* social links shown as icon buttons */
.footer-col ul.footer-social {
	display: flex;
	gap: 10px;
}
.footer-col .footer-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line-light);
	border-radius: 50%;
	background: #fff;
	color: var(--ink-text);
	transition: color .25s, background .25s, border-color .25s, transform .25s var(--ease);
}
.footer-col .footer-social a:hover {
	color: #fff;
	background: var(--blue);
	border-color: var(--blue);
	transform: translateY(-2px);
}
.footer-col .footer-social svg {
	width: 16px;
	height: 16px;
}
.footer-base {
	/* display: flex;
	flex-wrap: wrap;
	justify-content: space-between; */
	gap: 12px;
	padding-top: 26px;
	font-size: 12.5px;
	color: var(--muted-2);
	text-align: center;
}
.footer-base a {
	transition: color .25s;
}
.footer-base a:hover {
	color: var(--blue);
}
/* ==========================================================================
   FLOATING CONTACT BAR
   ========================================================================== */
.float-bar {
	position: fixed;
	right: clamp(10px, 1.4vw, 22px);
	top: 50%;
	transform: translateY(-50%);
	/* below the header, so the full-screen mobile nav covers it */
	z-index: 90;
	display: grid;
	border-radius: 10px;
	background: rgba(255,255,255,.9);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	backdrop-filter: blur(12px) saturate(150%);
	box-shadow: 0 20px 44px -20px rgba(6,10,18,.42), 0 0 0 1px rgba(6,10,18,.07);
}
.float-item {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--ink-text);
	transition: background .28s var(--ease), color .28s;
}
/* hairline between items, drawn as an inset shadow so nothing shifts */
.float-item + .float-item {
	box-shadow: inset 0 1px 0 var(--line-light);
}
/* keep the hover fill inside the bar's rounded corners */
.float-item:first-child {
	border-radius: 10px 10px 0 0;
}
.float-item:last-child {
	border-radius: 0 0 10px 10px;
}
.float-item svg {
	width: 19px;
	height: 19px;
	pointer-events: none;
}
/* the WhatsApp mark fills its box, so it needs to sit a touch smaller */
.float-item .ico-wa {
	width: 16px;
	height: 16px;
}
.float-item:hover {
	background: var(--blue);
	color: #fff;
}
/* invisible bridge so the pointer can travel from the icon onto the panel
   without crossing a dead gap and collapsing it */
.float-item::after {
	content: '';
	position: absolute;
	right: 100%;
	top: 0;
	bottom: 0;
	width: 14px;
}
/* detail panel that unfolds leftwards out of the icon on hover */
.float-pop {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	width: max-content;
	opacity: 0;
	/* clipped hard against the icon, then opened to the left. The negative
	   insets keep the panel's shadow inside the clip once it is fully open. */
	clip-path: inset(-30px -30px -30px 100%);
	pointer-events: none;
	transition: clip-path .5s var(--ease), opacity .3s var(--ease);
}
.float-item:hover .float-pop, .float-item:focus-visible .float-pop {
 opacity: 1;
 clip-path: inset(-30px -30px -30px -30px);
 pointer-events: auto;
}
.fp-body {
	display: grid;
	gap: 6px;
	padding: 11px 15px;
	border-radius: 6px;
	background: var(--ink);
	box-shadow: 0 22px 46px -22px rgba(6,10,18,.55);
	white-space: nowrap;
}
.fp-label {
	font: 500 10px/1 var(--font-d);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--frost);
}
.fp-value {
	font: 500 13.5px/1.35 var(--font-b);
	letter-spacing: .01em;
	color: #fff;
}
/* QR variant — the code needs a quiet white zone to stay scannable */
.fp-body--qr {
	justify-items: center;
	gap: 9px;
}
.fp-body--qr img {
	width: 118px;
	height: 118px;
	max-width: none;
	padding: 6px;
	border-radius: 4px;
	background: #fff;
}
@media (max-width:860px) {
/* scale the rail to the 10vw side margin the page content leaves, so it can
	   never sit on top of the hero buttons; 1.7vw keeps a gap from the screen edge */
.float-bar {
	right: 1.7vw;
}
.float-item {
	width: min(44px, 8.4vw);
	height: min(44px, 8.4vw);
}
.float-item svg {
	width: 17px;
	height: 17px;
}
.float-item .ico-wa {
	width: 15px;
	height: 15px;
}
/* touch devices have no hover, so the panels could never be reached */
.float-item::after,  .float-item .float-pop {
	display: none;
}
}
/* ==========================================================================
   REVEAL
   ========================================================================== */
.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .85s var(--ease), transform .85s var(--ease);
	transition-delay: var(--d, 0ms);
}
.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* the row gets tight once the language switch sits next to the phone button */
@media (max-width:1440px) {
.header-inner {
	gap: clamp(16px, 2vw, 30px);
}
.nav {
	gap: clamp(14px, 1.8vw, 26px);
}
.nav-link {
	font-size: 13px;
	letter-spacing: .1em;
}
.btn.header-cta {
	font-size: 13px;
	padding: 0 16px;
}
.header-actions {
	gap: 14px;
}
}
@media (max-width:1080px) {
:root {
--hdr:74px;
}
/* narrow band where six links and the phone button share the row */
.lang-toggle {
	height: 40px;
	padding: 0 9px;
}
.lang-toggle .lang-chev {
	display: none;
}
/* the number no longer fits beside the language switch: keep the call action as an icon */
.btn.header-cta {
	width: 40px;
	padding: 0;
	font-size: 0;
	gap: 0;
}
.header-cta .ico-phone {
	width: 17px;
	height: 17px;
}
.header-inner {
	gap: 18px;
}
.nav {
	gap: clamp(14px, 1.8vw, 24px);
}
.nav-link {
	font-size: 10.5px;
	letter-spacing: .1em;
}
.btn-sm {
	height: 40px;
	padding: 0 16px;
	font-size: 12px;
	letter-spacing: .1em;
}
.scale-grid, .prod-grid, .about-grid, .cta-body {
	grid-template-columns: minmax(0, 1fr);
}
.scale-grid {
	gap: clamp(36px, 5vw, 56px);
}
.prod-stage {
	min-height: clamp(320px, 52vw, 460px);
}
.prod-list {
	order: 2;
}
.prod-stage {
	order: 1;
}
.cta-body {
	align-items: start;
}
.footer-grid {
	grid-template-columns: 1fr 1fr;
}
.footer-brand {
	grid-column: 1/-1;
}
}
 @media (max-width:860px) {
.header-cta {
	display: none;
}
.menu-toggle {
	display: block;
}
/* the scrolled header paints its links black; inside the open dark overlay
   they must go back to white */
.site-header.is-scrolled.nav-open .nav-link {
	color: #fff;
}
.site-header.is-scrolled.nav-open .nav-link:hover {
	color: var(--frost);
}
.site-header.is-scrolled.nav-open .menu-toggle span {
	background: #fff;
}
.site-header.is-scrolled.nav-open .logo img {
	filter: brightness(0) invert(1);
}
.nav {
	position: fixed;
	inset: 0;
	z-index: 130;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
	/* clears the header and scrolls, since the products accordion adds ~25 rows */
	/* --edge is no longer defined, so the gutter is spelled out here: 10vw matches
	   the side margin the 80%-wide container leaves, keeping the list aligned to it */
	padding: calc(var(--hdr) + 22px) 10vw 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(6,10,18,.96);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	clip-path: circle(0% at calc(100% - 40px) 40px);
	transition: clip-path .7s var(--ease);
	visibility: hidden;
}
.nav-link {
	font-size: clamp(1.5rem, 5.6vw, 2rem);
	letter-spacing: -.02em;
	text-transform: none;
	color: #fff;
	padding: 12px 0;
}
.nav-link::after {
	display: none;
}
.nav-foot {
	display: block;
	margin-top: 26px;
}
/* products turns into a tap-to-expand accordion inside the overlay */
.nav-item {
	align-self: stretch;
	display: block;
	width: 100%;
}
.nav-link--parent {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.nav-item.has-mega:hover .chev, .nav-item.has-mega:focus-within .chev {
 transform: none;
}
.nav-item.has-mega.is-open .chev {
	transform: rotate(180deg);
}
.mega {
	position: static;
	left: auto;
	display: block;
	/* capped above the tallest list (21 rows) so the reveal always resolves */
	max-height: 0;
	overflow: hidden;
	transform: none;
	padding-top: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: auto;
	transition: max-height .45s var(--ease);
}
/* tapping the row gives it :focus, which makes the desktop flyout rules below win
   on specificity — they would translate the panel half its own width off the left
   edge of the screen, so they are reset here at equal specificity */
.nav-item.has-mega:hover .mega, .nav-item.has-mega:focus-within .mega {
 position: static;
 left: auto;
 top: auto;
 transform: none;
 padding-top: 0;
}
.nav-item.is-open .mega {
	max-height: 1400px;
}
.mega-panel {
	width: auto;
	padding: 0 0 18px;
	background: none;
	border-radius: 0;
	box-shadow: none;
}
.mega-l1 > li {
	border-top: 1px solid rgba(255,255,255,.13);
}
.mega-l1 > li:first-child {
	border-top: 0;
}
.mega-l1 > li > .mega-l1-link, .mega-l1 > li:hover > .mega-l1-link, .mega-l1 > li:focus-within > .mega-l1-link {
 display: block;
 padding: 18px 0 10px;
 font: 500 11.5px/1 var(--font-d);
 letter-spacing: .2em;
 text-transform: uppercase;
 background: none;
 color: var(--frost);
}
.mega-l1-link::before {
	display: none;
}
.chev-r {
	display: none;
}
.mega-l2 {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	max-height: none;
	overflow: visible;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}
.mega-l2 li a {
	padding: 9px 0 9px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255,255,255,.62);
}
.mega-l2 li a:hover {
	background: none;
	color: #fff;
	padding-left: 22px;
}
.site-header.nav-open .nav {
	clip-path: circle(150% at calc(100% - 40px) 40px);
	visibility: visible;
}
.site-header.nav-open .menu-toggle span:first-child {
	transform: translateY(3px) rotate(45deg);
}
.site-header.nav-open .menu-toggle span:last-child {
	transform: translateY(-3px) rotate(-45deg);
}
.site-header.nav-open .menu-toggle span {
	background: #fff;
}
.site-header.nav-open .logo img {
	filter: brightness(0) invert(1);
}
body.nav-open {
	overflow: hidden;
}
.values-grid {
	grid-template-columns: 1fr 1fr;
}
.about-specs {
	grid-template-columns: minmax(0, 1fr);
}
/* the nav leaves the flow at this size, so nothing is left to push the hamburger
   over — it would otherwise sit against the logo with dead space to its right */
.header-actions {
	margin-left: auto;
}
/* keep the logo and the close button above the full-screen overlay, which is
   what the white logo and the X in the toggle are styled for */
.header-inner > .logo, .header-actions {
	position: relative;
	z-index: 140;
}
/* dock the contact rail to the bottom-right; centred it would sit on top of the
   hero copy and the buttons */
.float-bar {
	top: auto;
	bottom: 18px;
	transform: none;
}
}
 @media (max-width:620px) {
.hero {
	padding-bottom: 120px;
}
.hero-sub {
	margin-top: 22px;
}
.hero-actions {
	margin-top: 32px;
	gap: 12px;
}
.hero-actions .btn {
	flex: 1 1 100%;
}
.hero-fact {
	display: none;
}
.hero-arcs {
	width: 120vw;
	right: -40%;
	bottom: -4%;
	opacity: .5;
}
.scale-stats {
	grid-template-columns: 1fr;
}
.scale-stats li {
	padding: 24px 22px;
}
.values-grid {
	grid-template-columns: minmax(0, 1fr);
}
.footer-grid {
	grid-template-columns: 1fr;
	gap: 32px;
}
.cta-contact li {
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
}
.c-label {
	padding-top: 0;
}
.marquee-set li {
	width: 170px;
	height: 92px;
}
.marquee-set img {
	height: 62px;
}
.prod-row {
	padding: 22px 4px 22px 16px;
	grid-template-columns: auto minmax(0, 1fr);
}
.prod-marker {
	display: none;
}
/* the desktop clamp is degenerate (its min exceeds its max), so the headline
   never scales; give it a real ramp on phones */
.hero-title {
	font-size: clamp(2rem, 9.2vw, 2.6rem);
}
/* one clean stack, rather than a flex row whose separator can wrap on its own */
.hero-eyebrow {
	display: block;
	font-size: 10px;
	letter-spacing: .16em;
	line-height: 2;
}
.brand-tag {
	display: block;
	letter-spacing: .3em;
}
.eyebrow-sep {
	display: none;
}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
html {
	scroll-behavior: auto;
}
*, *::before, *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
}
.js .reveal {
	opacity: 1;
	transform: none;
}
.marquee-track {
	animation: none;
}
}
/* ==========================================================================
   PRODUCT CATALOGUE — category rail + product card grid
   ========================================================================== */
.catalog {
	background: var(--paper);
	padding: clamp(72px, 9vw, 120px) 0 clamp(80px, 10vw, 132px);
}
.catalog-grid {
	display: grid;
 grid-template-columns: minmax(200px, .84fr) minmax(0, 2.16fr);
	gap: clamp(34px, 2.4vw, 56px);
	align-items: start;
}
/* ---------- left rail ---------- */
.catalog-head {
	margin-bottom: clamp(22px, 2.6vw, 34px);
}
.catalog-head .sec-title {
	font-size: clamp(1.5rem, 2vw, 2rem);
}
.catalog-head .sec-sub {
	margin-top: 16px;
	font-size: 14.5px;
}
.cat-block + .cat-block {
	margin-top: 22px;
}
.cat-head {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	/* the head is a button now, so its own padding has to be declared */
	padding: 0 0 12px;
	text-align: left;
	border-bottom: 1px solid rgba(0,49,159,.3);
	font: 500 14.5px/1.2 var(--font-d);
	letter-spacing: .02em;
	color: var(--blue);
	transition: color .3s;
}
.cat-go {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid rgba(0,49,159,.34);
	border-radius: 50%;
	color: var(--blue);
	transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
.cat-go svg {
	width: 13px;
	height: 13px;
}
.cat-head:hover {
	color: var(--blue-hi);
}
.cat-head:hover .cat-go {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	transform: translateX(2px);
}
/* the open group reads as active: the circle fills and the arrow swings down */
.cat-block.is-open .cat-head .cat-go {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	transform: rotate(90deg);
}
/* accordion — the first group ships open, the rest collapse to nothing */
.cat-items {
	max-height: 0;
	padding-top: 0;
	overflow: hidden;
	transition: max-height .5s var(--ease), padding-top .5s var(--ease);
}
.cat-block.is-open .cat-items {
	max-height: 640px;
	padding-top: 12px;
}
.cat-items li a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
	transition: color .25s, transform .25s var(--ease);
}
.cat-items li a:hover {
	color: var(--blue);
	transform: translateX(3px);
}
/* ---------- right card grid ---------- */
.catalog-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 26px);
}
.prod-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line-light);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow .45s var(--ease), transform .45s var(--ease), border-color .45s;
}
.prod-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0,49,159,.26);
	box-shadow: 0 30px 56px -32px rgba(6,10,18,.36);
}
.prod-card-media {
	position: relative;
	/* portrait, and tall enough for two rows to sit level with the category rail */
	/* aspect-ratio: 3 / 4; */
	background: var(--paper);
	overflow: hidden;
}
.prod-card-media img {
	width: 100%;
	/* height: 100%;
	object-fit: contain; */
	transition: transform .6s var(--ease);
}
/* a blank src would otherwise render a broken-image glyph */
.prod-card-media img[src=""], .prod-card-media img:not([src]) {
	display: none;
}
.prod-card:hover .prod-card-media img {
	transform: scale(1.045);
}
.prod-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 16px;
	border-top: 1px solid var(--line-light);
}
.prod-card-name {
	font: 500 14px/1.35 var(--font-d);
	letter-spacing: -.005em;
	color: var(--ink-text);
}
.card-go {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 3px;
	background: var(--blue);
	color: #fff;
	transition: background .3s, transform .35s var(--ease);
}
.card-go svg {
	width: 14px;
	height: 14px;
}
.prod-card:hover .card-go {
	background: var(--blue-hi);
	transform: translateX(3px);
}
/* ---------- catalogue responsive ---------- */
@media (max-width: 1080px) {
.catalog-grid {
 grid-template-columns: minmax(224px, .92fr) minmax(0, 2.08fr);
	gap: clamp(28px, 4vw, 48px);
}
}
@media (max-width: 980px) {
.catalog-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 42px;
}
.cat-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 30px;
}
}
@media (max-width: 700px) {
.catalog-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* landscape once the cards get narrow, so each one stays a sensible height */
.prod-card-media {
	aspect-ratio: 4 / 3;
}
}
@media (max-width: 460px) {
.catalog-cards {
	grid-template-columns: minmax(0, 1fr);
}
.cat-items {
	grid-template-columns: minmax(0, 1fr);
}
}