/*
Theme Name:  Colibri Spindles Child
Theme URI:   https://colibrispindles.com
Description: Hello Elementor child theme — Colibri Spindles homepage rebuild 2026.
Author:      Colibri Spindles Ltd.
Template:    hello-elementor
Version:     1.63.2
Text Domain: colibri-spindles-child
*/

/* ================================================================
   BRAND TOKENS
   ================================================================ */

:root {
	--clr-red:        #c31a1a;
	--clr-red-dark:   #a31616;
	--clr-teal-900:   #1b5b67;
	--clr-teal-700:   #35899d;
	--clr-teal-600:   #4995a6;
	--clr-teal-500:   #669eb1;
	--clr-teal-400:   #98c2cc;
	--clr-teal-300:   #b9d8dc;
	--clr-teal-200:   #cdd8dc;
	--clr-teal-100:   #ebf2f2;
	--clr-dark:       #333333;
	--clr-white:      #ffffff;
	--clr-rule:       #d0d0d0;

	--font:           'Assistant', sans-serif;
	--max-w:          100%;       /* full-width layout (was 1100px) */
	--px:             clamp(16px, 4vw, 56px);
	--trans:          0.2s ease;
}

/* Responsive tiers - homepage sections switch together at three standard
   cut points: tablet <=1024px, mobile <=768px, small phone <=480px.
   Prefer fluid clamp()/auto-fit sizing; reach for these tiers only when a
   hard layout switch is needed, and reuse the same values. */

/* ================================================================
   BASE
   ================================================================ */

body,
body * {
	font-family: var(--font);
}

body {
	color: var(--clr-dark);
	background: #fff;
}

/* Responsive media safety — images never overflow their container */
img {
	max-width: 100%;
	height: auto;
}

/* ================================================================
   1. SELLING POINTS (1-2-3) SECTION  —  full-bleed photo backdrop
   ================================================================ */

/*
 * The cover photo fills the whole section behind a legibility scrim;
 * the bold 1-2-3 content sits on top. The JS switcher toggles .has-bg
 * and sets the .js-hero-bg-img src. Default (Option 1) = dark scrim +
 * white bold text; Option D overrides to a light scrim + charcoal text.
 */

.selling-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--clr-teal-900);
	padding: clamp(22px, 3.2vw, 44px) var(--px) clamp(40px, 6vw, 78px);
	min-height: 0;            /* content-driven — removes the big gap under the menu */
	display: flex;
	align-items: center;
}

/* Full-bleed background photo */
.selling-hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: none;
	z-index: 0;
}

.selling-hero.has-bg .selling-hero__bg-img {
	display: block;
}

/* Legibility scrim (colour set per Option) */
.selling-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(15, 45, 52, 0.55) 0%,
		rgba(15, 45, 52, 0.72) 100%
	);
}

/* Content above the scrim */
.selling-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
}

.selling-hero__content {
	width: 100%;
}

/* Section label */
.selling-hero__heading {
	font-size: clamp(0.8rem, 1.4vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--clr-red);
	margin: 0 0 clamp(20px, 3vw, 32px);
}

/* Tabs */
.selling-hero__tabs {
	display: flex;
	gap: 0;
	margin-bottom: clamp(28px, 4vw, 44px);
	flex-wrap: wrap;
	border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}

.selling-hero__tab-btn {
	padding: 12px clamp(16px, 2.4vw, 30px);
	font-size: clamp(0.8rem, 1.1vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: color var(--trans), border-color var(--trans), background var(--trans);
}

.selling-hero__tab-btn.is-active {
	color: #fff;
	border-bottom-color: var(--clr-red);
}

.selling-hero__tab-btn:hover:not(.is-active) {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

/* Panels */
.selling-hero__panel {
	display: none;
}

.selling-hero__panel.is-active {
	display: block;
}

/* Items — bold 1-2-3 across the full width */
.selling-hero__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3.5vw, 48px);
}

.selling-hero__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
	border-top: 4px solid var(--clr-red);
}

/* Big bold number */
.selling-hero__item-num {
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: 800;
	color: var(--clr-red);
	line-height: 0.95;
}

/* Bold heading */
.selling-hero__item-heading {
	font-size: clamp(1.2rem, 2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}

/* Body — clamped to 4 lines (more visible text); expand with Read More */
.selling-hero__item-body {
	font-size: clamp(0.92rem, 1.1vw, 1.08rem);
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.selling-hero__item-body.is-expanded {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

/* Read More button */
.selling-hero__read-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-teal-300);
	cursor: pointer;
	transition: color var(--trans);
	align-self: flex-start;
}

.selling-hero__read-more:hover {
	color: #fff;
}

/* Learn More link */
.selling-hero__item-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-teal-300);
	text-decoration: none;
	margin-top: 4px;
	align-self: flex-start;
	transition: color var(--trans), gap var(--trans);
}

.selling-hero__item-link:hover {
	color: #fff;
	gap: 10px;
}

/* ---- Selling section responsive (tiers: tablet 1024 / mobile 768 / small phone 480) ---- */
@media (max-width: 768px) {
	.selling-hero__items {
		grid-template-columns: 1fr;
		gap: 28px;
		max-width: 540px;
	}

	.selling-hero__item {
		padding-top: 16px;
	}
}

@media (max-width: 480px) {
	.selling-hero {
		min-height: auto;
		padding: 44px var(--px);
	}

	/* Stronger scrim on small screens where text sits fully over the photo */
	.selling-hero::before {
		background: linear-gradient(
			to bottom,
			rgba(15, 45, 52, 0.70) 0%,
			rgba(15, 45, 52, 0.82) 100%
		);
	}
}


/* ================================================================
   2. CTA STRIP
   ================================================================ */

.cta-strip {
	background: var(--clr-red);
	border-top: 1px solid var(--clr-red-dark);
	border-bottom: 1px solid var(--clr-red-dark);
	padding: 16px var(--px);
}

.cta-strip__inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.cta-strip__label {
	font-size: clamp(0.9rem, 1.4vw, 1.05rem);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.cta-strip__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 22px;
	background: #fff;
	color: var(--clr-red);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--trans);
}

.cta-strip__btn:hover {
	background: rgba(255, 255, 255, 0.85);
	color: var(--clr-red);
}

/* Multiple action buttons sit together on the right */
.cta-strip__btns {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 540px) {
	.cta-strip__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}


/* ================================================================
   3. HERO SLIDER
   ================================================================ */

.hero-slider-wrap {
	width: 100%;
	overflow: hidden;
}

/* Revolution Slider button normalisation */
.hero-slider-wrap .tp-button.rev-btn:first-of-type,
.hero-slider-wrap .tp-caption.rev-btn.tp-btn-primary {
	background-color: var(--clr-red) !important;
	border-color: var(--clr-red) !important;
	color: #fff !important;
	font-family: var(--font) !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	transition: background var(--trans) !important;
}

.hero-slider-wrap .tp-button.rev-btn:first-of-type:hover,
.hero-slider-wrap .tp-caption.rev-btn.tp-btn-primary:hover {
	background-color: var(--clr-red-dark) !important;
	border-color: var(--clr-red-dark) !important;
}

.hero-slider-wrap .tp-button.rev-btn,
.hero-slider-wrap .tp-caption.rev-btn {
	background-color: var(--clr-teal-700) !important;
	border-color: var(--clr-teal-700) !important;
	color: #fff !important;
	font-family: var(--font) !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	transition: background var(--trans) !important;
}

.hero-slider-wrap .tp-button.rev-btn:hover,
.hero-slider-wrap .tp-caption.rev-btn:hover {
	background-color: var(--clr-teal-900) !important;
	border-color: var(--clr-teal-900) !important;
}


/* ================================================================
   4. RECOMMENDATIONS
   ================================================================ */

.reco-section {
	padding: clamp(44px, 6vw, 72px) var(--px);
	background: #fff;
}

.reco-section__inner {
	max-width: var(--max-w);
	margin: 0 auto;
}

.reco-section__heading {
	font-size: clamp(0.8rem, 1.3vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--clr-red);
	margin: 0 0 10px;
}

.reco-section__rule {
	border: none;
	border-top: 2px solid var(--clr-teal-300);
	margin: 0 0 36px;
}


/* ================================================================
   5. BLOG — LATEST UPDATES
   ================================================================ */

.latest-updates {
	padding: clamp(44px, 6vw, 72px) var(--px);
	background: #fff;
}

.latest-updates__inner {
	max-width: 1200px;        /* narrower, centred column with a readable cap — just this section */
	margin: 0 auto;
}

.latest-updates__heading {
	font-size: clamp(0.8rem, 1.3vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--clr-red);
	margin: 0 0 10px;
}

.latest-updates__rule {
	border: none;
	border-top: 2px solid var(--clr-teal-300);
	margin: 0 0 36px;
}

.latest-updates__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.update-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--clr-teal-200);
	overflow: hidden;
	transition: box-shadow var(--trans), border-color var(--trans);
}

.update-card:hover {
	border-color: var(--clr-teal-400);
	box-shadow: 0 4px 18px rgba(53, 137, 157, 0.1);
}

/* Image slot — full-res photo, never stretched */
.update-card__image {
	width: 100%;
	height: 180px;
	overflow: hidden;
	flex-shrink: 0;
	order: -1;
	background: #fff;
	border-bottom: 1px solid #ececec;
}

.update-card__image img,
.update-card__image .update-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;          /* show the whole graphic (logos/badges/screens) — no zoom-crop */
	object-position: center;
	padding: 14px;
	box-sizing: border-box;
	display: block;
	transition: transform var(--trans);
}

.update-card:hover .update-card__image img,
.update-card:hover .update-card__image .update-card__img {
	transform: scale(1.03);
}

.update-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clr-teal-100);
}

.update-card__body {
	flex: 1;
	padding: 22px 20px 20px;
	display: flex;
	flex-direction: column;
}

.update-card__title {
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--clr-teal-900);
	margin: 0 0 12px;
	line-height: 1.4;
}

.update-card__title a {
	color: inherit;
	text-decoration: none;
}

.update-card__title a:hover {
	color: var(--clr-teal-700);
}

.update-card__rule {
	border: none;
	border-top: 1px solid var(--clr-rule);
	margin: 0 0 14px;
}

.update-card__excerpt {
	font-size: 0.88rem;
	line-height: 1.6;
	color: #555;
	flex: 1;
	margin: 0 0 20px;
}

.update-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--clr-teal-700);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	align-self: flex-start;
	transition: background var(--trans);
}

.update-card__btn:hover {
	background: var(--clr-teal-900);
	color: #fff;
}



/* ================================================================
   6. STICKY CONTACT BUTTON
   ================================================================ */

.sticky-contact-btn {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--clr-red);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-top-left-radius: 3px;
	transition: background var(--trans);
}

.sticky-contact-btn:hover {
	background: var(--clr-red-dark);
	color: #fff;
}

.sticky-contact-btn__icon {
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.sticky-contact-btn span {
		display: none;
	}

	.sticky-contact-btn {
		padding: 14px 16px;
	}
}


/* ================================================================
   Option 1 (Bold) has been retired. The unscoped base styles above
   remain only as a pre-theme fallback; `theme-d` (added by default in
   header.php) is the live Maxon base shared by all three D variants.
   ================================================================ */


/* ================================================================
   OPTION D — MAXON / SWISS PRECISION  (shared base for D1/D2/D3)
   Full-bleed backdrop, light scrim + charcoal text, flat ghost
   buttons, hairline cards. `theme-d` alone = variant D1 (underline
   tabs). D2/D3 below override ONLY the tab hover + active styling.
   ================================================================ */

body.theme-d {
	--clr-dark: #1a1a1a;
}

body.theme-d .selling-hero {
	background-color: #fff;
}

/* Light scrim — photo stays bright, charcoal text stays legible */
body.theme-d .selling-hero::before {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.78) 0%,
		rgba(255, 255, 255, 0.90) 100%
	);
}

body.theme-d .selling-hero__heading {
	letter-spacing: 0.28em;
}

body.theme-d .selling-hero__tabs {
	border-bottom-color: rgba(0, 0, 0, 0.12);
}

body.theme-d .selling-hero__tab-btn {
	color: #999;
}

body.theme-d .selling-hero__tab-btn.is-active {
	color: #1a1a1a;
	border-bottom-color: var(--clr-red);
}

body.theme-d .selling-hero__tab-btn:hover:not(.is-active) {
	color: var(--clr-red);
	background-color: rgba(0, 0, 0, 0.04);
}

/* Mixed-case bold heading, charcoal */
body.theme-d .selling-hero__item-heading {
	color: #1a1a1a;
	text-transform: none;
	letter-spacing: 0;
}

body.theme-d .selling-hero__item-body {
	color: #555;
}

/* Read More + Learn More links — readable hover & select (focus/active)
   states. Force a transparent background so the accessibility widget's
   focus highlight can't render red text on a red fill; provide a clean
   red focus ring for keyboard users instead. */
body.theme-d .selling-hero__read-more {
	color: #777;
}

body.theme-d .selling-hero__read-more:hover,
body.theme-d .selling-hero__read-more:focus,
body.theme-d .selling-hero__read-more:active {
	color: var(--clr-red);
	background: transparent !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.theme-d .selling-hero__item-link {
	color: var(--clr-red);
}

body.theme-d .selling-hero__item-link:hover,
body.theme-d .selling-hero__item-link:focus,
body.theme-d .selling-hero__item-link:active {
	color: var(--clr-red-dark);
	background: transparent !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.theme-d .selling-hero__read-more:focus-visible,
body.theme-d .selling-hero__item-link:focus-visible {
	outline: 2px solid var(--clr-red);
	outline-offset: 2px;
	border-radius: 2px;
}

/* CTA strip — clean white band, red ghost button */
body.theme-d .cta-strip {
	background: #fff;
	border-top: 1px solid #e2e2e2;
	border-bottom: 1px solid #e2e2e2;
}

body.theme-d .cta-strip__label {
	color: #1a1a1a;
	font-weight: 600;
}

body.theme-d .cta-strip__btn {
	background: transparent;
	color: var(--clr-red);
	border: 1.5px solid var(--clr-red);
}

body.theme-d .cta-strip__btn:hover {
	background: var(--clr-red);
	color: #fff;
}

/* Primary button (e.g. Get a Quote) — solid red so it stands out */
body.theme-d .cta-strip__btn--primary {
	background: var(--clr-red);
	color: #fff;
	border-color: var(--clr-red);
}

body.theme-d .cta-strip__btn--primary:hover {
	background: var(--clr-red-dark);
	border-color: var(--clr-red-dark);
	color: #fff;
}

/* Generous, minimal content sections */
body.theme-d .reco-section,
body.theme-d .latest-updates {
	background: #fff;
}

/* Blog sits in a soft brand band (DMG-MORI style) to set it apart */
body.theme-d .latest-updates {
	background: var(--clr-teal-100);
}

body.theme-d .reco-section__heading,
body.theme-d .latest-updates__heading {
	letter-spacing: 0.28em;
}

body.theme-d .reco-section__rule,
body.theme-d .latest-updates__rule {
	border-top: 1px solid #e2e2e2;
}

/* Flat image-led cards — hairline border, charcoal hover, no shadow */
body.theme-d .update-card {
	border: 1px solid #ececec;
	box-shadow: none;
}

body.theme-d .update-card:hover {
	border-color: #1a1a1a;
	box-shadow: none;
}

/* Ghost buttons on cards */
body.theme-d .update-card__btn {
	background: transparent;
	color: var(--clr-red);
	border: 1.5px solid var(--clr-red);
}

body.theme-d .update-card__btn:hover {
	background: var(--clr-red);
	color: #fff;
}

/* Light scrim on small screens too */
@media (max-width: 480px) {
	body.theme-d .selling-hero::before {
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.84) 0%,
			rgba(255, 255, 255, 0.92) 100%
		);
	}
}


/* ================================================================
   TAB STYLE — D2 red fill (locked). Body carries theme-d + theme-d2.
   ================================================================ */

body.theme-d2 .selling-hero__tabs {
	border-bottom: none;
	gap: 8px;
}

body.theme-d2 .selling-hero__tab-btn {
	border-bottom: none;
	margin-bottom: 0;
	border-radius: 3px;
}

body.theme-d2 .selling-hero__tab-btn:hover:not(.is-active) {
	color: var(--clr-red);
	background-color: rgba(195, 26, 26, 0.10);
}

body.theme-d2 .selling-hero__tab-btn.is-active {
	color: #fff;
	background-color: var(--clr-red);
	border-bottom-color: transparent;
}


/* ================================================================
   SITE FOOTER  —  compact, light, red accent, full-colour logo.
   ================================================================ */

.site-footer {
	background: #fff;
	border-top: 3px solid var(--clr-red);
}

.site-footer__bar {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: clamp(22px, 3vw, 34px) var(--px);
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	flex-wrap: wrap;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.site-footer__est {
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clr-teal-700);
}

.site-footer__logo {
	display: inline-flex;
	flex-shrink: 0;
}

.site-footer__logo img {
	height: 42px;
	width: auto;
	display: block;
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	justify-content: flex-start;
}

.site-footer__nav a {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clr-teal-900);
	text-decoration: none;
	transition: color var(--trans);
}

.site-footer__nav a:hover {
	color: var(--clr-red);
}

.site-footer__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px;
	background: var(--clr-red);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;          /* push the button to the far right; links stay left by the logo */
	transition: background var(--trans);
}

.site-footer__btn:hover {
	background: var(--clr-red-dark);
	color: #fff;
}

.site-footer__copyright {
	border-top: 1px solid #ececec;
	padding: 15px var(--px);
	text-align: center;
	font-size: 0.78rem;
	color: #888;
}

@media (max-width: 700px) {
	.site-footer__bar {
		flex-direction: column;
		text-align: center;
		gap: 18px;
	}
}


/* ================================================================
   CATALOG PAGE  —  category sections of product cards + gated download.
   Centred readable column (DMG-MORI style), homepage Maxon/D2 cards.
   ================================================================ */

.catalog {
	padding: clamp(40px, 6vw, 80px) var(--px);
	background: #fff;
}

.catalog__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.catalog__head {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.catalog__eyebrow {
	font-size: clamp(0.8rem, 1.4vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--clr-red);
	margin: 0 0 12px;
}

/* Heading reuses the homepage "PLUG & PLAY" item-heading format */
.catalog__heading {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #1a1a1a;
	margin: 0 0 10px;
	line-height: 1.15;
}

.catalog__intro {
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	color: #555;
	max-width: 720px;
	margin: 0;
}

.catalog-cat {
	margin-bottom: clamp(36px, 5vw, 64px);
}

.catalog-cat__title {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--clr-red);
	margin: 0 0 28px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--clr-teal-300);
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.catalog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	transition: border-color var(--trans), box-shadow var(--trans);
}

.catalog-card:hover {
	border-color: #1a1a1a;
}

.catalog-card__image {
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f9f9;
	border-bottom: 1px solid #ececec;
	padding: 14px;
}

.catalog-card__image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.catalog-card__image--ph {
	background: var(--clr-teal-100);
}

/* Brand logo used as the card title (product name kept as crawlable hidden text) */
.catalog-card__logo {
	height: 26px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	display: block;
	margin: 0 0 12px;
}

.catalog-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.catalog-card__name {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--clr-teal-900);
	margin: 0 0 8px;
}

.catalog-card__blurb {
	font-size: 0.88rem;
	line-height: 1.55;
	color: #555;
	margin: 0 0 16px;
	flex: 1;
}

.catalog-card__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.catalog-card__view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-red);
	text-decoration: none;
	transition: color var(--trans);
}

.catalog-card__view:hover {
	color: var(--clr-red-dark);
}

.catalog-card__npr {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clr-teal-700);
	text-decoration: none;
	transition: color var(--trans);
}

.catalog-card__npr:hover {
	color: var(--clr-teal-900);
}

/* Gated download band */
.catalog-gate {
	margin-top: clamp(24px, 4vw, 40px);
	padding: clamp(28px, 4vw, 48px);
	background: var(--clr-teal-900);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.catalog-gate__heading {
	font-size: clamp(1.2rem, 2.2vw, 1.7rem);
	font-weight: 800;
	color: #fff;
	margin: 0 0 6px;
}

.catalog-gate__sub {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	max-width: 520px;
}

.catalog-gate__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 30px;
	background: var(--clr-red);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background var(--trans);
}

.catalog-gate__btn:hover {
	background: var(--clr-red-dark);
	color: #fff;
}

.catalog-gate__form {
	flex: 1;
	min-width: 280px;
}

@media (max-width: 600px) {
	.catalog-gate {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ================================================================
   CATALOG PRODUCT detail page — size tabs + brand-guide spec tables
   ================================================================ */

.cat-product {
	padding: clamp(24px, 4vw, 48px) var(--px) clamp(40px, 6vw, 72px);
	background: #fff;
}

.cat-product__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.cat-product__crumbs {
	font-size: 0.82rem;
	color: #777;
	margin-bottom: 18px;
}

.cat-product__crumbs a {
	color: var(--clr-teal-700);
	text-decoration: none;
}

.cat-product__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--clr-red);
	text-decoration: none;
	margin-bottom: 16px;
}

.cat-product__title {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 24px;
}

.cat-product__head {
	display: grid;
	grid-template-columns: 0.85fr 1fr 0.6fr;   /* photo | highlights | CTA column */
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	margin-bottom: clamp(28px, 4vw, 44px);
}

/* CTA button column (Overview tab) */
.cat-product__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cat-product__cta-btn {
	display: block;
	padding: 15px 18px;
	background: var(--clr-teal-900);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	text-align: center;
	border-radius: 3px;
	transition: background 0.15s ease;
}

.cat-product__cta-btn:hover,
.cat-product__cta-btn:focus {
	background: var(--clr-teal-700);
}

.cat-product__cta-btn--primary {
	background: var(--clr-red);
}

.cat-product__cta-btn--primary:hover,
.cat-product__cta-btn--primary:focus {
	background: var(--clr-red-dark);
}

/* .cat-product__media uses the shared product-image box (see __render/__drawing) */

.cat-product__intro-heading {
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 800;
	color: var(--clr-teal-900);
	margin: 0 0 12px;
}

.cat-product__intro-text {
	font-size: 0.95rem;
	color: #555;
	margin: 0 0 14px;
}

.cat-product__highlights {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cat-product__highlights li {
	position: relative;
	padding-left: 22px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--clr-dark);
	margin-bottom: 8px;
}

.cat-product__highlights li::before {
	content: '+';
	position: absolute;
	left: 0;
	color: var(--clr-red);
	font-weight: 800;
}

/* Size-variant tabs (red boxes, brand) */
.cat-product__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid var(--clr-teal-900);
	margin-bottom: 24px;
}

.cat-product__tab {
	padding: 10px 18px;
	background: var(--clr-red);
	color: #fff;
	border: none;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background var(--trans);
}

.cat-product__tab:hover {
	background: var(--clr-red-dark);
}

.cat-product__tab.is-active {
	background: var(--clr-teal-900);
}

/* Panel container animates its height on tab switch so the page below never
   jumps when tabs have different content heights (overview vs size tabs). */
.cat-product__panels {
	transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-product__panel {
	display: none;
}

.cat-product__panel.is-active {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.cat-product__panels { transition: none; }
}

/* ---- Spec tables (brand guide: TITLE/SUB-TITLE/INFO/DATA) ---- */
.spec-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 22px;
	font-size: 0.88rem;
}

.spec-table th,
.spec-table td {
	border: 1px solid #fff;
	padding: 9px 12px;
	text-align: center;
}

.spec-table .t-title {
	background: var(--clr-teal-900);   /* #1b5b67 */
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.spec-table .t-title--alt {
	background: var(--clr-red);
}

.spec-table .t-sub {
	background: var(--clr-teal-400);   /* #98c2cc */
	color: #1a1a1a;
	font-weight: 700;
}

.spec-table .t-info {
	background: var(--clr-info-grey, #edefef);
	color: #1a1a1a;
	font-weight: 700;
	text-align: left;
}

.spec-table td {
	background: #fff;
	color: var(--clr-dark);
}

/* Adapter sizes row (red label) */
.spec-table--adapters .t-title-red {
	background: var(--clr-red);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

/* Cutter capability — ISO material colour key */
.spec-table--cutter .t-cut-head {
	background: var(--clr-teal-900);
	color: #fff;
	font-weight: 700;
	text-align: left;
}

.spec-table--cutter .t-cut {
	color: #fff;
	font-weight: 800;
}

.spec-table--cutter .t-cut-p   { background: #2f56c0; }  /* P  blue   */
.spec-table--cutter .t-cut-m   { background: #e6c700; color: #1a1a1a; }  /* M  yellow */
.spec-table--cutter .t-cut-sst { background: #f0d800; color: #1a1a1a; }  /* SST yellow */
.spec-table--cutter .t-cut-n   { background: #2ca02c; }  /* N  green  */
.spec-table--cutter .t-cut-s   { background: #ef8a17; }  /* S  orange */

/* ---- Per-size panel: heading + drawing/downloads + dimensions row ---- */
.cat-product__size-heading {
	color: var(--clr-red);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.3rem;
	margin: 0 0 20px;
}

.cat-product__size {
	display: grid;
	grid-template-columns: 1fr 1fr;   /* render | drawing — symmetrical, max space */
	gap: 28px;
	align-items: start;
	margin-bottom: 24px;
}

/* Shared product-image box — the overview photo AND every tab image use the
   exact same size, so they all match. Fixed height also stops tabs reflowing. */
.cat-product__media,
.cat-product__render,
.cat-product__drawing {
	margin: 0;
	background: #fff;
	border: 1px solid var(--clr-info-grey, #edefef);
	border-radius: 4px;
	padding: 16px;
	height: clamp(360px, 44vh, 520px);   /* larger, viewport-aware so the block fills toward the fold */
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat-product__media img,
.cat-product__render img,
.cat-product__drawing img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Standard smooth tab navigation: the active panel fades in on switch. */
@keyframes cat-panel-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cat-product__panel.is-active {
	animation: cat-panel-fadein 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.cat-product__panel.is-active { animation: none; }
}

.cat-product__downloads h4,
.cat-product__dim-heading {
	margin: 0 0 14px;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--clr-teal-300);
	color: var(--clr-teal-900);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1rem;
}

/* Gap between the Downloads block and the Product Details block */
.cat-product__details {
	margin-top: 38px;
}

/* Single-page (dicing-style) overview, matching production: spec table |
   downloads | dimensions diagram, side-by-side. Collapses to a stack on mobile. */
.cat-product__dicing-row {
	display: grid;
	grid-template-columns: minmax(260px, 0.9fr) minmax(110px, 0.5fr) minmax(320px, 1.6fr);
	gap: 32px;
	align-items: start;
	margin-top: 30px;
}

.cat-product__dicing-specs .spec-table {
	margin-top: 0;
}

/* Dimensions / configuration diagram — fills its column at natural aspect. */
.cat-product__overview-dim {
	margin: 0;
}

.cat-product__drawing--overview {
	height: auto;
	padding: 18px;
}

.cat-product__drawing--overview img {
	max-height: 440px;
}

/* Downloads column stacks its links vertically (one flyer per row). */
.cat-product__dl-list--stack {
	grid-template-columns: 1fr;
}

.cat-product__downloads--overview {
	margin-top: 6px;
}

@media (max-width: 900px) {
	.cat-product__dicing-row {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* Accessory parts list (Description | P/N), e.g. tools-accessories. */
.cat-product__parts .spec-table--parts {
	max-width: 720px;
}

.spec-table--parts th.t-info {
	text-align: left;
	font-weight: 600;
}

/* Click-to-zoom: images open full-screen so drawing dimensions are readable */
.cat-product__render img,
.cat-product__drawing img {
	cursor: zoom-in;
}

.cat-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(15, 25, 28, 0.9);
	cursor: zoom-out;
}

.cat-lightbox.is-open {
	display: flex;
}

.cat-lightbox img {
	max-width: 96vw;
	max-height: 92vh;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
}

.cat-lightbox__close {
	position: absolute;
	top: clamp(10px, 2vw, 22px);
	right: clamp(10px, 2vw, 26px);
	width: 46px;
	height: 46px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.cat-lightbox__close:hover {
	background: var(--clr-teal-300);
}

.cat-product__dl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* downloads on one full-width line */
	gap: 12px;
}

.cat-product__dl-list li {
	margin: 0;
}

.cat-product__dl-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 15px;
	background: var(--clr-teal-100);
	border: 1px solid var(--clr-teal-300);
	border-radius: 3px;
	color: var(--clr-teal-900);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cat-product__dl-link:hover,
.cat-product__dl-link:focus {
	background: var(--clr-teal-900);
	border-color: var(--clr-teal-900);
	color: #fff;
}

.cat-product__dl-ext {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0.85;
}

/* Dimensions row table reads left-aligned designation like other spec tables */
.spec-table--dim .t-info {
	white-space: nowrap;
}

@media (max-width: 760px) {
	.cat-product__head {
		grid-template-columns: 1fr;
	}
	.cat-product__size {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.cat-product__dl-list {
		grid-template-columns: 1fr 1fr;
	}
	.spec-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* ================================================================
   CASE STUDIES (Applications) — single case study layout
   (archives + overview reuse the .catalog / .catalog-card grid)
   ================================================================ */

.case-study {
	padding: clamp(20px, 4vw, 48px) var(--px) clamp(40px, 6vw, 72px);
}

.case-study__inner {
	max-width: 1400px;
	margin: 0 auto;
}

.case-study__head {
	margin: 6px 0 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--clr-rule);
}

.case-study__eyebrow {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--clr-red);
	margin: 0 0 8px;
}

.case-study__title {
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 800;
	color: var(--clr-teal-900);
	margin: 0 0 16px;
	line-height: 1.1;
}

.case-study__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.case-study__tag {
	display: inline-block;
	padding: 5px 13px;
	background: var(--clr-teal-100);
	border: 1px solid var(--clr-teal-300);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--clr-teal-900);
	text-decoration: none;
	transition: background var(--trans), color var(--trans);
}

.case-study__tag:hover {
	background: var(--clr-teal-700);
	color: #fff;
}

.case-study__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-bottom: 26px;
}

.case-study__card {
	background: var(--clr-teal-100);
	border: 1px solid var(--clr-teal-300);
	border-radius: 6px;
	padding: clamp(18px, 2.2vw, 30px);
}

.case-study__card :first-child { margin-top: 0; }
.case-study__card :last-child  { margin-bottom: 0; }

.case-study__card strong,
.case-study__card h2,
.case-study__card h3 {
	color: var(--clr-teal-900);
}

/* Results block — the headline savings, accented in red */
.case-study__card--results {
	background: #fff;
	border: 2px solid var(--clr-red);
	margin-bottom: 26px;
}

.case-study__card--results strong,
.case-study__card--results h2,
.case-study__card--results h3 {
	color: var(--clr-red);
}

.case-study__card table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}

.case-study__card table td,
.case-study__card table th {
	border: 1px solid var(--clr-teal-300);
	padding: 7px 10px;
	font-size: 0.92rem;
	text-align: left;
}

.case-study__sub {
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--clr-teal-900);
	margin: 0 0 10px;
}

.case-study__addinfo {
	display: grid;
	gap: 26px;
	margin-bottom: 26px;
}

.case-study__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-bottom: 30px;
}

.case-study__shot {
	margin: 0;
	background: #fff;
	border: 1px solid var(--clr-info-grey, #edefef);
	border-radius: 4px;
	padding: 12px;
}

.case-study__shot img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.case-study__cta {
	margin-top: 10px;
}

@media (max-width: 820px) {
	.case-study__cols {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ================================================================
   MARKETING CONTENT PAGES — shared components (Products, Resources,
   About, Contact). Each page template reads its own DB-ACF group and
   composes these blocks; Option 2 styling.
   ================================================================ */

.mpage-hero {
	position: relative;
	background: var(--clr-teal-900);
	color: #fff;
	padding: clamp(40px, 6vw, 88px) var(--px);
	background-size: cover;
	background-position: center;
}

.mpage-hero--bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(15, 45, 52, 0.72);
}

.mpage-hero__inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.mpage-hero__title {
	font-size: clamp(2rem, 4.4vw, 3.3rem);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: #fff;
}

.mpage-hero__text { color: rgba(255, 255, 255, 0.9); }
.mpage-hero__media img { display: block; width: 100%; height: auto; }

.mpage-section { padding: clamp(34px, 5vw, 66px) var(--px); }
.mpage-section--tint { background: var(--clr-teal-100); }
.mpage-section--dark { background: var(--clr-teal-900); color: #fff; }

.mpage-section__title {
	text-align: center;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--clr-teal-900);
	margin: 0 0 36px;
}

.mpage-section--dark .mpage-section__title { color: #fff; }

.mpage-split {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
}

.mpage-split--narrow-first { grid-template-columns: 0.82fr 1.18fr; }

.mpage-figure img,
.mpage-video iframe,
.mpage-video video,
.mpage-video img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* WYSIWYG prose blocks */
.mpage-prose { font-size: clamp(0.98rem, 1.1vw, 1.08rem); line-height: 1.65; }
.mpage-prose--center { text-align: center; max-width: 860px; margin-left: auto; margin-right: auto; }
.mpage-prose :first-child { margin-top: 0; }
.mpage-prose :last-child { margin-bottom: 0; }
.mpage-prose h1, .mpage-prose h2, .mpage-prose h3, .mpage-prose h4 {
	color: var(--clr-teal-900);
	font-weight: 800;
	line-height: 1.15;
	margin: 1.1em 0 0.5em;
}
.mpage-section--dark .mpage-prose h1, .mpage-section--dark .mpage-prose h2,
.mpage-section--dark .mpage-prose h3, .mpage-section--dark .mpage-prose h4,
.mpage-hero .mpage-prose h1, .mpage-hero .mpage-prose h2, .mpage-hero .mpage-prose h3 { color: #fff; }
.mpage-prose strong { color: var(--clr-red); }
.mpage-section--dark .mpage-prose strong, .mpage-hero .mpage-prose strong { color: var(--clr-teal-300); }
.mpage-prose a { color: var(--clr-teal-700); font-weight: 600; }
.mpage-prose ul { padding-left: 1.2em; margin: 0.6em 0; }
.mpage-prose li { margin: 0.3em 0; }
.mpage-prose img { height: auto; border-radius: 4px; }

/* card grids */
.mpage-cards { max-width: 1280px; margin: 30px auto 0; display: grid; gap: clamp(18px, 2.5vw, 32px); }
.mpage-cards--3 { grid-template-columns: repeat(3, 1fr); }
.mpage-cards--4 { grid-template-columns: repeat(4, 1fr); }
.mpage-card--center { text-align: center; }
.mpage-card__img img, .mpage-card__icon img { display: inline-block; max-width: 100%; height: auto; }
.mpage-card__icon { min-height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mpage-card__icon img { max-height: 72px; }
.mpage-card__title { font-weight: 700; color: var(--clr-teal-900); margin: 12px 0 0; }
.mpage-card--feature {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	padding: 26px 20px;
}
.mpage-card__name { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; margin: 0 0 10px; color: #fff; }
.mpage-card__text { font-size: 0.95rem; line-height: 1.55; margin: 0 0 14px; color: rgba(255, 255, 255, 0.85); }
.mpage-card__link { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-teal-300); text-decoration: none; }
.mpage-card__link:hover { color: #fff; }

.mpage-hero--title .mpage-hero__inner { grid-template-columns: 1fr; }
.mpage-hero__icon { display: block; max-height: 60px; width: auto; margin-bottom: 16px; }
.mpage-hero__slogan { font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: rgba(255, 255, 255, 0.9); font-weight: 600; margin: 0; }
.mpage-split--20-80 { grid-template-columns: 0.28fr 0.72fr; }
.mpage-wrap { max-width: 1280px; margin: 0 auto; }
.mpage-wrap .mpage-prose { max-width: 920px; }

/* Products sub-nav (Spindles / Monitor / Accessories) */
.mpage-subnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background: var(--clr-teal-100);
	border-bottom: 1px solid var(--clr-teal-300);
}
.mpage-subnav a {
	padding: 15px 26px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--clr-teal-900);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color var(--trans), border-color var(--trans);
}
.mpage-subnav a:hover { color: var(--clr-red); }
.mpage-subnav a.is-active { color: var(--clr-red); border-bottom-color: var(--clr-red); }

/* Application cards (optional video link) */
.mpage-appcard { display: block; text-align: center; text-decoration: none; color: #fff; }
.mpage-appcard__img { position: relative; border-radius: 6px; overflow: hidden; }
.mpage-appcard__img img { display: block; width: 100%; height: auto; }
.mpage-appcard__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	color: #fff;
	background: rgba(15, 45, 52, 0.35);
	opacity: 0;
	transition: opacity var(--trans);
}
.mpage-appcard:hover .mpage-appcard__play { opacity: 1; }
.mpage-appcard__name { font-weight: 800; text-transform: uppercase; margin: 14px 0 6px; color: #fff; }
.mpage-appcard__desc { font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin: 0; }

@media (max-width: 880px) {
	.mpage-hero__inner,
	.mpage-split,
	.mpage-split--narrow-first,
	.mpage-split--20-80 { grid-template-columns: 1fr; }
	.mpage-cards--3,
	.mpage-cards--4 { grid-template-columns: 1fr; }
}

/* Air-Bearing model blocks (page-air) */
.airmodel { padding: 30px 0; border-top: 1px solid var(--clr-teal-300); }
.airmodel:first-child { border-top: none; padding-top: 0; }
.airmodel__name { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; text-transform: uppercase; color: var(--clr-red); margin: 0 0 18px; }
.airmodel__specs { margin-top: 22px; }

/* Downloads — collapsible groups + certificate grids (Resources) */
.dlgroup { border: 1px solid var(--clr-teal-300); border-radius: 6px; margin-bottom: 14px; background: #fff; }
.dlgroup__title { cursor: pointer; padding: 16px 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--clr-teal-900); list-style: none; position: relative; }
.dlgroup__title::after { content: '+'; position: absolute; right: 22px; color: var(--clr-red); font-weight: 800; font-size: 1.2rem; }
.dlgroup[open] .dlgroup__title::after { content: '\2013'; }
.dlgroup__title::-webkit-details-marker { display: none; }
.dlgroup__body { padding: 6px 22px 24px; }
.dlgroup__sub { font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--clr-red); margin: 18px 0 12px; }

.dl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.dl-card { border: 1px solid var(--clr-info-grey, #edefef); border-radius: 4px; padding: 14px; text-align: center; }
.dl-card__img img { display: inline-block; max-width: 100%; max-height: 150px; height: auto; }
.dl-card__files { list-style: none; margin: 12px 0 0; padding: 0; }
.dl-card__files li { margin: 4px 0; }
.dl-card__files a { color: var(--clr-teal-700); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.dl-card__files a:hover { color: var(--clr-red); }

.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-bottom: 12px; }
.cert-grid__item { display: block; border: 1px solid var(--clr-teal-300); border-radius: 4px; padding: 10px; background: #fff; }
.cert-grid__item img { display: block; width: 100%; height: auto; }

/* Video cards (Resources → Videos) */
.mpage-videocard__embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 6px; overflow: hidden; background: #000; }
.mpage-videocard__embed iframe, .mpage-videocard__embed video, .mpage-videocard__embed object, .mpage-videocard__embed embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mpage-videocard__title { font-size: 1.1rem; font-weight: 800; color: var(--clr-teal-900); margin: 14px 0 6px; }
.mpage-videocard__desc { font-size: 0.92rem; }

/* Contact / Partners / Service Centers */
.contact-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 44px); }
.contact-col__title { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--clr-red); margin: 0 0 22px; padding-bottom: 10px; border-bottom: 2px solid var(--clr-teal-300); }
.contact-card { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-card__img { flex: 0 0 80px; }
.contact-card__img img { width: 100%; height: auto; border-radius: 4px; }
.contact-card__details { font-size: 0.92rem; }

.partner-list { display: grid; gap: 22px; margin-top: 24px; }
.partner-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; border: 1px solid var(--clr-teal-300); border-radius: 6px; padding: 20px; }
.partner-row__logo img { max-width: 100%; height: auto; }

.about-box { border-radius: 8px; padding: 26px 20px; text-align: center; color: #fff; background: var(--clr-teal-700); }
.about-box__icon { max-height: 56px; width: auto; margin-bottom: 14px; }
.about-box__title { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; margin: 0 0 10px; color: inherit; }
.about-box__text { font-size: 0.9rem; line-height: 1.5; margin: 0; color: inherit; }

.svc-center { border-bottom: 1px solid var(--clr-teal-300); padding: 24px 0; }
.svc-center:last-child { border-bottom: none; }
.svc-center__name { font-size: 1.2rem; font-weight: 800; color: var(--clr-teal-900); margin: 6px 0 2px; }
.svc-center__title { color: var(--clr-teal-700); font-weight: 600; margin: 0 0 10px; }

@media (max-width: 860px) {
	.contact-cols { grid-template-columns: 1fr; }
	.partner-row { grid-template-columns: 1fr; text-align: center; }
}

/* About / Management / Events */
.about-box__link { display: inline-block; margin-top: 12px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; text-decoration: underline; }

.team-list { display: grid; gap: 30px; margin-top: 30px; }
.team-member { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; border-bottom: 1px solid var(--clr-teal-300); padding-bottom: 30px; }
.team-member--compact { grid-template-columns: 220px; }
.team-member__img { width: 100%; height: auto; border-radius: 6px; }
.team-member__name { font-size: 1.15rem; font-weight: 800; color: var(--clr-teal-900); margin: 12px 0 2px; }
.team-member__title { color: var(--clr-red); font-weight: 700; margin: 0; }

.events-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; border-bottom: 2px solid var(--clr-teal-300); }
.events-tab { padding: 10px 22px; font-weight: 800; font-size: 0.95rem; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--clr-teal-900); cursor: pointer; transition: color var(--trans), border-color var(--trans); }
.events-tab:hover { color: var(--clr-red); }
.events-tab.is-active { color: var(--clr-red); border-bottom-color: var(--clr-red); }
.events-year { display: none; }
.events-year.is-active { display: block; }
.events-year__title { font-size: 1.4rem; font-weight: 800; color: var(--clr-red); margin: 24px 0 14px; }
.event-row { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 16px; padding: 14px 16px; border: 1px solid var(--clr-teal-300); border-radius: 4px; margin-bottom: 10px; text-decoration: none; color: var(--clr-dark); transition: background var(--trans); }
a.event-row:hover { background: var(--clr-teal-100); }
.event-row--past { opacity: 0.55; }
.event-row__date { font-weight: 700; color: var(--clr-teal-900); }
.event-row__name { display: block; font-weight: 700; }
.event-row__loc { display: block; font-size: 0.9rem; color: var(--clr-teal-700); }
.events-aside__box { background: var(--clr-teal-100); border: 1px solid var(--clr-teal-300); border-radius: 8px; padding: 22px; margin-bottom: 24px; }
.events-aside__box h3 { margin: 0 0 14px; color: var(--clr-teal-900); font-weight: 800; text-transform: uppercase; }
.events-aside__logo, .events-aside__exhibitors { display: block; max-width: 100%; height: auto; margin: 16px 0; }
.events-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; max-width: 1280px; margin: 0 auto; }
.events-gallery__item { margin: 0; }
.events-gallery__item img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; }
.events-gallery__item figcaption { font-size: 0.85rem; color: var(--clr-teal-700); margin-top: 6px; }

@media (max-width: 860px) {
	.team-member { grid-template-columns: 1fr; }
	.event-row { grid-template-columns: 1fr; }
}

/* ================================================================
   BLOG — modern card grid (archive + related) & article (single)
   ================================================================ */
.blog-intro { margin-bottom: 8px; }

/* Card grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--clr-teal-200);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27, 91, 103, 0.15); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--clr-teal-100); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__media--empty {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--clr-teal-900), var(--clr-teal-700));
	color: #fff; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem;
}
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.blog-card__meta { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--clr-teal-700); margin: 0 0 10px; }
.blog-card__title { font-size: 1.17rem; font-weight: 800; line-height: 1.28; margin: 0 0 12px; }
.blog-card__title a { color: var(--clr-teal-900); text-decoration: none; }
.blog-card__title a:hover { color: var(--clr-red); }
.blog-card__excerpt { font-size: 0.94rem; line-height: 1.62; color: #4a4a4a; margin: 0 0 18px; flex: 1; }
.blog-card__more { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-red); }
.blog-card:hover .blog-card__more { color: var(--clr-red-dark); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* Single article */
.blog-article { padding-bottom: 8px; }
.blog-article__hero { background: var(--clr-teal-100); padding: clamp(36px, 5vw, 64px) var(--px) 34px; text-align: center; }
.blog-article__hero-inner { max-width: 820px; margin: 0 auto; }
.blog-article__back { display: inline-block; font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--clr-red); text-decoration: none; }
.blog-article__hero .blog-article__back { margin-bottom: 16px; }
.blog-article__back:hover { color: var(--clr-red-dark); }
.blog-article__title { font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 800; color: var(--clr-teal-900); line-height: 1.16; margin: 0 0 16px; }
.blog-article__meta { color: var(--clr-teal-700); font-weight: 600; font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.blog-article__feature { max-width: 900px; margin: -8px auto 0; padding: 0 var(--px); text-align: center; }
.blog-article__feature img { max-width: 100%; max-height: 560px; width: auto; height: auto; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); display: inline-block; vertical-align: top; }
.blog-article__body { max-width: 720px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0 var(--px); font-size: 1.07rem; line-height: 1.8; color: var(--clr-dark); }
.blog-article__body .mpage-prose { margin: 0 0 1.4em; }
.blog-article__body p { font-size: 1.07rem; line-height: 1.8; margin: 0 0 1.3em; }
.blog-article__figure { margin: 30px 0; }
.blog-article__figure img { width: 100%; border-radius: 10px; display: block; }
.blog-article__download { margin-top: 32px; }
.blog-article__dl-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--clr-teal-900); color: #fff; text-decoration: none; padding: 13px 26px; border-radius: 6px; font-weight: 700; transition: background var(--trans); }
.blog-article__dl-btn:hover { background: var(--clr-teal-700); color: #fff; }
.blog-article__dl-btn span:first-child { background: rgba(255, 255, 255, 0.18); padding: 2px 8px; border-radius: 3px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; }
.blog-article__footer { max-width: 720px; margin: 40px auto 0; padding: 26px var(--px) 0; border-top: 1px solid var(--clr-teal-200); }

/* Related posts */
.blog-related { background: var(--clr-teal-100); margin-top: 56px; padding: clamp(40px, 5vw, 64px) var(--px); }
.blog-related__inner { max-width: var(--max-w); margin: 0 auto; }
.blog-related__heading { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-red); text-align: center; margin: 0; }
.blog-related .blog-grid { margin-top: 30px; }

/* Contact form embed (FluentForm) */
.mpage-wrap--form { max-width: 780px; }
.contact-form { margin-top: 12px; }
.contact-cta { text-align: center; }

/* Contact page — "Send Us an Enquiry" CTA button (normal + hover) */
.contact-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	padding: 15px 38px;
	background: var(--clr-red);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 3px;
	box-shadow: 0 2px 10px rgba(195, 26, 26, 0.18);
	transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
}
.contact-cta__btn:hover,
.contact-cta__btn:focus {
	background: var(--clr-red-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(195, 26, 26, 0.30);
}
.contact-cta__btn span { transition: transform var(--trans); }
.contact-cta__btn:hover span { transform: translateX(4px); }

/* Enquiries page — tabbed forms */
.enq-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; border-bottom: 2px solid var(--clr-teal-300); }
.enq-tab { padding: 14px 26px; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--clr-teal-900); cursor: pointer; transition: color var(--trans), border-color var(--trans); }
.enq-tab:hover { color: var(--clr-red); }
.enq-tab.is-active { color: var(--clr-red); border-bottom-color: var(--clr-red); }
.enq-panel { display: none; }
.enq-panel.is-active { display: block; }
.enq-panel__intro { text-align: center; color: var(--clr-teal-700); margin: 0 0 22px; font-size: 1.02rem; }

/* ================================================================
   PREMIUM CONTACT / ENQUIRIES (Hermle / DMG Mori style, Colibri brand)
   ================================================================ */

/* Light, airy hero variant */
.mpage-hero--light { background: var(--clr-teal-100); color: var(--clr-dark); }
.mpage-hero--light::before { display: none; }
.mpage-hero--light .mpage-hero__title { color: var(--clr-teal-900); }
.mpage-hero__eyebrow { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-red); margin: 0 0 10px; }

/* 2-column layout: form + contact sidebar */
.enq-section { background: #fff; }
.enq-layout { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.enq-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; margin: 0 0 30px; }
.enq-section .enq-tabs { justify-content: flex-start; }
.enq-section .enq-panel__intro { text-align: left; }

/* Sidebar cards */
.enq-side { display: grid; gap: 22px; position: sticky; top: 24px; }
.enq-side__card { background: var(--clr-teal-100); border: 1px solid var(--clr-teal-300); border-radius: 8px; padding: 28px; }
.enq-side__card--accent { background: var(--clr-teal-900); border-color: var(--clr-teal-900); color: #fff; }
.enq-side__title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--clr-red); margin: 0 0 14px; }
.enq-side__card--accent .enq-side__title { color: #fff; }
.enq-side__sub { color: rgba(255, 255, 255, 0.85); line-height: 1.55; margin: 0 0 18px; }
.enq-side__body { font-size: 0.96rem; line-height: 1.6; }
.enq-side__body a { color: var(--clr-teal-700); font-weight: 600; }

@media (max-width: 940px) {
	.enq-layout { grid-template-columns: 1fr; }
	.enq-side { position: static; }
}

/* Branded FluentForm (scoped to our contact/enquiry wrappers) */
.enq-form .ff-el-group,
.contact-form .ff-el-group { margin-bottom: 20px; }
.enq-form .ff-el-input--label label,
.contact-form .ff-el-input--label label { font-weight: 600; color: var(--clr-teal-900); font-size: 0.9rem; margin-bottom: 7px; display: block; }
.enq-form .ff-el-form-control,
.contact-form .ff-el-form-control {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--clr-teal-300);
	border-radius: 5px;
	font-family: var(--font);
	font-size: 0.98rem;
	color: var(--clr-dark);
	background: #fff;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.enq-form .ff-el-form-control:focus,
.contact-form .ff-el-form-control:focus {
	border-color: var(--clr-teal-700);
	box-shadow: 0 0 0 3px rgba(53, 137, 157, 0.15);
	outline: none;
}
.enq-form textarea.ff-el-form-control,
.contact-form textarea.ff-el-form-control { min-height: 130px; }
.enq-form .ff-el-is-required label:after,
.contact-form .ff-el-is-required label:after { content: ' *'; color: var(--clr-red); }
.enq-form .ff-el-form-check-label,
.contact-form .ff-el-form-check-label { font-size: 0.92rem; color: var(--clr-dark); }
.enq-form .ff_submit_btn_wrapper,
.contact-form .ff_submit_btn_wrapper { margin-top: 8px; }
.enq-form .ff-btn-submit, .enq-form button.ff-btn,
.contact-form .ff-btn-submit, .contact-form button.ff-btn {
	background: var(--clr-red);
	color: #fff;
	border: none;
	padding: 13px 34px;
	border-radius: 5px;
	font-family: var(--font);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.15s;
}
.enq-form .ff-btn-submit:hover,
.contact-form .ff-btn-submit:hover { background: var(--clr-red-dark); }
.enq-form .ff-message-success,
.contact-form .ff-message-success {
	background: var(--clr-teal-100);
	border: 1px solid var(--clr-teal-700);
	color: var(--clr-teal-900);
	padding: 18px;
	border-radius: 6px;
}
.enq-form .text-danger, .enq-form .error,
.contact-form .text-danger { color: var(--clr-red); font-size: 0.85rem; }

/* Jet calculator embedded on the Feed Calculation Guide — suppress its own hero
   (the guide page provides the hero) and give it breathing room. */
.jc-embed { margin: clamp(8px, 3vw, 32px) 0; }
.jc-embed .jc-hero { display: none; }
.jc-embed #jet-calculator .jc-wrap { padding-top: clamp(16px, 3vw, 32px); }


/* ================================================================
   HOMEPAGE STICKY CTA BAR (slides in on scroll)
   ================================================================ */
.home-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	background: var(--clr-teal-900);
	color: #fff;
	transform: translateY(100%);
	transition: transform 0.35s ease;
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}
.home-sticky-cta.is-visible { transform: translateY(0); }
.home-sticky-cta__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 12px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.home-sticky-cta__label {
	margin: 0;
	font-weight: 700;
	font-size: 0.98rem;
	color: #fff;
}
.home-sticky-cta__btns { display: flex; gap: 10px; flex-shrink: 0; }
.home-sticky-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 3px;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.6);
	transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.home-sticky-cta__btn:hover { background: #fff; color: var(--clr-teal-900); border-color: #fff; }
.home-sticky-cta__btn--primary { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }
.home-sticky-cta__btn--primary:hover { background: var(--clr-red-dark); border-color: var(--clr-red-dark); color: #fff; }

/* The sticky bar replaces the bottom-right contact button (avoid overlap). */
body.home .sticky-contact-btn,
body.has-sticky-cta .sticky-contact-btn { display: none; }

@media (max-width: 768px) {
	.home-sticky-cta__inner { padding: 10px 14px; gap: 10px; }
	.home-sticky-cta__label { display: none; }
	.home-sticky-cta__btns { width: 100%; justify-content: center; }
	.home-sticky-cta__btn { flex: 1 1 0; justify-content: center; padding: 12px 10px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.home-sticky-cta { transition: none; }
}


/* ================================================================
   WHITER REFRESH (2026-06-22) — lighten heavy teal FILLS toward white;
   keep teal OUTLINES + accents (hero band, headings, sub-heads, buttons).
   Appended as overrides (later rules win).
   ================================================================ */
/* Alternating section tint: teal -> near-white neutral */
.mpage-section--tint { background: #f7f9f9; }

/* Light-teal cards/heroes/bands -> white (their teal outline stays) */
.case-study__card,
.enq-side__card,
.events-aside__box,
.blog-article__hero,
.blog-related,
.mpage-hero--light { background: #fff; }
.blog-related { border-top: 1px solid var(--clr-teal-200); }

/* Solid-teal fills -> white card + teal outline + readable text */
.about-box { background: #fff; color: var(--clr-dark); border: 1px solid var(--clr-teal-300); }
.about-box__title { color: var(--clr-teal-900); }
.about-box__link { color: var(--clr-teal-700); }
.about-box__text a { color: var(--clr-teal-700); }

.enq-side__card--accent { background: #fff; border-color: var(--clr-teal-300); color: var(--clr-dark); }
.enq-side__card--accent .enq-side__title { color: var(--clr-red); }
.enq-side__card--accent .enq-side__sub { color: var(--clr-dark); }

.catalog-gate { background: #fff; color: var(--clr-dark); border: 1px solid var(--clr-teal-300); }
.catalog-gate__heading { color: var(--clr-teal-900); }
.catalog-gate__sub { color: var(--clr-dark); }



/* Case-study tags -> outlined pill (whiter) */
.case-study__tag { background: #fff; border: 1px solid var(--clr-teal-300); color: var(--clr-teal-900); }
.case-study__tag:hover { background: var(--clr-teal-100); color: var(--clr-teal-900); }


/* White page hero (non-image) - whiter refresh; image heroes (--bg) keep their dark scrim. */
.mpage-hero:not(.mpage-hero--bg) { background: #fff; color: var(--clr-dark); border-bottom: 1px solid var(--clr-teal-200); }
.mpage-hero:not(.mpage-hero--bg) .mpage-hero__title { color: var(--clr-teal-900); }
.mpage-hero:not(.mpage-hero--bg) .mpage-hero__text,
.mpage-hero:not(.mpage-hero--bg) .mpage-hero__slogan { color: var(--clr-dark); }
.mpage-hero:not(.mpage-hero--bg) .mpage-hero__eyebrow { color: var(--clr-red); }


/* ================================================================
   FIXES (2026-06-23) - legibility + whiter follow-ups
   ================================================================ */
/* Service-centre about-boxes: force white over per-box inline bg colours (was dark-on-dark) */
.about-box { background: #fff !important; color: var(--clr-dark) !important; }

/* HSM "The HSM Jet Spindle System" dark band -> white + dark/teal text (was dark-on-dark) */
.mpage-section--dark { background: #fff; color: var(--clr-dark); }
.mpage-section--dark .mpage-section__title { color: var(--clr-teal-900); }
.mpage-section--dark .mpage-prose h1,
.mpage-section--dark .mpage-prose h2,
.mpage-section--dark .mpage-prose h3,
.mpage-section--dark .mpage-prose h4 { color: var(--clr-teal-900); }
.mpage-section--dark .mpage-prose strong { color: var(--clr-teal-900); }

/* Home Latest Updates -> white band + a teal separator line (keep the card/rule lines) */
.latest-updates,
body.theme-d .latest-updates { background: #fff; border-top: 1px solid var(--clr-teal-200); }

/* Case-study "Contact for a Quote" CTA removed (the sticky CTA covers it) */
.case-study__cta { display: none; }



/* ================================================================
   IMAGE BACKGROUNDS (2026-06-23) - neutral placeholders + B/W photo fix
   ================================================================ */
/* Empty image placeholders (catalog + case-study cards, home cards): teal -> neutral light grey */
.catalog-card__image--ph,
.update-card__image--placeholder,
.blog-card__media { background: #eef1f1; }
.catalog-card__image { background: #fff; }



/* ================================================================
   TYPE TWEAKS (2026-06-23) - stronger link contrast + slightly heavier body
   ================================================================ */
/* Body/content links: medium teal -> dark teal (WCAG AA 4.03:1 -> 7.67:1) */
body a,
.mpage-prose a,
.enq-side__body a,
.cat-product__crumbs a,
.dl-card__files a,
.about-box__link,
.about-box__text a { color: var(--clr-teal-900); }

/* Slightly heavier regular/body text (400 -> 500 medium). Headings/buttons/labels keep their explicit weights. */
body { font-weight: 500; }


/* ================================================================
   RECOMMENDATIONS - testimonial slider (home)
   ================================================================ */
.reco-slider { position: relative; max-width: 900px; margin: 30px auto 0; }
.reco-slider__viewport { overflow: hidden; }
.reco-slider__track { display: flex; transition: transform 0.45s ease; }
.reco-slide { flex: 0 0 100%; padding: 4px; box-sizing: border-box; }
.reco-quote { background: #fff; border: 1px solid var(--clr-teal-300); border-radius: 10px; padding: clamp(26px, 4vw, 44px); }
.reco-quote__text { margin: 0 0 22px; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.75; color: var(--clr-dark); }
.reco-quote__text::before { content: "\201C"; color: var(--clr-red); font-size: 2.6rem; font-weight: 800; line-height: 0; vertical-align: -0.45em; margin-right: 6px; }
.reco-quote__by { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--clr-teal-200); padding-top: 16px; }
.reco-quote__logo { max-height: 40px; width: auto; }
.reco-quote__name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--clr-teal-900); font-size: 0.95rem; }
.reco-slider__nav { position: absolute; top: 44%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--clr-teal-300); background: #fff; color: var(--clr-teal-900); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--trans), color var(--trans); z-index: 2; }
.reco-slider__nav:hover { background: var(--clr-teal-900); color: #fff; }
.reco-slider__nav--prev { left: -10px; }
.reco-slider__nav--next { right: -10px; }
.reco-slider__dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.reco-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--clr-teal-300); cursor: pointer; padding: 0; transition: background var(--trans); }
.reco-dot.is-active { background: var(--clr-red); }
@media (max-width: 1024px) { .reco-slider__nav--prev { left: 2px; } .reco-slider__nav--next { right: 2px; } }
@media (max-width: 768px) { .reco-slider__nav { display: none; } }












/* Touch (<=768px): enforce comfortable ~44px tap targets on the small CTA buttons (spec: ~44px min).
   Vertical-padding bump on phones/tablets; never shrinks already-large buttons. */
@media (max-width: 768px) {
	.cta-strip__btn,
	.update-card__btn,
	.site-footer__btn,
	.home-sticky-cta__btn { padding-top: 14px; padding-bottom: 14px; }
}


/* Recommendations: big opening line + "Read more" that expands the remainder in smaller text. */
.reco-quote__text::before { content: none; }
.reco-quote__lead { display: block; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.5; font-weight: 600; color: var(--clr-dark); }
.reco-quote__lead::before { content: "\201C"; color: var(--clr-red); font-size: 2.6rem; font-weight: 800; line-height: 0; vertical-align: -0.4em; margin-right: 6px; }
.reco-quote__rest { display: none; margin-top: 16px; font-size: 0.92rem; line-height: 1.7; color: #555; }
.reco-quote__text.is-expanded .reco-quote__rest { display: block; }
.reco-quote__more { display: inline-block; margin-top: 16px; background: none; border: 0; padding: 0; color: var(--clr-teal-700); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color var(--trans); }
.reco-quote__more:hover { color: var(--clr-teal-900); text-decoration: underline; text-underline-offset: 3px; }
.reco-slider__track { align-items: flex-start; }


/* QA fix #2 (2026-06-27): brand colour circle behind the About / value-box icons (transparent PNGs). */
.about-box__icon {
	max-height: none;
	width: 92px;
	height: 92px;
	padding: 21px;
	box-sizing: border-box;
	object-fit: contain;
	background: var(--clr-teal-300);
	border-radius: 50%;
	margin: 0 auto 18px;
	display: block;
}

/* QA fix #5 (2026-06-27): FluentForm submit button -> brand red (overrides FluentForm default blue). */
.fluentform { --fluentform-primary-color: var(--clr-red); --fluentform-primary-hover: var(--clr-red-dark); }
.ff-btn-submit,
button.ff-btn-submit,
.fluentform .ff-btn-submit,
.fluentform button.ff_btn_style {
	background: var(--clr-red) !important;
	background-color: var(--clr-red) !important;
	border-color: var(--clr-red) !important;
	color: #fff !important;
}
.ff-btn-submit:hover,
.fluentform .ff-btn-submit:hover,
.fluentform button.ff_btn_style:hover {
	background: var(--clr-red-dark) !important;
	background-color: var(--clr-red-dark) !important;
}


/* QA: catalog CTA buttons stay white on hover (global a:hover was turning the text dark-teal on red). */
.cat-product__cta-btn:hover, .cat-product__cta-btn:focus,
.cat-product__cta-btn--primary:hover, .cat-product__cta-btn--primary:focus { color: #fff; }


/* QA #6 (2026-06-27): service-centre value boxes -> solid brand colour (match production): white icon + white text. */
.about-box--solid { border: none !important; }
.about-box--solid,
.about-box--solid .about-box__title,
.about-box--solid .about-box__text,
.about-box--solid .about-box__text * { color: #fff !important; }
.about-box--solid .about-box__icon { background: none !important; border-radius: 0 !important; padding: 0 !important; max-height: 78px; width: auto; height: auto; margin: 0 auto 16px; }
/* service-centre partner logo on a clean white card */
.svc-center__logo { background: #fff; border: 1px solid var(--clr-teal-200); border-radius: 8px; padding: 16px 20px; display: inline-block; margin-bottom: 14px; }
.svc-center__logo img { max-width: 240px; height: auto; display: block; }


/* QA: flexible-content figures -> natural size (no upscaling = clearer), capped small so tiny source images stop ballooning. */
.mpage-figure { text-align: center; }
.mpage-figure img { width: auto !important; max-width: 320px; height: auto; margin: 0 auto; }


/* ---- Image zoom / lightbox: magnifier affordance on content photos + full-size overlay ---- */
.colibri-zoomable { position: relative; }
.colibri-zoom { cursor: zoom-in; }
.colibri-zoomable::after {
	content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(27, 91, 103, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cline x1='15' y1='15' x2='20' y2='20'/%3E%3C/svg%3E") center / 18px no-repeat;
	opacity: 0; transform: scale(0.85); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; z-index: 4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.colibri-zoomable:hover::after { opacity: 1; transform: scale(1); }
.colibri-lb { position: fixed; inset: 0; z-index: 2147483050; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 11, 13, 0.92); cursor: zoom-out; }
.colibri-lb.is-open { display: flex; }
.colibri-lb img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55); }
.colibri-lb__close { position: fixed; top: 16px; right: 20px; width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background 0.15s; }
.colibri-lb__close:hover { background: rgba(255, 255, 255, 0.3); }


/* Hero slider swap: Jet <-> Air-Bearing, driven by the WHY-COLIBRI tabs. */
.hero-slider-wrap[data-hero-swap] { position: relative; }
.hero-slide-panel { transition: opacity 0.45s ease; }
.hero-slide-panel:not(.is-active) { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; z-index: 0; }
.hero-slide-panel.is-active { position: relative; opacity: 1; z-index: 1; }


/* ================================================================
   HOME SECTION RHYTHM (v1.53.0)
   Page breaks between the home sections so each one reads as a
   distinct band while scrolling, on every screen size:
   dark WHY-COLIBRI hero -> white slider band -> off-white
   recommendations band -> white latest-updates band.
   A hairline teal top border marks each break; vertical padding
   follows one clamp() rhythm from mobile to desktop.
   ================================================================ */

/* 3) Jet/Air hero slider: bounded white band (was borderless, flush) */
body.theme-d .hero-slider-wrap {
	background: #fff;
	padding-bottom: clamp(32px, 4.5vw, 64px);
}

/* 4) Recommendations: soft brand off-white band; the white outlined
      testimonial cards pop against it */
body.theme-d .reco-section {
	background: var(--clr-teal-100);
	border-top: 1px solid var(--clr-teal-200);
	padding-top: clamp(48px, 6vw, 84px);
	padding-bottom: clamp(48px, 6vw, 84px);
}

/* 5) Latest updates: back to white so the bands alternate; extra bottom
      room so the sticky CTA bar never sits on the last row of cards */
body.theme-d .latest-updates {
	background: #fff;
	border-top: 1px solid var(--clr-teal-200);
	padding-top: clamp(48px, 6vw, 84px);
	padding-bottom: clamp(84px, 10vw, 140px);
}


/* ================================================================
   DARK MODE — site-wide (home + inner pages), toggled by the floating
   moon button (functions.php section 28). The .dark-mode class sits
   on <html> (set pre-paint by a head script). Everything below is
   ADDITIVE — light mode is untouched. Palette: dark petrol surfaces
   (#0e2027 page / #14313a cards), brand red kept for CTAs, lifted
   red #e05252 for small text accents (contrast on dark).
   Mega-menu overrides are an AUTHORIZED exception, scoped strictly
   under .dark-mode (user approved 2026-07-05).
   ================================================================ */

.dark-mode body { background: #0e2027; color: #dfe9eb; }

/* --- floating theme toggle (site-wide) --- */
.dark-toggle { position: fixed; left: 16px; bottom: 72px; z-index: 2147483002; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--clr-teal-300); background: #fff; color: var(--clr-teal-900); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; transition: background var(--trans), color var(--trans); }
.dark-toggle:hover { background: var(--clr-teal-900); color: #fff; }
.dark-mode .dark-toggle { background: #16313a; color: #ffd479; border-color: rgba(185, 216, 220, 0.3); }

/* --- header + mega menu (scoped exception) --- */
.dark-mode #site-header { background: #0e2027; border-bottom: 1px solid rgba(185, 216, 220, 0.14); }
.dark-mode #mega-menu-wrap-header-menu { background: transparent !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link { color: #dbe9ec !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link:hover,
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: #e05252 !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu li.mega-menu-item ul.mega-sub-menu { background: #122a31 !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu a.mega-menu-link,
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu li.mega-menu-item { color: #c9dade !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu a.mega-menu-link:hover { color: #ffffff !important; }
.dark-mode .mega-menu-toggle { background: transparent !important; }

/* --- WHY COLIBRI (selling hero): dark scrim over the photo --- */
.dark-mode body.theme-d .selling-hero { background-color: #0e2027; }
.dark-mode body.theme-d .selling-hero::before { background: linear-gradient(to bottom, rgba(9, 22, 27, 0.86) 0%, rgba(9, 22, 27, 0.94) 100%); }
.dark-mode body.theme-d .selling-hero__heading { color: #e05252; }
.dark-mode body.theme-d .selling-hero__tabs { border-bottom-color: rgba(255, 255, 255, 0.14); }
.dark-mode body.theme-d .selling-hero__tab-btn { color: #8da7ad; }
.dark-mode body.theme-d .selling-hero__tab-btn.is-active { color: #fff; }
.dark-mode body.theme-d .selling-hero__tab-btn:hover:not(.is-active) { color: #fff; background-color: rgba(255, 255, 255, 0.06); }
.dark-mode body.theme-d .selling-hero__item-heading { color: #eef3f4; }
.dark-mode body.theme-d .selling-hero__item-body { color: #b6c7cb; }
.dark-mode body.theme-d .selling-hero__read-more { color: #93aeb4; }
.dark-mode body.theme-d .selling-hero__item-link { color: #e05252; }

/* --- Jet/Air hero slider band --- */
.dark-mode body.theme-d .hero-slider-wrap { background: #0e2027; }

/* --- Recommendations band --- */
.dark-mode body.theme-d .reco-section { background: #122931; border-top-color: rgba(185, 216, 220, 0.14); }
.dark-mode .reco-section__heading { color: #e05252; }
.dark-mode .reco-section__rule { border-top-color: #2c4a53; }
.dark-mode .reco-quote { background: #16333c; border-color: rgba(185, 216, 220, 0.22); }
.dark-mode .reco-quote__lead { color: #eef3f4; }
.dark-mode .reco-quote__text { color: #dfe9eb; }
.dark-mode .reco-quote__rest { color: #a9bcc1; }
.dark-mode .reco-quote__more { color: #8fc6d2; }
.dark-mode .reco-quote__by { border-top-color: rgba(185, 216, 220, 0.18); }
.dark-mode .reco-quote__name { color: #8fd0dc; }
.dark-mode .reco-quote__logo { background: #fff; padding: 4px 10px; border-radius: 6px; }  /* white tile so dark logos stay legible */
.dark-mode .reco-slider__nav { background: #16333c; border-color: rgba(185, 216, 220, 0.28); color: #cfe0e4; }
.dark-mode .reco-slider__nav:hover { background: var(--clr-teal-700); color: #fff; }
.dark-mode .reco-dot { background: #3c5a63; }
.dark-mode .reco-dot.is-active { background: var(--clr-red); }

/* --- Latest updates band --- */
.dark-mode body.theme-d .latest-updates { background: #0e2027; border-top-color: rgba(185, 216, 220, 0.14); }
.dark-mode .latest-updates__heading { color: #e05252; }
.dark-mode .latest-updates__rule { border-top-color: #2c4a53; }
.dark-mode .update-card { background: #14313a; border: 1px solid rgba(185, 216, 220, 0.16); }
.dark-mode .update-card__title a { color: #e8f1f2; }
.dark-mode .update-card__rule { border-color: #2c4a53; }
.dark-mode .update-card__excerpt { color: #a9bcc1; }
.dark-mode .update-card__btn { color: #dfe9eb; border-color: rgba(185, 216, 220, 0.35); }
.dark-mode .update-card__btn:hover { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }
.dark-mode .update-card__image { background: #fff; }  /* white tile for QR/logo/cover art */

/* --- sticky CTA bar + footer --- */
.dark-mode .home-sticky-cta { background: #10262d; border-top: 1px solid rgba(185, 216, 220, 0.18); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35); }
.dark-mode .home-sticky-cta__label { color: #dfe9eb; }
.dark-mode .home-sticky-cta__btn { color: #dfe9eb; border-color: rgba(185, 216, 220, 0.35); }
.dark-mode .home-sticky-cta__btn--primary { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }
.dark-mode body footer { background: #0b1b21; color: #9fb6bc; }
.dark-mode body footer a { color: #c9dade; }


/* --- dark mode patch 1.55.1: the MMM theme paints each top-level
   menu link with its own WHITE background (they tile into a white
   bar). Make them transparent in dark mode, with a soft dark hover;
   toggle-bar blocks (logo/social area) cleared too. --- */
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link { background: transparent !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item:hover > a.mega-menu-link,
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { background: rgba(255, 255, 255, 0.06) !important; }
.dark-mode #mega-menu-wrap-header-menu .mega-menu-toggle,
.dark-mode #mega-menu-wrap-header-menu .mega-toggle-block { background: transparent !important; }


/* ================================================================
   HOME COMPACT — three-screen rhythm (v1.56.0)
   The home should read as three scroll "screens":
     1) main hero slider
     2) WHY-COLIBRI 1-2-3 + jet/air spindles hero (one tight group)
     3) recommendations + latest updates (one tight group)
   Vertical metrics compressed so each group approaches a viewport.
   Later-in-file overrides of the base metrics; light/dark unaffected.
   ================================================================ */

/* --- screen 2: WHY-COLIBRI + spindles hero, tight --- */
body.theme-d .selling-hero { padding: clamp(12px, 1.6vw, 22px) var(--px) clamp(18px, 2.2vw, 28px); }
body.theme-d .selling-hero__heading { margin-bottom: clamp(12px, 1.6vw, 18px); }
body.theme-d .selling-hero__tabs { margin-bottom: clamp(16px, 2.2vw, 26px); }
body.theme-d .selling-hero__items { gap: clamp(20px, 2.6vw, 34px); }
body.theme-d .selling-hero__item { padding-top: 14px; }
body.theme-d .selling-hero__item-num { font-size: clamp(2rem, 3.4vw, 2.8rem); }
body.theme-d .selling-hero__item-heading { font-size: clamp(1.05rem, 1.5vw, 1.35rem); }
body.theme-d .selling-hero__item-body { font-size: clamp(0.88rem, 1vw, 0.98rem); -webkit-line-clamp: 3; }
body.theme-d .hero-slider-wrap { padding-bottom: clamp(14px, 1.8vw, 24px); }

/* --- screen 3: recommendations + latest updates, tight --- */
body.theme-d .reco-section { padding-top: clamp(22px, 2.6vw, 36px); padding-bottom: clamp(22px, 2.6vw, 36px); }
.reco-section__rule { margin-bottom: 22px; }
.reco-slider { margin-top: 14px; }
.reco-quote { padding: clamp(20px, 2.6vw, 32px); }
.reco-quote__lead { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.reco-slider__dots { margin-top: 14px; }
body.theme-d .latest-updates { padding-top: clamp(22px, 2.6vw, 36px); padding-bottom: clamp(44px, 5vw, 64px); }
.latest-updates__grid { gap: 20px; margin-top: 20px; }
.update-card__image { height: 140px; }


/* --- dark mode patch 1.57.1: dropdown INTERNALS. Like the top bar,
   every submenu link ships its own white background from the MMM
   theme; panel headings/widget links were dark-teal-on-dark. All
   scoped under .dark-mode (authorized menu exception). --- */
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu a.mega-menu-link { background: transparent !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu a.mega-menu-link:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu,
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu li.mega-menu-item,
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu p { color: #c9dade !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu h4.mega-block-title { color: #8fd0dc !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu a:not(.mega-menu-link) { color: #9fd3de !important; }
.dark-mode #mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu img { background: #fff; border-radius: 6px; }


/* --- mobile patch 1.57.2: catalog spec tables were CLIPPED at the
   right edge on phones (70 BAR column cut off). At the mobile tier
   they scroll horizontally instead. --- */
@media (max-width: 768px) {
	.spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.spec-table th, .spec-table td { white-space: nowrap; }
}


/* ================================================================
   HOME SCROLL-SNAP (v1.58.0)
   The home reads as three deliberate "screens" as the visitor
   scrolls: (1) main hero slider, (2) WHY-COLIBRI 1-2-3 + jet/air
   spindle slider, (3) recommendations + blog feed. Snap points are
   the TOP of each group. Uses `proximity` (not mandatory) so tall
   sections - e.g. the stacked blog cards on mobile - never trap
   content: the page assists toward each section but still scrolls
   freely inside a long one. Scoped to the home via :has(body.home);
   the site header is position:relative so no scroll offset is
   needed. Disabled for reduced-motion users. Works at any screen
   size (proximity re-evaluates against the live viewport height).
   ================================================================ */
html:has(body.home) { scroll-snap-type: y proximity; }
body.home .main-slider-wrap,
body.home .selling-hero,
body.home .reco-section { scroll-snap-align: start; scroll-snap-stop: normal; }

@media (prefers-reduced-motion: reduce) {
	html:has(body.home) { scroll-snap-type: none; }
}


/* ================================================================
   DARK MODE — Phase 2: inner pages (site-wide, 2026-07-06)
   Extends the dark theme beyond the home page. Additive; light mode
   untouched. Palette: page #0e2027, band #122931, cards #14313a /
   #16333c, text #dfe9eb, muted #a9bcc1, headings #e8f1f2, teal accent
   #8fd0dc, red accent #e05252. Product + technical images stay on
   white tiles (they cannot dissolve into dark); the Jet Calculator
   widget stays a light island.
   ================================================================ */

/* ---- content headings, eyebrows, intro text ---- */
.dark-mode .mpage-hero__title, .dark-mode .mpage-section__title,
.dark-mode .catalog__heading, .dark-mode .cat-product__title,
.dark-mode .catalog-card__name, .dark-mode .cc-heading,
.dark-mode .case-study__title, .dark-mode .case-study__heading,
.dark-mode .blog-article__title, .dark-mode .enq-hero__title,
.dark-mode .dl-card__title { color: #e8f1f2; }
.dark-mode .mpage-hero__eyebrow, .dark-mode .catalog__eyebrow,
.dark-mode .mpage-section__eyebrow, .dark-mode .cc-eyebrow,
.dark-mode .enq-hero__eyebrow, .dark-mode .case-study__eyebrow { color: #e05252; }
.dark-mode .mpage-hero__text, .dark-mode .mpage-hero__slogan,
.dark-mode .catalog__intro, .dark-mode .catalog-card__blurb,
.dark-mode .cc-intro, .dark-mode .case-study__intro { color: #c3d2d6; }

/* ---- prose ---- */
.dark-mode .mpage-prose, .dark-mode .mpage-prose p, .dark-mode .mpage-prose li,
.dark-mode .blog-article__body, .dark-mode .blog-article__body p, .dark-mode .blog-article__body li { color: #cdd9dc; }
.dark-mode .mpage-prose h1, .dark-mode .mpage-prose h2, .dark-mode .mpage-prose h3,
.dark-mode .mpage-prose h4, .dark-mode .mpage-prose strong,
.dark-mode .blog-article__body h2, .dark-mode .blog-article__body h3, .dark-mode .blog-article__body strong { color: #e8f1f2; }
.dark-mode .mpage-prose a, .dark-mode .blog-article__body a, .dark-mode body a { color: #8fd0dc; }

/* ---- section bands ---- */
.dark-mode .mpage-hero:not(.mpage-hero--bg) { background: #0e2027; border-bottom-color: rgba(185, 216, 220, 0.14); }
.dark-mode .mpage-section--tint { background: #122931; }
.dark-mode .mpage-section--dark { background: #0e2027; }
.dark-mode .mpage-section--dark .mpage-section__title,
.dark-mode .mpage-section--dark .mpage-prose h1, .dark-mode .mpage-section--dark .mpage-prose h2,
.dark-mode .mpage-section--dark .mpage-prose h3, .dark-mode .mpage-section--dark .mpage-prose strong { color: #e8f1f2; }
.dark-mode .cta-strip { background: #122931; border-top-color: rgba(185, 216, 220, 0.14); border-bottom-color: rgba(185, 216, 220, 0.14); }
.dark-mode .cta-strip__label { color: #dfe9eb; }

/* ---- cards / panels ---- */
.dark-mode .catalog-card,
.dark-mode .case-study__card,
.dark-mode .enq-side__card,
.dark-mode .events-aside__box,
.dark-mode .dl-card,
.dark-mode .blog-card { background: #14313a; border-color: rgba(185, 216, 220, 0.18); color: #dfe9eb; }
.dark-mode .catalog-gate { background: #122931; border-color: rgba(185, 216, 220, 0.22); color: #dfe9eb; }
.dark-mode .catalog-gate__heading { color: #e8f1f2; }
.dark-mode .catalog-gate__sub { color: #c3d2d6; }
.dark-mode .catalog-card__view, .dark-mode .case-study__view { color: #8fd0dc; }
.dark-mode .blog-card__title a { color: #e8f1f2; }
.dark-mode .blog-card__excerpt, .dark-mode .case-study__card p { color: #a9bcc1; }

/* product + technical photos stay on white tiles; empty placeholders go dark */
.dark-mode .catalog-card__image { background: #fff; }
.dark-mode .mpage-figure img, .dark-mode .case-study__shot img,
.dark-mode .case-study__card img, .dark-mode .svc-center__logo { background: #fff; border-radius: 6px; }
.dark-mode .catalog-card__image--ph, .dark-mode .blog-card__media,
.dark-mode .update-card__image--placeholder { background: #10262d; }

/* back link / breadcrumbs / rules */
.dark-mode a.cat-product__back, .dark-mode .cat-product__back { color: #8fd0dc; }
.dark-mode .cat-product__crumbs, .dark-mode .cat-product__crumbs a { color: #a9bcc1; }
.dark-mode hr, .dark-mode .catalog__rule { border-color: rgba(185, 216, 220, 0.18); }

/* ---- CATALOG PRODUCT ---- */
.dark-mode .cat-product__tabs { border-bottom-color: rgba(185, 216, 220, 0.2); }
.dark-mode .cat-product__tab { color: #9fb6bc; }
.dark-mode .cat-product__tab.is-active { color: #fff; }
.dark-mode .cat-product__intro-heading, .dark-mode .cat-product__size-heading,
.dark-mode .cat-product__dim-heading, .dark-mode .cat-product__downloads h4 { color: #e8f1f2; }
.dark-mode .cat-product__intro-text { color: #c3d2d6; }
.dark-mode .cat-product__highlights li { color: #cdd9dc; }
.dark-mode .cat-product__render, .dark-mode .cat-product__drawing { background: #fff; border-radius: 8px; }
.dark-mode .cat-product__dl-link { background: #16333c; border-color: rgba(185, 216, 220, 0.2); color: #dfe9eb; }
.dark-mode .cat-product__dl-ext { color: #8fd0dc; }

/* spec tables: dark cells; keep the brand t-title header + ISO cutter colours */
.dark-mode .spec-table { color: #dfe9eb; }
.dark-mode .spec-table td { background: #14313a; border-color: rgba(185, 216, 220, 0.14); color: #e8eff1; }
.dark-mode .spec-table th.t-info { background: #10262d; border-color: rgba(185, 216, 220, 0.14); color: #dfe9eb; }
.dark-mode .spec-table th.t-sub { background: #1c4450; color: #e8f1f2; }

/* ---- CASE STUDIES ---- */
.dark-mode .case-study__tag { background: #16333c; border-color: rgba(185, 216, 220, 0.28); color: #cfe0e4; }
.dark-mode .case-study__tag:hover { background: #1c4450; color: #fff; }
.dark-mode .case-study__meta { color: #a9bcc1; }

/* ---- BLOG ARTICLE ---- */
.dark-mode .blog-article__hero { background: #122931; }
.dark-mode .blog-article__meta { color: #a9bcc1; }
.dark-mode .blog-article__back { color: #8fd0dc; }
.dark-mode .blog-related { background: #0e2027; }
.dark-mode .blog-related__heading { color: #e8f1f2; }
.dark-mode .blog-article__dl-btn { color: #dfe9eb; border-color: rgba(185, 216, 220, 0.35); }

/* ---- ENQUIRIES / FORMS ---- */
.dark-mode .enq-side__heading { color: #e8f1f2; }
.dark-mode .enq-side__body, .dark-mode .enq-side__body a, .dark-mode .enq-side__sub { color: #c3d2d6; }
.dark-mode .enq-side__card--accent { background: #16333c; }
.dark-mode .fluentform input, .dark-mode .fluentform select, .dark-mode .fluentform textarea,
.dark-mode input[type="text"], .dark-mode input[type="email"], .dark-mode input[type="tel"],
.dark-mode input[type="search"], .dark-mode textarea, .dark-mode select { background: #16333c !important; border-color: rgba(185, 216, 220, 0.28) !important; color: #eef3f4 !important; }
.dark-mode .fluentform label, .dark-mode .ff-el-input--label label,
.dark-mode .ff-el-group label, .dark-mode .fluentform .ff-el-form-check-label { color: #cfe0e4 !important; }
.dark-mode .fluentform ::placeholder, .dark-mode input::placeholder, .dark-mode textarea::placeholder { color: #82999e !important; }

/* ---- ABOUT / SERVICE CENTRES ---- */
.dark-mode .about-box { background: #14313a !important; color: #dfe9eb !important; }
.dark-mode .about-box__title { color: #e8f1f2 !important; }
.dark-mode .about-box__text, .dark-mode .about-box__text * { color: #c3d2d6 !important; }
.dark-mode .about-box--solid,
.dark-mode .about-box--solid .about-box__title,
.dark-mode .about-box--solid .about-box__text,
.dark-mode .about-box--solid .about-box__text * { color: #fff !important; }

/* ---- JET CALCULATOR page: dark page, widget stays a light island ---- */
.dark-mode #jet-calculator, .dark-mode .jc-embed { background: transparent; }


/* --- dark patch 1.59.1: fixes from the inner-page visual QA ---
   (1) enquiries content section had an explicit white background
       (form panel) that left the light body text invisible;
   (2) LIGHT (non-image) page heroes keep a dark title from the
       whiter-refresh rule `.mpage-hero:not(--bg) .mpage-hero__title`
       (specificity 0,3,0) which out-ranks the generic dark title
       rule - override at matching depth. --- */
.dark-mode .enq-section { background: #0e2027 !important; }
.dark-mode .mpage-hero:not(.mpage-hero--bg) .mpage-hero__title { color: #e8f1f2; }
.dark-mode .mpage-hero:not(.mpage-hero--bg) .mpage-hero__text,
.dark-mode .mpage-hero:not(.mpage-hero--bg) .mpage-hero__slogan { color: #c3d2d6; }


/* ================================================================
   FULL-WIDTH HEADER + FOOTER (v1.60.0, 2026-07-06)
   Hello Elementor caps .site-header / .site-footer at 1140px and
   centres them; on wide screens that leaves large empty margins.
   Unlock both to full width. The Max Mega Menu bar and the footer
   bar keep the standard --px side gutter so content never sits
   flush to the screen edge. (Mega-menu width/gutter override is
   authorised for this user-requested layout change; scoped to
   spacing only - the plugin still owns colours/interactions.)
   ================================================================ */
.site-header,
.site-footer { max-width: 100% !important; }

#mega-menu-wrap-header-menu { padding-left: var(--px); padding-right: var(--px); box-sizing: border-box; }
/* MMM caps the menu row at ~965px with !important; unlock so the logo (float:left)
   pins to the left gutter and the social icons (float:right) pin to the right gutter. */
#mega-menu-wrap-header-menu #mega-menu-header-menu { max-width: 100% !important; margin-left: 0 !important; }


/* ================================================================
   CENTERED MENUS (v1.60.2, 2026-07-06)
   Header + footer navigation centred with the logo pinned left.
   Header: the mega-menu logo (float:left) and social icons
   (float:right) stay at the gutters; text-align:center centres the
   inline nav items between them (sub-menus reset to left so flyout
   content stays left-aligned). Footer: a 3-column grid (1fr auto 1fr)
   puts the logo left, nav centred, CONTACT US right; collapses to a
   centred stack on mobile.
   ================================================================ */
#mega-menu-wrap-header-menu #mega-menu-header-menu { text-align: center !important; }
#mega-menu-wrap-header-menu #mega-menu-header-menu ul.mega-sub-menu { text-align: left; }

.site-footer__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-footer__brand { justify-self: start; }
.site-footer__nav { justify-self: center; }
.site-footer__btn { justify-self: end; margin-left: 0; }
@media (max-width: 700px) {
	.site-footer__bar { grid-template-columns: 1fr; justify-items: center; }
	.site-footer__btn { justify-self: center; }
}


/* ================================================================
   FULL-WIDTH HEADER — top (non-stuck) state (v1.61.0, 2026-07-07)
   Max Mega Menu caps the sticky-wrapper + menu row at ~972px until
   the header sticks on scroll, so at the very top the nav clustered
   left and only spread to full width once stuck. Unlock both
   wrappers so the menu is full-width + centred from the top too
   (matches the stuck state - no jump on scroll).
   (Authorised MMM layout exception - width/spacing only.)
   ================================================================ */
.mega-sticky-wrapper,
#mega-menu-wrap-header-menu { max-width: 100% !important; width: 100% !important; }

/* ================================================================
   DARK MODE - product & content image framing (v1.61.0, 2026-07-07)
   White-background product/content photos glared against the dark
   page; frame them with a subtle teal-tinted border + soft rounded
   corners so they read as clean panels. Product/content image tiles
   only - logos, icons, menu and hero sliders keep their own treatment.
   ================================================================ */
.dark-mode .cat-product__media,
.dark-mode .catalog-card__image,
.dark-mode .mpage-card__img,
.dark-mode .dl-card__img {
	border: 1px solid rgba(185, 216, 220, 0.22);
	border-radius: 10px;
	overflow: hidden;
}
.dark-mode .mpage-prose img,
.dark-mode .blog-article__body img {
	border: 1px solid rgba(185, 216, 220, 0.20);
	border-radius: 8px;
}


/* ================================================================
   DOWNLOAD LEAD-CAPTURE GATE - modal (v1.62.0, 2026-07-07)
   Shown when a not-yet-captured visitor requests a document.
   Option-2 styling; dark-mode aware. Hidden until opened by JS.
   ================================================================ */
.dlgate-overlay { position: fixed; inset: 0; background: rgba(12,26,32,0.62); z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; }
.dlgate-overlay.is-open { display: flex; }
.dlgate { background: #fff; width: 100%; max-width: 460px; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); border-top: 5px solid var(--clr-red); padding: clamp(24px,4vw,36px); position: relative; font-family: 'Assistant', sans-serif; }
.dlgate__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1; color: #7a8a8f; cursor: pointer; }
.dlgate__close:hover { color: var(--clr-red); }
.dlgate__eyebrow { color: var(--clr-red); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; margin: 0 0 6px; }
.dlgate__title { color: var(--clr-teal-900); font-weight: 800; font-size: 1.5rem; margin: 0 0 8px; line-height: 1.15; }
.dlgate__intro { color: var(--clr-dark); font-size: 0.98rem; line-height: 1.5; margin: 0 0 18px; }
.dlgate__doc { font-weight: 700; color: var(--clr-teal-700); }
.dlgate__field { margin: 0 0 12px; }
.dlgate__field label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--clr-teal-900); margin: 0 0 4px; }
.dlgate__field input { width: 100%; padding: 11px 13px; border: 1px solid #c3d2d6; border-radius: 8px; font: inherit; box-sizing: border-box; }
.dlgate__field input:focus { outline: none; border-color: var(--clr-teal-700); box-shadow: 0 0 0 3px rgba(53,137,157,0.15); }
.dlgate__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.dlgate__submit { width: 100%; margin-top: 6px; background: var(--clr-red); color: #fff; border: 0; border-radius: 8px; padding: 13px 18px; font-weight: 800; font-size: 1rem; cursor: pointer; font-family: inherit; transition: background var(--trans); }
.dlgate__submit:hover { background: #a91515; }
.dlgate__submit[disabled] { opacity: 0.6; cursor: default; }
.dlgate__note { font-size: 0.78rem; color: #6f8085; line-height: 1.4; margin: 12px 0 0; text-align: center; }
.dlgate__msg { margin: 10px 0 0; font-size: 0.9rem; }
.dlgate__msg--err { color: var(--clr-red); font-weight: 600; }
.dlgate__success { text-align: center; }
.dlgate__success-ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--clr-teal-100); color: var(--clr-teal-700); font-size: 30px; font-weight: 800; margin: 0 auto 10px; }
/* dark mode */
.dark-mode .dlgate { background: #14313a; border-top-color: var(--clr-red); }
.dark-mode .dlgate__title { color: #e8f1f2; }
.dark-mode .dlgate__intro, .dark-mode .dlgate__msg { color: #c9dade; }
.dark-mode .dlgate__field label { color: #cfe0e4; }
.dark-mode .dlgate__field input { background: #0e2027; border-color: rgba(185,216,220,0.28); color: #eef3f4; }
.dark-mode .dlgate__doc { color: #8fd0dc; }
.dark-mode .dlgate__note { color: #93aeb4; }
.dark-mode .dlgate__success-ico { background: #0e2027; color: #8fd0dc; }


/* ================================================================
   DARK MODE — Phase 3: light backgrounds that survived (v1.63.0, 2026-07-07)
   Fixes "light text on white" in dark mode caused by ACF-set INLINE
   white section backgrounds and the Jet Calculator widget (both
   unreachable by the class-based Phase 2 rules). Also removes leftover
   white spec-table gridlines and frames content images with the
   standard soft border + rounded corners.
   ================================================================ */

/* 1. ACF-set inline light backgrounds must not survive dark mode (inline beats classes). */
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#FFF"],
.dark-mode [style*="background: #FFF"],
.dark-mode [style*="background-color:#fff"],
.dark-mode [style*="background-color: #fff"],
.dark-mode .mpage-section[style*="background"] { background-color: #122931 !important; }

/* 2. Jet Spindle Calculator widget — dark-aware (previously a light island). */
.dark-mode .jc-wrap { background: #122931 !important; border-color: rgba(185,216,220,0.16) !important; }
.dark-mode .jc-panel { background: #14313a !important; color: #dfe9eb !important; border-color: rgba(185,216,220,0.16) !important; }
.dark-mode .jc-tab { background: #10262d !important; color: #b7cace !important; border-color: rgba(185,216,220,0.16) !important; }
.dark-mode .jc-tab.active, .dark-mode .jc-tab[aria-selected="true"] { background: #14313a !important; color: #fff !important; }
.dark-mode .jc-panel h1, .dark-mode .jc-panel h2, .dark-mode .jc-panel h3, .dark-mode .jc-panel h4,
.dark-mode .jc-panel label, .dark-mode .jc-panel th, .dark-mode .jc-panel legend,
.dark-mode .jc-wrap h1, .dark-mode .jc-wrap h2, .dark-mode .jc-wrap h3 { color: #e8f1f2 !important; }
.dark-mode .jc-panel p, .dark-mode .jc-panel td, .dark-mode .jc-panel li, .dark-mode .jc-panel span,
.dark-mode .jc-result-placeholder { color: #cdd9dc !important; }
.dark-mode .jc-panel input, .dark-mode .jc-panel select, .dark-mode .jc-panel textarea { background: #16333c !important; border-color: rgba(185,216,220,0.28) !important; color: #eef3f4 !important; }
.dark-mode .jc-result-area { background: #10262d !important; border-color: rgba(185,216,220,0.16) !important; }

/* 3. Spec-table: remove leftover white gridlines. */
.dark-mode .spec-table th, .dark-mode .spec-table td { border-color: rgba(185,216,220,0.14) !important; }

/* 4. Content image framing (soft teal border + rounded corners), matching product tiles. */
.dark-mode .mpage-figure img,
.dark-mode .mpage-card__img img,
.dark-mode .case-study__shot img,
.dark-mode .case-study__card img { border: 1px solid rgba(185,216,220,0.22); border-radius: 10px; }


/* ================================================================
   DARK MODE — Phase 3.1: catalog sections + calculator (v1.63.1, 2026-07-07)
   Follow-up from dark visual QA: .catalog (listing) and .cat-product
   (product) sections default to white, leaving their light headings/
   intro unreadable; and the Jet Calculator's inner cards/buttons/
   badges kept light backgrounds. Darken all.
   ================================================================ */
.dark-mode .catalog { background: #0e2027; }
.dark-mode .cat-product { background: #0e2027; }

.dark-mode .jc-card { background: #14313a !important; border-color: rgba(185,216,220,0.16) !important; }
.dark-mode .jc-radio-btn { background: #16333c !important; border-color: rgba(185,216,220,0.22) !important; color: #dfe9eb !important; }
.dark-mode .jc-btn { background: #16333c !important; color: #e8f1f2 !important; border-color: rgba(185,216,220,0.22) !important; }
.dark-mode .jc-result-placeholder { background: #10262d !important; color: #a9bcc1 !important; }
.dark-mode .jc-tab-num { background: #1c4450 !important; color: #e8f1f2 !important; }
.dark-mode .jc-label, .dark-mode .jc-hint { color: #cdd9dc !important; }


/* ================================================================
   DARK MODE — header bar opacity fix (v1.63.2, 2026-07-08)
   The dark menu bar was transparent (it relied on #site-header behind
   it), so page content showed through when the header is sticky / over
   content. Make the bar a solid dark panel in every state.
   ================================================================ */
.dark-mode #mega-menu-wrap-header-menu,
.dark-mode #mega-menu-wrap-header-menu.mega-stuck { background: #0e2027 !important; }