/*!
Theme Name: KingCNC
Theme URI: http://underscores.me/
Author: Josh Newell
Author URI: http://underscores.me/
Description: Bespoke theme for KingCNC.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kingcnc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

KingCNC is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
   Brand blues only. No purple visited state and no red anywhere in the
   palette (red is reserved for genuine error / breakdown affordances).
--------------------------------------------- */
a,
a:visited {
	color: var(--kc-secondary);
}

a:hover,
a:focus,
a:active {
	color: var(--kc-secondary-dark);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: var(--kc-radius-md);
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: var(--kc-radius-md);
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
---------------------------------------------
   NOTE: Underscores default nav styling removed -
   KINGCNC nav styling lives in the brand section
   at the bottom of this file.
*/

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

article.post,
article.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: var(--kc-radius-md);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# KINGCNC - Brand tokens, header, footer
--------------------------------------------------------------*/

:root {
	--kc-primary: #122272;
	--kc-primary-dark: #0d1a5a;
	--kc-secondary: #0e659e;
	--kc-secondary-dark: #0a4e7c;
	--kc-grey-light: #f5f5f5;
	--kc-grey-border: #e5e7eb;
	--kc-text: #1a1a1a;
	--kc-text-muted: #6b7280;
	--kc-white: #ffffff;
	--kc-nav-height: 80px;
	--kc-utility-height: 40px;
	--kc-container: 1240px;
	--kc-radius-sm: 6px;
	--kc-radius-md: 8px;
	--kc-radius-lg: 12px;
	--kc-radius-xl: 16px;
	--kc-radius-pill: 999px;
	--kc-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
	--kc-header-pill-h: 68px;
	--kc-header-pad-top: 1rem;
	--kc-hero-min-h: clamp(560px, 78vh, 800px);
}

@media (min-width: 1366px) {
	:root {
		--kc-container: 1320px;
	}
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--kc-text);
}

/* Buttons
--------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--kc-radius-pill);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Tighten padding when a circular icon is present so the dot dominates and the pill sits at the same height as the home/services hero and header CTAs. */
.btn:has(.btn__dot),
.btn:has(.btn__mark) {
	padding: 0.55rem 0.55rem 0.55rem 1.6rem;
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary,
.btn--primary:visited {
	background-color: var(--kc-primary);
	color: var(--kc-white);
	border-color: var(--kc-primary);
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
}

.btn--ghost,
.btn--ghost:visited {
	background-color: transparent;
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.btn--ghost:hover,
.btn--ghost:focus {
	border-color: var(--kc-white);
	color: var(--kc-white);
}

.btn--block {
	width: 100%;
}

/* Circular icon housing inside a CTA — the shared pattern used by the header,
   home hero, services hero and any body CTA that adds an icon.
   Default: white circle + primary-color icon (reads on filled --kc-primary pills). */
.btn__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	overflow: hidden;
	background-color: var(--kc-white);
	color: var(--kc-primary);
}

.btn__dot svg {
	width: 18px;
	height: 18px;
}

/* Sliding-arrow variant: use two <svg class="btn__dot-arrow"> nodes,
   the second with .btn__dot-arrow--next. First arrow slides out right on
   hover, second slides in from the left. Mirrors the header CTA. */
.btn__dot-arrow {
	position: absolute;
	inset: 0;
	margin: auto;
}

.btn__dot-arrow--next {
	transform: translateX(-26px);
}

@media (prefers-reduced-motion: no-preference) {
	.btn__dot-arrow {
		transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
	}

	.btn:hover .btn__dot-arrow,
	.btn:focus-visible .btn__dot-arrow {
		transform: translateX(26px);
	}

	.btn:hover .btn__dot-arrow--next,
	.btn:focus-visible .btn__dot-arrow--next {
		transform: translateX(0);
	}
}

/* Hero-scope primary override: on the light hero gradient (home + services hubs)
   the primary CTA is a white pill with a --kc-primary circle housing a white icon.
   Base .btn--primary (blue pill) still applies everywhere else. */
.hero .btn--primary,
.hero .btn--primary:visited,
.hub-hero .btn--primary,
.hub-hero .btn--primary:visited {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: transparent;
}

.hero .btn--primary:hover,
.hero .btn--primary:focus,
.hub-hero .btn--primary:hover,
.hub-hero .btn--primary:focus {
	background-color: var(--kc-grey-light);
	border-color: transparent;
	color: var(--kc-primary);
}

.hero .btn--primary .btn__dot,
.hub-hero .btn--primary .btn__dot {
	background-color: var(--kc-primary);
	color: var(--kc-white);
}

/* Home hero ghost: transparent pill with white text sits on the deeper top of
   the hero gradient. The services hub-hero has its own white-fill ghost
   override further down for its lighter content area. */
.hero .btn--ghost,
.hero .btn--ghost:visited {
	background-color: transparent;
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.35);
}

.hero .btn--ghost:hover,
.hero .btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.hero .btn--ghost .btn__dot {
	background-color: var(--kc-white);
	color: var(--kc-primary);
}

/* Site header - floating pill
--------------------------------------------- */
/* Neutralize the base a/a:visited (blue/#800080) - only on brand + nav items,
   NOT on button/CTA anchors which need to keep their explicit color. */
.site-header__brand,
.site-header__brand:visited,
.primary-menu a,
.primary-menu a:visited {
	color: inherit;
}

.site-header--pill {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: var(--kc-header-pad-top) 1.5rem 0;
	background: transparent;
	pointer-events: none;
	transition: padding 0.25s ease, background-color 0.25s ease;
}

.site-header--pill .site-header__pill,
.site-header--pill .site-header__brand,
.site-header--pill .primary-menu,
.site-header--pill .site-header__actions,
.site-header--pill .menu-toggle {
	pointer-events: auto;
}

.site-header__pill {
	max-width: var(--kc-container);
	margin: 0 auto;
	min-height: var(--kc-header-pill-h);
	padding: 8px 8px 8px 8px;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background-color: var(--kc-white);
	border-radius: var(--kc-radius-pill);
	transition: max-width 0.25s ease, border-radius 0.25s ease, padding 0.25s ease, background-color 0.25s ease;
}

.site-header--pill.is-stuck {
	padding: 0;
	background-color: var(--kc-white);
	pointer-events: auto;
}

.site-header--pill.is-stuck .site-header__pill {
	max-width: none;
	border-radius: 0;
	padding: 8px 1.5rem;
	background-color: transparent;
}

/* Brand - logo standalone (no pill wrapper) */
.site-header__brand {
	display: inline-flex;
	align-items: center;
	padding: 4px 0.75rem;
	text-decoration: none;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.site-header__brand:hover,
.site-header__brand:focus {
	opacity: 0.85;
}

.site-header__brand-mark {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__brand-mark img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

/* Wordmark already lives inside the KING logo image - hide the duplicate text label */
.site-header__brand-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Navigation lives centered in the pill */
.main-navigation {
	flex: 1;
	display: flex;
	justify-content: center;
	align-self: stretch;
}

/* Primary menu (top level)
--------------------------------------------- */
.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.primary-menu li {
	position: relative;
	margin: 0;
}

.primary-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 1rem;
	color: var(--kc-text);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: var(--kc-radius-pill);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-menu > li > a .menu-item-icon {
	display: none; /* hide icons in top-level; icons appear inside dropdowns */
}

.primary-menu > li > a .menu-item-desc {
	display: none;
}

.primary-menu > li:hover > a,
.primary-menu > li:focus-within > a,
.primary-menu > li.focus > a,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-parent > a,
.primary-menu > li.current-menu-ancestor > a {
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
}

/* Chevron caret on parent items */
.primary-menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.15rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
	opacity: 0.55;
}

.primary-menu > li:hover > a::after,
.primary-menu > li:focus-within > a::after,
.primary-menu > li.focus > a::after {
	transform: rotate(225deg) translate(-1px, -1px);
	opacity: 1;
}

/* Sub-menu dropdown - normal (icon list card)
--------------------------------------------- */
.primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 300px;
	max-height: calc(100vh - 140px); /* fit within viewport regardless of item count */
	overflow-y: auto;
	overscroll-behavior: contain;    /* wheel inside dropdown doesn't bubble to page */
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.06);
	border-radius: var(--kc-radius-xl);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 12px 28px -8px rgba(18, 34, 114, 0.16),
		0 32px 56px -20px rgba(18, 34, 114, 0.10);
	list-style: none;
	margin: 0;
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0s linear 0.18s;
	z-index: 200;
	/* Slim scrollbar (WebKit + Firefox) */
	scrollbar-width: thin;
	scrollbar-color: rgba(18, 34, 114, 0.25) transparent;
}

.primary-menu .sub-menu::-webkit-scrollbar {
	width: 8px;
}

.primary-menu .sub-menu::-webkit-scrollbar-thumb {
	background-color: rgba(18, 34, 114, 0.25);
	border-radius: 4px;
	border: 2px solid var(--kc-white);
	background-clip: padding-box;
}

.primary-menu .sub-menu::-webkit-scrollbar-track {
	background: transparent;
}

/* Invisible bridge so hover doesn't drop while moving to the dropdown */
.primary-menu > li > .sub-menu::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li.focus > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0s linear 0s;
}

.primary-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.85rem;
	color: var(--kc-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	border-radius: var(--kc-radius-lg);
	white-space: nowrap;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus,
.primary-menu .sub-menu .current-menu-item > a {
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
}

.primary-menu .sub-menu .menu-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--kc-radius-md);
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
	flex-shrink: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-menu .sub-menu a:hover .menu-item-icon,
.primary-menu .sub-menu a:focus .menu-item-icon {
	background-color: var(--kc-primary);
	color: var(--kc-white);
}

.primary-menu .sub-menu .menu-item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.primary-menu .sub-menu .menu-item-label {
	font-weight: 600;
	color: inherit;
}

.primary-menu .sub-menu .menu-item-desc {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--kc-text-muted);
	white-space: normal;
}

/* Nested sub-menu (non-mega, e.g. Services if it grows a sub-tree) */
.primary-menu .sub-menu .sub-menu {
	top: -10px;
	left: 100%;
	margin-left: 8px;
	transform: translate(-6px, 0);
}

.primary-menu .sub-menu li:hover > .sub-menu,
.primary-menu .sub-menu li.focus > .sub-menu,
.primary-menu .sub-menu li:focus-within > .sub-menu {
	transform: translate(0, 0);
}

/* Right-pointing chevron for nested parents (non-mega) */
.primary-menu .sub-menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	border-radius: 1px;
	transform: rotate(-45deg);
	opacity: 0.4;
	transition: opacity 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}

.primary-menu .sub-menu .menu-item-has-children:hover > a::after,
.primary-menu .sub-menu .menu-item-has-children.focus > a::after,
.primary-menu .sub-menu .menu-item-has-children:focus-within > a::after {
	opacity: 1;
	transform: rotate(-45deg) translateX(2px);
}

/* Mega menu - Machines
--------------------------------------------- */
.primary-menu > li.mega > .sub-menu {
	left: 50%;
	right: auto;
	width: 780px;
	max-width: calc(100vw - 3rem);
	min-width: 0;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
	border-radius: var(--kc-radius-xl);
}

/* Each direct child column heading */
.primary-menu > li.mega > .sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.65rem;
	margin-bottom: 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--kc-text);
	text-transform: none;
	letter-spacing: -0.01em;
	white-space: normal;
	border-radius: var(--kc-radius-lg);
}

.primary-menu > li.mega > .sub-menu > li > a .menu-item-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
}

.primary-menu > li.mega > .sub-menu > li > a:hover,
.primary-menu > li.mega > .sub-menu > li > a:focus {
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
}

/* Nested list inside mega (grandchildren) is static - stacked under its column heading */
.primary-menu > li.mega > .sub-menu .sub-menu {
	position: static;
	transform: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	max-height: none;
	overflow: visible;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	width: auto;
	transition: none;
}

/* Only reveal the static grandchildren when the mega itself is open. Without
   this gate, `visibility: visible` on the nested list would win over the
   hidden mega parent's inheritance and leave those invisible items
   hit-testable - silently stealing hover from neighbouring dropdowns
   (e.g. Services, which sits under the same horizontal band as Machines). */
.primary-menu > li.mega:hover > .sub-menu .sub-menu,
.primary-menu > li.mega.focus > .sub-menu .sub-menu,
.primary-menu > li.mega:focus-within > .sub-menu .sub-menu {
	opacity: 1;
	visibility: visible;
}

.primary-menu > li.mega > .sub-menu .sub-menu a {
	padding: 0.5rem 0.65rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--kc-text-muted);
	text-transform: none;
	letter-spacing: 0;
	gap: 0.65rem;
}

.primary-menu > li.mega > .sub-menu .sub-menu a .menu-item-icon {
	display: none;
}

.primary-menu > li.mega > .sub-menu .sub-menu a:hover,
.primary-menu > li.mega > .sub-menu .sub-menu a:focus {
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
}

/* No flyout chevrons inside the mega (columns aren't flyouts) */
.primary-menu > li.mega > .sub-menu .menu-item-has-children > a::after {
	display: none;
}

/* Suppress nested bridge - outer mega keeps its hover bridge */
.primary-menu > li.mega > .sub-menu .sub-menu::before {
	display: none;
}

/* Header actions (right side of the pill) */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.site-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 0.55rem 0.7rem 1.25rem;
	background-color: var(--kc-primary);
	color: var(--kc-white);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 0;
	border-radius: var(--kc-radius-pill);
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.site-header__cta:visited {
	color: var(--kc-white);
}

.site-header__cta:hover,
.site-header__cta:focus {
	background-color: var(--kc-primary-dark);
	color: var(--kc-white);
}

.site-header__cta:active {
	transform: translateY(1px);
}

.site-header__cta-dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--kc-white);
	color: var(--kc-primary);
	flex-shrink: 0;
	overflow: hidden;
}

.site-header__cta-arrow {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
}

.site-header__cta-arrow--next {
	transform: translateX(-26px);
}

@media (prefers-reduced-motion: no-preference) {
	.site-header__cta-arrow {
		transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
	}

	.site-header__cta:hover .site-header__cta-arrow,
	.site-header__cta:focus-visible .site-header__cta-arrow {
		transform: translateX(26px);
	}

	.site-header__cta:hover .site-header__cta-arrow--next,
	.site-header__cta:focus-visible .site-header__cta-arrow--next {
		transform: translateX(0);
	}
}

/* Mobile phone icon — visible only on narrow viewports */
.site-header__phone {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--kc-primary);
	border-radius: var(--kc-radius-md);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header__phone:visited {
	color: var(--kc-primary);
}

.site-header__phone:hover,
.site-header__phone:focus {
	background-color: var(--kc-grey-light);
	color: var(--kc-primary-dark);
}

.site-header__phone-icon {
	display: block;
}

/* Hamburger button */
.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--kc-primary);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.main-navigation,
	.site-header__cta {
		display: none;
	}
	.menu-toggle {
		display: flex;
	}
	.site-header__phone {
		display: inline-flex;
	}

	/* Full-width bar on mobile — mirrors the desktop stuck-header treatment */
	.site-header--pill,
	.site-header--pill.is-stuck {
		padding: 0;
		background-color: var(--kc-white);
		pointer-events: auto;
	}
	.site-header__pill,
	.site-header--pill.is-stuck .site-header__pill {
		max-width: none;
		border-radius: 0;
		padding: 6px 0.75rem;
		background-color: transparent;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0.5rem;
	}
	.menu-toggle {
		justify-self: start;
	}
	.site-header__brand {
		justify-self: center;
		padding: 4px;
	}
	.site-header__actions {
		justify-self: end;
	}
}

/* Hero - home page
--------------------------------------------- */
.hero {
	position: relative;
	margin-top: calc(-1 * (var(--kc-header-pill-h) + var(--kc-header-pad-top))); /* pull hero up behind the floating pill */
	padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 3.5rem) 1.5rem 5rem;
	min-height: var(--kc-hero-min-h);
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.hero__bg-image {
	position: absolute;
	inset: 0;
	background-color: var(--kc-primary);
	background-image: url('images/hero.jpg');
	background-size: cover;
	background-position: center;
}

.hero__bg-tint {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1200px 600px at 20% 15%, rgba(14, 101, 158, 0.35), transparent 65%),
		linear-gradient(135deg, rgba(18, 34, 114, 0.94) 0%, rgba(14, 46, 118, 0.92) 55%, rgba(18, 34, 114, 0.96) 100%);
}

.hero__inner {
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.hero__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.06);
	border-radius: var(--kc-radius-pill);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 8px 20px -8px rgba(18, 34, 114, 0.15);
	margin-bottom: 2rem;
}

.hero__pill-text {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--kc-text);
	line-height: 1.35;
	text-align: left;
	white-space: nowrap;
}

.hero__heading {
	margin: 0 0 1.5rem;
	font-size: clamp(2.25rem, 5.5vw, 4.25rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--kc-white);
}

.hero__sub {
	margin: 0 auto 2.5rem;
	max-width: 820px;
	font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.hero__ctas {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 640px) {
	.hero {
		padding: calc(68px + 1rem + 2rem) 1.25rem 3.5rem;
	}
	.hero__pill-text {
		white-space: normal;
		font-size: 0.75rem;
		max-width: 200px;
	}
}

/* Mobile drawer
--------------------------------------------- */
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
	visibility: hidden;
}

.mobile-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

.mobile-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mobile-drawer.is-open .mobile-drawer__scrim {
	opacity: 1;
}

.mobile-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: min(360px, 85vw);
	background-color: var(--kc-white);
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.mobile-drawer.is-open .mobile-drawer__panel {
	transform: translateX(0);
}

.mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--kc-grey-border);
}

.mobile-drawer__close {
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--kc-text);
	cursor: pointer;
}

.mobile-drawer__nav {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 0;
}

.mobile-menu,
.mobile-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu a {
	display: block;
	padding: 0.85rem 1.25rem;
	color: var(--kc-text);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--kc-grey-border);
}

.mobile-menu a:hover,
.mobile-menu a:focus,
.mobile-menu .current-menu-item > a {
	color: var(--kc-secondary);
	background-color: var(--kc-grey-light);
}

.mobile-menu .sub-menu a {
	padding-left: 2.25rem;
	font-weight: 400;
	font-size: 0.9rem;
}

.mobile-menu .sub-menu .sub-menu a {
	padding-left: 3.25rem;
}

/* Collapsible parent items in the mobile drawer.
   The parent <a> becomes an expand/collapse toggle; a "View all" item at the top
   of the submenu keeps the hub page reachable. */
.mobile-menu .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
}

.mobile-menu .sub-menu {
	display: none;
	background-color: var(--kc-grey-light);
}

.mobile-menu .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.mobile-menu__chevron {
	display: inline-block;
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
	opacity: 0.55;
}

.mobile-menu .is-open > a .mobile-menu__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
	opacity: 1;
}

.mobile-menu__view-all {
	font-weight: 600;
	color: var(--kc-primary) !important;
}

.mobile-drawer__foot {
	padding: 1.25rem;
	border-top: 1px solid var(--kc-grey-border);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mobile-drawer__foot .btn--ghost {
	color: var(--kc-primary);
	border-color: var(--kc-primary);
}

.mobile-drawer__foot .btn--ghost:hover,
.mobile-drawer__foot .btn--ghost:focus {
	background-color: var(--kc-primary);
	color: var(--kc-white);
}

/* Lock scroll when drawer open */
body.drawer-open {
	overflow: hidden;
}

/* Site footer
   Three stacked bands over the same dark navy field:
   1. Callsheet: 24/7 breakdown line as the hero
   2. Plate: id column + spec-plate label/value grid + giant wordmark signature
   3. Legal: copyright + policy links
--------------------------------------------- */
.site-footer {
	background-color: var(--kc-primary-dark);
	color: var(--kc-white);
	margin-top: 4rem;
	position: relative;
	overflow: hidden;
}

.home .site-footer,
.site-main:has(> .hub-cta:last-child) + .site-footer,
.site-main:has(> .about-cta:last-child) + .site-footer {
	margin-top: 0;
}

.site-footer__plate {
	position: relative;
	background-color: var(--kc-primary-dark);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Polka-dot signature, matching .home-machine-card::after. Fades in from
   the bottom-right so it reads as a design mark, not a busy field. */
.site-footer__plate {
	padding-bottom: 2.5rem;
	overflow: hidden;
}

.site-footer__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.4px);
	background-size: 14px 14px;
	opacity: 0.35;
	z-index: 1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(315deg, #000 15%, transparent 65%);
	mask-image: linear-gradient(315deg, #000 15%, transparent 65%);
}

.site-footer__plate-inner {
	max-width: var(--kc-container);
	margin: 0 auto;
	padding: 3.5rem 1.5rem 2rem;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
	position: relative;
	z-index: 2;
}

.site-footer__id {
	min-width: 0;
}

.site-footer__logo {
	display: inline-block;
}

.site-footer__logo img {
	display: block;
	max-height: 52px;
	width: auto;
	filter: brightness(0) invert(1);
}

.site-footer__tagline {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	margin: 1.25rem 0 1.75rem;
	max-width: 32ch;
}

.site-footer__social-link,
.site-footer__social-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 1rem 0.55rem 0.7rem;
	color: var(--kc-white);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--kc-radius-pill);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--kc-white);
}

.site-footer__social-link svg {
	flex-shrink: 0;
}

.site-footer__spec {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__spec-row {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	align-items: baseline;
	gap: 1.5rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__spec dt {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8fa3c9;
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

.site-footer__spec dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--kc-white);
	font-variant-numeric: tabular-nums;
}

.site-footer__spec dd a,
.site-footer__spec dd a:visited {
	color: var(--kc-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: border-color 0.15s ease;
}

.site-footer__spec dd a:hover,
.site-footer__spec dd a:focus-visible {
	border-bottom-color: var(--kc-white);
}


.site-footer__bottom {
	background-color: #060d38;
	color: rgba(255, 255, 255, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	position: relative;
	z-index: 2;
}

.site-footer__bottom-inner {
	max-width: var(--kc-container);
	margin: 0 auto;
	padding: 1.15rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.8125rem;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.site-footer__legal a,
.site-footer__legal a:visited {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--kc-white);
}

@media (max-width: 860px) {
	.site-footer__plate-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding: 2.75rem 1.5rem 1.5rem;
	}
	.site-footer__tagline {
		max-width: none;
	}
	.site-footer__spec-row {
		grid-template-columns: 7rem 1fr;
		gap: 1rem;
	}
	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.site-footer__spec-row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/* Hub page templates - machines & industries (page-machines.php, page-industries.php)
   Contrast note: AA (4.5:1) is the floor. Muted text on grey-light uses
   --kc-text-muted-strong (#4b5563 = 6.93:1), not the default --kc-text-muted
   (#6b7280 = 4.43:1 on grey-light, under threshold).
--------------------------------------------- */
.machines-hub,
.industries-hub {
	--hub-max: var(--kc-container);
	--kc-text-muted-strong: #4b5563;
}

/* Paint the page background dark under the industries hub so the sticky-header's
   transparent top-padding band never reveals body-white as a hairline gap. */
body.page-template-page-industries {
	background-color: #0b1550;
}

/* Industries hub - dark cinematic hero.
   Scoped to .industries-hub so the shared .hub-hero (services, machines) stays light.
--------------------------------------------- */
.industries-hub .hub-hero {
	position: relative;
	min-height: var(--kc-hero-min-h);
	padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 3rem) 1.5rem 3rem;
	margin-top: calc(-1 * (var(--kc-header-pill-h) + var(--kc-header-pad-top)));
	background:
		radial-gradient(80% 60% at 78% 30%, rgba(14, 101, 158, 0.35), transparent 60%),
		radial-gradient(60% 50% at 15% 90%, rgba(13, 26, 90, 0.55), transparent 70%),
		linear-gradient(180deg, #0b1550 0%, #122272 45%, #0d1a5a 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	color: var(--kc-white);
}

.industries-hub .hub-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 90% at 70% 40%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 0%, transparent 75%);
	pointer-events: none;
	z-index: 0;
}

.industries-hub .hub-hero__glow {
	position: absolute;
	right: -10%;
	top: 10%;
	width: 60%;
	height: 80%;
	background: radial-gradient(closest-side, rgba(14, 101, 158, 0.28), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
	z-index: 0;
}

.industries-hub .hub-hero__inner--split {
	position: relative;
	z-index: 1;
}

.industries-hub .hub-hero__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 68ch;
}

.industries-hub .hub-hero__crumb {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.7);
}

.industries-hub .hub-hero__crumb a,
.industries-hub .hub-hero__crumb a:visited {
	color: var(--kc-white);
}

.industries-hub .hub-hero__title {
	margin: 0;
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--kc-white);
	max-width: 20ch;
}

.industries-hub .hub-hero__lede {
	margin: 0.5rem 0 0;
	max-width: 58ch;
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.industries-hub .hub-hero__media {
	border: 0;
}

@media (max-width: 960px) {
	.industries-hub .hub-hero__title {
		max-width: none;
	}
}

@media (max-width: 620px) {
	.industries-hub .hub-hero {
		padding: calc(68px + 1rem + 3rem) 1.25rem 2.5rem;
	}
	.industries-hub .hub-hero__grid {
		background-size: 44px 44px;
	}
}

.hub-hero {
	position: relative;
	padding: calc(68px + 1rem + 3rem) 1.5rem 3rem;
	margin-top: calc(-1 * (68px + 1rem));
	min-height: var(--kc-hero-min-h);
	display: grid;
	place-items: center;
	background:
		radial-gradient(1000px 400px at 20% 10%, rgba(255, 255, 255, 0.55), transparent 60%),
		radial-gradient(800px 350px at 85% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
		radial-gradient(600px 300px at 50% 100%, rgba(14, 101, 158, 0.30), transparent 70%),
		linear-gradient(180deg, #7fb3d9 0%, #b8d4e8 55%, #dceaf3 100%);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	overflow: hidden;
	isolation: isolate;
}

.hub-hero__inner {
	width: 100%;
	max-width: var(--hub-max);
	margin: 0 auto;
}

.hub-hero__inner--split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.hub-hero__text {
	min-width: 0;
}

.hub-hero__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--kc-radius-xl);
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(18, 34, 114, 0.10), rgba(14, 101, 158, 0.15)),
		linear-gradient(180deg, #eaf2f9 0%, #d6e6f2 100%);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 20px 40px -20px rgba(18, 34, 114, 0.25);
	border: 1px solid rgba(18, 34, 114, 0.08);
}

.hub-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hub-hero__crumb {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--kc-text-muted-strong);
	margin-bottom: 1.25rem;
}

.hub-hero__crumb a,
.hub-hero__crumb a:visited {
	color: var(--kc-primary);
	text-decoration: none;
	font-weight: 500;
}

.hub-hero__crumb a:hover,
.hub-hero__crumb a:focus {
	text-decoration: underline;
}

.hub-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--kc-text);
	max-width: 22ch;
}

.hub-hero__lede {
	margin: 0;
	max-width: 60ch;
	color: var(--kc-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.hub-brands {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
}

.hub-brands__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.hub-brands__section-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-secondary-dark);
	margin-bottom: 0.75rem;
}

.hub-brands__section-title {
	margin: 0 0 2.5rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--kc-text);
	max-width: 32ch;
}

.brand-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.brand-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	padding: 1.75rem 1.5rem 1.5rem;
	color: var(--kc-text);
	text-decoration: none;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.brand-card:visited {
	color: var(--kc-text);
}

.brand-card:hover,
.brand-card:focus {
	border-color: rgba(18, 34, 114, 0.14);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 12px 28px -12px rgba(18, 34, 114, 0.18),
		0 32px 56px -24px rgba(18, 34, 114, 0.10);
	transform: translateY(-2px);
	outline: none;
}

.brand-card:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

.brand-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
	margin-bottom: 1.25rem;
}

.brand-card__name {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--kc-text);
}

.brand-card__blurb {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--kc-text);
}

.brand-card__series {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.brand-card__series li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.9rem;
	color: var(--kc-text);
}

.brand-card__series-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 3px 9px;
	border-radius: var(--kc-radius-pill);
	background-color: rgba(14, 101, 158, 0.10);
	color: var(--kc-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.brand-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kc-primary);
}

.brand-card__cta::after {
	content: '→';
	transition: transform 0.2s ease;
}

.brand-card:hover .brand-card__cta,
.brand-card:focus .brand-card__cta {
	color: var(--kc-secondary-dark);
}

.brand-card:hover .brand-card__cta::after,
.brand-card:focus .brand-card__cta::after {
	transform: translateX(3px);
}

.hub-pillars {
	padding: 4rem 1.5rem;
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
}

.hub-pillars__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.pillar-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.pillar {
	padding: 1.5rem 1.5rem 1.75rem;
	background-color: var(--kc-white);
	border-radius: var(--kc-radius-lg);
	border: 1px solid rgba(18, 34, 114, 0.06);
}

.pillar__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
	margin-bottom: 1rem;
}

.pillar__title {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--kc-text);
}

.pillar__body {
	margin: 0;
	color: var(--kc-text);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.hub-cta {
	position: relative;
	padding: 5rem 1.5rem;
	background: linear-gradient(120deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	color: var(--kc-white);
	overflow: hidden;
	isolation: isolate;
}

.hub-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	pointer-events: none;
}

.hub-cta__inner {
	position: relative;
	max-width: var(--hub-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.hub-cta__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-white);
	text-wrap: balance;
}

.hub-cta__sub {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.hub-cta__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.hub-cta__actions .btn--primary,
.hub-cta__actions .btn--primary:visited {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: var(--kc-white);
}

.hub-cta__actions .btn--primary:hover,
.hub-cta__actions .btn--primary:focus {
	background-color: var(--kc-grey-light);
	border-color: var(--kc-grey-light);
	color: var(--kc-primary);
}

.hub-cta__actions .btn--ghost,
.hub-cta__actions .btn--ghost:visited {
	background-color: transparent;
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.hub-cta__actions .btn--ghost:hover,
.hub-cta__actions .btn--ghost:focus {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: var(--kc-white);
}

/* Light variant: use when the CTA sits between two dark sections (e.g. the
   services hub, where the dark "How we work" block and the dark footer
   would otherwise swallow it). Solid light background, brand-blue accents. */
.hub-cta--light {
	background: var(--kc-grey-light);
	color: var(--kc-text);
	overflow: visible;
	isolation: auto;
}

.hub-cta--light::before {
	content: none;
}

.hub-cta--light .hub-cta__title {
	color: var(--kc-primary);
}

.hub-cta--light .hub-cta__sub {
	color: var(--kc-text);
}

.hub-cta--light .hub-cta__actions .btn--primary,
.hub-cta--light .hub-cta__actions .btn--primary:visited {
	background-color: var(--kc-primary);
	color: var(--kc-white);
	border-color: var(--kc-primary);
}

.hub-cta--light .hub-cta__actions .btn--primary:hover,
.hub-cta--light .hub-cta__actions .btn--primary:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
}

.hub-cta--light .hub-cta__actions .btn--ghost,
.hub-cta--light .hub-cta__actions .btn--ghost:visited {
	background-color: transparent;
	color: var(--kc-primary);
	border-color: rgba(18, 34, 114, 0.25);
}

.hub-cta--light .hub-cta__actions .btn--ghost:hover,
.hub-cta--light .hub-cta__actions .btn--ghost:focus {
	background-color: var(--kc-primary);
	color: var(--kc-white);
	border-color: var(--kc-primary);
}

.hub-editable {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
}

.hub-editable__inner {
	max-width: 780px;
	margin: 0 auto;
	color: var(--kc-text);
	font-size: 1rem;
	line-height: 1.65;
}

@media (max-width: 900px) {
	.brand-grid,
	.pillar-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hub-cta__inner {
		grid-template-columns: 1fr;
	}
	.hub-cta__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 960px) {
	.hub-hero__inner--split {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.hub-hero__media {
		aspect-ratio: 16 / 9;
		max-width: 620px;
		width: 100%;
	}
}

@media (max-width: 620px) {
	.brand-grid,
	.pillar-grid {
		grid-template-columns: 1fr;
	}
	.hub-hero {
		padding: calc(68px + 1rem + 2rem) 1.25rem 2.25rem;
	}
	.hub-hero__inner--split {
		gap: 1.5rem;
	}
	.hub-brands,
	.hub-pillars,
	.hub-cta {
		padding: 3rem 1.25rem;
	}
}

/* Machines hub (page-machines.php).
   Hero + facts strip mirror the .about-hero / .about-facts editorial layout
   so the two hub pages read consistently. Brand tokens only.
--------------------------------------------- */
.machines-hub {
	--machines-max: var(--kc-container);
	--machines-pad-x: 1.5rem;
}

.machines-hero {
	position: relative;
	background: radial-gradient(120% 100% at 100% 0%, #1a2f8f 0%, var(--kc-primary) 55%, var(--kc-primary-dark) 100%);
	color: var(--kc-white);
	overflow: hidden;
	margin-top: calc(-1 * (var(--kc-header-pill-h) + var(--kc-header-pad-top)));
	padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 5.5rem) var(--machines-pad-x) 6rem;
	min-height: var(--kc-hero-min-h);
	display: grid;
	align-items: center;
}

.machines-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 60% at 30% 40%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 60% at 30% 40%, #000 40%, transparent 100%);
	pointer-events: none;
}

.machines-hero__glow {
	position: absolute;
	top: -220px;
	right: -160px;
	width: 640px;
	height: 640px;
	background: radial-gradient(closest-side, rgba(14, 101, 158, 0.55), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

.machines-hero__inner {
	position: relative;
	max-width: var(--machines-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.machines-hero__text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.machines-hero__crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
}

.machines-hero__crumb a,
.machines-hero__crumb a:visited {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.machines-hero__crumb a:hover,
.machines-hero__crumb a:focus {
	color: var(--kc-white);
	text-decoration: underline;
}

.machines-hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--kc-white);
	text-wrap: balance;
}

.machines-hero__accent {
	color: #4ab3ec;
	white-space: nowrap;
}

.machines-hero__lede {
	max-width: 54ch;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.machines-hero__ctas {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 0.75rem;
}

.machines-hero__portrait {
	position: relative;
	margin: 0;
	min-width: 0;
}

.machines-hero__portrait-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp(440px, 72vh, 660px);
	margin: 0 auto;
	object-fit: cover;
	border-radius: var(--kc-radius-xl);
	box-shadow: 0 30px 80px rgba(2, 12, 46, 0.35);
}

/* Facts strip ---------------------------------------------------------- */

.machines-facts {
	background-color: var(--kc-white);
	border-bottom: 1px solid rgba(18, 34, 114, 0.08);
	padding: 0 var(--machines-pad-x);
}

.machines-facts__inner {
	max-width: var(--machines-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.machines-facts__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 2rem 1.75rem;
	border-left: 1px solid rgba(18, 34, 114, 0.08);
}

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

.machines-facts__item:last-child {
	padding-right: 0;
}

.machines-facts__value {
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: linear-gradient(160deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.machines-facts__label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--kc-primary);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-top: 0.4rem;
}

.machines-facts__sub {
	font-size: 0.875rem;
	color: var(--kc-text-muted);
	line-height: 1.45;
}

.btn--on-dark.btn--primary,
.btn--on-dark.btn--primary:visited {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: var(--kc-white);
}

.btn--on-dark.btn--primary:hover,
.btn--on-dark.btn--primary:focus {
	background-color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
	color: var(--kc-primary);
}

.btn--on-dark.btn--ghost,
.btn--on-dark.btn--ghost:visited {
	background-color: transparent;
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.btn--on-dark.btn--ghost:hover,
.btn--on-dark.btn--ghost:focus {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: var(--kc-white);
}

.hub-brands__head {
	margin-bottom: 2.5rem;
	max-width: 60ch;
}

.hub-brands__head .hub-brands__section-title {
	margin-bottom: 0;
}

.hub-brands__section-lede {
	margin: 1rem 0 0;
	color: var(--kc-text);
	font-size: 1.0625rem;
	line-height: 1.55;
	max-width: 60ch;
}

.brand-grid--image {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.brand-card--image {
	padding: 0;
	overflow: hidden;
	background-color: var(--kc-white);
}

.brand-card--image .brand-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--kc-grey-light);
}

.brand-card--image .brand-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.brand-card--image:hover .brand-card__media img,
.brand-card--image:focus .brand-card__media img {
	transform: scale(1.03);
}

.brand-card--image .brand-card__mark {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	margin: 0;
	width: 44px;
	height: 44px;
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-radius: var(--kc-radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.brand-card--image .brand-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.5rem 1.75rem;
}

.brand-card__headline {
	margin: 0 0 1.25rem;
	color: var(--kc-text-muted-strong, #4b5563);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.brand-card__builds {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.brand-card__builds li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: var(--kc-text);
	line-height: 1.4;
}

.brand-card__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: rgba(14, 101, 158, 0.10);
	color: var(--kc-secondary-dark);
	flex-shrink: 0;
	margin-top: 2px;
}

.hub-choose {
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	padding: 5rem 1.5rem;
}

.hub-choose__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.hub-choose__head {
	max-width: 52ch;
	margin-bottom: 2.5rem;
}

.hub-choose__head .hub-brands__section-title {
	margin-bottom: 0.75rem;
}

.hub-choose__lede {
	margin: 0;
	color: var(--kc-text);
	opacity: 0.72;
	font-size: 1rem;
	line-height: 1.55;
	max-width: 52ch;
}

.pathway-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.pathway-list > li {
	display: flex;
}

.pathway-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.75rem 1.75rem 1.5rem;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	color: var(--kc-text);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.pathway-card:visited {
	color: var(--kc-text);
}

.pathway-card:hover,
.pathway-card:focus {
	border-color: rgba(18, 34, 114, 0.16);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 12px 28px -12px rgba(18, 34, 114, 0.18),
		0 32px 56px -24px rgba(18, 34, 114, 0.10);
	transform: translateY(-2px);
	outline: none;
}

.pathway-card:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

.pathway-card__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kc-secondary-dark);
	margin-bottom: 1rem;
}

.pathway-card__prompt {
	margin: 0 0 1.75rem;
	color: var(--kc-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.pathway-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(18, 34, 114, 0.08);
	color: var(--kc-primary);
	font-size: 0.9375rem;
	font-weight: 600;
}

.pathway-card__cta-label {
	flex: 1;
}

.pathway-card__cta-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--kc-primary);
	color: var(--kc-white);
	flex-shrink: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.pathway-card:hover .pathway-card__cta,
.pathway-card:focus .pathway-card__cta {
	color: var(--kc-secondary-dark);
}

.pathway-card:hover .pathway-card__cta-mark,
.pathway-card:focus .pathway-card__cta-mark {
	background-color: var(--kc-secondary-dark);
	transform: translateX(3px);
}

.pathway-still {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2rem;
	padding: 1.5rem 1.75rem;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
}

.pathway-still__text {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.pathway-still__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kc-secondary-dark);
}

.pathway-still__copy {
	margin: 0;
	color: var(--kc-text);
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 60ch;
}

.pathway-still .btn {
	flex-shrink: 0;
}

@media (max-width: 960px) {
	.machines-hero {
		padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 4rem) var(--machines-pad-x) 4.5rem;
	}
	.machines-hero__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.machines-hero__portrait {
		max-width: 480px;
		margin: 0 auto;
	}
	.machines-facts__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.machines-facts__item {
		padding: 1.5rem 1.25rem;
	}
	.machines-facts__item:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
	.machines-facts__item:nth-child(even) {
		padding-right: 0;
	}
	.machines-facts__item:nth-child(n + 3) {
		border-top: 1px solid rgba(18, 34, 114, 0.08);
	}
	.brand-grid--image,
	.pathway-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.brand-grid--image .brand-card--image:nth-child(3),
	.pathway-list > li:nth-child(3) {
		grid-column: span 2;
	}
	.pathway-still {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

@media (max-width: 640px) {
	.machines-hub {
		--machines-pad-x: 1.25rem;
	}
	.machines-hero {
		padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 3rem) var(--machines-pad-x) 3.5rem;
	}
	.hub-choose {
		padding: 3.5rem 1.25rem;
	}
	.brand-grid--image,
	.pathway-list {
		grid-template-columns: 1fr;
	}
	.brand-grid--image .brand-card--image:nth-child(3),
	.pathway-list > li:nth-child(3) {
		grid-column: auto;
	}
	.pathway-still {
		padding: 1.25rem;
	}
}

/* Bespoke brand pages (page-apec.php, page-hannsa.php, page-baofeng.php).
   Shares the immersive-hero DNA with the machines hub, but each brand
   below the hero has its own differentiator module: machine-types +
   controls (APEC), envelope-scale + fits (Hannsa - YLM Group), a
   lighter scaffold for the placeholder Baofeng page.
--------------------------------------------- */

.brand-hero {
	position: relative;
	padding: calc(var(--kc-header-pill-h) + 1rem + 4.5rem) 1.5rem 4.5rem;
	margin-top: calc(-1 * (var(--kc-header-pill-h) + 1rem));
	color: var(--kc-white);
	overflow: hidden;
	isolation: isolate;
	min-height: var(--kc-hero-min-h);
	display: flex;
	align-items: flex-end;
}

.brand-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background-color: #0b1740;
}

.brand-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.9);
}

.brand-hero__tint {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(11, 23, 64, 0.55) 0%,
			rgba(11, 23, 64, 0.75) 60%,
			rgba(11, 23, 64, 0.90) 100%);
}

.brand-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--hub-max);
	margin: 0 auto;
}

.brand-hero__crumb {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 1.5rem;
}

.brand-hero__crumb a,
.brand-hero__crumb a:visited {
	color: var(--kc-white);
	text-decoration: none;
	font-weight: 500;
}

.brand-hero__crumb a:hover,
.brand-hero__crumb a:focus {
	text-decoration: underline;
}

.brand-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.8);
}

.brand-hero__eyebrow-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--kc-secondary);
	box-shadow: 0 0 0 4px rgba(14, 101, 158, 0.25);
}

.brand-page .brand-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--kc-white);
	max-width: 22ch;
}

.brand-page .brand-hero__lede {
	margin: 0 0 2rem;
	max-width: 58ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.125rem;
	line-height: 1.55;
}

.brand-hero__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.machine-types {
	background-color: var(--kc-white);
	padding: 4rem 1.5rem;
}

.machine-types__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.machine-types__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.machine-type {
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.machine-type:hover {
	border-color: rgba(18, 34, 114, 0.14);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 12px 28px -14px rgba(18, 34, 114, 0.18);
}

.machine-type__figure {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--kc-secondary-dark);
	margin-bottom: 1.25rem;
	height: 72px;
}

.machine-type__figure--photo {
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--kc-radius-md);
	overflow: hidden;
	background:
		radial-gradient(600px 300px at 30% 20%, rgba(14, 101, 158, 0.08), transparent 60%),
		linear-gradient(180deg, #f5f7fa 0%, #eef1f6 100%);
	border: 1px solid rgba(18, 34, 114, 0.06);
}

.machine-type__figure--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.machine-type__name {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--kc-text);
	letter-spacing: -0.015em;
}

.machine-type__blurb {
	margin: 0 0 1.25rem;
	color: var(--kc-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	flex: 1;
}

.machine-type__tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.3rem 0.7rem;
	background-color: rgba(14, 101, 158, 0.10);
	color: var(--kc-secondary-dark);
	border-radius: var(--kc-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.controls-bar {
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	padding: 3.5rem 1.5rem;
}

.controls-bar__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
}

.controls-bar__title {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--kc-text);
	max-width: 24ch;
}

.controls-bar__body {
	margin: 0;
	color: var(--kc-text);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 48ch;
}

.controls-bar__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.control-badge {
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
	padding: 1.25rem 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.control-badge__mark {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--kc-primary);
}

.control-badge__logo {
	display: block;
	width: 100%;
	max-width: 10rem;
	height: 1.75rem;
	margin-bottom: 0.35rem;
	background-color: var(--kc-primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.control-badge__logo--heidenhain {
	-webkit-mask-image: url('images/controls/heidenhain.svg');
	mask-image: url('images/controls/heidenhain.svg');
}

.control-badge__logo--siemens {
	-webkit-mask-image: url('images/controls/siemens.svg');
	mask-image: url('images/controls/siemens.svg');
	height: 1.5rem;
	max-width: 8rem;
}

.control-badge__note {
	color: var(--kc-text-muted-strong, #4b5563);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tube-line {
	background-color: var(--kc-white);
	padding: 4rem 1.5rem;
}

.tube-line__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.tube-line__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	position: relative;
}

.tube-step {
	position: relative;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tube-step + .tube-step::before {
	content: '';
	position: absolute;
	left: -0.6rem;
	top: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid var(--kc-secondary);
	border-right: 2px solid var(--kc-secondary);
	transform: translateY(-50%) rotate(45deg);
	background: transparent;
	pointer-events: none;
}

.tube-step__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.tube-step__index {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--kc-secondary);
}

.tube-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--kc-radius-md);
	background-color: rgba(14, 101, 158, 0.10);
	color: var(--kc-secondary-dark);
}

.tube-step__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--kc-text);
	letter-spacing: -0.015em;
}

.tube-step__body {
	margin: 0;
	color: var(--kc-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	flex: 1;
}

.tube-step__tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.3rem 0.7rem;
	background-color: var(--kc-grey-light);
	color: var(--kc-text-muted-strong, #4b5563);
	border-radius: var(--kc-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.envelope-scale {
	background-color: var(--kc-white);
	padding: 4rem 1.5rem;
}

.envelope-scale__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.envelope-scale__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.envelope-row {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 140px);
	gap: 1.5rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
}

.envelope-row--ref {
	background-color: var(--kc-grey-light);
	border-style: dashed;
}

.envelope-row__label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.envelope-row__name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--kc-text);
	letter-spacing: -0.01em;
}

.envelope-row--ref .envelope-row__name {
	color: var(--kc-text-muted-strong, #4b5563);
}

.envelope-row__model {
	font-size: 0.8125rem;
	color: var(--kc-text-muted-strong, #4b5563);
	line-height: 1.4;
}

.envelope-row__track {
	position: relative;
	height: 14px;
	background-color: var(--kc-grey-light);
	border-radius: var(--kc-radius-pill);
	overflow: hidden;
}

.envelope-row--ref .envelope-row__track {
	background-color: var(--kc-white);
}

.envelope-row__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--kc-secondary), var(--kc-primary));
	border-radius: var(--kc-radius-pill);
}

.envelope-row--ref .envelope-row__bar {
	background: repeating-linear-gradient(
		45deg,
		var(--kc-grey-border) 0 6px,
		transparent 6px 12px
	);
}

.envelope-row__value {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	text-align: right;
}

.envelope-row__mm {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--kc-text);
	letter-spacing: -0.01em;
}

.envelope-row--ref .envelope-row__mm {
	color: var(--kc-text-muted-strong, #4b5563);
}

.envelope-row__delta {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kc-secondary);
}

.envelope-scale__note {
	margin: 1.5rem 0 0;
	color: var(--kc-text-muted-strong, #4b5563);
	font-size: 0.9375rem;
	line-height: 1.55;
	max-width: 60ch;
}

.envelope-fits {
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	padding: 4rem 1.5rem;
}

.envelope-fits__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.fits-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.fits-card {
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
}

.fits-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kc-radius-md);
	background-color: rgba(14, 101, 158, 0.10);
	color: var(--kc-secondary-dark);
	margin-bottom: 1rem;
}

.fits-card__title {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--kc-text);
}

.fits-card__body {
	margin: 0;
	color: var(--kc-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 960px) {
	.brand-hero {
		padding: calc(var(--kc-header-pill-h) + 1rem + 3.5rem) 1.5rem 3.5rem;
	}
	.machine-types__grid,
	.fits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.machine-types__grid .machine-type:nth-child(3),
	.fits-grid .fits-card:nth-child(3) {
		grid-column: span 2;
	}
	.tube-line__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tube-step + .tube-step::before {
		display: none;
	}
	.controls-bar__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.envelope-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 100px);
		grid-template-areas:
			'label value'
			'track track';
		row-gap: 0.75rem;
	}
	.envelope-row__label {
		grid-area: label;
	}
	.envelope-row__value {
		grid-area: value;
	}
	.envelope-row__track {
		grid-area: track;
	}
}

@media (max-width: 620px) {
	.brand-hero {
		padding: calc(var(--kc-header-pill-h) + 1rem + 2.5rem) 1.25rem 2.5rem;
	}
	.machine-types,
	.controls-bar,
	.tube-line,
	.envelope-scale,
	.envelope-fits {
		padding: 3rem 1.25rem;
	}
	.machine-types__grid,
	.fits-grid,
	.tube-line__steps,
	.controls-bar__badges {
		grid-template-columns: 1fr;
	}
	.machine-types__grid .machine-type:nth-child(3),
	.fits-grid .fits-card:nth-child(3) {
		grid-column: auto;
	}
}

/* Machine brand + series pages - extends .machines-hub
   All body copy uses --kc-text on white/grey-light (AA safe).
   Tagline uses --kc-primary for AA on the hero's light-blue gradient
   (--kc-secondary-dark drops to ~3.9:1 on the darker top stop).
--------------------------------------------- */

.brand-hero__tagline {
	margin: 0 0 1rem;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	font-weight: 500;
	color: var(--kc-primary);
	max-width: 42ch;
	line-height: 1.4;
}

.machine-brand .hub-hero__title,
.machine-series .hub-hero__title {
	margin-bottom: 0.5rem;
}

.hub-brands--alt {
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
}

.brand-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

.brand-detail-grid__col .hub-brands__section-title {
	margin-bottom: 1.5rem;
}

.brand-detail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.brand-detail-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--kc-text);
	font-size: 1rem;
	line-height: 1.5;
}

.brand-detail-list__bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--kc-radius-pill);
	background-color: rgba(14, 101, 158, 0.10);
	color: var(--kc-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

/* Series grid - 4 cards under a brand */
.series-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.series-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	padding: 0;
	overflow: hidden;
	color: var(--kc-text);
	text-decoration: none;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.series-card:visited {
	color: var(--kc-text);
}

.series-card:hover,
.series-card:focus {
	border-color: rgba(18, 34, 114, 0.14);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 10px 24px -12px rgba(18, 34, 114, 0.18),
		0 24px 48px -24px rgba(18, 34, 114, 0.10);
	transform: translateY(-2px);
	outline: none;
}

.series-card:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

.series-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(600px 300px at 30% 20%, rgba(14, 101, 158, 0.08), transparent 60%),
		linear-gradient(180deg, #f5f7fa 0%, #eef1f6 100%);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	overflow: hidden;
}

.series-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.series-card:hover .series-card__media img,
.series-card:focus .series-card__media img {
	transform: scale(1.03);
}

.series-card__media-placeholder {
	color: rgba(18, 34, 114, 0.35);
	width: 60%;
	max-width: 96px;
	height: auto;
}

.series-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem;
}

.series-card__name {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--kc-text);
}

.series-card__tagline {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--kc-text);
}

.series-card__body .brand-card__cta {
	margin-top: auto;
	font-size: 0.875rem;
}

/* Brand intro — narrative section with image aside. Used on brand pages
   where we want to explain the "why this brand" positioning before the
   product grid. Mirrors .brand-support's two-column shell. */
.brand-intro {
	padding: 4rem 1.5rem;
	background-color: var(--kc-grey-light);
}

.brand-intro__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.brand-intro__title {
	margin: 0.5rem 0 1.25rem;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kc-text);
	max-width: 22ch;
}

.brand-intro__content p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--kc-text);
	max-width: 62ch;
}

.brand-intro__content p:last-child {
	margin-bottom: 0;
}

.brand-intro__media {
	margin: 0;
	border-radius: var(--kc-radius-xl);
	overflow: hidden;
	border: 1px solid rgba(18, 34, 114, 0.06);
	box-shadow: 0 12px 32px rgba(18, 34, 114, 0.08);
	background-color: var(--kc-white);
}

.brand-intro__media img {
	display: block;
	width: 100%;
	height: auto;
}

.brand-intro__media figcaption {
	padding: 0.75rem 1rem;
	font-size: 0.8125rem;
	color: var(--kc-text-muted-strong);
	background-color: var(--kc-white);
	border-top: 1px solid var(--kc-grey-border);
}

/* Brand support / talk-to-engineer split section */
.brand-support {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
}

.brand-support__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 3rem;
	align-items: start;
}

.brand-support__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kc-text);
	max-width: 22ch;
}

.brand-support__body {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--kc-text);
	max-width: 55ch;
}

.brand-support__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--kc-text);
	font-size: 0.9375rem;
}

.brand-support__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.brand-support__list li::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 50%;
	background-color: var(--kc-secondary);
	flex-shrink: 0;
}

.brand-support__card {
	position: sticky;
	top: 100px;
	background-color: var(--kc-grey-light);
	border: 1px solid rgba(18, 34, 114, 0.06);
	border-radius: var(--kc-radius-xl);
	padding: 1.75rem 1.5rem;
}

.brand-support__card-title {
	margin: 0 0 0.4rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--kc-text);
}

.brand-support__card-body {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--kc-text);
}

.brand-support__phone {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--kc-primary);
	text-decoration: none;
	margin-bottom: 0.25rem;
	letter-spacing: -0.01em;
}

.brand-support__phone:hover,
.brand-support__phone:focus {
	color: var(--kc-secondary-dark);
	text-decoration: underline;
}

.brand-support__hours {
	margin: 0 0 1.25rem;
	color: var(--kc-text-muted-strong);
	font-size: 0.8125rem;
}

.brand-support__card .btn--primary,
.brand-support__card .btn--primary:visited {
	background-color: var(--kc-primary);
	border-color: var(--kc-primary);
	color: var(--kc-white);
}

.brand-support__card .btn--primary:hover,
.brand-support__card .btn--primary:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
}

/* Brochure list - sits inside .brand-support content column. */
.brochure-list {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(18, 34, 114, 0.08);
}

.brochure-list__title {
	margin: 0 0 0.85rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-secondary-dark);
}

/* Featured products grid on brand pages (page-machine-brand.php) */
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.product-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	overflow: hidden;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.product-card:hover {
	border-color: rgba(18, 34, 114, 0.14);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 12px 28px -12px rgba(18, 34, 114, 0.18),
		0 32px 56px -24px rgba(18, 34, 114, 0.10);
	transform: translateY(-2px);
}

.product-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(600px 300px at 30% 20%, rgba(14, 101, 158, 0.08), transparent 60%),
		linear-gradient(180deg, #f5f7fa 0%, #eef1f6 100%);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	overflow: hidden;
}

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

/* Hannsa product images are low-resolution catalogue thumbnails.
   White background across the media area, image fills the container. */
.brand-page--hannsa .product-card__media {
	padding: 0.5rem;
	background: var(--kc-white);
}

.brand-page--hannsa .product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-card__media-placeholder {
	color: rgba(18, 34, 114, 0.35);
	width: 50%;
	max-width: 96px;
	height: auto;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.25rem 1.25rem 1.5rem;
}

.product-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--kc-text);
	line-height: 1.25;
}

.product-card__blurb {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--kc-text);
}

.product-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

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

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

@media (max-width: 520px) {
	.product-grid {
		grid-template-columns: 1fr;
	}
}

.brochure-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.brochure-card {
	display: flex;
	gap: 1rem;
	padding: 0.85rem;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-lg);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.brochure-card:hover {
	border-color: rgba(18, 34, 114, 0.14);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 8px 20px -12px rgba(18, 34, 114, 0.15);
}

.brochure-card__thumb {
	position: relative;
	flex-shrink: 0;
	width: 84px;
	aspect-ratio: 3 / 4;
	border-radius: var(--kc-radius-sm);
	overflow: hidden;
	background: linear-gradient(180deg, #f5f7fa 0%, #eef1f6 100%);
	border: 1px solid rgba(18, 34, 114, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(18, 34, 114, 0.35);
	box-shadow: 0 2px 6px rgba(18, 34, 114, 0.08);
}

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

.brochure-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.brochure-card__label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kc-text);
	line-height: 1.3;
	margin-bottom: 0.85rem;
}

.brochure-card__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: auto;
}

.brochure-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.45rem 0.85rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--kc-radius-md);
	border: 1px solid transparent;
	white-space: nowrap;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.brochure-btn--primary,
.brochure-btn--primary:visited {
	background-color: var(--kc-primary);
	color: var(--kc-white);
	border-color: var(--kc-primary);
}

.brochure-btn--primary:hover,
.brochure-btn--primary:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
	outline: none;
}

.brochure-btn--secondary,
.brochure-btn--secondary:visited {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: rgba(18, 34, 114, 0.18);
}

.brochure-btn--secondary:hover,
.brochure-btn--secondary:focus {
	background-color: var(--kc-grey-light);
	border-color: rgba(18, 34, 114, 0.28);
	color: var(--kc-primary);
	outline: none;
}

.brochure-btn:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.brochure-card__thumb {
		width: 68px;
	}
	.brochure-card__actions {
		flex-wrap: wrap;
	}
}

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

@media (max-width: 900px) {
	.brand-detail-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
	.brand-support__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.brand-support__card {
		position: static;
	}
	.brand-intro__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (max-width: 620px) {
	.series-grid {
		grid-template-columns: 1fr;
	}
	.brand-support {
		padding: 3rem 1.25rem;
	}
	.brand-intro {
		padding: 3rem 1.25rem;
	}
}

/* Services hub + individual service pages - extends .machines-hub
   Overview-only copy plus an inline callback form. Same shell / spacing
   language as the Machines section, tuned for capture over depth.
--------------------------------------------- */

.services-hub .hub-hero__ctas {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
	flex-wrap: wrap;
}

/* .btn--ghost's base style (white text, transparent bg) is designed for
   the navy .hub-cta section. Re-skin it inside the light-blue .hub-hero
   so it renders as a white-fill / dark-text secondary button.
   Contrast: --kc-primary (#122272) on white = 14:1 (AA text). White
   fill on the hero gradient makes the button boundary perceivable. */
.hub-hero .btn--ghost,
.hub-hero .btn--ghost:visited {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: rgba(18, 34, 114, 0.20);
}

.hub-hero .btn--ghost:hover,
.hub-hero .btn--ghost:focus {
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
	border-color: rgba(18, 34, 114, 0.40);
}

.hub-hero .btn--ghost:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 2px;
}

/* Services hub hero - navy, matching Machines and Industries.
   Overrides the shared light .hub-hero gradient and flips text + ghost CTA
   for a dark background. The .hub-hero .btn--primary white-pill rule above
   still applies and reads correctly on navy. */
.services-hub .hub-hero {
	background:
		radial-gradient(80% 60% at 78% 30%, rgba(14, 101, 158, 0.35), transparent 60%),
		radial-gradient(60% 50% at 15% 90%, rgba(13, 26, 90, 0.55), transparent 70%),
		linear-gradient(180deg, #0b1550 0%, #122272 45%, #0d1a5a 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--kc-white);
}

.services-hub .hub-hero__crumb {
	color: rgba(255, 255, 255, 0.7);
}

.services-hub .hub-hero__crumb a,
.services-hub .hub-hero__crumb a:visited {
	color: var(--kc-white);
}

.services-hub .hub-hero__title {
	color: var(--kc-white);
}

.services-hub .hub-hero__lede {
	color: rgba(255, 255, 255, 0.85);
}

.services-hub .hub-hero .btn--ghost,
.services-hub .hub-hero .btn--ghost:visited {
	background-color: transparent;
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.35);
}

.services-hub .hub-hero .btn--ghost:hover,
.services-hub .hub-hero .btn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.6);
}

.services-hub .hub-hero__media {
	border: 0;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.home-services .service-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	margin-top: 2rem;
	padding: 1.75rem 2rem;
	background: linear-gradient(120deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	border-radius: var(--kc-radius-lg);
	color: var(--kc-white);
	text-decoration: none;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 18px 40px -20px rgba(18, 34, 114, 0.35);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	overflow: hidden;
}

.services-cta::after {
	content: "";
	position: absolute;
	right: -140px;
	top: -80px;
	width: 360px;
	height: 360px;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent 70%);
	pointer-events: none;
}

.services-cta:visited {
	color: var(--kc-white);
}

.services-cta:hover,
.services-cta:focus {
	transform: translateY(-2px);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 24px 48px -20px rgba(18, 34, 114, 0.45);
	outline: none;
}

.services-cta:focus-visible {
	outline: 2px solid var(--kc-white);
	outline-offset: 3px;
}

.services-cta__text {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.services-cta__eyebrow {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.services-cta__title {
	margin: 0 0 0.4rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--kc-white);
}

.services-cta__blurb {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.services-cta__action {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.35rem;
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-radius: var(--kc-radius-pill);
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.services-cta:hover .services-cta__action,
.services-cta:focus .services-cta__action {
	background-color: var(--kc-grey-light);
}

.services-cta__action svg {
	transition: transform 0.2s ease;
}

.services-cta:hover .services-cta__action svg,
.services-cta:focus .services-cta__action svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.services-cta,
	.services-cta:hover,
	.services-cta:focus,
	.services-cta__action,
	.services-cta__action svg {
		transition: none;
		transform: none;
	}
}

.service-card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--kc-radius-lg);
	color: var(--kc-white);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 12px 30px -18px rgba(18, 34, 114, 0.35);
	transition:
		box-shadow 0.25s ease,
		transform 0.25s ease;
}

.service-card:visited {
	color: var(--kc-white);
}

.service-card:hover,
.service-card:focus {
	transform: translateY(-3px);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 24px 50px -20px rgba(18, 34, 114, 0.45);
	outline: none;
}

.service-card:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

/* Full-width feature variant used at the top of the services grid. Spans
   every column so the card reads as a hero row rather than a tile. */
.service-card--featured {
	grid-column: 1 / -1;
	aspect-ratio: auto;
	min-height: 320px;
}

.service-card--featured .service-card__body {
	max-width: 520px;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	padding: 1.4rem 1.5rem 1.35rem;
}

.service-card--featured .service-card__outcome {
	font-size: 1.6rem;
}

.service-card--featured .service-card__blurb {
	font-size: 0.95rem;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

@media (max-width: 620px) {
	.service-card--featured {
		min-height: 260px;
	}
	.service-card--featured .service-card__body {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		padding: 1.15rem 1.15rem 1.1rem;
	}
	.service-card--featured .service-card__outcome {
		font-size: 1.35rem;
	}
}

/* Non-link variant (e.g. industries hub): keep the card visual, drop the
   interactive lift and media zoom so hover doesn't imply clickability. */
.service-card--static,
.service-card--static:hover,
.service-card--static:focus {
	transform: none;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 12px 30px -18px rgba(18, 34, 114, 0.35);
	cursor: default;
}

.service-card--static:hover .service-card__media,
.service-card--static:focus .service-card__media {
	transform: none;
}

/* Media layer: full-bleed background image behind the content overlay. Swap
   in a real photo by setting `background-image` on `.service-card__media`. */
.service-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	background-color: var(--kc-grey-light);
	background-image:
		radial-gradient(120% 90% at 20% 15%, rgba(255, 255, 255, 0.55), transparent 55%),
		linear-gradient(160deg, rgba(18, 34, 114, 0.35) 0%, rgba(14, 101, 158, 0.55) 55%, rgba(18, 34, 114, 0.75) 100%);
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

.service-card:hover .service-card__media,
.service-card:focus .service-card__media {
	transform: scale(1.03);
}

.service-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 34, 114, 0) 45%, rgba(18, 34, 114, 0.35) 100%);
	pointer-events: none;
}

.service-card__body {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 1.15rem 1.15rem 1.1rem;
	border-radius: var(--kc-radius-md);
	background-color: rgba(18, 34, 114, 0.38);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(14px) saturate(1.15);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	color: var(--kc-white);
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
}

/* Fallback if the browser cannot render backdrop-filter: deepen the panel
   so text still meets contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.service-card__body {
		background-color: rgba(18, 34, 114, 0.78);
	}
}

.service-card__eyebrow {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.service-card__outcome {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--kc-white);
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.service-card__blurb {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.service-card .brand-card__cta {
	margin-top: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kc-white);
}

@media (prefers-reduced-motion: reduce) {
	.service-card,
	.service-card:hover,
	.service-card:focus,
	.service-card__media,
	.service-card:hover .service-card__media,
	.service-card:focus .service-card__media {
		transition: none;
		transform: none;
	}
}

/* Individual service page - hero variant with capture card on the right */
.service-page .hub-hero__title {
	margin-bottom: 0.5rem;
}

.service-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.service-hero__ctas {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
	flex-wrap: wrap;
}

.service-hero__urgent {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--kc-primary);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.service-hero__urgent span {
	color: #a12727;
	font-size: 1.4rem;
	line-height: 0;
}

.service-hero__card {
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	padding: 1.75rem 1.5rem;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 20px 40px -20px rgba(18, 34, 114, 0.20);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	position: sticky;
	top: calc(var(--kc-nav-height, 80px) + 1rem);
}

.service-hero__card-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
	margin-bottom: 0.5rem;
}

.service-hero__card-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-secondary-dark);
}

.service-hero__card-phone {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--kc-primary);
	text-decoration: none;
	letter-spacing: -0.02em;
	margin-top: 0.25rem;
}

.service-hero__card-phone:hover,
.service-hero__card-phone:focus {
	color: var(--kc-secondary-dark);
}

.service-hero__card-hours {
	margin: 0 0 0.75rem;
	color: var(--kc-text-muted-strong);
	font-size: 0.9rem;
}

.service-hero__card-email {
	color: var(--kc-primary);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.9375rem;
	word-break: break-word;
}

.service-hero__card-email:hover,
.service-hero__card-email:focus {
	text-decoration: underline;
}

.service-covers__note {
	margin: -0.75rem 0 1.5rem;
	color: var(--kc-text-muted-strong);
	font-size: 0.9375rem;
	line-height: 1.55;
	font-style: italic;
}

.service-brands {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(18, 34, 114, 0.08);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.service-brands__label {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-secondary-dark);
}

.service-brands__list {
	color: var(--kc-text);
	font-size: 0.9375rem;
}

/* Callback section - the primary capture surface */
.service-callback {
	padding: 4rem 1.5rem;
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
	scroll-margin-top: calc(var(--kc-nav-height, 80px) + 1rem);
}

.service-callback__inner {
	max-width: var(--hub-max, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 3rem;
	align-items: start;
}

.service-callback__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kc-text);
}

.service-callback__body {
	margin: 0 0 1.5rem;
	color: var(--kc-text);
	font-size: 1rem;
	line-height: 1.6;
}

.service-callback__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.service-callback__points li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--kc-text);
	font-size: 0.9375rem;
	flex-wrap: wrap;
}

.service-callback__points svg {
	color: var(--kc-primary);
	flex-shrink: 0;
}

.service-callback__points a {
	color: var(--kc-primary);
	font-weight: 600;
	text-decoration: none;
}

.service-callback__points a:hover,
.service-callback__points a:focus {
	text-decoration: underline;
}

.service-callback__points-note {
	color: var(--kc-text-muted-strong);
	font-size: 0.875rem;
}

.service-callback__form {
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	padding: 1.75rem;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 20px 40px -20px rgba(18, 34, 114, 0.15);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.service-callback__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.service-callback__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.service-callback__field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--kc-text);
}

.service-callback__req {
	color: #a12727;
	margin-left: 0.15rem;
}

.service-callback__field input,
.service-callback__field textarea {
	font: inherit;
	color: var(--kc-text);
	background-color: var(--kc-white);
	/* #6b7280 on white = 4.83:1 - comfortably clears WCAG 1.4.11 (3:1 UI). */
	border: 1px solid #6b7280;
	border-radius: var(--kc-radius-md);
	padding: 0.65rem 0.75rem;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.service-callback__field textarea {
	resize: vertical;
	min-height: 96px;
}

.service-callback__field input::placeholder,
.service-callback__field textarea::placeholder {
	color: var(--kc-text-muted-strong);
	opacity: 1;
}

.service-callback__field input:focus,
.service-callback__field textarea:focus {
	outline: none;
	/* --kc-secondary #0e659e on white = 4.55:1 - clears 3:1 UI/focus. */
	border-color: var(--kc-secondary);
	box-shadow: 0 0 0 3px rgba(14, 101, 158, 0.28);
}

/* Keyboard-only focus fallback for browsers that don't honor the box-shadow. */
.service-callback__field input:focus-visible,
.service-callback__field textarea:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 2px;
}

.service-callback__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.service-callback__submit-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

.service-callback__legal {
	margin: 0;
	/* #4b5563 on white = 7.44:1 - safe for 13px small text (AA needs 4.5:1). */
	color: var(--kc-text-muted-strong);
	font-size: 0.8125rem;
	line-height: 1.5;
	flex: 1;
	min-width: 200px;
}

.service-callback__hint {
	color: var(--kc-text-muted-strong);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.service-callback__status {
	border-radius: var(--kc-radius-lg);
	padding: 0.85rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.service-callback__status--ok {
	background-color: rgba(14, 101, 158, 0.08);
	color: var(--kc-primary);
	border: 1px solid rgba(14, 101, 158, 0.20);
}

.service-callback__status--err {
	background-color: rgba(212, 63, 63, 0.06);
	/* #a12727 on the ~#fdf3f3 blended bg ≈ 7.0:1 (AA text). */
	color: #a12727;
	border: 1px solid rgba(161, 39, 39, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.service-card,
	.service-card:hover,
	.service-card:focus {
		transition: none;
		transform: none;
	}
	.service-callback__field input,
	.service-callback__field textarea {
		transition: none;
	}
}

/* Urgent variant (Machine Breakdowns) - subtle red accent on the CTA
   and hero card headline. No decorative top-border strip (per design
   preferences: shadow depth + hairline borders, not accent strips). */
.service-page--urgent .service-hero__card {
	border-color: rgba(212, 63, 63, 0.25);
}

.service-page--urgent .service-hero__card-eyebrow {
	color: #a12727;
}

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

@media (max-width: 1024px) {
	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.services-cta {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 1.75rem;
	}
	.services-cta__action {
		align-self: flex-start;
	}
}

@media (max-width: 960px) {
	.service-hero__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.service-hero__card {
		position: static;
	}
	.service-callback__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (max-width: 620px) {
	.service-grid {
		grid-template-columns: 1fr;
	}
	.service-callback {
		padding: 3rem 1.25rem;
	}
	.service-callback__field-row {
		grid-template-columns: 1fr;
	}
	.service-callback__form {
		padding: 1.5rem 1.25rem;
	}
}

/* Slick carousel — only active on the home services grid below 620px.
   `.slick-list` MUST keep Slick's default `overflow: hidden`, otherwise the
   slides spill horizontally and the whole page scrolls sideways instead
   of the carousel track. Vertical padding on the list gives the card
   shadow room to breathe without leaking horizontally. */
.home-services .service-grid.slick-slider {
	padding-bottom: 2.25rem;
	max-width: 100%;
}

.home-services .service-grid .slick-list {
	margin: 0 -0.5rem;
	padding: 0.5rem 0;
}

.home-services .service-grid .slick-track {
	display: flex;
}

.home-services .service-grid .slick-slide {
	height: auto;
	padding: 0 0.5rem;
}

.home-services .service-grid .slick-slide > .service-card {
	height: 100%;
}

.home-services .service-grid .slick-dots {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex !important;
	justify-content: center;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.home-services .service-grid .slick-dots li {
	width: 8px;
	height: 8px;
}

.home-services .service-grid .slick-dots li button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(18, 34, 114, 0.2);
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.home-services .service-grid .slick-dots li button:hover,
.home-services .service-grid .slick-dots li button:focus {
	background: rgba(18, 34, 114, 0.45);
	outline: none;
}

.home-services .service-grid .slick-dots li.slick-active button {
	background: var(--kc-primary);
	transform: scale(1.15);
}




/* Contact page — hero (Figma implementation)
   ---------------------------------------------
   Layout (from node 1:219):
   - White page backdrop, header pill floats at top (base .site-header
     styles — no per-item pill overrides needed here)
   - 16px gap between header pill and the hero card
   - Hero card: max-width 1280px, rounded 32px, soft blue-lavender
     gradient with two radial washes
   - Two-column split: title + lede on the left, team photo + phone
     card on the right (phone card overlaps bottom of photo)
*/
.contact-hero {
	background: var(--kc-white);
	padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 1rem) 1.5rem 1.5rem;
	margin-top: calc(-1 * (var(--kc-header-pill-h) + var(--kc-header-pad-top)));
	border-bottom: none;
	overflow: visible;
	min-height: auto;
	display: block;
}

.contact-hero .hub-hero__inner {
	position: relative;
	max-width: var(--kc-container);
	margin: 0 auto;
	background:
		radial-gradient(600px 400px at 0% 0%, rgba(14, 101, 158, 0.10), transparent 60%),
		radial-gradient(700px 500px at 100% 100%, rgba(18, 34, 114, 0.09), transparent 60%),
		linear-gradient(138deg, #e5ebf7 0%, #eef1fa 55%, #e8ecf7 100%);
	border: 1px solid rgba(18, 34, 114, 0.06);
	border-radius: 32px;
	padding: 32px 72px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 449px);
	align-items: center;
	gap: 5.25rem;
	min-height: 478px;
	overflow: hidden;
	isolation: isolate;
}

.contact-hero__text {
	display: flex;
	flex-direction: column;
	gap: 21px;
	min-width: 0;
}

.contact-hero__title {
	margin: 0;
	font-size: clamp(2.75rem, 5.5vw, 4.25rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: #0f172a;
	max-width: 22ch;
}

.contact-hero__lede {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #475569;
	max-width: 48ch;
}

.contact-hero__media {
	position: relative;
	width: 100%;
	max-width: 449px;
	justify-self: end;
	align-self: center;
}

.contact-hero__photo {
	margin: 0;
	width: 100%;
	height: 327px;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
	background-color: var(--kc-grey-light);
}

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

.contact-hero__phone-card {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.75rem;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 25px;
	background-color: var(--kc-white);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 20px 44px rgba(18, 34, 114, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-hero__phone-card:hover,
.contact-hero__phone-card:focus {
	transform: translateY(-2px);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 24px 52px rgba(18, 34, 114, 0.34);
	outline: none;
}

.contact-hero__phone-card:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

.contact-hero__phone-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--kc-grey-light);
	border-radius: 12px;
	color: var(--kc-primary);
	flex-shrink: 0;
}

.contact-hero__phone-icon svg {
	width: 20px;
	height: 20px;
}

.contact-hero__phone-status-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #22c55e;
	box-shadow: 0 0 0 rgba(34, 197, 94, 0.5);
	animation: contact-hero-status-pulse 2.2s ease-out infinite;
}

.contact-hero__phone-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.contact-hero__phone-eyebrow {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-secondary-dark);
	line-height: 1.2;
}

.contact-hero__phone-number {
	font-size: 28px;
	font-weight: 700;
	color: var(--kc-primary);
	letter-spacing: -0.015em;
	line-height: 1.15;
}

@keyframes contact-hero-status-pulse {
	0%   { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0.55); }
	70%  { box-shadow: 0 0 0 8px  rgba(34, 197, 94, 0);    }
	100% { box-shadow: 0 0 0 0    rgba(34, 197, 94, 0);    }
}

@media (max-width: 1180px) {
	.contact-hero .hub-hero__inner {
		padding: 32px 48px;
		gap: 3rem;
	}
}

@media (max-width: 960px) {
	.contact-hero {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.contact-hero .hub-hero__inner {
		grid-template-columns: 1fr;
		padding: 40px 32px;
		gap: 2.5rem;
		min-height: 0;
	}
	.contact-hero__media {
		max-width: 449px;
		margin: 0 auto;
	}
}

@media (max-width: 620px) {
	.contact-hero .hub-hero__inner {
		padding: 32px 24px 4rem;
		border-radius: 24px;
	}
	.contact-hero__title {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}
	.contact-hero__photo {
		height: auto;
		aspect-ratio: 449 / 327;
	}
	.contact-hero__phone-card {
		bottom: -1.25rem;
		padding: 18px 20px;
	}
	.contact-hero__phone-number {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-hero__phone-status-dot {
		animation: none;
	}
	.contact-hero__phone-card,
	.contact-hero__phone-card:hover {
		transition: none;
		transform: none;
	}
}

/* Contact page — form section (reference: neutral editorial)
   ---------------------------------------------
   Soft grey section with a two-column split: intro copy + "Other info"
   list on the left, white rounded card holding the form on the right.
   Grey pill inputs, black labels above, black full-width pill submit.
   Scoped to body.is-contact-page so it doesn't leak to service pages.
*/
main.service-page--contact .service-callback {
	padding: 5rem 1.5rem 6rem;
	background-color: var(--kc-white);
	border: none;
	scroll-margin-top: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 1rem);
}

main.service-page--contact .service-callback__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 5rem;
	align-items: start;
}

main.service-page--contact .service-callback__intro {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1.5rem;
}

main.service-page--contact .contact-form__eyebrow {
	display: block;
	font-size: 0.9375rem;
	font-weight: 400;
	color: #6b7280;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

main.service-page--contact .service-callback__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #0f172a;
	margin: 0;
	max-width: 16ch;
}

main.service-page--contact .service-callback__body {
	color: #4b5563;
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-width: 40ch;
}

main.service-page--contact .service-callback__info {
	margin-top: 1.25rem;
}

main.service-page--contact .service-callback__info-title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 1rem;
	letter-spacing: -0.01em;
}

main.service-page--contact .service-callback__info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

main.service-page--contact .service-callback__info-card {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	padding: 1.1rem 1.15rem;
	background-color: #f6f8fc;
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

main.service-page--contact .service-callback__info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: 50%;
	color: var(--kc-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

main.service-page--contact .service-callback__info-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

main.service-page--contact .service-callback__info-heading {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
}

main.service-page--contact .service-callback__info-value {
	font-size: 1rem;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.35;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: color 0.15s ease;
}

main.service-page--contact a.service-callback__info-value:hover,
main.service-page--contact a.service-callback__info-value:focus {
	color: var(--kc-primary);
	text-decoration: underline;
}

main.service-page--contact .service-callback__info-desc {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #6b7280;
}

main.service-page--contact .service-callback__form {
	background:
		radial-gradient(600px 400px at 0% 0%, rgba(14, 101, 158, 0.10), transparent 60%),
		radial-gradient(700px 500px at 100% 100%, rgba(18, 34, 114, 0.09), transparent 60%),
		linear-gradient(138deg, #e5ebf7 0%, #eef1fa 55%, #e8ecf7 100%);
	border: 1px solid rgba(18, 34, 114, 0.06);
	border-radius: 28px;
	padding: 2.5rem;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 20px 44px -24px rgba(18, 34, 114, 0.18);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

main.service-page--contact .service-callback__field-row {
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

main.service-page--contact .service-callback__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

main.service-page--contact .service-callback__field label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0f172a;
	letter-spacing: 0;
	text-transform: none;
}

main.service-page--contact .service-callback__req {
	color: #a12727;
	margin-left: 0.15rem;
}

main.service-page--contact .service-callback__field input,
main.service-page--contact .service-callback__field textarea {
	font: inherit;
	font-size: 0.9375rem;
	color: #1a1a1a;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.10);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

main.service-page--contact .service-callback__field textarea {
	min-height: 140px;
	line-height: 1.55;
	resize: vertical;
}

main.service-page--contact .service-callback__field input::placeholder,
main.service-page--contact .service-callback__field textarea::placeholder {
	color: #6b7280;
	opacity: 1;
}

main.service-page--contact .service-callback__field input:hover,
main.service-page--contact .service-callback__field textarea:hover {
	border-color: rgba(18, 34, 114, 0.20);
}

main.service-page--contact .service-callback__field input:focus,
main.service-page--contact .service-callback__field textarea:focus {
	outline: none;
	background-color: var(--kc-white);
	border-color: #0f172a;
	box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.10);
}

main.service-page--contact .service-callback__hint {
	color: #6b7280;
	font-size: 0.8125rem;
	line-height: 1.4;
	margin-top: 0.1rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

main.service-page--contact .service-callback__submit-row {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.85rem;
}

main.service-page--contact .service-callback__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1.1rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	background-color: var(--kc-primary);
	border-color: var(--kc-primary);
	color: var(--kc-white);
	border-radius: var(--kc-radius-pill);
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

main.service-page--contact .service-callback__submit:hover,
main.service-page--contact .service-callback__submit:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
	transform: translateY(-1px);
}

main.service-page--contact .service-callback__submit:focus-visible {
	outline: 2px solid var(--kc-primary);
	outline-offset: 3px;
}

main.service-page--contact .service-callback__legal {
	color: #6b7280;
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

main.service-page--contact .service-callback__status {
	padding: 1rem 1.15rem;
	border-radius: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

main.service-page--contact .service-callback__status--ok {
	background-color: rgba(34, 197, 94, 0.08);
	color: #15803d;
	border: 1px solid rgba(34, 197, 94, 0.28);
}

main.service-page--contact .service-callback__status--err {
	background-color: rgba(212, 63, 63, 0.06);
	color: #a12727;
	border: 1px solid rgba(212, 63, 63, 0.35);
}

@media (max-width: 900px) {
	main.service-page--contact .service-callback {
		padding: 3rem 1rem 4rem;
	}
	main.service-page--contact .service-callback__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	main.service-page--contact .service-callback__intro {
		padding-top: 0;
	}
	main.service-page--contact .service-callback__form {
		padding: 2rem;
		border-radius: 24px;
	}
}

@media (max-width: 480px) {
	main.service-page--contact .service-callback__form {
		padding: 1.5rem 1.25rem;
	}
	main.service-page--contact .service-callback__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	main.service-page--contact .service-callback__field input,
	main.service-page--contact .service-callback__field textarea,
	main.service-page--contact .service-callback__submit,
	main.service-page--contact .service-callback__info-list a {
		transition: none;
	}
	main.service-page--contact .service-callback__submit:hover {
		transform: none;
	}
}

/* Brand-page "Machines we supply" trailing note
--------------------------------------------- */
.brand-detail-list__note {
	margin: 1.25rem 0 1rem;
	color: var(--kc-text-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Enquire modal
--------------------------------------------- */
body.is-enquire-open {
	overflow: hidden;
}

.enquire-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

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

.enquire-modal__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 15, 40, 0.55);
	backdrop-filter: blur(2px);
}

.enquire-modal__panel {
	position: relative;
	background-color: var(--kc-white);
	border-radius: var(--kc-radius-xl);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	padding: 1.75rem;
	border: 1px solid var(--kc-grey-border);
}

.enquire-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--kc-radius-pill);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--kc-text-muted);
	cursor: pointer;
}

.enquire-modal__close:hover,
.enquire-modal__close:focus {
	background-color: var(--kc-grey-light);
	color: var(--kc-text);
}

.enquire-modal__head {
	margin-bottom: 1.25rem;
	padding-right: 2rem;
}

.enquire-modal__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--kc-primary);
}

.enquire-modal__lede {
	margin: 0;
	color: var(--kc-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.enquire-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.enquire-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 1rem;
}

.enquire-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.875rem;
}

.enquire-form__field--full {
	grid-column: 1 / -1;
}

.enquire-form__label {
	font-weight: 600;
	color: var(--kc-text);
}

.enquire-form__req {
	color: var(--kc-secondary);
	margin-left: 0.15em;
}

.enquire-form__field input,
.enquire-form__field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--kc-text);
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.enquire-form__field textarea {
	resize: vertical;
	min-height: 5rem;
}

.enquire-form__field input:focus,
.enquire-form__field textarea:focus {
	outline: none;
	border-color: var(--kc-secondary);
	box-shadow: 0 0 0 3px rgba(14, 101, 158, 0.18);
}

.enquire-form__actions {
	margin-top: 1.25rem;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.enquire-form__actions .btn--ghost {
	color: var(--kc-text);
	border-color: var(--kc-grey-border);
}

.enquire-form__actions .btn--ghost:hover,
.enquire-form__actions .btn--ghost:focus {
	color: var(--kc-text);
	border-color: var(--kc-text-muted);
	background-color: var(--kc-grey-light);
}

.enquire-form__status {
	margin: 0.85rem 0 0;
	min-height: 1.25rem;
	font-size: 0.875rem;
	color: var(--kc-text-muted);
}

.enquire-form__status.is-success {
	color: #0f6a3f;
}

.enquire-form__status.is-error {
	color: #b3261e;
}

@media (max-width: 520px) {
	.enquire-modal {
		padding: 0;
		align-items: stretch;
	}
	.enquire-modal__panel {
		max-width: none;
		max-height: 100vh;
		border-radius: 0;
	}
	.enquire-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Contact Form 7 inside the enquire modal + /contact/ page
--------------------------------------------- */
.enquire-modal__form .wpcf7,
.service-callback__form--cf7 .wpcf7 {
	margin: 0;
}

.enquire-modal__form .wpcf7-form-control-wrap,
.service-callback__form--cf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.enquire-modal__form .wpcf7-not-valid-tip,
.service-callback__form--cf7 .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: #b3261e;
}

.enquire-modal__form .wpcf7-response-output,
.service-callback__form--cf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-md);
	font-size: 0.9375rem;
	color: var(--kc-text);
	background-color: var(--kc-grey-light);
}

.enquire-modal__form .wpcf7 form.sent .wpcf7-response-output,
.service-callback__form--cf7 .wpcf7 form.sent .wpcf7-response-output {
	color: #0f6a3f;
	background-color: #eaf6ef;
	border-color: #bce0c9;
}

.enquire-modal__form .wpcf7 form.invalid .wpcf7-response-output,
.enquire-modal__form .wpcf7 form.unaccepted .wpcf7-response-output,
.enquire-modal__form .wpcf7 form.failed .wpcf7-response-output,
.enquire-modal__form .wpcf7 form.aborted .wpcf7-response-output,
.service-callback__form--cf7 .wpcf7 form.invalid .wpcf7-response-output,
.service-callback__form--cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.service-callback__form--cf7 .wpcf7 form.failed .wpcf7-response-output,
.service-callback__form--cf7 .wpcf7 form.aborted .wpcf7-response-output {
	color: #b3261e;
	background-color: #fdecea;
	border-color: #f2c4c0;
}

.enquire-modal__form .wpcf7-spinner,
.service-callback__form--cf7 .wpcf7-spinner {
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* Service page: symptoms block ("when to call us")
--------------------------------------------- */
.service-symptoms {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
}

.service-symptoms__inner {
	max-width: var(--kc-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 3rem;
	align-items: start;
}

.service-symptoms__intro {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.service-symptoms__title {
	margin: 0.35rem 0 0;
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kc-text);
	max-width: 22ch;
}

.service-symptoms__note {
	margin: 0;
	color: var(--kc-text-muted);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 40ch;
}

.service-symptoms__cta {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.service-symptoms__cta-note {
	font-size: 0.85rem;
	color: var(--kc-text-muted);
}

.service-symptoms__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
}

.service-symptoms__item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-md);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--kc-text);
}

.service-symptoms__mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--kc-secondary);
	margin-top: 1px;
}

/* Emergency variant: dark blue anchor. Keeps to brand palette per the
   design memory (no red/accent strips). Yellow icon is the only warm
   note and is a hairline signal only. */
.service-symptoms--emergency {
	background-color: var(--kc-primary);
	color: var(--kc-white);
}

.service-symptoms--emergency .service-symptoms__title,
.service-symptoms--emergency .hub-brands__section-eyebrow {
	color: rgba(255, 255, 255, 0.94);
}

.service-symptoms--emergency .service-symptoms__note,
.service-symptoms--emergency .service-symptoms__cta-note {
	color: rgba(255, 255, 255, 0.72);
}

.service-symptoms--emergency .service-symptoms__item {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.94);
}

.service-symptoms--emergency .service-symptoms__mark {
	color: #ffd166;
}

.service-symptoms--emergency .btn--primary {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border-color: var(--kc-white);
}

.service-symptoms--emergency .btn--primary:hover,
.service-symptoms--emergency .btn--primary:focus {
	background-color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
	color: var(--kc-primary-dark);
}

@media (max-width: 900px) {
	.service-symptoms__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.service-symptoms__list {
		grid-template-columns: 1fr;
	}
}

/* Service page: on-site photos strip
--------------------------------------------- */
.service-photos {
	padding: 4rem 1.5rem;
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
}

.service-photos__inner {
	max-width: var(--kc-container);
	margin: 0 auto;
}

.service-photos__intro {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
	max-width: 42ch;
}

.service-photos__title {
	margin: 0.35rem 0 0;
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kc-text);
}

.service-photos__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.service-photos__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-grey);
	aspect-ratio: 4 / 3;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 12px 30px -18px rgba(18, 34, 114, 0.35);
}

.service-photos__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 720px) {
	.service-photos {
		padding: 3rem 1.25rem;
	}
	.service-photos__list {
		grid-template-columns: 1fr;
	}
}

/* Service page: FAQs block
--------------------------------------------- */
.service-faqs {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
}

.service-faqs__inner {
	max-width: var(--kc-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 3rem;
	align-items: start;
}

.service-faqs__intro {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: sticky;
	top: calc(var(--kc-nav-height, 80px) + 1rem);
}

.service-faqs__title {
	margin: 0.35rem 0 0;
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kc-text);
	max-width: 24ch;
}

.service-faqs__note {
	margin: 0;
	color: var(--kc-text-muted);
	font-size: 1rem;
	line-height: 1.55;
	max-width: 42ch;
}

.service-faqs__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.service-faqs__item {
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.service-faqs__item[open] {
	border-color: rgba(18, 34, 114, 0.16);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 20px -14px rgba(18, 34, 114, 0.15);
}

.service-faqs__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--kc-text);
}

.service-faqs__q::-webkit-details-marker {
	display: none;
}

.service-faqs__q:hover,
.service-faqs__q:focus-visible {
	color: var(--kc-primary);
}

.service-faqs__q:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: -2px;
	border-radius: var(--kc-radius-lg);
}

.service-faqs__chev {
	display: inline-flex;
	color: var(--kc-text-muted);
	transition: transform 0.2s ease;
}

.service-faqs__item[open] .service-faqs__chev {
	transform: rotate(180deg);
	color: var(--kc-primary);
}

.service-faqs__a {
	padding: 0 1.25rem 1.15rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--kc-text);
}

@media (max-width: 900px) {
	.service-faqs__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.service-faqs__intro {
		position: static;
	}
}

/* Service page: brands & controllers list (converted from span to ul)
--------------------------------------------- */
.service-brands__list {
	list-style: none;
	margin: 0.35rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	color: var(--kc-text);
	font-size: 0.9375rem;
}

.service-brands__item {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.65rem;
	font-size: 0.8125rem;
	color: var(--kc-text);
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-sm);
}

/* Emergency hero button: two-line label / value so the phone number
   is unmissable in the primary CTA slot on machine-breakdowns. */
.btn--emergency {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	padding: 0.7em 1.35em;
	line-height: 1.1;
	text-align: left;
}

.btn--emergency .btn__label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.btn--emergency .btn__value {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.service-hero__urgent--emergency {
	color: var(--kc-primary);
	font-weight: 600;
}

/* Blog: index (home.php) and single (single.php)
   Contrast: muted text on grey-light backgrounds uses --kc-text-muted-strong
   (6.93:1) to stay above AA. Chips, meta separators and rail dividers all
   sit on white or grey-light so they inherit the strong muted token.
--------------------------------------------- */
.blog-hub,
.blog-single {
	--hub-max: var(--kc-container);
	--kc-text-muted-strong: #4b5563;
	--blog-prose-max: 720px;
}

.blog-hero {
	padding-bottom: 3.5rem;
}

.blog-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	width: fit-content;
	margin: 0 0 1.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.8);
}

.blog-hero__eyebrow-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--kc-secondary);
	box-shadow: 0 0 0 4px rgba(14, 101, 158, 0.25);
}

/* Category bar - under the hero on blog index + category archives */
.blog-catbar {
	position: sticky;
	top: var(--kc-header-pill-h);
	z-index: 40;
	padding: 0.9rem 1.5rem;
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(1.2) blur(6px);
	border-bottom: 1px solid var(--kc-grey-border);
}

.blog-catbar__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.blog-catbar__label {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-text-muted-strong);
}

.blog-catbar__list {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.blog-catbar__list::-webkit-scrollbar {
	display: none;
}

.blog-catbar__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kc-text);
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-catbar__chip:hover,
.blog-catbar__chip:focus {
	border-color: rgba(18, 34, 114, 0.25);
	color: var(--kc-primary);
	background-color: var(--kc-grey-light);
}

.blog-catbar__chip.is-active {
	background-color: var(--kc-primary);
	border-color: var(--kc-primary);
	color: var(--kc-white);
}

.blog-catbar__chip.is-active:hover,
.blog-catbar__chip.is-active:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
}

.blog-catbar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	padding: 0 0.35rem;
	height: 1.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--kc-text-muted-strong);
	background-color: var(--kc-grey-light);
	border-radius: var(--kc-radius-pill);
}

.blog-catbar__chip.is-active .blog-catbar__count {
	color: var(--kc-white);
	background-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 640px) {
	.blog-catbar {
		position: static;
		padding: 0.75rem 1.25rem;
	}
	.blog-catbar__label {
		display: none;
	}
}

/* Chip - category tag reused across blog surfaces */
.blog-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kc-secondary-dark);
	background-color: rgba(14, 101, 158, 0.08);
	border: 1px solid rgba(14, 101, 158, 0.18);
	border-radius: var(--kc-radius-sm);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.blog-chip:hover,
.blog-chip:focus {
	background-color: rgba(14, 101, 158, 0.14);
	border-color: rgba(14, 101, 158, 0.3);
}

.blog-chip--on-hero {
	background-color: rgba(255, 255, 255, 0.85);
	border-color: rgba(18, 34, 114, 0.12);
	color: var(--kc-primary);
}

/* Meta row - author / date / reading time */
.blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--kc-text-muted-strong);
}

.blog-meta--sm {
	font-size: 0.8125rem;
	gap: 0.4rem;
}

.blog-meta__author {
	font-weight: 600;
	color: var(--kc-text);
}

.blog-meta__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.5;
}

/* Featured lead card */
.blog-featured {
	padding: 3.5rem 1.5rem 0;
	background-color: var(--kc-white);
}

.blog-featured__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.blog-featured__card {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 2.5rem;
	padding: 1.25rem;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-xl);
	box-shadow: var(--kc-shadow);
}

.blog-featured__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--kc-radius-lg);
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(18, 34, 114, 0.10), rgba(14, 101, 158, 0.15)),
		linear-gradient(180deg, #eaf2f9 0%, #d6e6f2 100%);
}

.blog-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-featured__media-placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(400px 240px at 30% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
		linear-gradient(135deg, rgba(18, 34, 114, 0.15), rgba(14, 101, 158, 0.2));
}

.blog-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.5rem 0.5rem 0.5rem 0;
	gap: 1rem;
}

.blog-featured__title {
	margin: 0;
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kc-text);
}

.blog-featured__title a,
.blog-featured__title a:visited {
	color: inherit;
	text-decoration: none;
}

.blog-featured__title a:hover,
.blog-featured__title a:focus {
	color: var(--kc-secondary-dark);
}

.blog-featured__excerpt {
	margin: 0;
	color: var(--kc-text-muted-strong);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 52ch;
}

.blog-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kc-secondary-dark);
	text-decoration: none;
	align-self: flex-start;
}

.blog-featured__cta:hover,
.blog-featured__cta:focus {
	color: var(--kc-primary);
}

.blog-featured__cta svg {
	transition: transform 0.15s ease;
}

.blog-featured__cta:hover svg,
.blog-featured__cta:focus svg {
	transform: translateX(3px);
}

/* Blog list - grid of cards */
.blog-list,
.blog-related {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
}

.blog-related {
	background-color: var(--kc-grey-light);
	border-top: 1px solid var(--kc-grey-border);
}

.blog-list__inner,
.blog-related__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.blog-list__head,
.blog-related__head {
	margin-bottom: 2rem;
}

.blog-list__eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-secondary-dark);
	margin-bottom: 0.6rem;
}

.blog-list__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kc-text);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.blog-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover,
.blog-card:focus-within {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 28px -12px rgba(18, 34, 114, 0.2);
	border-color: rgba(18, 34, 114, 0.15);
	transform: translateY(-2px);
}

.blog-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	background:
		linear-gradient(135deg, rgba(18, 34, 114, 0.10), rgba(14, 101, 158, 0.15)),
		linear-gradient(180deg, #eaf2f9 0%, #d6e6f2 100%);
	overflow: hidden;
}

.blog-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__media-placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(240px 180px at 30% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
		linear-gradient(135deg, rgba(18, 34, 114, 0.14), rgba(14, 101, 158, 0.18));
}

.blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.25rem 1.25rem 1.35rem;
	flex: 1;
}

.blog-card__title {
	margin: 0.15rem 0 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--kc-text);
}

.blog-card__title a,
.blog-card__title a:visited {
	color: inherit;
	text-decoration: none;
}

.blog-card__title a:hover,
.blog-card__title a:focus {
	color: var(--kc-secondary-dark);
}

.blog-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--kc-text-muted-strong);
	flex: 1;
}

/* Pagination */
.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 2.5rem;
	justify-content: center;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kc-text);
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-md);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-pagination .page-numbers.current {
	background-color: var(--kc-primary);
	border-color: var(--kc-primary);
	color: var(--kc-white);
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers:focus {
	border-color: var(--kc-secondary);
	color: var(--kc-secondary-dark);
}

.blog-pagination .page-numbers.dots {
	border: 0;
	background-color: transparent;
	color: var(--kc-text-muted-strong);
}

/* Empty state */
.blog-empty {
	padding: 4rem 1.5rem;
	background-color: var(--kc-white);
	text-align: center;
}

.blog-empty__inner {
	max-width: 42rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.blog-empty h2 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--kc-text);
}

.blog-empty p {
	margin: 0;
	color: var(--kc-text-muted-strong);
	line-height: 1.6;
}

/* Single article */
.blog-article__hero {
	position: relative;
	padding: calc(68px + 1rem + 3rem) 1.5rem 2.5rem;
	margin-top: calc(-1 * (68px + 1rem));
	background:
		radial-gradient(1000px 400px at 20% 10%, rgba(255, 255, 255, 0.55), transparent 60%),
		radial-gradient(800px 350px at 85% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
		linear-gradient(180deg, #dceaf3 0%, #eaf2f9 100%);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
}

.blog-article__hero-inner {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.blog-article__crumb {
	margin-bottom: 0.25rem;
}

.blog-article__title {
	margin: 0;
	font-size: clamp(2rem, 4.2vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--kc-text);
	max-width: 22ch;
}

.blog-article__lede {
	margin: 0;
	max-width: 60ch;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--kc-text-muted-strong);
}

.blog-article__byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.blog-article__avatar {
	display: inline-flex;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
}

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

.blog-article__byline-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.blog-article__author {
	font-weight: 600;
	color: var(--kc-text);
	font-size: 0.9375rem;
}

.blog-article__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	color: var(--kc-text-muted-strong);
}

.blog-article__figure {
	max-width: 1080px;
	margin: -1rem auto 0;
	padding: 0 1.5rem;
}

.blog-article__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kc-radius-xl);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 20px 40px -20px rgba(18, 34, 114, 0.25);
}

.blog-article__figcaption {
	margin: 0.75rem 0.25rem 0;
	font-size: 0.8125rem;
	color: var(--kc-text-muted-strong);
	text-align: center;
}

.blog-article__body {
	max-width: 1080px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.blog-article__rail {
	position: sticky;
	top: calc(68px + 1.5rem + 1rem);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.blog-rail {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: 1.25rem;
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
}

.blog-rail__row {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.blog-rail dt {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-text-muted-strong);
}

.blog-rail dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--kc-text);
	font-weight: 500;
}

.blog-rail dd a,
.blog-rail dd a:visited {
	color: var(--kc-secondary-dark);
	text-decoration: none;
}

.blog-rail dd a:hover,
.blog-rail dd a:focus {
	text-decoration: underline;
}

.blog-share {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 0.25rem;
}

.blog-share__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-text-muted-strong);
}

.blog-share__list {
	list-style: none;
	display: flex;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.blog-share__list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-md);
	color: var(--kc-text);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blog-share__list a:hover,
.blog-share__list a:focus {
	background-color: var(--kc-grey-light);
	border-color: rgba(18, 34, 114, 0.2);
	color: var(--kc-primary);
}

/* Prose column */
.blog-article__prose {
	max-width: var(--blog-prose-max);
	color: var(--kc-text);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.blog-article__prose > *:first-child {
	margin-top: 0;
}

.blog-article__prose > *:last-child {
	margin-bottom: 0;
}

.blog-article__prose h2 {
	margin-top: 2.25em;
	margin-bottom: 0.6em;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--kc-text);
}

.blog-article__prose h3 {
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kc-text);
}

.blog-article__prose h4 {
	margin-top: 1.75em;
	margin-bottom: 0.4em;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--kc-text);
}

.blog-article__prose p {
	margin: 0 0 1.25em;
}

.blog-article__prose a,
.blog-article__prose a:visited {
	color: var(--kc-secondary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.blog-article__prose a:hover,
.blog-article__prose a:focus {
	color: var(--kc-primary);
}

.blog-article__prose strong {
	color: var(--kc-text);
	font-weight: 700;
}

.blog-article__prose ul,
.blog-article__prose ol {
	margin: 0 0 1.25em;
	padding-left: 1.4em;
}

.blog-article__prose li + li {
	margin-top: 0.35em;
}

.blog-article__prose blockquote {
	margin: 1.75em 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--kc-secondary);
	background-color: var(--kc-grey-light);
	border-radius: 0 var(--kc-radius-md) var(--kc-radius-md) 0;
	color: var(--kc-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.blog-article__prose blockquote p:last-child {
	margin-bottom: 0;
}

.blog-article__prose code {
	padding: 0.15em 0.4em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9em;
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-sm);
}

.blog-article__prose pre {
	padding: 1rem 1.15rem;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9rem;
	line-height: 1.55;
	background-color: #0f172a;
	color: #e2e8f0;
	border-radius: var(--kc-radius-md);
}

.blog-article__prose pre code {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: inherit;
}

.blog-article__prose img,
.blog-article__prose .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--kc-radius-md);
}

.blog-article__prose figure {
	margin: 1.75em 0;
}

.blog-article__prose figcaption {
	margin-top: 0.5em;
	font-size: 0.8125rem;
	color: var(--kc-text-muted-strong);
	text-align: center;
}

.blog-article__prose hr {
	border: 0;
	border-top: 1px solid var(--kc-grey-border);
	margin: 2.5em 0;
}

.blog-article__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin: 2em 0;
	font-size: 0.875rem;
	color: var(--kc-text-muted-strong);
}

.blog-article__pages span {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-sm);
}

/* Tag list */
.blog-article__tags {
	margin: 2.5em 0 1em;
	padding-top: 1.5em;
	border-top: 1px solid var(--kc-grey-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.blog-article__tags-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-text-muted-strong);
}

.blog-article__tags ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}

.blog-article__tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	font-size: 0.8125rem;
	color: var(--kc-text);
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-sm);
	text-decoration: none;
}

.blog-article__tags a:hover,
.blog-article__tags a:focus {
	border-color: rgba(18, 34, 114, 0.25);
	color: var(--kc-primary);
}

/* Author card */
.blog-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2.5em;
	padding: 1.5rem;
	background-color: var(--kc-grey-light);
	border: 1px solid var(--kc-grey-border);
	border-radius: var(--kc-radius-lg);
}

.blog-author__avatar {
	display: inline-flex;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--kc-white);
	border: 1px solid var(--kc-grey-border);
}

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

.blog-author__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.blog-author__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kc-text-muted-strong);
}

.blog-author__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--kc-text);
}

.blog-author__bio {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--kc-text-muted-strong);
	max-width: 55ch;
}

/* Responsive */
@media (max-width: 960px) {
	.blog-featured__card {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.blog-featured__body {
		padding: 0 0.25rem 0.25rem;
	}
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.blog-article__body {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-top: 2.25rem;
	}
	.blog-article__rail {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
	.blog-rail {
		flex: 1 1 260px;
	}
}

@media (max-width: 640px) {
	.blog-featured {
		padding-top: 2.5rem;
	}
	.blog-list,
	.blog-related {
		padding: 2.75rem 1.25rem;
	}
	.blog-grid {
		grid-template-columns: 1fr;
	}
	.blog-article__hero {
		padding-bottom: 2rem;
	}
	.blog-article__body {
		padding: 2rem 1.25rem 3rem;
	}
	.blog-author {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   About page
   Scoped to .about-page. Purpose-built for the About story so the page reads
   with more editorial weight than a shared hub template. Uses only brand
   tokens (--kc-primary/--kc-secondary and the 5-step radius scale) and the
   hairline+shadow philosophy from [[kingcnc-design-preferences]].
   -------------------------------------------------------------------------- */

.about-page {
	--about-max: var(--kc-container);
	--about-pad-x: 1.5rem;
	background-color: var(--kc-white);
}

.about-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kc-secondary);
}

.about-eyebrow::before {
	content: "";
	width: 24px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

.about-eyebrow--light {
	color: var(--kc-primary);
}

.about-eyebrow--onblue {
	color: rgba(255, 255, 255, 0.85);
}

/* Hero ----------------------------------------------------------------- */

.about-hero {
	--about-max: var(--kc-container);
	--about-pad-x: 1.5rem;
	position: relative;
	background: radial-gradient(120% 100% at 100% 0%, #1a2f8f 0%, var(--kc-primary) 55%, var(--kc-primary-dark) 100%);
	color: var(--kc-white);
	overflow: hidden;
	margin-top: calc(-1 * (var(--kc-header-pill-h) + var(--kc-header-pad-top)));
	padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 5.5rem) var(--about-pad-x) 6rem;
	min-height: var(--kc-hero-min-h);
	display: grid;
	align-items: center;
}

.about-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 60% at 30% 40%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 60% at 30% 40%, #000 40%, transparent 100%);
	pointer-events: none;
}

.about-hero__glow {
	position: absolute;
	top: -220px;
	right: -160px;
	width: 640px;
	height: 640px;
	background: radial-gradient(closest-side, rgba(14, 101, 158, 0.55), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}

.about-hero__inner {
	position: relative;
	max-width: var(--about-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
}

.about-hero__text {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.about-hero__crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
}

.about-hero__crumb a,
.about-hero__crumb a:visited {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.about-hero__crumb a:hover,
.about-hero__crumb a:focus {
	color: var(--kc-white);
	text-decoration: underline;
}

.about-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.about-hero__eyebrow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--kc-secondary);
	box-shadow: 0 0 0 4px rgba(14, 101, 158, 0.25);
}

.about-hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--kc-white);
}

.about-hero__accent {
	color: #4ab3ec;
	white-space: nowrap;
}

.about-hero__lede {
	max-width: 54ch;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.about-hero__ctas {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 0.75rem;
}

.about-hero__cta-primary {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border: none;
}

.about-hero__cta-primary:hover,
.about-hero__cta-primary:focus {
	background-color: #eef2ff;
	color: var(--kc-primary-dark);
}

.about-hero__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--kc-white);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding-bottom: 2px;
	transition: border-color 0.15s ease, gap 0.15s ease;
}

.about-hero__cta-link span {
	transition: transform 0.15s ease;
}

.about-hero__cta-link:hover,
.about-hero__cta-link:focus {
	border-color: var(--kc-white);
}

.about-hero__cta-link:hover span,
.about-hero__cta-link:focus span {
	transform: translateX(3px);
}

/* Hero portrait */

.about-hero__portrait {
	position: relative;
	margin: 0;
	min-width: 0;
}

.about-hero__portrait-image {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: clamp(360px, 60vh, 560px);
	margin: 0 auto;
}

/* Facts strip ---------------------------------------------------------- */

.about-facts {
	background-color: var(--kc-white);
	border-bottom: 1px solid rgba(18, 34, 114, 0.08);
	padding: 0 var(--about-pad-x);
}

.about-facts__inner {
	max-width: var(--about-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-facts__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 2rem 1.75rem;
	border-left: 1px solid rgba(18, 34, 114, 0.08);
}

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

.about-facts__item:last-child {
	padding-right: 0;
}

.about-facts__value {
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: linear-gradient(160deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.about-facts__label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--kc-primary);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-top: 0.4rem;
}

.about-facts__sub {
	font-size: 0.875rem;
	color: var(--kc-text-muted);
	line-height: 1.45;
}

/* Story ---------------------------------------------------------------- */

.about-story {
	padding: 6rem var(--about-pad-x);
	background-color: var(--kc-grey-light);
	position: relative;
	overflow: clip;
}

.about-story::before {
	content: "";
	position: absolute;
	right: -160px;
	top: 20%;
	width: 460px;
	height: 460px;
	background: radial-gradient(closest-side, rgba(14, 101, 158, 0.08), transparent 70%);
	pointer-events: none;
}

.about-story__inner {
	position: relative;
	max-width: var(--about-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	gap: 3.5rem;
	align-items: start;
}

.about-story__aside {
	position: sticky;
	top: 6rem;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.about-story__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-primary);
}

.about-story__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.about-story__body p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--kc-text);
}

.about-story__lead {
	font-size: 1.1875rem !important;
	font-weight: 500;
	color: var(--kc-text) !important;
}

/* Pull quote inside the story */

.about-quote {
	position: relative;
	margin: 1rem 0;
	padding: 2rem 2rem 1.75rem;
	background: linear-gradient(155deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	color: var(--kc-white);
	border-radius: var(--kc-radius-xl);
	box-shadow: 0 20px 40px rgba(18, 34, 114, 0.18);
	overflow: hidden;
}

.about-quote::after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 260px;
	height: 260px;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.12), transparent 70%);
	pointer-events: none;
}

.about-quote__mark {
	width: 38px;
	height: auto;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0.75rem;
	position: relative;
}

.about-quote blockquote {
	margin: 0;
	position: relative;
}

.about-quote blockquote p {
	margin: 0;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--kc-white);
}

.about-quote figcaption {
	margin-top: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	position: relative;
}

.about-quote__avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 22% 12%;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(9, 21, 74, 0.35);
}

.about-quote__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.about-quote__name {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--kc-white);
}

.about-quote__role {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
}

/* Directors ------------------------------------------------------------ */

.about-directors {
	padding: 6rem var(--about-pad-x);
	background-color: var(--kc-white);
}

.about-directors__inner {
	max-width: var(--about-max);
	margin: 0 auto;
}

.about-directors__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
	max-width: 40rem;
}

.about-directors__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-primary);
}

.director-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.director-card {
	position: relative;
	background-color: var(--kc-white);
	border-radius: var(--kc-radius-xl);
	border: 1px solid rgba(18, 34, 114, 0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.director-card:hover,
.director-card:focus-within {
	transform: translateY(-3px);
	border-color: rgba(14, 101, 158, 0.35);
	box-shadow: 0 20px 45px rgba(18, 34, 114, 0.1);
}

.director-card__portrait {
	margin: 0;
	aspect-ratio: 4 / 5;
	background-color: rgba(18, 34, 114, 0.06);
	overflow: hidden;
}

.director-card__portrait-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}

.director-card:hover .director-card__portrait-image,
.director-card:focus-within .director-card__portrait-image {
	transform: scale(1.03);
}

.director-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem;
}

.director-card__tag {
	align-self: flex-start;
	margin-bottom: 0.25rem;
	color: var(--kc-secondary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.director-card__name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--kc-primary);
	letter-spacing: -0.02em;
}

.director-card__role {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kc-secondary);
}

.director-card__bio {
	margin: 0.5rem 0 0;
	color: var(--kc-text);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* How we work (dark) --------------------------------------------------- */

.about-values {
	position: relative;
	padding: 6rem var(--about-pad-x);
	background: linear-gradient(180deg, var(--kc-primary-dark) 0%, var(--kc-primary) 100%);
	color: var(--kc-white);
	overflow: hidden;
}

.about-values__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 60% at 20% 20%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 20% 20%, #000 30%, transparent 100%);
	pointer-events: none;
}

.about-values__inner {
	position: relative;
	max-width: var(--about-max);
	margin: 0 auto;
}

.about-values__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 40rem;
	margin-bottom: 2.75rem;
}

.about-values__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-white);
}

.value-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	counter-reset: value;
}

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

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

.value-card {
	position: relative;
	padding: 2rem 1.75rem 1.75rem;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--kc-radius-xl);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.value-card:hover {
	transform: translateY(-3px);
	border-color: rgba(74, 179, 236, 0.45);
	background-color: rgba(255, 255, 255, 0.06);
}

.value-card__num {
	display: inline-block;
	font-size: clamp(3rem, 5vw, 4.25rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	background: linear-gradient(180deg, #ffffff 0%, #6aa4d8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 1.25rem;
}

.value-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--kc-white);
	letter-spacing: -0.01em;
}

.value-card__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

/* CTA ----------------------------------------------------------------- */

.about-cta {
	position: relative;
	padding: 5rem var(--about-pad-x);
	background-color: var(--kc-white);
	color: var(--kc-text);
}

.about-cta__grid {
	display: none;
}

.about-cta__inner {
	position: relative;
	max-width: var(--about-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.about-cta__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-text);
}

.about-cta__sub {
	margin: 0;
	color: var(--kc-text);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.about-cta__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.about-cta__phone {
	background-color: var(--kc-primary);
	color: var(--kc-white);
	border-color: var(--kc-primary);
}

.about-cta__phone:hover,
.about-cta__phone:focus {
	background-color: var(--kc-primary-dark);
	border-color: var(--kc-primary-dark);
	color: var(--kc-white);
}

.about-cta__email {
	color: var(--kc-primary);
	border-color: rgba(18, 34, 114, 0.25);
}

.about-cta__email:hover,
.about-cta__email:focus {
	background-color: var(--kc-primary);
	border-color: var(--kc-primary);
	color: var(--kc-white);
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
	.about-hero__inner,
	.about-story__inner,
	.about-cta__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.about-story__aside {
		position: static;
	}
	.about-facts__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.about-facts__item {
		padding: 1.5rem 1.25rem;
	}
	.about-facts__item:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}
	.about-facts__item:nth-child(even) {
		padding-right: 0;
	}
	.about-facts__item:nth-child(n + 3) {
		border-top: 1px solid rgba(18, 34, 114, 0.08);
	}
	.value-grid,
	.director-grid {
		grid-template-columns: 1fr;
	}
	.about-hero {
		padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 4rem) var(--about-pad-x) 4.5rem;
	}
	.about-hero__portrait {
		max-width: 480px;
		margin: 0 auto;
	}
	.about-cta__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.about-page,
	.about-hero {
		--about-pad-x: 1.25rem;
	}
	.about-story,
	.about-directors,
	.about-values {
		padding: 3.5rem var(--about-pad-x);
	}
	.about-hero {
		padding: calc(var(--kc-header-pill-h) + var(--kc-header-pad-top) + 3rem) var(--about-pad-x) 3.5rem;
	}
	.about-quote {
		padding: 1.5rem 1.5rem 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   Home page
   Scoped to .home-page. Sits below the existing .hero. Reuses .service-card,
   .value-card and .about-eyebrow from the shared / About systems, plus a
   handful of home-specific tiles (machines, industries, about teaser, CTA).
   -------------------------------------------------------------------------- */

.home-page,
.services-hub {
	--home-max: var(--kc-container);
	--home-pad-x: 1.5rem;
}

.home-section__inner {
	max-width: var(--home-max);
	margin: 0 auto;
	padding: 0 var(--home-pad-x);
}

.home-section__head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 44rem;
	margin-bottom: 2.5rem;
}

.home-section__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-primary);
	text-wrap: balance;
}

.home-section__lede {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--kc-text);
	max-width: 40rem;
}

.home-section__foot {
	margin-top: 1.75rem;
	display: flex;
	justify-content: flex-start;
}

.home-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--kc-secondary);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(14, 101, 158, 0.35);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.home-link span {
	transition: transform 0.15s ease;
}

.home-link:hover,
.home-link:focus {
	color: var(--kc-primary);
	border-color: var(--kc-primary);
}

.home-link:hover span,
.home-link:focus span {
	transform: translateX(3px);
}

.home-link--onblue {
	color: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
}

.home-link--onblue:hover,
.home-link--onblue:focus {
	color: var(--kc-white);
	border-color: var(--kc-white);
}

/* Trust bar ----------------------------------------------------------- */

.home-trust {
	background-color: var(--kc-white);
	border-bottom: 1px solid rgba(18, 34, 114, 0.08);
	padding: 1.15rem var(--home-pad-x);
}

.home-trust__inner {
	max-width: var(--home-max);
	margin: 0 auto;
}

.home-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0;
}

.home-trust__list li {
	display: inline-flex;
	align-items: center;
	padding: 0 1.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kc-primary);
	border-right: 1px solid rgba(18, 34, 114, 0.18);
}

.home-trust__list li:last-child {
	border-right: 0;
}

.home-trust__list--dup {
	display: none;
}

/* Services section ---------------------------------------------------- */

.home-services {
	padding: 6rem 0;
	background-color: var(--kc-white);
}

/* Machines section ---------------------------------------------------- */

.home-machines {
	padding: 6rem 0;
	background-color: var(--kc-grey-light);
	position: relative;
	overflow: hidden;
}

.home-machines::before {
	content: "";
	position: absolute;
	right: -180px;
	top: -120px;
	width: 520px;
	height: 520px;
	background: radial-gradient(closest-side, rgba(14, 101, 158, 0.09), transparent 70%);
	pointer-events: none;
}

.home-machines__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.home-machine-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.home-machine-link:visited {
	color: inherit;
}

.home-machine-link:focus {
	outline: none;
}

.home-machine-link:focus-visible .home-machine-card {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

.home-machine-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	aspect-ratio: 4 / 5;
	padding: 1.75rem 1.75rem 1.5rem;
	background-color: var(--home-brand-bg, #eef4fb);
	color: var(--home-brand-fg, var(--kc-primary));
	border: 1px solid rgba(109, 133, 255, 0.1);
	border-radius: var(--kc-radius-xl);
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.25s ease;
}

.home-machine-link:hover .home-machine-card,
.home-machine-link:focus .home-machine-card {
	transform: translateY(-3px);
}

.home-machine-card--apec {
	--home-brand-bg: #e6eef9;
	--home-brand-fg: #10225f;
}

.home-machine-card--hannsa {
	--home-brand-bg: #e6eef9;
	--home-brand-fg: #10225f;
}

.home-machine-card--baofeng {
	--home-brand-bg: #e6eef9;
	--home-brand-fg: #10225f;
}

.home-machine-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(currentColor 1px, transparent 1.4px);
	background-size: 14px 14px;
	color: var(--home-brand-fg);
	opacity: 0.16;
	z-index: 1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(315deg, #000 25%, transparent 72%);
	mask-image: linear-gradient(315deg, #000 25%, transparent 72%);
}

.home-machine-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.home-machine-card__statement {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--home-brand-fg);
}

.home-machine-card__media {
	flex: 1;
	min-height: 8rem;
	width: 100%;
	background-color: rgba(15, 20, 35, 0.08);
	background-size: cover;
	background-position: center;
	border-radius: var(--kc-radius-lg);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.home-machine-card__footer {
	margin-top: auto;
	padding-top: 1.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}

.home-machine-card__meta {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.home-machine-card__brand-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--home-brand-fg);
}

.home-machine-card__brand-cat {
	font-size: 0.85rem;
	color: var(--home-brand-fg);
	opacity: 0.7;
}

.home-machine-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--home-brand-fg);
	white-space: nowrap;
}

.home-machine-card__cta svg {
	transition: transform 0.2s ease;
}

.home-machine-link:hover .home-machine-card__cta svg,
.home-machine-link:focus .home-machine-card__cta svg {
	transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.home-machine-card,
	.home-machine-link:hover .home-machine-card,
	.home-machine-link:focus .home-machine-card,
	.home-machine-card__cta svg,
	.home-machine-link:hover .home-machine-card__cta svg,
	.home-machine-link:focus .home-machine-card__cta svg {
		transition: none;
		transform: none;
	}
}

/* Why (dark) ---------------------------------------------------------- */

.home-values {
	position: relative;
	padding: 6rem 0;
	background: linear-gradient(180deg, var(--kc-primary-dark) 0%, var(--kc-primary) 100%);
	color: var(--kc-white);
	overflow: hidden;
}

.home-values__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 60% at 20% 20%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 20% 20%, #000 30%, transparent 100%);
	pointer-events: none;
}

.home-values__inner {
	position: relative;
}

.home-values__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-white);
}

/* Industries ---------------------------------------------------------- */

.home-industries {
	padding: 6rem 0;
	background-color: var(--kc-white);
}

.home-industries__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

.home-industries__list {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	overflow: hidden;
}

.home-industries__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-industry-item + .home-industry-item {
	border-top: 1px solid rgba(18, 34, 114, 0.08);
}

.home-industries__more {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.75rem;
	border-top: 1px solid rgba(18, 34, 114, 0.08);
	background: linear-gradient(120deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	text-decoration: none;
	color: var(--kc-white);
	overflow: hidden;
	transition: filter 0.2s ease;
}

.home-industries__more::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px);
	background-size: 14px 14px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
	pointer-events: none;
}

.home-industries__more > * {
	position: relative;
}

.home-industries__more:hover,
.home-industries__more:focus {
	filter: brightness(1.08);
}

.home-industries__more-text {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--kc-white);
}

.home-industries__more-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--kc-white);
	white-space: nowrap;
}

.home-industries__more-cta svg {
	transition: transform 0.15s ease;
}

.home-industries__more:hover .home-industries__more-cta svg,
.home-industries__more:focus .home-industries__more-cta svg {
	transform: translateX(3px);
}

.home-industry-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem 1.75rem 1.5rem;
}

.home-industry-item__name {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--kc-primary);
}

.home-industry-item__blurb {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--kc-text);
}

.home-industries__media {
	position: relative;
	min-height: 100%;
	border-radius: var(--kc-radius-xl);
	background-color: var(--kc-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid rgba(18, 34, 114, 0.08);
	overflow: hidden;
}

/* About teaser -------------------------------------------------------- */

.home-about {
	position: relative;
	padding: 6rem var(--home-pad-x);
	background: radial-gradient(120% 100% at 0% 0%, #1a2f8f 0%, var(--kc-primary) 55%, var(--kc-primary-dark) 100%);
	color: var(--kc-white);
	overflow: hidden;
}

.home-about::before {
	content: "";
	position: absolute;
	inset: -160px -180px auto auto;
	width: 520px;
	height: 520px;
	background: radial-gradient(closest-side, rgba(14, 101, 158, 0.45), transparent 70%);
	pointer-events: none;
	filter: blur(20px);
}

.home-about__inner {
	position: relative;
	max-width: var(--home-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 3.5rem;
	align-items: center;
}

.home-about__poster {
	position: relative;
	padding: 2.25rem 2rem;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--kc-radius-xl);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	overflow: hidden;
}

.home-about__poster::after {
	content: "";
	position: absolute;
	inset: -40% -40% auto auto;
	width: 320px;
	height: 320px;
	background: radial-gradient(closest-side, rgba(74, 179, 236, 0.35), transparent 70%);
	pointer-events: none;
}

.home-about__poster-year {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	position: relative;
}

.home-about__poster-label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.home-about__poster-value {
	font-size: clamp(4rem, 7vw, 5.5rem);
	line-height: 0.9;
	font-weight: 800;
	letter-spacing: -0.04em;
	background: linear-gradient(180deg, #ffffff 0%, #b4c8ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.home-about__poster-founders {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
}

.home-about__poster-founder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--kc-white);
	color: var(--kc-primary);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.02em;
	border: 3px solid var(--kc-primary);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.home-about__poster-founder--alt {
	background-color: var(--kc-secondary);
	color: var(--kc-white);
	margin-left: -1.25rem;
}

.home-about__poster-caption {
	margin-left: 0.5rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
	max-width: 15ch;
	line-height: 1.35;
}

.home-about__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.home-about__title {
	margin: 0;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-white);
}

.home-about__body {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* CTA ----------------------------------------------------------------- */

.home-cta {
	position: relative;
	padding: 5rem var(--home-pad-x);
	background: linear-gradient(120deg, var(--kc-primary) 0%, var(--kc-secondary) 100%);
	color: var(--kc-white);
	overflow: hidden;
}

.home-cta__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	pointer-events: none;
}

.home-cta__inner {
	position: relative;
	max-width: var(--home-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.home-cta__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 800;
	color: var(--kc-white);
	text-wrap: balance;
}

.home-cta__sub {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.home-cta__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.home-cta__phone {
	background-color: var(--kc-white);
	color: var(--kc-primary);
	border: none;
}

.home-cta__phone:hover,
.home-cta__phone:focus {
	background-color: #eef2ff;
	color: var(--kc-primary-dark);
}

.home-cta__email {
	color: var(--kc-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.home-cta__email:hover,
.home-cta__email:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--kc-white);
	color: var(--kc-white);
}

/* Optional editable content section following */
.home-editable {
	padding: 4rem 0;
	background-color: var(--kc-white);
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
	.home-machines__grid {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--home-pad-x);
		scroll-behavior: smooth;
		margin-inline: calc(var(--home-pad-x) * -1);
		padding: 0.25rem var(--home-pad-x) 1rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.home-machines__grid::-webkit-scrollbar {
		display: none;
	}
	.home-machine-link {
		flex: 0 0 min(78%, 22rem);
		scroll-snap-align: start;
	}
	.home-machine-card {
		aspect-ratio: auto;
		min-height: 22rem;
	}
	@media (prefers-reduced-motion: reduce) {
		.home-machines__grid {
			scroll-behavior: auto;
		}
	}
	.home-industries__layout {
		grid-template-columns: 1fr;
	}
	.home-industries__media {
		min-height: 260px;
	}
	.home-about__inner,
	.home-cta__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.home-cta__actions {
		justify-content: flex-start;
	}
	.home-services,
	.home-machines,
	.home-industries,
	.home-values {
		padding: 4rem 0;
	}
	.home-about {
		padding: 4rem var(--home-pad-x);
	}
}

@media (max-width: 640px) {
	.home-page {
		--home-pad-x: 1.25rem;
	}
	.home-trust {
		padding-left: 0;
		padding-right: 0;
		overflow: hidden;
	}
	.home-trust__inner {
		max-width: none;
	}
	.home-trust__track {
		display: flex;
		width: max-content;
		animation: home-trust-marquee 60s linear infinite;
	}
	.home-trust__list {
		flex-wrap: nowrap;
		gap: 0;
		flex: 0 0 auto;
	}
	.home-trust__list--dup {
		display: flex;
	}
	.home-trust__list li {
		padding: 0 1rem;
		white-space: nowrap;
		border-right: 1px solid rgba(18, 34, 114, 0.18);
	}
	.home-trust__list li:last-child {
		border-right: 1px solid rgba(18, 34, 114, 0.18);
	}
	@keyframes home-trust-marquee {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.home-trust__track {
			animation: none;
		}
	}
	.home-machine-card {
		padding: 1.75rem 1.5rem 1.5rem;
	}
	.home-industry-item {
		padding: 1.5rem 1.5rem 1.25rem;
	}
	.home-machine-card__name {
		font-size: 1.5rem;
	}
	.home-about__poster {
		padding: 1.75rem 1.5rem;
	}
}


/*--------------------------------------------------------------
Legal pages (Privacy, Cookies, Terms)
--------------------------------------------------------------*/

.legal-page {
	background-color: var(--kc-white);
	padding: 3.5rem 1.5rem 5rem;
}

.legal-page__article {
	max-width: 780px;
	margin: 0 auto;
}

.legal-page__header {
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--kc-grey-border);
}

.legal-page__crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--kc-text-muted);
	margin-bottom: 1rem;
}

.legal-page__crumb a {
	color: var(--kc-text-muted);
	text-decoration: none;
}

.legal-page__crumb a:hover,
.legal-page__crumb a:focus {
	color: var(--kc-primary);
	text-decoration: underline;
}

.legal-page__title {
	font-size: clamp(2rem, 4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	color: var(--kc-text);
}

.legal-page__intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--kc-text-muted-strong, var(--kc-text-muted));
	margin: 0 0 1rem;
	max-width: 60ch;
}

.legal-page__meta {
	font-size: 0.8125rem;
	color: var(--kc-text-muted);
	margin: 0;
}

.legal-page__body > h2:first-child {
	margin-top: 0;
}

.legal-page__editable {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--kc-grey-border);
}

@media (max-width: 640px) {
	.legal-page {
		padding: 2.5rem 1.25rem 3.5rem;
	}
	.legal-page__header {
		padding-bottom: 1.5rem;
		margin-bottom: 2rem;
	}
}

/* 404 error page (404.php)
   Reuses the shared .hub-hero and .hub-cta patterns from the machines/
   industries hubs. Hero is centred (no split media), quick-nav cards use a
   trimmed variant of .brand-card so we don't ship a new card system.
--------------------------------------------- */
.error-page {
	--hub-max: var(--kc-container);
	--kc-text-muted-strong: #4b5563;
}

.error-hero__inner {
	max-width: 680px;
	text-align: center;
}

.error-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0.75rem;
	margin-bottom: 1.5rem;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.10);
	border-radius: var(--kc-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kc-primary);
	letter-spacing: 0.01em;
	box-shadow: 0 1px 2px rgba(18, 34, 114, 0.04);
}

.error-hero__badge-code {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
}

.error-hero__badge-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: rgba(18, 34, 114, 0.35);
}

.error-hero__badge-label {
	color: var(--kc-text-muted-strong);
	font-weight: 500;
}

.error-hero__title {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.error-hero__lede {
	margin-left: auto;
	margin-right: auto;
	max-width: 52ch;
}

.error-hero__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.error-nav {
	padding: 4rem 1.5rem;
	background-color: var(--kc-grey-light);
	border-top: 1px solid rgba(18, 34, 114, 0.06);
	border-bottom: 1px solid rgba(18, 34, 114, 0.06);
}

.error-nav__inner {
	max-width: var(--hub-max);
	margin: 0 auto;
}

.error-nav__title {
	margin: 0 0 2rem;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--kc-text);
	text-align: center;
}

.error-nav__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.error-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--kc-white);
	border: 1px solid rgba(18, 34, 114, 0.08);
	border-radius: var(--kc-radius-xl);
	padding: 1.5rem 1.35rem 1.35rem;
	color: var(--kc-text);
	text-decoration: none;
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.error-card:visited {
	color: var(--kc-text);
}

.error-card:hover,
.error-card:focus {
	border-color: rgba(18, 34, 114, 0.14);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.03),
		0 12px 28px -12px rgba(18, 34, 114, 0.18),
		0 32px 56px -24px rgba(18, 34, 114, 0.10);
	transform: translateY(-2px);
	outline: none;
}

.error-card:focus-visible {
	outline: 2px solid var(--kc-secondary);
	outline-offset: 3px;
}

.error-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--kc-radius-lg);
	background-color: var(--kc-grey-light);
	color: var(--kc-primary);
	margin-bottom: 1rem;
}

.error-card__mark svg {
	width: 20px;
	height: 20px;
}

.error-card__name {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--kc-text);
}

.error-card__blurb {
	display: block;
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--kc-text-muted-strong);
}

.error-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--kc-primary);
}

.error-card__cta::after {
	content: '\2192';
	transition: transform 0.2s ease;
}

.error-card:hover .error-card__cta,
.error-card:focus .error-card__cta {
	color: var(--kc-secondary-dark);
}

.error-card:hover .error-card__cta::after,
.error-card:focus .error-card__cta::after {
	transform: translateX(3px);
}

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

@media (max-width: 620px) {
	.error-hero__inner {
		text-align: left;
	}
	.error-hero__title,
	.error-hero__lede {
		margin-left: 0;
		margin-right: 0;
	}
	.error-hero__actions {
		justify-content: flex-start;
	}
	.error-nav {
		padding: 3rem 1.25rem;
	}
	.error-nav__title {
		text-align: left;
	}
	.error-nav__grid {
		grid-template-columns: 1fr;
	}
}