/* CADS - global styles. Plain CSS, no build step.
 * Values follow the Pencil design (cads/cad.pen, 1440px frames); the tokens
 * below mirror its variables. */

:root {
	--ink: #0b1512;
	--ink-2: #132019;
	--surface: #fff;
	--surface-alt: #f4f7f4;
	--border: #e3e8e4;
	--border-strong: #cbd4cd;
	/* Design value #12a257, deepened so white text on it passes WCAG AA (4.5:1). */
	--brand: #0d884a;
	--brand-dark: #0a7a3f;
	--brand-tint: #e7f6ed;
	--brand-on-dark: #3fcb82;
	--red: #e0142b;
	/* Product-group colours (user feedback 2026-09-29): tags, chips and badges per group. */
	--group-thermal: #d62828;      /* Process Thermal: red */
	--group-safety: #f2b400;       /* Safety Solution: yellow (use dark text on it) */
	--group-safety-ink: #1f1a00;
	--group-flow: #1d6fd6;         /* Flow Control: blue */
	--group-automation: #1f9d55;   /* Electric Control Automation: green */
	--text: #0f1d17;
	--text-muted: #5e6e66;
	--text-invert: #fff;
	--text-invert-muted: #a9bcb1;
	--footer-line: #22302a;
	--footer-dim: #6f8278;

	--font-head: "Barlow", "Arial Narrow", Arial, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--wrap: 1440px;
	--gutter: 64px;
	--section-y: 96px;
}

@media (max-width: 1100px) {
	:root {
		--gutter: 40px;
		--section-y: 80px;
	}
}

@media (max-width: 640px) {
	:root {
		--gutter: 20px;
		--section-y: 64px;
	}
}

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

html {
	scroll-behavior: smooth;
}

/* In-page jumps land below the sticky masthead, not under it. */
[id] {
	scroll-margin-top: 112px;
}

@media (max-width: 1180px) {
	[id] {
		scroll-margin-top: 92px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--brand-dark);
}

h1,
h2,
h3,
p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	cursor: pointer;
}

.icon {
	flex-shrink: 0;
}

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

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

.skip-link:focus {
	clip-path: none;
	width: auto;
	height: auto;
	z-index: 100;
	top: 8px;
	left: 8px;
	padding: 8px 14px;
	background: var(--surface);
	color: var(--text);
}

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

/* Shared type and controls */
.eyebrow {
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	color: var(--brand-dark);
}

.eyebrow--on-dark {
	color: var(--brand-on-dark);
}

.section-title {
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 1.1;
	color: var(--text);
	text-wrap: balance; /* no one-word orphan lines when a heading wraps */
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--brand-dark);
	text-decoration: none;
}

.link-arrow .icon {
	transition: transform 0.2s ease;
}

.link-arrow:hover .icon,
a:hover > .link-arrow .icon {
	transform: translateX(3px);
}

.link-arrow--ink {
	font-size: 12.5px;
	letter-spacing: 1.4px;
	color: var(--text);
}

.link-arrow--ink .icon {
	color: var(--brand);
}

.btn-pill {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 99px;
	background: var(--brand);
	color: var(--text-invert);
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.btn-pill:hover {
	background: var(--brand-dark);
}

.btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding-inline: 20px;
	border-radius: 8px;
	background: var(--brand);
	color: var(--text-invert);
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-decoration: none;
}

.btn-primary:hover {
	background: var(--brand-dark);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 20px;
	border: 1px solid var(--border);
	color: var(--text);
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.btn-outline:hover {
	border-color: var(--brand);
	color: var(--brand-dark);
}

.btn-glass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 264px;
	min-height: 44px;
	padding: 8px 22px;
	text-align: center;
	line-height: 1.25;
	background: rgba(11, 21, 18, 0.35);
	backdrop-filter: blur(5px);
	outline: 1.5px solid rgba(255, 255, 255, 0.8);
	outline-offset: -0.75px;
	color: var(--text-invert);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-decoration: none;
}

.btn-glass:hover {
	background: rgba(11, 21, 18, 0.6);
}

/* Header: utility strip */
.utility {
	background: var(--ink-2);
	color: var(--text-invert-muted);
}

.utility__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 46px;
	padding-inline: 44px;
}

.utility__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-invert-muted);
	text-decoration: none;
	white-space: nowrap;
}

.utility__item .icon {
	color: var(--brand-on-dark);
}

a.utility__item:hover {
	color: var(--text-invert);
}

.utility__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-inline-start: auto;
}

.utility__socials {
	display: flex;
	align-items: center;
	gap: 14px;
}

.utility__socials a,
.utility__search-toggle {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-invert-muted);
}

.utility__socials a:hover,
.utility__search-toggle:hover,
.utility__search-toggle[aria-expanded="true"] {
	color: var(--text-invert);
}

.utility__divider {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.2);
}

.utility__hotline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--text-invert);
	text-decoration: none;
	white-space: nowrap;
}

/* Language switch: segmented control at the far right of the utility strip (desktop). */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 34px;
	padding-inline-start: 10px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 1;
	color: var(--brand-on-dark);
}

.lang-switch .icon {
	margin-inline-end: 4px;
}

.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 32px;
	padding-inline: 10px;
	border-radius: 999px;
	color: var(--text-invert);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switch a:hover {
	background: rgba(255, 255, 255, 0.18);
}

.lang-switch a:focus-visible,
.lang-chip:focus-visible {
	outline: 2px solid var(--brand-on-dark);
	outline-offset: 2px;
}

.lang-switch a[aria-current="true"] {
	background: var(--text-invert);
	color: var(--ink);
	cursor: default;
}

/* Masthead tools: language chip + menu button, only where the desktop nav is hidden. */
.masthead__tools {
	display: none;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

.lang-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding-inline: 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: 1;
	color: var(--text);
	text-decoration: none;
}

.lang-chip .icon {
	color: var(--brand);
}

.lang-chip:hover {
	border-color: var(--brand);
	background: var(--brand-tint);
}

.site-search {
	position: relative;
	padding: 4px 44px 16px;
	animation: search-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes search-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

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

.site-search[hidden] {
	display: none;
}

.site-search__box {
	position: relative;
	display: flex;
	gap: 10px;
	max-width: 880px;
	margin-inline: auto;
}

.site-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	color: var(--brand-on-dark);
	transform: translateY(-50%);
	pointer-events: none;
}

.site-search input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding-inline: 46px 16px;
	border: 1px solid #2a3a32;
	border-radius: 10px;
	background: var(--ink);
	color: var(--text-invert);
	font: 15px var(--font-body);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-search input:focus {
	outline: none;
	border-color: var(--brand-on-dark);
	box-shadow: 0 0 0 4px rgba(63, 203, 130, 0.18);
}

.site-search button[type="submit"] {
	padding-inline: 22px;
	border: 0;
	border-radius: 10px;
	background: var(--brand);
	color: var(--text-invert);
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.8px;
}

.site-search__results {
	position: absolute;
	top: calc(100% - 8px);
	left: 44px;
	right: 44px;
	z-index: 30;
	max-width: 880px;
	margin-inline: auto;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 30px 60px rgba(11, 21, 18, 0.25);
	animation: search-in 0.2s ease;
}

.site-search__results[hidden] {
	display: none;
}

.search-group + .search-group {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

.search-group__label {
	padding: 6px 10px;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	color: var(--text-muted);
	text-transform: uppercase;
}

.search-hit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--text);
	text-decoration: none;
}

.search-hit:hover,
.search-hit.is-active {
	background: var(--brand-tint);
}

.search-hit img {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

.search-hit__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.search-hit__title {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-hit__title mark {
	background: none;
	color: var(--brand-dark);
}

.search-hit__meta {
	font-size: 12px;
	color: var(--text-muted);
}

.search-hit__type {
	flex-shrink: 0;
	padding: 3px 8px;
	border-radius: 99px;
	background: var(--surface-alt);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
}

.search-all {
	display: block;
	margin-top: 8px;
	padding: 12px;
	border-radius: 10px;
	background: var(--surface-alt);
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: var(--brand-dark);
	text-align: center;
	text-decoration: none;
}

.search-all.is-active,
.search-all:hover {
	background: var(--brand-tint);
}

.search-empty {
	padding: 18px 12px;
	font-size: 14px;
	color: var(--text-muted);
	text-align: center;
}

.search-skeleton {
	height: 60px;
	margin: 4px 0;
	border-radius: 10px;
	background: linear-gradient(90deg, var(--surface-alt) 25%, #e9eeea 50%, var(--surface-alt) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.1s linear infinite;
}

@keyframes shimmer {
	to {
		background-position: -200% 0;
	}
}

/* Header: masthead */
.site-header {
	position: relative;
	z-index: 20;
}

.masthead {
	display: flex;
	align-items: center;
	gap: clamp(20px, calc(3.76vw - 24.4px), 32px);
	height: 96px;
	padding-inline: clamp(24px, calc(6.27vw - 50px), 44px);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.masthead__nav {
	flex: 1;
	align-self: stretch;
}

.masthead__nav .nav-list {
	display: flex;
	justify-content: space-between;
	gap: clamp(8px, calc(3.76vw - 36.4px), 20px);
	height: 100%;
}

.nav-list > li {
	position: relative;
	display: flex;
}

.nav-list > li > a {
	display: flex;
	align-items: center;
	align-self: center;
	height: 44px;
	padding-inline: clamp(10px, calc(1.88vw - 12.2px), 16px);
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: clamp(14px, calc(0.627vw + 6.6px), 16px);
	font-weight: 600;
	letter-spacing: clamp(0.2px, calc(0.125vw - 1.28px), 0.6px);
	line-height: 1;
	color: var(--text);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Hover, focus and open sub-menu: a fully rounded light-grey pill behind the item. */
.nav-list > li > a:hover,
.nav-list > li > a:focus-visible,
.nav-list > li:hover > a,
.nav-list > li:focus-within > a {
	background: var(--surface-alt);
	color: var(--brand-dark);
}

.nav-list > li > a:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* The current section keeps a stronger, brand-tinted pill. */
.nav-list > .current-menu-item > a,
.nav-list > .current-menu-ancestor > a,
.nav-list > .current-menu-parent > a,
.nav-list > .current_page_parent > a {
	background: var(--brand-tint);
	color: var(--brand-dark);
	font-weight: 700;
}

.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	padding: 10px 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 0;
	box-shadow: 0 20px 48px rgba(11, 21, 18, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav-list .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
}

.nav-list .sub-menu a:hover,
.nav-list .sub-menu .current-menu-item > a {
	background: var(--surface-alt);
	color: var(--brand-dark);
}

.masthead__nav--right .sub-menu {
	left: auto;
	right: 0;
}

/* A dropdown with a third level (Solutions: two markets, each with its solutions) is a
   multi-column panel: the market links become small caps headings over their lists, so
   nothing flies out sideways. */
.nav-list > .menu-item--wide > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(230px, 1fr));
	column-gap: 12px;
	min-width: 520px;
	padding: 16px 12px 12px;
}

.nav-list .menu-item--wide .sub-menu .sub-menu {
	position: static;
	min-width: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: inherit; /* not `visible`: that let the hidden panel's lists catch the pointer and open it */
	transform: none;
	transition: none;
}

.nav-list .menu-item--wide > .sub-menu > li > a {
	padding: 6px 12px 8px;
	border-radius: 6px;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-muted);
}

.nav-list .menu-item--wide > .sub-menu > li > a:hover,
.nav-list .menu-item--wide > .sub-menu > .current-menu-parent > a {
	background: transparent;
	color: var(--brand-dark);
}

.nav-list .menu-item--wide .sub-menu .sub-menu a {
	padding: 8px 12px;
	border-radius: 6px;
}

/* Chevron after the label of items that open a sub-menu; flips while it is open. */
.nav-list > .menu-item-has-children > a::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-inline-start: 8px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.nav-list > .menu-item-has-children:hover > a::after,
.nav-list > .menu-item-has-children:focus-within > a::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: no-preference) {
	.nav-list > .menu-item-has-children > a::after {
		transition: transform 0.2s ease, margin-top 0.2s ease;
	}
}

/* Products dropdown: a narrow list of the product groups (inc/nav.php adds the virtual group /
   sub-category items); hovering or focusing a group opens its sub-categories in a panel to the
   right, one at a time. The panel is placed against the list itself (the rows are not
   positioned), so every group's panel starts level with the top of the list and is at least as
   tall, side by side; it touches the list (left: 100%) so the pointer can cross. */
.nav-list .menu-item--flyout > .sub-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.nav-list .menu-item--flyout > .sub-menu > .menu-item-has-children > a::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.nav-list .menu-item--flyout > .sub-menu > li:hover > a,
.nav-list .menu-item--flyout > .sub-menu > li:focus-within > a,
.nav-list .menu-item--flyout > .sub-menu > .current-menu-parent > a,
.nav-list .menu-item--flyout > .sub-menu > .current-menu-item > a {
	background: var(--surface-alt);
	color: var(--brand-dark);
}

.nav-list .menu-item--flyout .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	min-width: 260px;
	min-height: 100%;
	border-top: 1px solid var(--border);
	white-space: nowrap;
	transform: translateX(-6px);
	pointer-events: none; /* hidden panels must not catch the pointer */
}

.masthead__nav--right .menu-item--flyout .sub-menu .sub-menu {
	left: auto;
	right: 100%;
	transform: translateX(6px);
}

.nav-list .menu-item--flyout > .sub-menu > li:hover > .sub-menu,
.nav-list .menu-item--flyout > .sub-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.masthead__logo {
	flex-shrink: 0;
}

.masthead__logo img {
	width: clamp(160px, calc(17.55vw - 47.3px), 216px);
	height: 56px;
	object-fit: contain;
}

.masthead__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	margin-inline-start: auto;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: none;
	color: var(--text);
}

.masthead__toggle .icon-close,
.masthead__toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.masthead__toggle[aria-expanded="true"] .icon-close {
	display: block;
}

.mobile-nav {
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	padding: 8px var(--gutter) 24px;
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav__list a {
	display: block;
	padding: 14px 18px;
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--text);
	text-decoration: none;
	text-transform: uppercase;
}

.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible {
	background: var(--surface-alt);
	color: var(--brand-dark);
}

.mobile-nav__list .current-menu-item > a {
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.mobile-nav__list .sub-menu a {
	padding-inline-start: 36px; /* indented under its parent */
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
}

/* Third level (Solutions): the market link is a heading, its solutions sit indented under it. */
.mobile-nav__list .sub-menu .sub-menu a {
	padding-inline-start: 54px;
}

.mobile-nav__list .sub-menu > .menu-item-has-children > a {
	font-weight: 600;
	color: var(--text-muted);
}

/* Collapsible sub-menus (main.js adds .has-toggle and the button; without JS they stay open).
   The parent link keeps navigating; the chevron button beside it opens the list. */
.mobile-nav__list .sub-menu[hidden] {
	display: none;
}

.mobile-nav__list .has-toggle {
	display: grid;
	grid-template-columns: 1fr 48px;
	align-items: stretch;
}

.mobile-nav__list .has-toggle > .sub-menu {
	grid-column: 1 / -1;
}

.mobile-nav__sub-toggle {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
}

.mobile-nav__sub-toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.mobile-nav__sub-toggle[aria-expanded="true"]::before {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* A current parent's tinted pill continues behind its chevron. */
.mobile-nav__list .has-toggle.current-menu-item > a {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.mobile-nav__list .has-toggle.current-menu-item > .mobile-nav__sub-toggle {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.mobile-nav__sub-toggle:hover,
.mobile-nav__sub-toggle:focus-visible {
	background: var(--surface-alt);
	color: var(--brand-dark);
}

.mobile-nav__sub-toggle:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.mobile-nav__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 20px;
}

.mobile-nav__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}

.mobile-nav__contact .icon {
	color: var(--brand);
}

@media (max-width: 1180px) {
	.masthead {
		height: 76px;
		padding-inline: var(--gutter);
	}

	.masthead__nav {
		display: none;
	}

	.masthead__tools {
		display: flex;
	}

	.masthead__toggle {
		display: inline-flex;
	}

	.lang-switch {
		display: none;
	}

	.masthead__logo img {
		width: 170px;
		height: 44px;
		object-position: left center;
	}

	.utility__inner,
	.site-search {
		padding-inline: var(--gutter);
	}

	.site-search__results {
		left: var(--gutter);
		right: var(--gutter);
	}

	.utility__item--address {
		display: none;
	}
}

@media (max-width: 720px) {
	.utility__item--email,
	.utility__socials a,
	.utility__divider {
		display: none;
	}

	.utility__actions {
		width: 100%;
		justify-content: space-between;
		gap: 12px;
	}
}

@media (max-width: 400px) {
	/* "GET A QUOTE" is wider than "BÁO GIÁ": win back a few px so the pill is not clipped at 360px. */
	.utility__actions {
		gap: 8px;
	}
}

@media (min-width: 1181px) {
	.mobile-nav {
		display: none;
	}
}

/* Breadcrumb and page title */
.breadcrumb {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--border);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: var(--wrap);
	min-height: 54px;
	margin-inline: auto;
	padding: 12px var(--gutter);
	font-size: 13px;
	line-height: 1.3;
	color: var(--text-muted);
}

.breadcrumb__list li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.breadcrumb__list li + li::before {
	content: "›";
	margin-inline: 8px 0;
	padding-inline-end: 0;
}

.breadcrumb__list li + li {
	margin-inline-start: 8px;
}

.breadcrumb__list .icon {
	color: var(--brand);
}

.breadcrumb__list a {
	display: inline-block;
	padding-block: 4px; /* 24px touch target */
	color: var(--text-muted);
	text-decoration: none;
}

.breadcrumb__list a:hover {
	color: var(--brand-dark);
}

.page-title,
.entry__title,
.archive__title,
.product__title {
	margin-bottom: 40px;
}

.page-title__text,
.entry__title,
.archive__title,
.product__title {
	font-family: var(--font-head);
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 1.1;
	color: var(--text);
}

.page-title__text::after,
.entry__title::after,
.archive__title::after,
.product__title::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin-top: 16px;
	background: var(--brand);
}

@media (max-width: 640px) {
	.page-title__text,
	.entry__title,
	.archive__title,
	.product__title {
		font-size: 32px;
	}
}

/* Sections */
.section {
	padding-block: var(--section-y);
}

.section--alt {
	background: var(--surface-alt);
}

.section-head {
	display: flex;
	align-items: flex-end;
	gap: 80px;
	margin-bottom: 48px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--border);
}

.section-head__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
}

.section-head__intro {
	width: 460px;
	flex-shrink: 0;
	font-size: 15px;
	line-height: 26px;
	color: var(--text-muted);
}

.section-head--narrow {
	gap: 64px;
}

.section-head--narrow .section-head__intro {
	width: 400px;
	line-height: 24px;
}

.section-head--plain {
	gap: 40px;
	margin-bottom: 40px;
	padding-bottom: 0;
	border-bottom: 0;
}

@media (max-width: 960px) {
	.section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding-bottom: 32px;
	}

	.section-head__intro,
	.section-head--narrow .section-head__intro {
		width: auto;
		max-width: 620px;
	}

	.section-head--plain {
		flex-direction: row;
		align-items: flex-end;
		flex-wrap: wrap;
		padding-bottom: 0;
	}

	.section-title {
		font-size: 32px;
	}

	.section-title br {
		display: none;
	}
}

/* Home: hero - brand video in four chapters (one per product group), a chapter
   timeline and the group cards, kept in sync by main.js. */
.hero {
	padding-bottom: 88px;
	background: var(--surface-alt);
}

.hero__stage {
	position: relative;
	height: 720px;
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
}

.hero__poster,
.hero__video {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__shade {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(180deg, rgba(11, 21, 18, 0.35) 0%, rgba(11, 21, 18, 0) 22%, rgba(11, 21, 18, 0) 58%, rgba(11, 21, 18, 0.72) 100%),
		linear-gradient(90deg, rgba(11, 21, 18, 0.15) 0%, rgba(11, 21, 18, 0) 45%, rgba(11, 21, 18, 0.55) 100%);
}

/* Faint engineering grid plus a light sweep: motion without competing with the video. */
.hero__fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 100%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 100%);
}

.hero__fx::after {
	content: "";
	position: absolute;
	inset: -20% auto -20% -40%;
	width: 30%;
	background: linear-gradient(100deg, transparent, rgba(63, 203, 130, 0.14), transparent);
	transform: skewX(-12deg);
	animation: hero-sweep 9s ease-in-out infinite;
}

@keyframes hero-sweep {
	0%,
	55% {
		left: -40%;
	}

	100% {
		left: 120%;
	}
}

.hero__ctas {
	position: absolute;
	top: 476px;
	left: 0;
	right: 0;
	z-index: 2;
	/* Two equal columns sized by the longer label; fit-content lets them shrink (and the text wrap) on narrow stages. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	gap: 12px;
	padding-inline: var(--gutter);
	pointer-events: none;
}

/* The photo wall at the end of the video fills the frame: the jump buttons step aside. */
.hero.is-wall .hero__ctas {
	visibility: hidden;
}

.hero__ctas a {
	pointer-events: auto;
	animation: rise 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__ctas a + a {
	animation-delay: 0.5s;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

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

/* Video controls, as the design's slider: a centre play button, 01 — dots — 04,
   plus a small sound toggle (the video has audio; the design has no control for it). */
.hero-play {
	position: absolute;
	top: 200px;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(11, 21, 18, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(11, 21, 18, 0.35);
	color: var(--text-invert);
	transform: translateX(-50%);
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.hero-play .icon-play {
	margin-left: 4px;
}

/* While playing it steps back, and returns on hover, keyboard focus or a tap. */
.hero-play[aria-pressed="true"] {
	opacity: 0;
	transform: translateX(-50%) scale(0.85);
}

.hero__stage:hover .hero-play,
.hero-play:focus-visible,
.hero__stage.is-touched .hero-play {
	opacity: 1;
	transform: translateX(-50%);
}

.hero-play:hover {
	background: var(--brand);
}

.hero-play .icon-play,
.hero-play[aria-pressed="false"] .icon-pause {
	display: none;
}

.hero-play[aria-pressed="false"] .icon-play {
	display: block;
}

.hero-dots {
	position: absolute;
	top: 590px;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--text-invert);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transform: translateX(-50%);
	animation: rise-center 0.9s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes rise-center {
	from {
		opacity: 0;
		transform: translate(-50%, 24px);
	}

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

.hero-dots__total {
	font-weight: 600;
	color: var(--text-invert-muted);
}

.hero-dots__list {
	display: flex;
	align-items: center;
	gap: 0;
}

/* The visible dot is 4px tall; the button around it is at least 24 x 24 (the dots sit 14px apart). */
.hero-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
}

.hero-dot span {
	position: relative;
	display: block;
	width: 10px;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.4);
	transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s ease;
}

.hero-dot:hover span {
	background: rgba(255, 255, 255, 0.75);
}

.hero-dot.is-active span {
	width: 36px;
	background: rgba(63, 203, 130, 0.35);
}

/* The active dot fills with the chapter's progress. */
.hero-dot.is-active span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--brand-on-dark);
	transform: scaleX(var(--p, 1)); /* solid, as in the design, until the video drives it */
	transform-origin: left;
}

.hero-mute {
	position: absolute;
	top: 578px;
	right: 48px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(11, 21, 18, 0.25);
	color: var(--text-invert);
	transition: background 0.2s ease;
}

.hero-mute:hover {
	background: rgba(18, 162, 87, 0.5);
}

.hero-mute .icon-sound,
.hero-mute[aria-pressed="true"] .icon-muted {
	display: none;
}

.hero-mute[aria-pressed="true"] .icon-sound {
	display: block;
}

/* Group cards: static images (the photo, the group name, a link), synced with the active chapter */
.hero__jump {
	display: none;
}

.hero__cards {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	max-width: var(--wrap);
	margin: -80px auto 0;
	padding-inline: var(--gutter);
}

.hero__cards .group-card {
	/* backwards, not both: a held final keyframe would override the hover lift */
	animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.hero__cards .group-card:nth-child(1) { animation-delay: 0.45s; }
.hero__cards .group-card:nth-child(2) { animation-delay: 0.55s; }
.hero__cards .group-card:nth-child(3) { animation-delay: 0.65s; }
.hero__cards .group-card:nth-child(4) { animation-delay: 0.75s; }

.hero__arrow {
	position: absolute;
	top: 332px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(11, 21, 18, 0.25);
	color: var(--text-invert);
	transition: background 0.2s ease, transform 0.2s ease;
}

.hero__arrow:hover {
	background: rgba(18, 162, 87, 0.5);
}

.hero__arrow--prev {
	left: 40px;
}

.hero__arrow--next {
	right: 40px;
}

.hero__arrow--prev:hover {
	transform: translateX(-3px);
}

.hero__arrow--next:hover {
	transform: translateX(3px);
}

/* --group-c is the group's colour token; --group-ink the text colour that reads on it. */
.group-card {
	--group-c: var(--brand);
	--group-ink: var(--text-invert);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface);
	box-shadow: 0 20px 48px rgba(11, 21, 18, 0.15);
	color: inherit;
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}

.group-card--thermal { --group-c: var(--group-thermal); }
.group-card--safety { --group-c: var(--group-safety); --group-ink: var(--group-safety-ink); }
.group-card--flow { --group-c: var(--group-flow); }
.group-card--automation { --group-c: var(--group-automation); }

.group-card:hover,
.group-card:focus-visible {
	transform: translateY(-8px);
	box-shadow: 0 28px 56px rgba(11, 21, 18, 0.22);
}

.group-card__media {
	position: relative;
	height: 220px;
	overflow: hidden;
}

.group-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.group-card:hover .group-card__media img,
.group-card:focus-visible .group-card__media img {
	transform: scale(1.06);
}

.group-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px 24px 26px;
}

/* The tag is the group's colour: a chip on the body, so it reads on every photo. */
.group-card__tag {
	align-self: flex-start;
	width: 32px;
	height: 4px;
	background: var(--group-c);
}

.group-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

.group-card__title .icon {
	flex-shrink: 0;
	color: var(--brand);
}

.group-card .link-arrow {
	margin-top: auto;
	padding-top: 6px;
}

/* The chapter that is playing: a coloured bar along the foot fills with its progress. */
.group-card.is-active {
	box-shadow: 0 30px 60px rgba(11, 21, 18, 0.22);
}

.group-card__sync {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--border);
}

.group-card__sync span {
	display: block;
	height: 100%;
	background: var(--group-c);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}

@media (max-width: 1100px) {
	.hero__stage {
		height: auto;
		aspect-ratio: 16 / 9;
		min-height: 480px;
	}

	.hero__ctas {
		top: auto;
		bottom: 168px;
	}

	.hero-dots {
		top: auto;
		bottom: 112px;
	}

	.hero-mute {
		top: auto;
		bottom: 100px;
		right: var(--gutter);
	}

	.hero-play {
		top: calc(33% - 40px);
	}

	.hero__arrow {
		display: none;
	}

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

@media (max-width: 640px) {
	.hero {
		padding-bottom: 56px;
	}

	.hero__stage {
		min-height: 0;
	}

	/* The jump links stay on phones, as a compact row on the video's lower edge. */
	.hero__ctas {
		top: auto;
		bottom: 52px;
		gap: 8px;
		padding-inline: 10px;
	}

	.hero__ctas .btn-glass {
		width: auto;
		height: 32px;
		padding-inline: 12px;
		font-size: 10.5px;
		letter-spacing: 0.8px;
	}

	.hero-play {
		top: calc((100% - 52px) * 0.28 - 28px); /* above the video's centred title */
		width: 56px;
		height: 56px;
	}

	.hero__cards {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 20px;
	}
}

/* Home: markets */
.markets__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.market {
	display: flex;
	flex-direction: column;
}

.market__photo {
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 12px;
}

.market__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 28px;
	padding-top: 40px;
}

.market__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--brand);
}

.market__index {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--text-muted);
}

.market__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.market__name {
	font-family: var(--font-head);
	font-size: 28px;
	font-weight: 700;
	line-height: 34px;
}

.market__desc {
	font-size: 15px;
	line-height: 24px;
	color: var(--text-muted);
}

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

.market__label {
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1;
	color: var(--text-muted);
}

.market__list {
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
}

@media (max-width: 760px) {
	.markets__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.market__body {
		padding-top: 28px;
	}
}

/* Home: business lines */
.lines__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.line-panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 600px;
	padding: 20px;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--ink);
	background-position: center;
	background-size: cover;
}

.line-panel__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.line-panel__no {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(6px);
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.2;
	color: var(--brand-dark);
}

.line-panel__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 24px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(6px);
}

.line-panel__title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

/* Interaction: the hovered (or focused) panel lifts and its card turns solid with a brand edge;
   the others step back, so it is always clear which one is live. */
.line-panel {
	position: relative;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, filter 0.35s ease;
}

.line-panel__card {
	border-top: 4px solid transparent;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.line-panel__badge {
	transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.line-panel .link-arrow .icon {
	transition: transform 0.25s ease;
}

.line-panel:hover,
.line-panel:focus-within {
	z-index: 1;
	transform: translateY(-10px);
	box-shadow: 0 32px 64px rgba(11, 21, 18, 0.28);
}

.line-panel:hover .line-panel__card,
.line-panel:focus-within .line-panel__card {
	border-top-color: var(--brand);
	background: var(--surface);
}

.line-panel:hover .line-panel__badge,
.line-panel:focus-within .line-panel__badge {
	background: var(--brand);
	color: var(--text-invert);
	transform: scale(1.08);
}

.line-panel:hover .link-arrow .icon,
.line-panel:focus-within .link-arrow .icon {
	transform: translateX(6px);
}

@media (hover: hover) {
	.lines__row:hover .line-panel:not(:hover):not(:focus-within) {
		filter: saturate(0.55) brightness(0.82);
	}
}

.line-panel__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: var(--brand-tint);
	color: var(--brand-dark);
}

.line-panel__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.line-panel__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.line-panel__list .icon {
	color: var(--brand-dark);
}

.line-panel .link-arrow {
	padding-top: 4px;
	font-size: 12.5px;
	letter-spacing: 1.2px;
}

.lines__turnkey {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 48px;
	font-size: 15px;
	text-align: center;
}

.lines__turnkey > .icon {
	color: var(--brand);
}

.lines__turnkey .link-arrow {
	gap: 6px;
}

@media (max-width: 1100px) {
	.lines__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.line-panel {
		min-height: 520px;
	}
}

@media (max-width: 640px) {
	.line-panel {
		min-height: 480px;
		padding: 14px;
	}

	.line-panel__card {
		padding: 18px;
	}
}

@media (min-width: 1101px) {
	/* The three cards share one row track (subgrid), so they start and end level
	   even when one card's list wraps onto an extra line. */
	.lines__row {
		grid-template-rows: auto 1fr auto;
		min-height: 600px; /* the design's panel height; the 1fr photo row takes the rest */
	}

	.line-panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.line-panel__card {
		grid-row: 3;
	}

	.line-panel__card .link-arrow {
		margin-top: auto;
	}
}

/* Home: partner and client logos */
/* Same white background as the business lines above: one section gap, not two. */
.lines + .partners {
	padding-top: 0;
}

.partners .section-head {
	margin-bottom: 48px;
}

.logo-group + .logo-group {
	margin-top: 36px;
}

.logo-group__title {
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
}

.logo-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px; /* the 1px gaps show the grid colour: hairlines that survive the rounded corners */
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--border);
	overflow: hidden;
}

.logo-grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	padding: 22px 26px;
	background: var(--surface);
}

.logo-grid a {
	display: contents;
}

.logo-grid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.logo-grid a:hover img {
	transform: scale(1.05);
}

@media (max-width: 1100px) {
	.logo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.logo-grid li {
		height: 88px;
		padding: 16px;
	}
}

@media (max-width: 480px) {
	.logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Home: news */
.news__layout {
	display: grid;
	grid-template-columns: minmax(0, 720fr) minmax(0, 536fr);
	gap: 56px;
}

.news-featured {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.news-featured__photo,
.news-item__photo {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--border);
}

.news-featured__photo {
	height: 380px;
}

.news-featured__photo img,
.news-item__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.news-featured:hover img,
.news-item:hover img {
	transform: scale(1.03);
}

.news-featured__rule {
	display: flex;
	align-items: center;
	height: 2px;
	margin-block: 4px;
	background: linear-gradient(var(--border-strong), var(--border-strong)) left center / 100% 1px no-repeat;
}

.news-featured__rule::before {
	content: "";
	width: 44px;
	height: 2px;
	background: var(--brand);
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	line-height: 1;
	color: var(--text-muted);
}

.news-meta__cat {
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: var(--brand-dark);
	text-transform: uppercase;
}

.news-meta__cat + time::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin-inline-end: 12px;
	background: var(--border-strong);
	vertical-align: -1px;
}

.news-featured__title a,
.news-item__title a {
	color: inherit;
	text-decoration: none;
}

.news-featured__title a:hover,
.news-item__title a:hover {
	color: var(--brand-dark);
}

.news-featured__title {
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.6px;
	line-height: 38px;
}

.news__list {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.news-item {
	display: flex;
	flex: 1;
	gap: 24px;
}

.news-item + .news-item {
	padding-top: 32px;
	border-top: 1px solid var(--border-strong);
}

.news-item__photo {
	flex: 0 0 260px;
	min-height: 180px;
}

.news-item__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
}

.news-item__title {
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 27px;
}

@media (max-width: 1100px) {
	.news__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
}

@media (max-width: 640px) {
	.news-featured__photo {
		height: 240px;
	}

	.news-featured__title {
		font-size: 24px;
		line-height: 31px;
	}

	.news-item {
		flex-direction: column;
		gap: 16px;
	}

	.news-item__photo {
		flex-basis: auto;
		height: 200px;
	}
}

/* Consult CTA band */
.cta-consult {
	padding-block: 80px;
	background-color: var(--ink);
	background-position: center;
	background-size: cover;
}

.cta-consult__inner {
	display: flex;
	align-items: center;
	gap: 80px;
}

.cta-consult__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 18px;
}

.cta-consult__title {
	max-width: 620px;
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 46px;
	color: var(--text-invert);
}

.cta-consult__sub {
	max-width: 560px;
	font-size: 15px;
	line-height: 24px;
	color: var(--text-invert-muted);
}

.contact-box {
	display: flex;
	flex-direction: column;
	flex: 0 0 420px;
	padding: 12px 28px 28px;
	border-radius: 12px;
	background: rgba(11, 21, 18, 0.6);
	backdrop-filter: blur(6px);
	outline: 1px solid rgba(255, 255, 255, 0.2);
	outline-offset: -0.5px;
}

.contact-box__row {
	display: flex;
	gap: 14px;
	padding-block: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-box__row .icon {
	color: var(--brand-on-dark);
}

.contact-box__label {
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	line-height: 1.2;
	color: var(--text-invert-muted);
}

.contact-box__value {
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	color: var(--text-invert);
	text-decoration: none;
}

.contact-box .btn-primary {
	margin-top: 24px;
}

@media (max-width: 960px) {
	.cta-consult__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.contact-box {
		flex-basis: auto;
	}

	.cta-consult__title {
		font-size: 32px;
		line-height: 38px;
	}
}

/* Footer */
.site-footer {
	background: var(--ink);
	color: var(--text-invert-muted);
}

.site-footer__main {
	display: flex;
	gap: 40px;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 56px var(--gutter);
}

.site-footer__left {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 30px;
}

.site-footer__brand img {
	flex-shrink: 0;
	width: 196px;
	height: 52px;
	object-fit: contain;
}

.site-footer__brand p {
	font-size: 13px;
	line-height: 22px;
}

.office-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.office-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid #26352e;
	border-radius: 12px;
	background: var(--ink-2);
}

.office-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.office-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--brand);
	color: var(--text-invert);
}

.office-card__city {
	margin-bottom: 5px;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1;
	color: var(--brand-on-dark);
}

.office-card__title {
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 20px;
	color: var(--text-invert);
}

.office-card__details {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	line-height: 21px;
}

.office-card__details li {
	display: flex;
	gap: 10px;
}

.office-card__details .icon {
	margin-top: 3px;
	color: var(--brand-on-dark);
}

.office-card__details a {
	color: inherit;
	text-decoration: none;
}

.office-card__details a:hover,
.office-card__map:hover {
	color: var(--text-invert);
	text-decoration: underline;
}

.office-card__map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--text-invert);
	text-decoration: none;
}

.office-card__map .icon {
	color: var(--brand-on-dark);
}

.newsletter {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--footer-line);
}

.newsletter__text {
	flex: 1;
}

.newsletter__title {
	margin-bottom: 6px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 17px;
	color: var(--text-invert);
}

.newsletter__sub {
	font-size: 13px;
	line-height: 20px;
}

.newsletter__field {
	display: flex;
	flex: 0 1 440px;
	height: 46px;
	border: 1px solid #2a3a32;
	border-radius: 8px;
	background: var(--ink-2);
}

.newsletter__field input {
	flex: 1;
	min-width: 0;
	padding-inline: 14px;
	border: 0;
	border-radius: 8px 0 0 8px;
	background: transparent;
	color: var(--text-invert);
	font: 13px var(--font-body);
}

.newsletter__field input::placeholder {
	color: #8fa398;
}

.newsletter__field button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	margin: -1px -1px -1px 0;
	border: 0;
	border-radius: 0 6px 6px 0;
	background: var(--brand);
	color: var(--text-invert);
}

.newsletter__field button:hover {
	background: var(--brand-dark);
}

.site-footer__right {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: 26px;
}

.footer-heading {
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: 19px;
	color: var(--text-invert);
}

.footer-heading::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin-top: 11px;
	background: var(--brand-on-dark);
}

.footer-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	gap: 12px 16px;
	font-size: 13px;
	line-height: 1.4;
}

.footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--text-invert-muted);
	text-decoration: none;
}

.footer-links a:hover {
	color: var(--text-invert);
}

.footer-links .icon {
	color: var(--brand-on-dark);
}

.footer-hours {
	display: flex;
	flex-direction: column;
	gap: 26px;
	font-size: 13px;
	line-height: 1.4;
}

.footer-hours li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-hours .icon {
	color: var(--brand-on-dark);
}

.footer-hours strong {
	margin-inline-start: auto;
	font-weight: 600;
	color: var(--text-invert);
}

.site-footer__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 20px var(--gutter);
	/* the rule spans the content width, like every other divider, not the gutters */
	background: linear-gradient(var(--footer-line), var(--footer-line)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
	font-size: 12px;
	line-height: 1.4;
	color: var(--footer-dim);
}

.site-footer__socials {
	display: flex;
	gap: 16px;
	margin-inline-start: auto;
}

.site-footer__socials a,
.site-footer__legal {
	display: inline-flex;
	color: var(--footer-dim);
	text-decoration: none;
}

.site-footer__socials a:hover,
.site-footer__legal:hover {
	color: var(--text-invert);
}

.site-footer__divider {
	width: 1px;
	height: 16px;
	background: #2a3a32;
}

@media (max-width: 1100px) {
	.site-footer__main {
		flex-direction: column;
	}

	.site-footer__right {
		flex-basis: auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto auto;
		grid-auto-flow: column;
		gap: 26px 40px;
	}

	.footer-hours {
		gap: 14px;
	}
}

@media (max-width: 760px) {
	.site-footer__brand,
	.newsletter {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.newsletter__field {
		flex-basis: auto;
		width: 100%;
	}

	.office-cards,
	.site-footer__right {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer__right {
		grid-auto-flow: row;
	}

	.site-footer__bar {
		flex-wrap: wrap;
		gap: 12px 24px;
	}

	.site-footer__bar p {
		width: 100%;
	}

	.site-footer__socials {
		margin-inline-start: 0;
	}
}

/* Generic fallbacks: plain pages (page.php, 404) and plain listings (index.php,
   archive.php for non-news taxonomies). Designed templates bring their own. */
.entry,
.wrap--page {
	padding-block: 56px var(--section-y);
}

.entry__meta {
	margin: -24px 0 24px;
	color: var(--text-muted);
}

.entry__content {
	max-width: 820px;
	font-size: 16px;
	line-height: 1.7;
}

.entry__content > * + * {
	margin-top: 1em;
}

.card-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card__link {
	color: inherit;
	text-decoration: none;
}

.card__image {
	border-radius: 12px;
}

.card__title {
	margin: 12px 0 0;
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.card__excerpt {
	margin-top: 4px;
	color: var(--text-muted);
}

.product__specs {
	border-collapse: collapse;
	width: 100%;
	margin-block: 1.5rem;
}

.product__specs caption {
	text-align: start;
	font-weight: 700;
	padding-block-end: 0.5rem;
}

.product__specs th,
.product__specs td {
	border-bottom: 1px solid var(--border);
	padding: 0.5rem;
	text-align: start;
	vertical-align: top;
}

/* Motion: sticky header, scroll reveals, button shine. main.js adds .js,
   [data-reveal] and .is-revealed; without JS everything is simply visible. */
.site-header {
	position: sticky;
	top: -46px; /* the utility strip scrolls away, the masthead stays */
	transition: box-shadow 0.3s ease;
}

.site-header.is-stuck {
	box-shadow: 0 12px 32px rgba(11, 21, 18, 0.1);
}

.site-header.is-stuck .masthead {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.masthead__logo img {
	transition: transform 0.3s ease;
	transform-origin: center;
}

.site-header.is-stuck .masthead__logo img {
	transform: scale(0.9);
}

.masthead {
	animation: header-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes header-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}

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

.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal="zoom"] {
	transform: scale(0.96);
}

.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

.eyebrow {
	position: relative;
}

.js .section-head .eyebrow::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 2px;
	margin-inline-end: 0;
	background: currentColor;
	vertical-align: middle;
	transition: width 0.6s 0.3s ease, margin 0.6s 0.3s ease;
}

.js .section-head.is-revealed .eyebrow::before {
	width: 28px;
	margin-inline-end: 10px;
}

.btn-primary,
.btn-pill {
	position: relative;
	overflow: hidden;
}

.btn-primary::after,
.btn-pill::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
}

.btn-primary:hover::after,
.btn-pill:hover::after {
	left: 130%;
}

/* Quick-contact dock + back-to-top (footer.php) */
.dock {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.dock__toggle,
.dock__top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease, visibility 0.25s;
}

.dock__toggle {
	width: 56px;
	height: 56px;
	background: var(--brand);
	color: var(--text-invert);
	box-shadow: 0 12px 30px rgba(18, 162, 87, 0.4);
}

.dock__toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--brand);
	animation: dock-ping 2.4s ease-out infinite;
}

.dock__toggle[aria-expanded="true"]::before {
	animation: none;
	opacity: 0;
}

@keyframes dock-ping {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}

.dock__toggle:hover {
	transform: scale(1.06);
}

.dock__toggle .icon-close,
.dock__toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.dock__toggle[aria-expanded="true"] .icon-close {
	display: block;
}

.dock__top {
	width: 48px;
	height: 48px;
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 10px 24px rgba(11, 21, 18, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
}

.dock__top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.dock__top:hover {
	color: var(--brand-dark);
}

.dock__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	fill: none;
	stroke-width: 3;
}

.dock__ring circle {
	stroke: var(--border);
}

.dock__ring .dock__ring-fill {
	stroke: var(--brand);
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	stroke-linecap: round;
}

/* Reading progress, driven by the page scroll itself (no JS). */
@supports (animation-timeline: scroll()) {
	.dock__ring .dock__ring-fill {
		animation: ring-fill linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes ring-fill {
	to {
		stroke-dashoffset: 0;
	}
}

.dock__menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 4px;
}

.dock__menu[hidden] {
	display: none;
}

.dock__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 250px;
	padding: 10px 16px 10px 10px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 16px 36px rgba(11, 21, 18, 0.14);
	color: var(--text);
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
	animation: dock-item-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.dock__item:nth-child(2) { animation-delay: 0.04s; }
.dock__item:nth-child(3) { animation-delay: 0.08s; }
.dock__item:nth-child(4) { animation-delay: 0.12s; }

@keyframes dock-item-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.96);
	}
}

.dock__item:hover {
	border-color: var(--brand);
	transform: translateX(-4px);
}

.dock__item strong {
	display: block;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
}

.dock__item > span:last-child {
	color: var(--text-muted);
}

.dock__item strong {
	color: var(--text);
}

.dock__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--brand);
	color: var(--text-invert);
}

.dock__icon--zalo {
	background: var(--accent-blue, #1668c9);
}

.dock__icon--fb {
	background: #0b5fcc;
}

.dock__icon--quote {
	background: var(--ink-2);
}

@media (max-width: 640px) {
	.dock {
		right: 14px;
		bottom: 14px;
	}

	.dock__toggle {
		width: 52px;
		height: 52px;
	}

	.dock__item {
		min-width: 0;
		width: calc(100vw - 28px);
	}
}

/* Mobile drawer: slide down, items cascade in. */
.mobile-nav:not([hidden]) {
	animation: drawer-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes drawer-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
}

.mobile-nav:not([hidden]) .mobile-nav__list > li {
	animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.mobile-nav__list > li:nth-child(2) { animation-delay: 0.03s; }
.mobile-nav__list > li:nth-child(3) { animation-delay: 0.06s; }
.mobile-nav__list > li:nth-child(4) { animation-delay: 0.09s; }
.mobile-nav__list > li:nth-child(5) { animation-delay: 0.12s; }
.mobile-nav__list > li:nth-child(6) { animation-delay: 0.15s; }
.mobile-nav__list > li:nth-child(7) { animation-delay: 0.18s; }
.mobile-nav__list > li:nth-child(8) { animation-delay: 0.21s; }
.mobile-nav__list > li:nth-child(9) { animation-delay: 0.24s; }

.is-drawer-open {
	overflow: hidden;
}

/* Page-to-page cross-fade (cross-document View Transitions; ignored where unsupported).
   The header is its own layer, so it stays put while the page changes under it. */
@view-transition {
	navigation: auto;
}

.site-header {
	view-transition-name: site-header;
}

::view-transition-old(root) {
	animation: vt-out 0.25s ease both;
}

::view-transition-new(root) {
	animation: vt-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes vt-out {
	to {
		opacity: 0;
	}
}

@keyframes vt-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* Partner and client logos: always in full colour. */
.logo-grid img,
.partner-tile img {
	transition: transform 0.35s ease;
}

/* Cursor spotlight on dark and glass panels (main.js sets --mx/--my). */
/* Positioning context for the spotlight layer . */
.line-panel__card,
.office-card,
.contact-box {
	position: relative;
}

[data-spotlight]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(63, 203, 130, 0.16), transparent 45%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

[data-spotlight]:hover::after {
	opacity: 1;
}

/* Tactile press on buttons. */
.btn-primary:active,
.btn-pill:active,
.btn-outline:active,
.btn-glass:active,
.hero-play:active,
.hero-mute:active,
.dock__toggle:active {
	transform: scale(0.97);
}

/* Scroll-driven parallax where the browser supports it. background-position is not a
   compositor property: every scroll frame repaints these large panels (and re-blurs the
   backdrop-filter cards on top), which janks on touch devices - so fine pointers only. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
		.cta-consult,
		.line-panel {
			animation: bg-drift linear both;
			animation-timeline: view();
		}
	}
}

@keyframes bg-drift {
	from {
		background-position: center 30%;
	}

	to {
		background-position: center 70%;
	}
}

/* 404 */
.not-found {
	position: relative;
	overflow: hidden;
	padding-block: 96px;
	background: var(--ink);
	color: var(--text-invert);
}

.not-found__code {
	font-family: var(--font-head);
	font-size: clamp(120px, 22vw, 260px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -6px;
	color: transparent;
	-webkit-text-stroke: 2px rgba(63, 203, 130, 0.55);
	animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.not-found__title {
	margin-top: 12px;
	font-family: var(--font-head);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
}

.not-found__text {
	max-width: 560px;
	margin-top: 14px;
	color: var(--text-invert-muted);
	font-size: 16px;
}

.not-found__search {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin-top: 28px;
}

.not-found__search input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding-inline: 16px;
	border: 1px solid #2a3a32;
	border-radius: 10px;
	background: var(--ink-2);
	color: var(--text-invert);
	font: 15px var(--font-body);
}

.not-found__search button {
	padding-inline: 22px;
	border: 0;
	border-radius: 10px;
	background: var(--brand);
	color: var(--text-invert);
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.8px;
}

.not-found__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}

.not-found__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 99px;
	color: var(--text-invert);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.not-found__links a:hover {
	border-color: var(--brand-on-dark);
	background: rgba(63, 203, 130, 0.1);
}

.not-found__links .icon {
	color: var(--brand-on-dark);
}

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

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

.mobile-nav {
	max-height: calc(100vh - 76px);
	max-height: calc(100dvh - 76px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Phones: a shorter, calmer home page. The video keeps its full frame with the
   controls on a dark strip under it, the four group cards become a swipeable
   row (main.js keeps the active chapter's card in view), and the long stacks
   below are tightened. */
@media (max-width: 1180px) {
	/* Blur is not reliable on phones; text behind a 92% white header ghosts through. */
	.site-header.is-stuck .masthead {
		background: var(--surface);
	}
}

@media (max-width: 640px) {
	.hero {
		padding-bottom: 24px;
	}

	.hero__stage {
		aspect-ratio: auto;
		height: calc(56.25vw + 52px);
		padding-bottom: 52px;
	}

	.hero__poster,
	.hero__video {
		height: calc(100% - 52px);
	}

	.hero__ctas {
		bottom: 64px;
	}

	.hero-dots {
		bottom: 14px;
	}

	.hero-mute {
		bottom: 8px;
		width: 36px;
		height: 36px;
	}

	.hero__cards {
		display: flex;
		gap: 12px;
		margin-top: 0;
		padding: 20px var(--gutter) 28px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.hero__cards::-webkit-scrollbar {
		display: none;
	}

	.group-card {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}

	.group-card__media {
		height: 168px;
	}

	.group-card.is-active {
		box-shadow: 0 16px 32px rgba(11, 21, 18, 0.18);
	}

	.group-card {
		box-shadow: 0 10px 24px rgba(11, 21, 18, 0.1);
	}

	/* Markets */
	.markets__grid {
		gap: 40px;
	}

	.market__photo {
		height: 200px;
	}

	.market__body {
		gap: 20px;
		padding-top: 20px;
	}

	.market__name {
		font-size: 24px;
		line-height: 30px;
	}

	/* Business lines: the card needs the room, not extra photo above it */
	.line-panel {
		min-height: 400px;
	}

	/* Logos: three across, shorter tiles */
	.logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.logo-grid li {
		height: 72px;
		padding: 12px;
	}

	/* Heads with a button: the title keeps its width, the button drops below. */
	.section-head--plain .section-head__main {
		flex: 1 1 100%;
	}

	.section-head--plain {
		gap: 20px;
		margin-bottom: 28px;
	}

	/* News list: thumbnail beside the title instead of a full-width photo each. */
	.news__layout {
		gap: 32px;
	}

	.news__list {
		gap: 20px;
	}

	.news-item {
		flex-direction: row;
		gap: 14px;
	}

	.news-item + .news-item {
		padding-top: 20px;
	}

	.news-item__photo {
		flex: 0 0 112px;
		height: 84px;
		min-height: 0;
	}

	.news-item__text {
		gap: 6px;
	}

	.news-item__title {
		font-size: 16px;
		line-height: 22px;
	}

	.news-item .link-arrow {
		display: none;
	}

	.dock__top {
		width: 42px;
		height: 42px;
	}
}

/* Contact: click-to-load map facade (the Google iframe costs ~240 KB of script) */
.contact-map__facade {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	padding: 24px;
	text-align: center;
	color: var(--brand-dark);
}

.contact-map__address {
	max-width: 520px;
	margin: 0;
	font-weight: 600;
}

.contact-map__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 24px;
}

.contact-map__load {
	border: 0;
	cursor: pointer;
}

/* Block content: core blocks inside news posts and pages (wp-block-library is not loaded). */
.entry__content h2,
.entry__content h3,
.entry__content h4 {
	margin-top: 1.6em;
	font-family: var(--font-head);
	line-height: 1.25;
	color: var(--ink);
}

.entry__content a {
	color: var(--brand);
}

.entry__content img {
	max-width: 100%;
	height: auto;
}

.entry__content .alignleft {
	float: left;
	margin: 0.4em 1.5em 1em 0;
}

.entry__content .alignright {
	float: right;
	margin: 0.4em 0 1em 1.5em;
}

.entry__content .aligncenter {
	margin-inline: auto;
}

.entry__content .alignwide,
.entry__content .alignfull {
	max-width: none;
}

.entry__content figure {
	margin-inline: 0;
}

.entry__content figcaption {
	margin-top: 0.5em;
	color: var(--text-muted);
	font-size: 14px;
	text-align: center;
}

.entry__content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.entry__content .wp-block-column {
	flex: 1 1 240px;
	min-width: 0;
}

.entry__content .wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry__content .wp-block-gallery .wp-block-image {
	flex: 1 1 calc(33.333% - 12px);
	margin: 0;
}

.entry__content .wp-block-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.entry__content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.entry__content .wp-block-button__link {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--brand);
	color: var(--text-invert);
	font-weight: 600;
	text-decoration: none;
}

.entry__content .wp-block-button__link:hover {
	background: var(--brand-dark);
}

.entry__content .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--brand);
	color: var(--brand);
}

.entry__content .wp-block-table {
	overflow-x: auto;
}

.entry__content table {
	width: 100%;
	border-collapse: collapse;
}

.entry__content th,
.entry__content td {
	border-bottom: 1px solid var(--border);
	padding: 0.5rem 0.75rem;
	text-align: start;
	vertical-align: top;
}

.entry__content thead th {
	background: var(--surface-alt);
	border-bottom: 2px solid var(--border-strong);
}

.entry__content blockquote,
.entry__content .wp-block-quote {
	margin-inline: 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-inline-start: 4px solid var(--brand);
	color: var(--text-muted);
}

.entry__content .wp-block-quote cite {
	display: block;
	margin-top: 0.5em;
	font-size: 14px;
	font-style: normal;
}

.entry__content hr,
.entry__content .wp-block-separator {
	margin-block: 2em;
	border: 0;
	border-top: 1px solid var(--border);
}

.entry__content .wp-block-embed__wrapper,
.entry__content .wp-block-embed iframe {
	max-width: 100%;
}

.entry__content .wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
}

.entry__content .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.entry__content .wp-embed-aspect-16-9 iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 640px) {
	.entry__content .alignleft,
	.entry__content .alignright {
		float: none;
		margin-inline: 0;
	}

	.entry__content .wp-block-gallery .wp-block-image {
		flex-basis: calc(50% - 12px);
	}
}

/* Home hero on phones and small tablets: the jump links move to a light strip under
   the video, the controls become a small overlay on its bottom edge (no dark band),
   and the play button steps out of the centre so the chapter title stays readable. */
@media (max-width: 768px) {
	.hero {
		padding-bottom: 24px;
	}

	.hero__stage {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
		padding-bottom: 0;
	}

	.hero__poster,
	.hero__video {
		height: 100%;
	}

	.hero__shade {
		background: linear-gradient(180deg, rgba(11, 21, 18, 0) 0%, rgba(11, 21, 18, 0) 62%, rgba(11, 21, 18, 0.55) 100%);
	}

	.hero__ctas,
	.hero__arrow,
	.hero-dots__count,
	.hero-dots__total {
		display: none;
	}

	.hero-dots {
		top: auto;
		bottom: 10px;
		gap: 0;
	}

	.hero .hero-play,
	.hero .hero-play[aria-pressed] {
		top: auto;
		bottom: 8px;
		right: calc(var(--gutter) + 44px);
		left: auto;
		width: 36px;
		height: 36px;
		border-width: 1px;
		border-color: rgba(255, 255, 255, 0.6);
		background: rgba(11, 21, 18, 0.35);
		box-shadow: none;
		opacity: 1;
		transform: none;
	}

	.hero-play svg {
		width: 16px;
		height: 16px;
	}

	.hero-play .icon-play {
		margin-left: 2px;
	}

	.hero-mute {
		top: auto;
		bottom: 8px;
		right: var(--gutter);
		width: 36px;
		height: 36px;
	}

	.hero__jump {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding: 16px var(--gutter);
		background: var(--surface);
		border-bottom: 1px solid var(--border);
	}

	.btn-jump {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 8px 12px;
		border: 1.5px solid var(--brand);
		border-radius: 8px;
		color: var(--brand-dark);
		font-family: var(--font-head);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 1px;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}

	.btn-jump:hover,
	.btn-jump:active {
		background: var(--brand-tint);
	}

	.btn-jump svg {
		flex: none;
	}

	.hero__cards {
		margin-top: 0;
		padding-top: 20px;
	}
}

@media (max-width: 479px) {
	.hero__jump {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/* Phone card row: room after the last card so it too can snap to the page gutter. */
@media (max-width: 640px) {
	.hero__cards::after {
		content: "";
		flex: 0 0 calc(20% - 12px);
	}
}

/* Photo framing: a replaced photo's focal point and zoom, set by staff in the on-page editor (inc/image-overrides.php,
   cads_image_frame_attrs()). <img>: object-position, and for a zoom a scale() about the focal point whose clip-path maps
   back onto the box (inset = focal % x (1 - 1/z) on each side), so it works without a wrapper and composes with the
   slots' own transform (card hover, panel fade). The radius is the slot's own, divided by z so it still reads as set.
   Lazy backgrounds are framed by main.js (background-position / -size). */
.market__photo,
.svc-card__img,
.history-item__photo {
	--cads-fr: 12px;
}

.about-top__photo,
.about-intro__photo,
.values-item__photo,
.about-gallery__item img {
	--cads-fr: 16px;
}

img[data-cads-frame] {
	object-position: var(--cads-x, 50%) var(--cads-y, 50%);
}

img[data-cads-z] {
	--cads-k: calc(1 - 1 / var(--cads-z));
	scale: var(--cads-z);
	transform-origin: var(--cads-x) var(--cads-y);
	clip-path: inset(calc(var(--cads-y) * var(--cads-k)) calc((100% - var(--cads-x)) * var(--cads-k)) calc((100% - var(--cads-y)) * var(--cads-k)) calc(var(--cads-x) * var(--cads-k)) round calc(var(--cads-fr, 0px) / var(--cads-z)));
	border-radius: calc(var(--cads-fr, 0px) / var(--cads-z)) !important;
}

/* A scaled <img> still counts toward the page's scrollable overflow (clip-path does not): keep a zoomed frame from
   making the page scroll sideways. clip, unlike hidden, leaves position: sticky inside working. */
.site-main:has(img[data-cads-z]) {
	overflow-x: clip;
}