/*
Theme Name: ThermaVent
Theme URI: https://example.com/thermavent
Author: Studio
Author URI: https://example.com
Description: Commercial HVAC lead-generation theme for climate-equipment suppliers. Mist-white and ink-teal palette with a jade accent and a trace of warm amber. Wide solid border framing on the home hero, duct, fin-pack, psychrometric and bag-filter shape components, custom product catalog with generic spec tables and reusable presets, inquiry-first product pages, configurable homepage sections, floating contact rail with QR modals. Flat colour only: no gradient fills, no grid or mesh backgrounds. All copy and imagery managed from the admin, so the theme fits any industry.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thermavent
Tags: custom-menu, custom-logo, featured-images, translation-ready

Font: Onest (display and body), licensed under the SIL Open Font
License 1.1 — loaded from Google Fonts.
(https://fonts.google.com/specimen/Onest)
*/

:root {
	--bg: #f2f6f6;
	--surface: #ffffff;
	--tint: #e6edec;
	--mist: #dfeae8;
	--ink: #12383c;
	--ink-soft: #2a4d51;
	--muted: #587174;
	--deep: #12383c;
	--deep-2: #0d2c30;
	--deep-edge: #082023;
	--deep-ink: #eef6f4;
	--deep-muted: #93b2ae;
	--accent: #17a08c;
	--accent-deep: #0d7c6b;
	--accent-soft: rgba(23, 160, 140, 0.12);
	--warm: #e58a3d;
	--warm-soft: rgba(229, 138, 61, 0.14);
	--danger: #bf4535;
	--line: rgba(18, 56, 60, 0.12);
	--line-strong: rgba(18, 56, 60, 0.24);
	--line-deep: rgba(238, 246, 244, 0.16);
	/* radius scale: 0 blocks / 6 inputs / 999 round parts — no other steps */
	--radius: 0px;
	--radius-input: 6px;
	--radius-round: 999px;
	--shadow: 0 22px 44px -24px rgba(8, 32, 35, 0.32);
	--shadow-soft: 0 12px 28px -18px rgba(8, 32, 35, 0.22);
	/* H-N hero: width of the solid ink-teal border that boxes in the content */
	--frame: clamp(18px, 4vw, 68px);
	--frame-top: clamp(34px, 4vw, 68px);
	/* distance from the wrap edge out to the viewport edge, for full-bleed blocks */
	--bleed: calc(max(0px, (100vw - var(--wrap)) / 2) + clamp(20px, 4vw, 48px));
	--font-display: "Onest", "Segoe UI", Helvetica, sans-serif;
	--font-body: "Onest", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wrap: 1260px;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

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

/* clip, not hidden: hidden would break the sticky header */
html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
	background: var(--bg);
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

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

:focus-visible {
	outline: 3px solid var(--accent-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.14;
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.012em;
}

p {
	margin: 0;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
}

.section-pad {
	padding-block: clamp(40px, 6vw, 72px);
}

.sec {
	padding-block: clamp(56px, 8vw, 96px);
}

/* flat colour only — no gradient, no tiled pattern */
.sec-tint {
	background: var(--tint);
}

.sec-navy {
	background: var(--deep);
}

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

.skip-link {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--deep);
	color: var(--deep-ink);
	border-radius: var(--radius);
	text-decoration: none;
	transition: top 0.2s ease;
}

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

body.no-scroll {
	overflow: hidden;
}

/* Reveal animation: only when JS added html.fx, so content is never hidden without JS */
html.fx [data-rv] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.fx [data-rv].rv-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.fx [data-rv] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =================================================================
   Buttons — solid dot prefix group.
   Every button carries a filled disc ahead of an all-caps tracked
   label. Primary buttons fill the block and knock the disc out in
   the button colour; secondary buttons drop the fill and keep the
   disc solid. On hover the disc opens into a ring and grows.
   ================================================================= */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 46px;
	padding: 12px 24px;
	border-radius: var(--radius);
	border: 1.5px solid var(--ink);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* the dot */
.btn::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: var(--radius-round);
	background: currentColor;
	box-shadow: 0 0 0 0 currentColor;
	transition: width 0.16s ease, height 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover::before,
.btn:focus-visible::before {
	width: 13px;
	height: 13px;
	background: transparent;
	box-shadow: inset 0 0 0 3px currentColor;
}

.btn-primary {
	background: var(--deep);
	border-color: var(--deep);
	color: var(--deep-ink);
}

.btn-primary:hover {
	background: var(--deep-edge);
	border-color: var(--deep-edge);
}

.btn-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: #052622;
}

.btn-accent:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
}

.btn-outline {
	background: transparent;
	border-color: var(--line-strong);
	color: var(--ink);
}

.btn-outline::before {
	background: var(--accent-deep);
}

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

.btn-outline:hover::before {
	box-shadow: inset 0 0 0 3px var(--accent-deep);
}

/* dark-panel variant: hairline border on ink-teal */
.btn-onshot {
	background: transparent;
	border-color: var(--line-deep);
	color: var(--deep-ink);
}

.btn-onshot::before {
	background: var(--accent);
}

.btn-onshot:hover {
	border-color: var(--accent);
}

.btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--ink-soft);
	min-height: 0;
	padding: 8px 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.btn-ghost:hover {
	color: var(--accent-deep);
	border-color: transparent;
}

.btn-sm {
	min-height: 44px;
	gap: 9px;
	padding: 10px 16px;
	font-size: 11.5px;
	letter-spacing: 0.1em;
}

.btn-sm::before {
	width: 7px;
	height: 7px;
}

.btn-sm:hover::before,
.btn-sm:focus-visible::before {
	width: 11px;
	height: 11px;
	box-shadow: inset 0 0 0 2.5px currentColor;
}

.btn-lg {
	min-height: 54px;
	padding: 16px 30px;
	font-size: 14px;
}

.btn .icon {
	flex: none;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--accent-deep);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: gap 0.18s ease, border-color 0.18s ease;
}

.text-link:hover {
	gap: 11px;
	border-color: var(--accent-deep);
}

/* Kicker: duct-reducer motif — one solid clip-path trapezoid, no gradient */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-deep);
}

.kicker::before {
	content: "";
	flex: none;
	width: 18px;
	height: 13px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 26%, 100% 74%, 0 100%);
}

.sec-head {
	max-width: 720px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.sec-title {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 700;
}

.sec-sub {
	margin-top: 12px;
	color: var(--muted);
	font-size: 16.5px;
	max-width: 60ch;
}

.sec-navy .sec-title {
	color: var(--deep-ink);
}

.sec-navy .sec-sub {
	color: var(--deep-muted);
}

.sec-navy .kicker {
	color: var(--accent);
}

/* ================= Topbar ================= */
.topbar {
	background: var(--deep);
	color: var(--deep-ink);
	font-size: 13px;
	border-bottom: 2px solid var(--accent);
}

.topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 40px;
}

.topbar-contacts {
	display: flex;
	align-items: center;
	gap: 22px;
}

.topbar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--deep-ink);
	text-decoration: none;
	opacity: 0.92;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.topbar a:hover {
	opacity: 1;
	color: var(--accent);
}

.topbar-hours {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--deep-muted);
}

/* ================= Header ================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.2s ease;
}

.site-header.scrolled {
	box-shadow: 0 10px 28px -18px rgba(8, 32, 35, 0.35);
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 76px;
}

.brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

.brand img {
	display: block;
	max-height: 52px;
	width: auto;
}

.brand-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
}

.brand-mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius);
	background: var(--deep);
	color: var(--accent);
	border-bottom: 4px solid var(--warm);
}

.brand-name {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.main-nav {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.nav-list > li > a {
	position: relative;
	display: inline-block;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a {
	color: var(--ink);
}

.nav-list > li > a:hover::after,
.nav-list > li.current-menu-item > a::after,
.nav-list > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 8px;
	z-index: 95;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

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

.nav-list .sub-menu a {
	display: block;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--ink-soft);
	text-decoration: none;
	border-radius: var(--radius);
	transition: background 0.15s ease, color 0.15s ease;
}

.nav-list .sub-menu a:hover {
	background: var(--accent-soft);
	color: var(--ink);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.header-cta {
	white-space: nowrap;
}

.hbtn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hbtn:hover {
	border-color: var(--accent-deep);
	color: var(--accent-deep);
}

.nav-toggle {
	display: none;
}

/* ================= Overlays: drawer / search / QR ================= */
.drawer,
.search-layer,
.qr-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
}

.drawer[hidden],
.search-layer[hidden],
.qr-modal[hidden] {
	display: none;
}

.drawer-scrim,
.search-scrim,
.qr-scrim {
	position: absolute;
	inset: 0;
	background: rgba(8, 32, 35, 0.6);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.drawer.open .drawer-scrim,
.search-layer.open .search-scrim,
.qr-modal.open .qr-scrim {
	opacity: 1;
}

.drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(360px, 88vw);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 22px 28px;
	overflow-y: auto;
	transform: translateX(102%);
	transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
	box-shadow: -18px 0 40px -24px rgba(8, 32, 35, 0.4);
	border-left: 3px solid var(--accent);
}

.drawer.open .drawer-panel {
	transform: translateX(0);
}

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.drawer-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--ink);
}

.drawer-nav {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.drawer-nav > li {
	border-bottom: 1px solid var(--line);
}

.drawer-nav a {
	display: block;
	padding: 13px 4px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

.drawer-nav a:hover {
	color: var(--accent-deep);
}

.drawer-nav .sub-menu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--accent-soft);
}

.drawer-nav .sub-menu a {
	padding: 8px 4px;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--ink-soft);
}

.drawer-cta {
	margin-top: 16px;
}

.search-panel {
	position: absolute;
	top: 18vh;
	left: 50%;
	transform: translate(-50%, -14px);
	width: min(620px, 92vw);
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.search-layer.open .search-panel {
	opacity: 1;
	transform: translate(-50%, 0);
}

.search-layer .search-form {
	flex: 1;
}

.search-layer .hbtn {
	flex: none;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-input);
	padding: 6px 6px 6px 18px;
	box-shadow: var(--shadow-soft);
}

.search-field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 16px;
	color: var(--ink);
	padding: 8px 0;
	outline: none;
}

.search-field::placeholder {
	color: var(--muted);
}

.search-submit {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: #052622;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.search-submit:hover {
	background: var(--accent-deep);
	color: #ffffff;
}

/* =================================================================
   Hero — H-N wide solid border.
   The section is one flat ink-teal slab. A white inset panel sits
   inside it, so the deep colour is left standing as a 18–68px solid
   border on all four sides. Vertical tracked labels ride the left
   and right borders, works and standards tags ride the top border,
   and the stats ledger is the bottom border itself, thickened and
   reversed out. Nothing here is a gradient or a tiled pattern.
   ================================================================= */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: var(--frame) minmax(0, 1fr) var(--frame);
	grid-template-rows: var(--frame-top) auto auto;
	background: var(--deep);
	overflow: hidden;
}

/* --- top border: works tag left, test-standard tag right --- */
.frame-top {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	padding-inline: clamp(14px, 2.4vw, 30px);
}

.frame-tag {
	min-width: 0;
	font-family: var(--font-display);
	font-size: clamp(8.5px, 0.72vw, 10.5px);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--deep-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.frame-tag-end {
	color: var(--accent);
	flex: none;
}

/* --- left and right borders: vertical tracked labels --- */
.frame-side {
	position: relative;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.frame-left {
	grid-column: 1;
}

/* pushed low so it clears the fin pack riding the top of this border */
.frame-right {
	grid-column: 3;
	align-items: flex-end;
	padding-bottom: clamp(20px, 4vw, 60px);
}

/* solid inner rule on each side border */
.frame-side::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
}

.frame-left::after {
	right: 0;
	background: var(--warm);
}

.frame-right::after {
	left: 0;
	background: var(--accent);
}

.frame-vtag {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-display);
	font-size: clamp(8px, 0.72vw, 10.5px);
	font-weight: 700;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--deep-ink);
	white-space: nowrap;
}

.frame-vtag-down {
	transform: none;
	color: var(--deep-muted);
}

/* --- inset content panel --- */
.hero-inset {
	position: relative;
	grid-column: 2;
	grid-row: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	align-items: stretch;
	gap: clamp(26px, 3.6vw, 54px);
	padding: clamp(30px, 4.2vw, 62px) clamp(22px, 3.4vw, 52px) clamp(32px, 4.4vw, 62px);
	background: var(--surface);
}

.hero-copy {
	min-width: 0;
	align-self: center;
}

.hero .kicker {
	margin-bottom: 16px;
}

.hero-title {
	font-size: clamp(25px, 2.9vw, 40px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.022em;
	max-width: 21ch;
}

.hero-sub {
	margin-top: 16px;
	font-size: 15.5px;
	line-height: 1.66;
	color: var(--muted);
	max-width: 54ch;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* shape component A — round duct end section, stepped reducer, size call-out */
.tv-duct {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(26px, 3vw, 40px);
}

.tv-duct-svg {
	flex: none;
	width: clamp(150px, 17vw, 244px);
	height: auto;
}

.tv-duct-dim {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.hero-media {
	position: relative;
	display: flex;
	min-width: 0;
}

/* fills the full height of the inset so the photo squares off against the frame */
.hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: var(--radius);
	border-bottom: 6px solid var(--warm);
}

/* shape component B — heat-exchanger fin pack, pushed onto the right border */
.tv-fins {
	position: absolute;
	top: -22px;
	right: calc(-1 * (clamp(22px, 3.4vw, 52px) + var(--frame) * 0.45));
	width: clamp(148px, 17vw, 232px);
}

.tv-fins svg {
	display: block;
	width: 100%;
	height: auto;
}

/* sits flush under the plate on its own solid block, so it stays legible over the photo */
.tv-fins-tag {
	display: block;
	padding: 5px 9px;
	background: var(--deep-edge);
	font-family: var(--font-display);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--deep-ink);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- bottom border: reversed-out stats ledger --- */
.hero-ledger {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 48px);
	padding: clamp(20px, 2.4vw, 32px) clamp(18px, 4vw, 68px);
	background: var(--deep-edge);
	border-top: 3px solid var(--accent);
}

.hero-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(16px, 2.6vw, 44px);
	margin: 0;
	min-width: 0;
}

.hero-stats .stat {
	min-width: 0;
	padding-left: clamp(14px, 1.6vw, 24px);
	border-left: 1px solid var(--line-deep);
}

.hero-stats .stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.hero-stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(20px, 2vw, 27px);
	font-weight: 700;
	color: var(--deep-ink);
	letter-spacing: -0.02em;
	line-height: 1.05;
}

/* the oversized number */
.hero-stats .stat-lead dd {
	font-size: clamp(32px, 4.4vw, 64px);
	color: var(--accent);
	letter-spacing: -0.035em;
}

.hero-stats dt {
	margin-top: 8px;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.03em;
	color: var(--deep-muted);
	max-width: 24ch;
}

/* shape component C — psychrometric line with state points and a dry-bulb scale */
.tv-psychro {
	flex: none;
	width: clamp(150px, 15vw, 210px);
	height: auto;
}

/* =================================================================
   Perks — reversed-out solid band, four numbered columns split by
   hairline rules. No cards, no icon tiles, no gradient.
   ================================================================= */
.perks {
	background: var(--deep);
}

.perks-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding-block: clamp(38px, 5vw, 60px);
}

.perk {
	min-width: 0;
	padding-inline: clamp(16px, 2.2vw, 32px);
	border-left: 1px solid var(--line-deep);
}

.perk:first-child {
	padding-left: 0;
	border-left: 0;
}

.perk-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--accent);
}

.perk-no {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--accent);
}

.perk-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	background: var(--deep-edge);
	color: var(--warm);
}

.perk-title {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--deep-ink);
}

.perk-text {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--deep-muted);
}

/* =================================================================
   Category grid — irregular 2 + 3 + 4 rows on a 12-column track.
   Row one runs two wide letterbox cards, row two three standard
   cards, row three four compact cards with a thin image strip.
   ================================================================= */
.cats-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

.cats-grid .cat-card:nth-child(-n + 2) {
	grid-column: span 6;
}

.cats-grid .cat-card:nth-child(n + 3):nth-child(-n + 5) {
	grid-column: span 4;
}

.cats-grid .cat-card:nth-child(n + 6) {
	grid-column: span 3;
}

.cats-grid .cat-card:nth-child(-n + 2) .cat-media {
	aspect-ratio: 21 / 9;
}

.cats-grid .cat-card:nth-child(n + 6) .cat-media {
	aspect-ratio: 16 / 6;
}

.cat-no {
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--accent-deep);
}

.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cat-card:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.cat-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--mist);
	overflow: hidden;
}

.cat-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.cat-card:hover .cat-media img {
	transform: scale(1.045);
}

.cat-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 58px 16px 18px;
	border-top: 1px solid var(--line);
}

.cat-name {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}

.cat-count {
	font-size: 13px;
	color: var(--muted);
}

.cat-arrow {
	position: absolute;
	right: 14px;
	bottom: 18px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	background: var(--surface);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cat-card:hover .cat-arrow,
.cat-card:focus-visible .cat-arrow {
	background: var(--accent);
	border-color: var(--accent);
	color: #052622;
}

/* ================= Product cards ================= */
.prod-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.prod-grid-archive {
	margin-top: 26px;
}

.prod-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.prod-card:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.prod-media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #edf2f1;
	overflow: hidden;
}

.prod-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.prod-card:hover .prod-media img {
	transform: scale(1.05);
}

.prod-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 18px 20px;
	border-top: 1px solid var(--line);
}

.prod-cat {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-deep);
}

.prod-name {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
}

.prod-name a {
	color: var(--ink);
	text-decoration: none;
}

.prod-name a:hover {
	color: var(--accent-deep);
}

.prod-excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--muted);
}

.prod-btn {
	margin-top: 6px;
}

/* ================= Split sections ================= */
.split-in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.split-media {
	position: relative;
}

.split-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	position: relative;
	z-index: 1;
}

/* solid offset plate behind the photo, flat colour */
.split-media::after {
	content: "";
	position: absolute;
	left: 26px;
	right: -20px;
	top: 26px;
	bottom: -20px;
	background: var(--mist);
	border-bottom: 5px solid var(--accent);
	z-index: 0;
}

.split-flip .split-media {
	order: 2;
}

.split-flip .split-media::after {
	left: -20px;
	right: 26px;
}

.split-body .sec-title {
	max-width: 22ch;
}

.split-text {
	margin: 16px 0 26px;
	font-size: 16.5px;
	color: var(--muted);
	max-width: 56ch;
}

/* =================================================================
   Steps — one horizontal commissioning rail. Milestones alternate
   above and below a single solid rule, each pinned to it by a
   square tick. Flat colour, no cards.
   ================================================================= */
/* two equal halves with the rule on the seam: odds above, evens below */
.steps-rail {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	min-height: 380px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.steps-rail::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--accent);
}

.step {
	position: relative;
	min-width: 0;
	padding-right: clamp(18px, 2.4vw, 40px);
}

.step:nth-child(1) {
	grid-column: 1;
}

.step:nth-child(2) {
	grid-column: 2;
}

.step:nth-child(3) {
	grid-column: 3;
}

.step:nth-child(4) {
	grid-column: 4;
}

.step:nth-child(odd) {
	grid-row: 1;
	align-self: end;
	padding-bottom: 26px;
}

.step:nth-child(even) {
	grid-row: 2;
	align-self: start;
	padding-top: 26px;
}

/* square tick sitting on the rail */
.step-tick {
	position: absolute;
	left: 0;
	width: 13px;
	height: 13px;
	background: var(--deep-ink);
}

.step:nth-child(odd) .step-tick {
	bottom: -6.5px;
}

.step:nth-child(even) .step-tick {
	top: -6.5px;
}

.step:hover .step-tick {
	background: var(--warm);
}

.step-num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 12px;
}

.step-title {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--deep-ink);
	max-width: 20ch;
}

.step-text {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--deep-muted);
	max-width: 30ch;
}

/* =================================================================
   Quotes — reversed-out logbook rows. Each entry is a full-width
   line split by a hairline: number and quote left, attribution
   right. No cards, no quote glyph.
   ================================================================= */
.quotes-log {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line-deep);
}

.quotes-log .quote {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(150px, 0.3fr);
	align-items: start;
	gap: clamp(16px, 2.6vw, 40px);
	margin: 0;
	padding-block: clamp(22px, 2.8vw, 34px);
	border-bottom: 1px solid var(--line-deep);
}

.quote-no {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--accent);
	padding-top: 6px;
}

.quotes-log blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(16px, 1.55vw, 21px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: var(--deep-ink);
}

.quotes-log figcaption {
	padding-top: 6px;
	border-left: 3px solid var(--warm);
	padding-left: 14px;
}

.quote-name {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--deep-ink);
}

.quote-role {
	display: block;
	font-size: 12.5px;
	color: var(--deep-muted);
	margin-top: 2px;
}

/* ================= Post cards ================= */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}

.post-grid-archive {
	margin-top: 8px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.post-card:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.post-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--mist);
	overflow: hidden;
}

.post-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.post-card:hover .post-media img {
	transform: scale(1.045);
}

.post-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: 18px 20px 22px;
}

.post-date {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-deep);
}

.post-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.32;
}

.post-title a {
	color: var(--ink);
	text-decoration: none;
}

.post-title a:hover {
	color: var(--accent-deep);
}

.post-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

.post-card .text-link {
	margin-top: 4px;
}

/* ================= CTA band ================= */
.cta-band {
	position: relative;
	background: var(--deep-edge);
	border-top: 6px solid var(--accent);
	overflow: hidden;
}

/* shape component D — bag filter frame with four V pockets */
.tv-filter {
	position: absolute;
	right: clamp(-26px, -1.4vw, -8px);
	bottom: -16px;
	width: clamp(116px, 12vw, 164px);
	pointer-events: none;
}

.tv-filter svg {
	display: block;
	width: 100%;
	height: auto;
}

.tv-filter-tag {
	position: absolute;
	right: 26px;
	top: -20px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--deep-muted);
}

@media (max-width: 1024px) {
	.tv-filter {
		display: none;
	}
}

.cta-in {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-block: clamp(48px, 6vw, 72px);
}

.cta-title {
	font-size: clamp(24px, 3vw, 34px);
	color: var(--deep-ink);
}

.cta-text {
	margin-top: 10px;
	font-size: 16px;
	color: var(--deep-muted);
	max-width: 58ch;
}

.cta-band .btn-accent {
	flex: none;
}

.cta-band .btn-accent:hover {
	box-shadow: 0 18px 34px -14px rgba(23, 160, 140, 0.6);
}

/* ================= Page hero ================= */
/* inner pages echo the home frame with a solid top band and a side rule */
.page-hero {
	position: relative;
	background: var(--mist);
	border-top: var(--frame-top) solid var(--deep);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(40px, 5vw, 64px);
	overflow: hidden;
}

.page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: clamp(8px, 1.4vw, 20px);
	background: var(--warm);
	pointer-events: none;
}

.page-hero .wrap {
	position: relative;
	z-index: 1;
}

.page-hero .kicker {
	margin-bottom: 10px;
}

.page-hero-title {
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.page-hero-sub {
	margin-top: 12px;
	font-size: 16.5px;
	color: var(--muted);
	max-width: 68ch;
}

/* ================= Entry content ================= */
.entry-content {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--ink-soft);
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	margin-top: 1.8em;
}

.entry-content h3 {
	font-size: clamp(18px, 2.2vw, 22px);
	margin-top: 1.5em;
}

.entry-content a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
}

.entry-content li {
	margin-block: 0.35em;
}

.entry-content blockquote {
	margin: 1.4em 0;
	padding: 16px 22px;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--accent-soft);
	color: var(--ink);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.entry-content th,
.entry-content td {
	padding: 11px 14px;
	border: 1px solid var(--line);
	text-align: left;
}

.entry-content details {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	padding: 0 20px;
}

.entry-content details + details {
	margin-top: 12px;
}

.entry-content summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 16px 36px 16px 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--ink);
}

.entry-content summary::-webkit-details-marker {
	display: none;
}

.entry-content summary::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 500;
	color: var(--accent-deep);
	transition: transform 0.18s ease;
}

.entry-content details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.entry-content details > *:not(summary) {
	margin-bottom: 16px;
}

.entry-content details > p:last-child {
	padding-bottom: 4px;
}

.entry-hero-img {
	margin: 0 0 30px;
}

.entry-hero-img img {
	display: block;
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.entry-single .entry-content,
.entry-single .entry-hero-img {
	max-width: 840px;
	margin-inline: auto;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	max-width: 840px;
	margin: 44px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 14.5px;
}

.post-nav a {
	color: var(--ink-soft);
	text-decoration: none;
}

.post-nav a:hover {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

/* ================= Contact cards ================= */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 1.6em 0;
}

.contact-card {
	padding: 24px 24px 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: none;
}

.contact-card h3 {
	font-size: 16px;
	margin: 0 0 8px;
}

.contact-card p {
	margin: 0.2em 0;
	font-size: 14.5px;
	color: var(--muted);
}

.contact-card a {
	color: var(--accent-deep);
	text-decoration: none;
	font-weight: 500;
}

/* ================= Filter chips ================= */
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.chip:hover {
	border-color: var(--accent-deep);
	color: var(--accent-deep);
}

.chip-on {
	background: var(--deep);
	border-color: var(--deep);
	color: var(--deep-ink);
}

/* ================= Breadcrumbs ================= */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block: 18px 4px;
	font-size: 13.5px;
	color: var(--muted);
}

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

.crumbs a:hover {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.crumbs-here {
	color: var(--ink);
	font-weight: 500;
}

/* ================= Product single ================= */
.product-single {
	padding-block: 18px clamp(48px, 6vw, 80px);
}

.product-top {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.product-photo {
	position: sticky;
	top: 96px;
	margin: 0;
}

.product-photo img {
	display: block;
	width: 100%;
	border-radius: calc(var(--radius) + 4px);
	border: 1px solid var(--line);
	background: #edf2f1;
	box-shadow: var(--shadow-soft);
}

/* ---- product detail thumbnail gallery ---- */
.pdp-gallery-main {
	margin: 0;
}

.pdp-gallery-main img {
	display: block;
	width: 100%;
	border-radius: calc(var(--radius) + 4px);
	border: 1px solid var(--line);
	background: #edf2f1;
	box-shadow: var(--shadow-soft);
}

.pdp-gallery-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.pdp-thumb {
	display: block;
	width: 76px;
	height: 76px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-input);
	background: var(--surface);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.pdp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pdp-thumb:hover {
	border-color: var(--line-strong);
}

.pdp-thumb.is-active {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 2px var(--accent);
}

.product-summary .prod-cat {
	display: inline-block;
	margin-bottom: 8px;
}

.product-title {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.product-intro {
	margin-top: 14px;
	font-size: 16.5px;
	color: var(--muted);
}

.product-highlights {
	list-style: none;
	margin: 24px 0 0;
	padding: 8px 0 0;
	border-top: 2px solid var(--accent);
}

.product-highlights li {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 11px 2px;
	border-bottom: 1px dashed var(--line-strong);
	font-size: 14.5px;
}

.product-highlights li:last-child {
	border-bottom: 0;
}

.hl-label {
	color: var(--muted);
}

.hl-value {
	color: var(--ink);
	font-weight: 600;
	text-align: right;
}

.product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.product-note {
	margin-top: 14px;
	font-size: 13px;
	color: var(--muted);
}

/* ================= Spec table ================= */
.prod-specs {
	margin-top: clamp(40px, 5vw, 64px);
}

.prod-specs-title,
.product-desc h2,
.product-related h2,
.product-inquiry .zc-inquiry-block__intro h2 {
	font-size: clamp(21px, 2.6vw, 28px);
	margin-bottom: 18px;
}

/* Wide tables scroll inside their own container (grid min-width pitfall) */
.prod-specs-scroll {
	min-width: 0;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.prod-specs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.prod-specs-table th {
	width: 34%;
	padding: 13px 18px;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
	background: var(--tint);
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	white-space: nowrap;
}

.prod-specs-table td {
	padding: 13px 18px;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
}

.prod-specs-table tr:last-child th,
.prod-specs-table tr:last-child td {
	border-bottom: 0;
}

.product-desc,
.product-related,
.product-inquiry {
	margin-top: clamp(40px, 5vw, 64px);
}

.product-related .prod-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ================= Inquiry form (plugin markup) ================= */
.zc-inquiry-block {
	padding: clamp(26px, 3.4vw, 44px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.zc-inquiry-block__intro h2 {
	margin-bottom: 8px;
}

.zc-inquiry-block__intro p {
	color: var(--muted);
	font-size: 15px;
	margin-bottom: 24px;
}

.zc-inquiry-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

.zc-inquiry-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.zc-required {
	color: var(--danger);
}

.zc-inquiry-field input[type="text"],
.zc-inquiry-field input[type="email"],
.zc-inquiry-field input[type="number"],
.zc-inquiry-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-input);
	background: var(--bg);
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.zc-inquiry-field input:focus,
.zc-inquiry-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.zc-inquiry-field:has(textarea) {
	grid-column: 1 / -1;
}

.zc-btn,
.zc-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 6px;
	padding: 14px 30px;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--accent);
	color: #052622;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.zc-btn:hover,
.zc-btn-primary:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(13, 124, 107, 0.55);
}

.zc-inquiry-notice {
	margin-top: 16px;
	padding: 13px 16px;
	border-radius: var(--radius);
	background: var(--accent-soft);
	border: 1px solid rgba(23, 160, 140, 0.45);
	color: #0b5d51;
	font-size: 14.5px;
}

.zc-inquiry-notice.is-error {
	background: rgba(191, 69, 53, 0.08);
	border-color: rgba(191, 69, 53, 0.35);
	color: var(--danger);
}

.inquiry-fallback {
	padding: 22px 26px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 15.5px;
}

/* ================= Footer (ink teal) ================= */
.site-footer {
	background: var(--deep);
	color: var(--deep-muted);
	border-top: 6px solid var(--warm);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1.4fr;
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 44px);
}

.f-brand .brand-text {
	color: var(--deep-ink);
}

.f-brand .brand-mark {
	background: rgba(238, 246, 244, 0.08);
	border: 1px solid var(--line-deep);
}

.f-about {
	margin-top: 16px;
	font-size: 14.5px;
	line-height: 1.7;
	max-width: 44ch;
	color: var(--deep-muted);
}

.f-title {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--deep-ink);
	margin: 4px 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(23, 160, 140, 0.55);
	max-width: 72px;
	white-space: nowrap;
}

.f-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.f-menu li {
	margin-bottom: 9px;
}

.f-menu a {
	color: var(--deep-muted);
	text-decoration: none;
	font-size: 14.5px;
	transition: color 0.15s ease;
}

.f-menu a:hover {
	color: var(--accent);
}

.f-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.f-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 14.5px;
	line-height: 1.55;
}

.f-contact-list .icon {
	flex: none;
	margin-top: 3px;
	color: var(--accent);
}

.f-contact-list a {
	color: var(--deep-muted);
	text-decoration: none;
}

.f-contact-list a:hover {
	color: var(--accent);
}

.social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.social-link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line-deep);
	border-radius: var(--radius);
	background: transparent;
	color: var(--deep-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.social-link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #052622;
	transform: translateY(-2px);
}

.footer-bottom {
	border-top: 1px solid var(--line-deep);
}

.footer-bottom-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 20px;
	font-size: 13px;
}

.copyright {
	color: var(--deep-muted);
}

.policy-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.policy-menu a {
	color: var(--deep-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.policy-menu a:hover {
	color: var(--accent);
}

/* ================= Contact rail ================= */
.contact-rail {
	position: fixed;
	bottom: 28px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-rail.rail-right {
	right: 22px;
}

.contact-rail.rail-left {
	left: 22px;
}

.rail-btn {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: var(--deep);
	color: var(--deep-ink);
	cursor: pointer;
	box-shadow: 0 14px 28px -12px rgba(8, 32, 35, 0.45);
	transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.rail-btn:hover {
	background: var(--accent);
	color: #052622;
	transform: translateY(-3px);
}

/* ================= QR modal ================= */
.qr-modal {
	display: grid;
	place-items: center;
}

.qr-modal[hidden] {
	display: none;
}

.qr-panel {
	position: relative;
	z-index: 1;
	width: min(360px, 92vw);
	padding: 30px 28px 28px;
	background: var(--surface);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.qr-modal.open .qr-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.qr-close {
	position: absolute;
	top: 12px;
	right: 12px;
}

.qr-title {
	font-size: 19px;
	margin-bottom: 16px;
}

.qr-img {
	display: block;
	width: 210px;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.qr-text {
	margin-top: 14px;
	font-size: 14px;
	color: var(--muted);
}

.qr-btn {
	margin-top: 16px;
}

/* ================= Pagination ================= */
.pagination-nav {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 4vw, 48px);
}

.pagination-nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0 3px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pagination-nav .page-numbers.current {
	background: var(--deep);
	border-color: var(--deep);
	color: var(--deep-ink);
}

.pagination-nav a.page-numbers:hover {
	border-color: var(--accent-deep);
	color: var(--accent-deep);
}

/* ================= Search results ================= */
.search-again {
	max-width: 560px;
	margin-bottom: 34px;
}

.result-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.result-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.result-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

.result-media {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--mist);
}

.result-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.result-body {
	flex: 1;
	min-width: 0;
}

.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: #0b5d51;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.result-title {
	font-size: 17px;
	font-weight: 700;
}

.result-title a {
	color: var(--ink);
	text-decoration: none;
}

.result-title a:hover {
	color: var(--accent-deep);
}

.result-excerpt,
.result-price {
	margin-top: 4px;
	font-size: 14px;
	color: var(--muted);
}

.result-arrow {
	flex: none;
	color: var(--muted);
}

/* ================= Empty state ================= */
.empty-state {
	max-width: 560px;
	margin: clamp(24px, 4vw, 48px) auto;
	padding: clamp(32px, 5vw, 52px);
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-top: 5px solid var(--accent);
	border-radius: var(--radius);
}

.empty-state h2 {
	font-size: 22px;
	margin-bottom: 10px;
}

.empty-state p {
	color: var(--muted);
	margin-bottom: 20px;
}

.empty-search {
	max-width: 420px;
	margin: 0 auto 20px;
}

.empty-search .search-form {
	box-shadow: none;
}

.empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ================= Responsive ================= */
@media (max-width: 1100px) {
	.prod-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.main-nav {
		display: none;
	}
	.nav-toggle {
		display: grid;
	}
	.header-cta {
		display: none;
	}
	/* categories fall back to an even three-across, still nine cards */
	.cats-grid .cat-card:nth-child(-n + 2),
	.cats-grid .cat-card:nth-child(n + 3):nth-child(-n + 5),
	.cats-grid .cat-card:nth-child(n + 6) {
		grid-column: span 4;
	}
	.cats-grid .cat-card:nth-child(-n + 2) .cat-media,
	.cats-grid .cat-card:nth-child(n + 6) .cat-media {
		aspect-ratio: 4 / 3;
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.prod-grid,
	.prod-grid-archive,
	.product-related .prod-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hero-inset {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(24px, 4vw, 40px);
	}
	.hero-media {
		order: -1;
	}
	.hero-title {
		max-width: none;
	}
	.tv-fins {
		width: clamp(132px, 20vw, 180px);
	}
	.product-top {
		grid-template-columns: 1fr;
	}
	.product-photo {
		position: static;
		max-width: 560px;
	}
}

@media (max-width: 960px) {
	/* commissioning rail turns vertical: one rule down the left side */
	.steps-rail {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		min-height: 0;
		padding-left: 26px;
	}
	.step:nth-child(1),
	.step:nth-child(2),
	.step:nth-child(3),
	.step:nth-child(4) {
		grid-column: 1;
	}
	.steps-rail::before {
		left: 5px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
		margin-top: 0;
	}
	.step,
	.step:nth-child(odd),
	.step:nth-child(even) {
		grid-row: auto;
		align-self: stretch;
		padding: 0 0 clamp(26px, 4vw, 38px);
	}
	.step:last-child {
		padding-bottom: 0;
	}
	.step-tick,
	.step:nth-child(odd) .step-tick,
	.step:nth-child(even) .step-tick {
		left: -26px;
		top: 8px;
		bottom: auto;
	}
	.step-title,
	.step-text {
		max-width: 46ch;
	}
}

@media (max-width: 900px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.split-in {
		grid-template-columns: 1fr;
	}
	.split-flip .split-media {
		order: 0;
	}
	.contact-cards {
		grid-template-columns: 1fr;
	}
	.zc-inquiry-form__grid {
		grid-template-columns: 1fr;
	}
	/* stats ledger drops the chart and stacks under the numbers */
	.hero-ledger {
		flex-direction: column;
		align-items: stretch;
	}
	.tv-psychro {
		display: none;
	}
	.perks-band {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(24px, 4vw, 34px);
	}
	.perks-band .perk:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	.quotes-log .quote {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.quotes-log figcaption {
		grid-column: 2;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 15px;
	}
	.topbar-hours {
		display: none;
	}
	.frame-tag-end {
		display: none;
	}
	/* the floating contact rail sits over this border on phones */
	.frame-vtag-down {
		display: none;
	}
	.tv-fins {
		top: -14px;
		right: -8px;
		width: clamp(104px, 29vw, 148px);
	}
	.tv-fins-tag {
		display: none;
	}
	.cta-in {
		flex-direction: column;
		align-items: flex-start;
	}
	.contact-rail {
		bottom: 16px;
	}
	.contact-rail.rail-right {
		right: 12px;
	}
	.contact-rail.rail-left {
		left: 12px;
	}
	.rail-btn {
		width: 46px;
		height: 46px;
	}
	.rail-no-mobile {
		display: none;
	}
	.split-media::after {
		right: -10px;
		bottom: -10px;
	}
	.split-flip .split-media::after {
		left: -10px;
	}
	/* categories two across, last card takes the full row */
	.cats-grid .cat-card:nth-child(-n + 2),
	.cats-grid .cat-card:nth-child(n + 3):nth-child(-n + 5),
	.cats-grid .cat-card:nth-child(n + 6) {
		grid-column: span 6;
	}
	.cats-grid .cat-card:last-child {
		grid-column: span 12;
	}
}

@media (max-width: 560px) {
	.cats-grid .cat-card:nth-child(-n + 2),
	.cats-grid .cat-card:nth-child(n + 3):nth-child(-n + 5),
	.cats-grid .cat-card:nth-child(n + 6) {
		grid-column: span 12;
	}
	.post-grid {
		grid-template-columns: 1fr;
	}
	.perks-band {
		grid-template-columns: 1fr;
		row-gap: 26px;
	}
	.perks-band .perk {
		padding-left: 0;
		border-left: 0;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.footer-bottom-in {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-actions .btn {
		width: 100%;
	}
	.product-actions .btn {
		width: 100%;
	}
	.topbar-contacts {
		gap: 14px;
	}
	/* the frame stays visible at 390: 18px sides, tags still legible */
	.hero-stats {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.hero-stats .stat {
		padding-left: 0;
		padding-top: 14px;
		border-left: 0;
		border-top: 1px solid var(--line-deep);
	}
	.hero-stats .stat:first-child {
		padding-top: 0;
		border-top: 0;
	}
	.hero-stats dt {
		max-width: none;
	}
	.tv-duct {
		flex-wrap: wrap;
		gap: 8px;
	}
	.quotes-log .quote {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.quotes-log figcaption {
		grid-column: 1;
	}
	.quote-no {
		padding-top: 0;
	}
}

@media (max-width: 430px) {
	.prod-grid,
	.prod-grid-archive,
	.product-related .prod-grid {
		grid-template-columns: 1fr;
	}
	.brand-name {
		font-size: 17px;
		white-space: normal;
	}
}