/*
Theme Name: Obsidian
Theme URI: https://example.com/obsidian
Author: Studio
Author URI: https://example.com
Description: Dark, faceted theme for private security and defense contractors. Configurable homepage sections, dynamic training-course and security-service listings, an architecture hotspot diagram, a hardened careers application form with resume upload, and a floating contact rail. All copy and imagery are managed from the admin.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: obsidian
Tags: business, custom-menu, custom-logo, featured-images, translation-ready

Fonts: Oswald & Inter, both licensed under the SIL Open Font License 1.1
(commercial web use permitted), loaded from Google Fonts.
*/

/* ================= Design tokens =================
 * The design language comes from the obsidian shield in the client's logo:
 * black facets + a single white edge glint. Hence no rounded corners anywhere;
 * cards and buttons all have their top-left / bottom-right corners cut, with a highlight line along the cut.
 */
:root {
	--bg: #0a0b0d;
	--surface: #111317;
	--surface-2: #171a20;
	--ink: #edeff2;
	--ink-soft: #b9bfc7;
	--muted: #848c96;
	--panel: #050607;
	--panel-2: #12151a;
	--panel-ink: #edeff2;
	--panel-muted: #848c96;
	--accent: #56c3f0;
	--accent-ink: #04121a;
	--accent-dim: rgba(86, 195, 240, 0.16);
	--danger: #e5645a;
	--line: rgba(255, 255, 255, 0.10);
	--line-dark: rgba(255, 255, 255, 0.14);
	--edge: rgba(255, 255, 255, 0.62);
	--radius: 0px;
	--radius-sm: 0px;
	--facet: 16px;
	--facet-sm: 9px;
	--shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.9);
	--font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
	--font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wrap: 1240px;
}

/* Obsidian cut corners: one cut off the top left + one off the bottom right */
.facet {
	clip-path: polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet));
}

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

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

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

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

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

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

a {
	color: inherit;
}

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

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

.site-header :focus-visible,
.site-footer :focus-visible,
.sec-dark :focus-visible,
.hero :focus-visible,
.drawer :focus-visible,
.search-layer :focus-visible {
	outline-color: var(--accent);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.12;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.015em;
}

p {
	margin: 0;
}

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

.section-pad {
	padding-block: clamp(56px, 8vw, 100px);
}

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

.skip-link {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 200;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 12px 20px;
	transition: top 0.2s;
}

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

body.no-scroll {
	overflow: hidden;
}

/* ================= Reveal-on-scroll animation (nothing hidden by default) ================= */
html.fx [data-rv] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

/* ================= Buttons ================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px;
	padding: 0 30px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--ink);
	border: 1px solid rgba(255, 255, 255, 0.24);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s;
}

.btn:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	transform: translateY(-2px);
}

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

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

.btn-ghost {
	background: transparent;
	color: var(--ink);
}

.btn-ghost:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.btn-ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.65);
	color: #fff;
}

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

.btn-dark-on-accent {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.btn-dark-on-accent:hover {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

.btn-sm {
	height: 44px;
	padding: 0 22px;
	font-size: 13px;
}

.btn .icon {
	flex: none;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
}

.text-link:hover {
	color: var(--accent);
	border-color: var(--ink);
}

/* ================= Generic section heading ================= */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 14px;
}

.kicker::before {
	content: "";
	width: 30px;
	height: 3px;
	background: var(--accent);
	flex: none;
}

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

.sec-title {
	font-size: clamp(30px, 4.2vw, 48px);
	font-weight: 700;
}

.sec-sub {
	margin-top: 14px;
	font-size: 16px;
	color: var(--muted);
	max-width: 600px;
}

.sec-dark {
	background: var(--panel);
	color: var(--panel-ink);
}

.sec-dark .sec-title {
	color: #fff;
}

.sec-dark .sec-sub {
	color: var(--panel-muted);
}

.sec-dark .kicker {
	color: var(--panel-muted);
}

/* ================= Site header ================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(12, 14, 17, 0.94);
	color: #fff;
	border-bottom: 1px solid var(--line-dark);
	transition: box-shadow 0.25s, background 0.25s;
}

.site-header.scrolled {
	background: #0c0e11;
	box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.7);
}

.header-bar {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	min-height: 74px;
}

.brand {
	flex: none;
	display: flex;
	align-items: center;
}

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

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

.brand-mark {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--accent);
	color: var(--accent-ink);
	display: grid;
	place-items: center;
	flex: none;
}

.brand-name {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.main-nav {
	flex: 1;
	min-width: 0;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(4px, 1vw, 10px);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.nav-list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.82);
	border-radius: 8px;
	transition: color 0.2s, background 0.2s;
	white-space: nowrap;
}

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

.nav-list > li.menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	flex: none;
}

.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 4px;
	min-width: 230px;
	background: #14171c;
	border: 1px solid var(--line-dark);
	border-radius: 14px;
	box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65);
	list-style: none;
	margin: 0;
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
	z-index: 5;
}

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

.nav-list .sub-menu a {
	display: block;
	padding: 10px 14px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-radius: 9px;
}

.nav-list .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.07);
	color: var(--accent);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: none;
}

.hbtn {
	position: relative;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: transparent;
	color: inherit;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

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

.cart-count {
	position: absolute;
	top: -5px;
	right: -6px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.nav-toggle {
	display: none;
}

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

/* .qr-modal's display:grid overrides the UA [hidden] rule, so it must be turned off explicitly,
   otherwise the hidden full-screen overlay would intercept clicks on the whole page */
.drawer[hidden],
.search-layer[hidden],
.qr-modal[hidden] {
	display: none !important;
}

.drawer-scrim,
.search-scrim,
.qr-scrim {
	position: absolute;
	inset: 0;
	background: rgba(5, 7, 9, 0.62);
	opacity: 0;
	transition: opacity 0.24s;
}

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

.drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 92vw);
	background: #0e1013;
	color: #fff;
	padding: 20px 24px 40px;
	overflow-y: auto;
	transform: translateX(102%);
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.open .drawer-panel {
	transform: none;
}

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.drawer-title {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

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

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

.drawer-nav a {
	display: block;
	padding: 15px 4px;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}

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

.drawer-nav .sub-menu {
	list-style: none;
	margin: 0 0 10px;
	padding: 0 0 0 16px;
}

.drawer-nav .sub-menu a {
	font-family: var(--font-body);
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	padding: 9px 4px;
	color: rgba(255, 255, 255, 0.66);
}

.drawer-links {
	display: flex;
	gap: 18px;
	margin-top: 22px;
}

.drawer-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

/* ================= Search overlay ================= */
.search-panel {
	position: absolute;
	left: 50%;
	top: 14vh;
	transform: translate(-50%, -14px);
	width: min(720px, calc(100vw - 40px));
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transition: opacity 0.24s, transform 0.24s;
}

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

.search-layer .search-form {
	flex: 1;
	color: #fff;
	background: rgba(20, 23, 28, 0.96);
	border-color: rgba(255, 255, 255, 0.3);
}

.search-layer .hbtn {
	color: #fff;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	padding: 5px 6px 5px 22px;
	border: 2px solid var(--ink);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
}

.search-field {
	flex: 1;
	min-width: 0;
	height: 46px;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	outline: none;
}

.search-field::placeholder {
	color: currentColor;
	opacity: 0.55;
}

.search-submit {
	flex: none;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform 0.2s;
}

.search-submit:hover {
	transform: scale(1.06);
}

/* ================= Footer ================= */
.site-footer {
	background: var(--panel);
	color: var(--panel-ink);
	margin-top: 0;
}

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

.f-brand .brand-text {
	margin-bottom: 16px;
}

.f-about {
	color: var(--panel-muted);
	font-size: 14.5px;
	max-width: 380px;
	margin-bottom: 22px;
}

.f-title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 18px;
}

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

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

.f-menu a {
	color: var(--panel-ink);
	text-decoration: none;
	font-size: 15px;
	transition: color 0.2s;
}

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

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

.f-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 14.5px;
	color: var(--panel-muted);
}

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

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

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

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

.social-link {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	color: var(--panel-ink);
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

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

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

.footer-bottom-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 20px;
}

.copyright {
	font-size: 13px;
	color: var(--panel-muted);
}

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

.policy-menu a {
	font-size: 13px;
	color: var(--panel-muted);
	text-decoration: none;
}

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

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

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

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

.rail-btn {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--ink);
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 12px 26px -10px rgba(10, 12, 15, 0.55);
	transition: transform 0.2s, background 0.2s, color 0.2s;
}

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

/* ================= Contact modal (QR / number / email) ================= */
/* The z-index must beat the Complianz banner (99999): on phones the lower half of the centred panel lands right on the banner, which covers its buttons so they cannot be tapped.
   The visitor opened this popup themselves, and the banner is still there after it is closed. */
.qr-modal {
	z-index: 100000;
	display: grid;
	padding: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* On short screens such as landscape phones the whole layer scrolls when the panel is taller than the screen; the scrim is pinned to the viewport so nothing shows through while scrolling */
.qr-scrim {
	position: fixed;
}

/* Same signature as the cards: cut corners + top-left edge highlight (the outer --edge-grad acts as a 1px border, ::before paints the card face) */
.qr-panel {
	position: relative;
	margin: auto; /* safer than place-items:center: when the panel is taller than the screen its top is not pushed out of the scrollable area */
	width: min(380px, 100%);
	clip-path: var(--cut);
	background: var(--edge-grad);
	color: var(--ink);
	padding: 34px 26px 18px;
	text-align: center;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.24s, opacity 0.24s;
}

.qr-panel::before {
	content: "";
	position: absolute;
	inset: 1px;
	clip-path: var(--cut);
	background: var(--surface);
	z-index: 0;
}

.qr-panel > * {
	position: relative;
	z-index: 1;
}

.qr-modal.open .qr-panel {
	transform: none;
	opacity: 1;
}

.qr-panel > .qr-close {
	position: absolute;
	top: 10px;
	right: 10px;
	border-color: var(--line);
	color: var(--ink);
}

.qr-title {
	font-size: 21px;
	margin: 0 44px 16px; /* leave room for the close button on both sides */
}

/* QR codes are always black on white and ignore the dark theme - many phones cannot scan a QR code on a dark background */
.qr-img {
	display: block;
	width: 210px;
	height: auto;
	margin: 0 auto;
	background: #ffffff;
	border: 0;
	border-radius: 0;
}

.qr-value {
	margin-top: 14px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--ink);
	overflow-wrap: anywhere;
	user-select: all;
}

.qr-title + .qr-value {
	margin-top: 0;
}

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

.qr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

/* Two per row with equal width and height; each takes its own row when there is not enough room */
.qr-actions .btn {
	flex: 1 1 140px;
	height: 50px;
	padding: 0 16px;
	font-size: 14px;
}

/* Copy result message; reserves one line of height so the panel does not jump when the message appears */
.qr-status {
	min-height: 1.5em;
	margin-top: 10px;
	font-size: 13px;
	color: var(--accent);
}

/* ================= Hero ================= */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(78vh, 700px);
	background: var(--panel);
	color: #fff;
	overflow: clip;
}

.hero-media {
	position: absolute;
	inset: 0;
}

.hero-img,
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-video {
	opacity: 0;
	transition: opacity 1.1s ease;
}

.hero-video.ready {
	opacity: 1;
}

.hero-shade {
	/* Single unidirectional pure-black scrim: darkest at the left copy column, fading
	   away by ~58% width so the knurling photo on the right stays fully legible. */
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 7, 9, 0.92) 0%, rgba(6, 7, 9, 0.82) 30%, rgba(6, 7, 9, 0.28) 58%, rgba(6, 7, 9, 0) 74%);
}

.hero-in {
	position: relative;
	z-index: 1;
	padding-block: clamp(48px, 7vw, 80px);
	max-width: calc(var(--wrap));
}

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

.hero-kicker::before {
	background: var(--accent);
}

.hero-title {
	max-width: 600px;
	font-size: clamp(30px, 3.4vw, 50px);
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
}

.hero-sub {
	margin-top: 16px;
	max-width: 480px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

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

.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	margin: 32px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-stats .stat {
	display: flex;
	flex-direction: column-reverse;
}

.hero-stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	color: var(--accent);
	line-height: 1.1;
}

.hero-stats dt {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	margin-top: 6px;
}

/* ================= Perks bar ================= */
.perks {
	background: var(--bg);
}

.perks-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	padding-block: clamp(44px, 6vw, 72px);
}

.perk {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px 24px;
	transition: transform 0.25s, box-shadow 0.25s;
}

.perk:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.perk-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--surface-2);
	color: var(--accent);
	margin-bottom: 18px;
}

.perk-title {
	font-size: 18px;
	margin-bottom: 8px;
}

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

/* ================= Image/text split section ================= */
.split {
	background: var(--bg);
}

.split-in {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.split-media {
	position: relative;
}

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

.split-media::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 18px;
	right: -18px;
	bottom: -18px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
}

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

.split-flip .split-media::before {
	left: -18px;
	right: 18px;
}

.split-body .sec-title {
	margin-bottom: 18px;
}

.split-text {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--ink-soft);
	margin-bottom: 26px;
	white-space: pre-line;
}

/* ================= Scene hotspot image ================= */
.scene {
	margin: 0;
}

.scene + .scene {
	margin-top: 40px;
}

.scene-media {
	position: relative;
}

.scene-media > img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.hotspot-dot {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	border: 3px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 6px 18px rgba(5, 7, 9, 0.45);
	transition: transform 0.2s;
}

html.fx .hotspot-dot {
	animation: hotspot-pulse 2.6s infinite;
}

@keyframes hotspot-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(86, 195, 240, 0.55);
	}
	50% {
		box-shadow: 0 0 0 12px rgba(86, 195, 240, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.fx .hotspot-dot {
		animation: none;
	}
}

.hotspot:hover .hotspot-dot,
.hotspot:focus-visible .hotspot-dot {
	transform: scale(1.12);
}

.hotspot-card {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	display: flex;
	align-items: center;
	gap: 12px;
	width: 250px;
	padding: 10px 12px;
	background: #fff;
	color: var(--ink);
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(5, 7, 9, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
	pointer-events: none;
}

.hotspot:hover .hotspot-card,
.hotspot:focus-visible .hotspot-card {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.hotspot-thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg);
}

.hotspot-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hotspot-info {
	min-width: 0;
}

.hotspot-name {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

.hotspot-price {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin-top: 3px;
}

.hotspot-price del {
	margin-right: 6px;
}

.hotspot-price ins {
	text-decoration: none;
	font-weight: 600;
}

.scene-caption {
	margin-top: 14px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--panel-muted);
}

/* ================= Process steps ================= */
.steps {
	background: var(--bg);
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.step {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px 24px;
}

.step-num {
	display: block;
	font-family: var(--font-display);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.6px var(--ink);
	margin-bottom: 16px;
}

.step-title {
	font-size: 18px;
	margin-bottom: 8px;
}

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

/* ================= Customer reviews ================= */
.quotes-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.quote {
	margin: 0;
	background: var(--panel-2);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
}

.quote-mark {
	color: var(--accent);
	margin-bottom: 14px;
}

.quote blockquote {
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.75;
	color: #dfe3e9;
	flex: 1;
}

.quote-name {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
	color: #fff;
}

.quote-role {
	display: block;
	font-size: 13px;
	color: var(--panel-muted);
	margin-top: 3px;
}

/* ================= Post cards ================= */
.blog-teaser {
	background: var(--bg);
}

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

/* Fewer than three posts: narrow and centre the row instead of leaving empty
   grid slots on the right. Scoped to min-width so the responsive 2-column and
   1-column rules further down still win on smaller screens. */
@media (min-width: 561px) {
	.post-grid[data-count="1"] {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin-inline: auto;
	}
}

@media (min-width: 901px) {
	.post-grid[data-count="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 840px;
		margin-inline: auto;
	}
}

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

.post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.post-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #1a1d22;
	overflow: hidden;
}

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

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

.post-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex: 1;
}

.post-date {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.post-title {
	font-family: var(--font-body);
	font-size: 17.5px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.45;
}

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

.post-title a:hover {
	color: var(--ink-soft);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 3px;
}

.post-excerpt {
	font-size: 14px;
	color: var(--muted);
	flex: 1;
}

.post-card .text-link {
	margin-top: 4px;
	align-self: flex-start;
}

/* ================= CTA band ================= */
.cta-band {
	position: relative;
	background:
		radial-gradient(120% 160% at 12% 0%, rgba(86, 195, 240, 0.16) 0%, transparent 62%),
		var(--panel);
	color: var(--ink);
	border-top: 1px solid var(--line);
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 110px);
}

.cta-band > * {
	position: relative;
}

.cta-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	padding-block: clamp(44px, 6vw, 76px);
}

.cta-title {
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 700;
}

.cta-text {
	margin-top: 10px;
	font-size: 15.5px;
	color: var(--muted);
	max-width: 560px;
}

/* ================= Generic inner page ================= */
.page-hero {
	background: var(--panel);
	color: #fff;
	padding: clamp(44px, 6vw, 76px) 0;
	position: relative;
	overflow: clip;
}

/* Inner page header decoration: an angled facet rather than a circle - there are no rounded corners anywhere on the site */
.page-hero::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -6%;
	width: 420px;
	height: 260%;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(86, 195, 240, 0.10), rgba(86, 195, 240, 0.015));
	border-left: 1px solid rgba(86, 195, 240, 0.28);
	transform: skewX(-18deg);
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 104px);
}

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

.page-hero-lg {
	padding: clamp(64px, 8vw, 108px) 0;
}

.page-hero .kicker {
	color: var(--accent);
}

.page-hero-title {
	font-size: clamp(32px, 5vw, 58px);
	font-weight: 700;
	color: #fff;
	max-width: 900px;
}

.page-hero-sub {
	margin-top: 14px;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.72);
	max-width: 640px;
}

.entry-content {
	max-width: 780px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-soft);
}

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

.entry-content h2 {
	font-size: 27px;
	color: var(--ink);
	margin-top: 2em;
}

.entry-content h3 {
	font-size: 21px;
	color: var(--ink);
	margin-top: 1.7em;
}

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

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

.entry-content ul,
.entry-content ol {
	padding-left: 24px;
}

.entry-content li {
	margin-bottom: 8px;
}

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--accent);
	font-style: italic;
	color: var(--ink);
}

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

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

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

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

.entry-content summary {
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	position: relative;
	padding-right: 44px;
}

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

.entry-content summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--muted);
}

.entry-content details[open] summary::after {
	content: "\2212";
}

.entry-content details > *:not(summary) {
	padding: 0 20px;
}

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

.entry-hero-img {
	margin: 0 0 42px;
	max-width: 980px;
}

.entry-hero-img img {
	width: 100%;
	border-radius: var(--radius);
}

.entry-single .entry-content {
	margin-inline: auto;
}

.entry-single .entry-hero-img {
	margin-inline: auto;
}

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

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

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

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

/* Contact page cards (used by seed content) */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 8px;
}

.contact-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px;
}

.contact-card h3 {
	font-size: 17px;
	margin-bottom: 10px;
}

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

.contact-card a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--accent);
}

/* ================= Archive / search / 404 ================= */
.post-grid-archive {
	margin-top: 8px;
}

.pagination-nav {
	margin-top: 52px;
	text-align: center;
}

.pagination-nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	margin: 0 3px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	background: var(--surface);
}

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

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

.search-again {
	margin-bottom: 36px;
}

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

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

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

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

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

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

.result-body .badge {
	margin-bottom: 8px;
	background: var(--bg);
	color: var(--muted);
	border: 1px solid var(--line);
}

.result-title {
	font-family: var(--font-body);
	font-size: 16.5px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

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

.result-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 3px;
}

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

.result-price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--ink);
}

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

.empty-state {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
	padding: clamp(30px, 5vw, 60px) 20px;
}

.empty-state h2 {
	font-size: 28px;
	margin-bottom: 14px;
}

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

.empty-search {
	margin: 0 auto 26px;
	max-width: 460px;
}

.empty-search .search-form {
	margin-inline: auto;
}

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

/* =========================================================================
   Obsidian - signature visual layer
   Everything comes from the obsidian shield in the client's logo: black facets + a single white edge glint.
   How: elements have their top-left / bottom-right corners cut, and the outer layer uses a 135° gradient as a 1px border;
   the top-left cut lands exactly on the brightest part of the gradient, so every card carries its own edge highlight.
   ========================================================================= */

:root {
	--cut: polygon(var(--facet) 0, 100% 0, 100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%, 0 100%, 0 var(--facet));
	--cut-sm: polygon(var(--facet-sm) 0, 100% 0, 100% calc(100% - var(--facet-sm)), calc(100% - var(--facet-sm)) 100%, 0 100%, 0 var(--facet-sm));
	--edge-grad: linear-gradient(135deg, var(--edge) 0, rgba(255, 255, 255, 0.14) 18%, rgba(255, 255, 255, 0.09) 60%, rgba(255, 255, 255, 0.16) 100%);
}

.svc-card,
.course-card,
.post-card,
.result-card,
.side-cta,
.apply-box,
.role,
.spec-block,
.quote,
.contact-card {
	position: relative;
	clip-path: var(--cut);
	background: var(--edge-grad);
	border: 0;
	border-radius: 0;
}

.svc-card::before,
.course-card::before,
.post-card::before,
.result-card::before,
.side-cta::before,
.apply-box::before,
.role::before,
.spec-block::before,
.quote::before,
.contact-card::before {
	content: "";
	position: absolute;
	inset: 1px;
	clip-path: var(--cut);
	background: var(--surface);
	z-index: 0;
}

.svc-card > *,
.course-card > *,
.post-card > *,
.result-card > *,
.side-cta > *,
.apply-box > *,
.role > *,
.spec-block > *,
.quote > *,
.contact-card > * {
	position: relative;
	z-index: 1;
}

/* Buttons use the same cut corners, one size smaller */
.btn,
.search-submit,
.hbtn,
.rail-btn {
	clip-path: var(--cut-sm);
	border-radius: 0;
}

.btn:hover {
	transform: translateY(-2px);
}

/* ================= Header ================= */
.site-header {
	background: rgba(5, 6, 7, 0.86);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--line);
}

.custom-logo {
	max-height: 46px;
	width: auto;
}

.brand-name {
	letter-spacing: 0.14em;
}

.header-cta {
	margin-left: 6px;
}

/* ================= Hero ================= */
.hero {
	min-height: min(92vh, 900px);
}

.hero-shade {
	background:
		linear-gradient(180deg, rgba(5, 6, 7, 0.62) 0%, rgba(5, 6, 7, 0.42) 42%, rgba(5, 6, 7, 0.94) 100%),
		linear-gradient(90deg, rgba(5, 6, 7, 0.88) 0%, rgba(5, 6, 7, 0.22) 62%, rgba(5, 6, 7, 0.5) 100%);
}

/* Hero facet texture: very faint 135° diagonal lines echoing the facets of the shield */
.hero-facets,
.detail-hero-media .hero-facets {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.045) 0 1px,
		transparent 1px 118px
	);
	mask-image: radial-gradient(120% 90% at 18% 12%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(120% 90% at 18% 12%, #000 0%, transparent 72%);
}

.hero-title {
	font-size: clamp(38px, 6.4vw, 82px);
	letter-spacing: 0.005em;
}

.hero-sub {
	max-width: 620px;
	color: rgba(237, 239, 242, 0.82);
}

.hero-stats .stat dd {
	color: var(--accent);
}

/* The doctrine line at the bottom of the hero: pinned to the very bottom, like the nameplate on an instrument */
.hero-doctrine {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	z-index: 2;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(237, 239, 242, 0.52);
}

.hero-doctrine::before {
	content: "";
	display: inline-block;
	width: 44px;
	height: 1px;
	margin-right: 14px;
	vertical-align: middle;
	background: var(--accent);
}

/* ================= Alternating dark sections: an almost invisible facet texture ================= */
.sec-dark {
	position: relative;
	background: var(--panel);
}

.sec-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.028) 0 1px,
		transparent 1px 96px
	);
}

.sec-dark > * {
	position: relative;
}

/* ================= Security service cards ================= */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.svc-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-card:hover {
	transform: translateY(-6px);
}

.svc-media {
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #0e1013;
}

.svc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.72) contrast(1.06);
	transition: transform 0.6s ease, filter 0.4s ease;
}

.svc-card:hover .svc-media img {
	transform: scale(1.045);
	filter: saturate(0.95) contrast(1.06);
}

.svc-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 26px;
	flex: 1;
}

.svc-name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.svc-text {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--muted);
}

.svc-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}

.svc-card:hover .svc-more .icon {
	transform: translateX(4px);
}

.svc-more .icon {
	transition: transform 0.25s;
}

/* ================= Training course cards ================= */
.course-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.course-card {
	display: flex;
	flex-direction: column;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card:hover {
	transform: translateY(-6px);
}

.course-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #0e1013;
}

.course-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.72) contrast(1.06);
	transition: transform 0.6s ease, filter 0.4s ease;
}

.course-card:hover .course-media img {
	transform: scale(1.045);
	filter: saturate(0.95) contrast(1.06);
}

.course-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 26px;
	flex: 1;
}

.course-name {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.22;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

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

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

.course-text {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--muted);
}

.course-body .text-link {
	margin-top: auto;
	align-self: flex-start;
}

/* Spec chip: like the nameplate on a piece of equipment */
.spec-chip {
	display: inline-flex;
	align-items: stretch;
	align-self: flex-start;
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.chip-key {
	padding: 7px 10px;
	background: var(--accent-dim);
	color: var(--accent);
}

.chip-val {
	padding: 7px 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--ink-soft);
}

/* Centred button at the bottom of a section */
.sec-btn {
	margin-top: 38px;
}

/* ================= Detail pages ================= */
.detail-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(62vh, 620px);
	padding-block: clamp(60px, 9vw, 110px);
	color: #fff;
	overflow: hidden;
	background: var(--panel);
}

.detail-hero-media {
	position: absolute;
	inset: 0;
}

.detail-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.6) contrast(1.05);
}

.detail-hero-media .hero-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(5, 6, 7, 0.72) 0%, rgba(5, 6, 7, 0.5) 40%, rgba(5, 6, 7, 0.96) 100%),
		linear-gradient(90deg, rgba(5, 6, 7, 0.86) 0%, rgba(5, 6, 7, 0.3) 70%);
}

.detail-hero-in {
	position: relative;
	z-index: 2;
}

.crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(237, 239, 242, 0.6);
}

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

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

.bc-sep {
	color: rgba(237, 239, 242, 0.32);
}

.detail-title {
	font-size: clamp(30px, 4.6vw, 56px);
	max-width: 15ch;
	color: #fff;
}

.detail-lede {
	margin-top: 20px;
	max-width: 62ch;
	font-size: clamp(16px, 1.5vw, 18.5px);
	line-height: 1.62;
	color: rgba(237, 239, 242, 0.82);
}

.detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 348px;
	gap: clamp(30px, 4vw, 56px);
	align-items: start;
}

.detail-side {
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.side-cta {
	padding: 26px 26px 30px;
}

.side-cta-title {
	font-size: 20px;
}

.side-cta-text {
	margin: 12px 0 20px;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--muted);
}

/* Specs table */
.spec-block {
	padding: 24px 26px 26px;
}

.spec-title {
	font-size: 15px;
	letter-spacing: 0.18em;
	color: var(--muted);
	margin-bottom: 14px;
}

.spec-scroll {
	overflow-x: auto;
}

.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.spec-table th,
.spec-table td {
	padding: 11px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

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

.spec-table th {
	width: 44%;
	padding-right: 14px;
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.spec-table td {
	color: var(--ink);
}

/* ================= Careers: positions accordion ================= */
.role-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.role {
	overflow: hidden;
}

.role-head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 26px;
	cursor: pointer;
	list-style: none;
	transition: background 0.2s;
}

.role-head::-webkit-details-marker {
	display: none;
}

.role-head:hover {
	background: rgba(255, 255, 255, 0.03);
}

.role-num {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--accent);
	flex: none;
}

.role-name {
	flex: 1;
	font-family: var(--font-display);
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.role-toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--accent);
	background: var(--accent-dim);
	transition: transform 0.25s;
}

.role[open] .role-toggle {
	transform: rotate(45deg);
}

.role-body {
	padding: 0 26px 26px 26px;
	color: var(--ink-soft);
}

.role-body > *:first-child {
	margin-top: 0;
}

.role-apply {
	margin-top: 20px;
}

/* ================= Careers: application form ================= */
.apply-sec {
	padding-block: clamp(56px, 8vw, 100px);
}

.apply-box {
	max-width: 880px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 46px);
}

.apply-head {
	margin-bottom: 26px;
}

.apply-note {
	margin-top: 14px;
	font-size: 14px;
	color: var(--muted);
	max-width: 60ch;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.form-grid .field {
	margin-bottom: 0;
}

.field label {
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.field .req {
	color: var(--accent);
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 13px 15px;
	transition: border-color 0.2s, background 0.2s;
}

.field textarea {
	resize: vertical;
	min-height: 130px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(86, 195, 240, 0.06);
}

.field input[type="file"] {
	font-size: 14px;
	color: var(--ink-soft);
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed var(--line-dark);
}

.field input[type="file"]::file-selector-button {
	font: inherit;
	font-size: 13px;
	margin-right: 14px;
	padding: 8px 16px;
	color: var(--ink);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--line-dark);
	cursor: pointer;
}

.field-hint {
	font-size: 12.5px;
	color: var(--muted);
}

.form-actions {
	margin-top: 26px;
}

.form-msg {
	margin-bottom: 22px;
	padding: 14px 18px;
	font-size: 14.5px;
	border-left: 3px solid var(--accent);
	background: var(--accent-dim);
	color: var(--ink);
}

.form-msg-err {
	border-left-color: var(--danger);
	background: rgba(229, 100, 90, 0.12);
}

/* Honeypot field: completely invisible to humans, but not display:none (some bots skip those fields) */
.obs-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ================= Other dark-theme fixes ================= */
.badge {
	background: var(--accent-dim);
	color: var(--accent);
}

.hotspot-card {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
}

.hotspot-kind {
	display: block;
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 3px;
}

.hotspot-name {
	color: var(--ink);
	font-size: 13.5px;
	line-height: 1.35;
}

.perk-icon {
	color: var(--accent);
}

.step-num {
	color: var(--accent);
}

.entry-content a {
	color: var(--accent);
}

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

/* ================= Brand lockup: shield + wordmark ================= */
.brand-text {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.brand-mark {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--accent);
}

.brand-logo {
	display: block;
	width: auto;
	height: 38px;
}

.site-header .brand-name {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #fff;
	max-width: 13ch;
}

.site-footer .brand-logo {
	height: 46px;
}

.site-footer .brand-name {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	max-width: 15ch;
	line-height: 1.15;
}

@media (max-width: 1180px) {
	.site-header .brand-name {
		font-size: 13.5px;
		max-width: 11ch;
	}
}

@media (max-width: 640px) {
	.site-header .brand-name {
		display: none;
	}
}

/* Hero title: narrower measure so the screen is not one wall of text */
.hero-title {
	font-size: clamp(36px, 5.4vw, 70px);
	max-width: 17ch;
}

.hero-in {
	max-width: 980px;
}

/* Brand mark: remove the old theme's blue rounded backing and show the logo bare */
.site-header .brand-mark,
.site-footer .brand-mark {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	color: var(--accent);
}

.brand {
	min-width: 0;
	max-width: 46%;
}

.main-nav {
	flex: 1;
	min-width: 0;
}

.site-header .brand-name {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: none;
}

.brand-word {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.brand-sub {
	font-family: var(--font-display);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent);
	white-space: nowrap;
}

.site-footer .brand-name {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: none;
}

.site-footer .brand-word {
	font-size: 24px;
}

.site-footer .brand-sub {
	font-size: 10.5px;
}

@media (max-width: 1180px) {
	.brand-word {
		font-size: 17px;
	}
	.brand-sub {
		font-size: 8.5px;
		letter-spacing: 0.2em;
	}
	.brand-logo {
		height: 32px;
	}
}

@media (max-width: 480px) {
	.brand-sub {
		display: none;
	}
}

/* Tighten the nav at medium widths: 7 items + wordmark + search + CTA;
   without this the last item runs into the search button at around 1100px */
@media (max-width: 1320px) {
	.nav-list > li > a {
		padding: 10px 9px;
		font-size: 13.5px;
		letter-spacing: 0.06em;
	}
	.header-bar {
		gap: clamp(12px, 2vw, 24px);
	}
}

@media (max-width: 1140px) {
	.nav-list > li > a {
		padding: 10px 7px;
		font-size: 12.5px;
		letter-spacing: 0.04em;
	}
	.header-cta {
		height: 40px;
		padding: 0 16px;
		font-size: 12px;
	}
}

/* Nav items themselves must not overflow the container either */
.nav-list {
	flex-wrap: nowrap;
	justify-content: flex-end;
	min-width: 0;
}

/* Hotspot map: bring the hotspot cards and the image into the site-wide dark language */
.hotspot-card {
	border-radius: 0;
	clip-path: var(--cut-sm);
	box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.8);
}

.scene-media > img {
	filter: saturate(0.7) brightness(0.88) contrast(1.05);
}

.hotspot-dot {
	border-color: rgba(255, 255, 255, 0.92);
}

/* The spec chip must stay on one line and is hidden if it does not fit (PHP already filters by length) */
.spec-chip {
	max-width: 100%;
	white-space: nowrap;
	font-size: 11px;
	letter-spacing: 0.12em;
}

.chip-key,
.chip-val {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

@media (max-width: 1024px) {
	.main-nav {
		display: none;
	}
	.nav-toggle {
		display: grid;
	}
	.header-cta {
		display: none;
	}
	.svc-grid,
	.perks-grid,
	.steps-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
	.detail-layout {
		grid-template-columns: 1fr;
	}
	.detail-side {
		position: static;
	}
}

@media (max-width: 900px) {
	.course-grid,
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.quotes-grid,
	.split-in {
		grid-template-columns: 1fr;
	}
	.split-flip .split-media {
		order: 0;
	}
	.split-media::before {
		display: none;
	}
	.contact-cards {
		grid-template-columns: 1fr;
	}
	.form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 15px;
	}
	.hero {
		min-height: 78vh;
	}
	.hero-stats {
		gap: 22px 34px;
		margin-top: 40px;
	}
	.hero-doctrine {
		display: none;
	}
	.cta-in {
		flex-direction: column;
		align-items: flex-start;
	}
	.contact-rail {
		bottom: 18px;
	}
	.contact-rail.rail-right {
		right: 14px;
	}
	.contact-rail.rail-left {
		left: 14px;
	}
	.rail-btn {
		width: 47px;
		height: 47px;
	}
	.rail-no-mobile {
		display: none;
	}
	.role-head {
		padding: 18px 16px;
	}
	.role-body {
		padding: 0 16px 20px;
	}
}

@media (max-width: 560px) {
	.perks-grid,
	.steps-grid,
	.svc-grid,
	.course-grid,
	.post-grid {
		grid-template-columns: 1fr;
	}
	.footer-grid {
		grid-template-columns: 1fr;
	}
	.footer-bottom-in {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-actions .btn {
		width: 100%;
	}
	.hotspot-card {
		width: 200px;
	}
	.role-num {
		display: none;
	}
}

/* ================= Cookie consent banner (Complianz) =================
   The plugin controls its look through a set of --cmplz_* custom properties; the whole set is overridden here with the theme's
   obsidian palette + zero radius + sensor-blue primary button, without touching plugin files. */
:root {
	--cmplz_banner_background_color: #050607 !important;
	--cmplz_banner_border_color: rgba(255, 255, 255, 0.12) !important;
	--cmplz_banner_border_width: 1px 0px 0px 0px !important;
	--cmplz_banner_border_radius: 0px 0px 0px 0px !important;
	--cmplz_text_color: #edeff2 !important;
	--cmplz_hyperlink_color: #56c3f0 !important;
	--cmplz_button_accept_background_color: #56c3f0 !important;
	--cmplz_button_accept_border_color: #56c3f0 !important;
	--cmplz_button_accept_text_color: #04121a !important;
	--cmplz_button_deny_background_color: rgba(255, 255, 255, 0.05) !important;
	--cmplz_button_deny_border_color: rgba(255, 255, 255, 0.24) !important;
	--cmplz_button_deny_text_color: #edeff2 !important;
	--cmplz_button_settings_background_color: rgba(0, 0, 0, 0) !important;
	--cmplz_button_settings_border_color: rgba(255, 255, 255, 0.18) !important;
	--cmplz_button_settings_text_color: #848c96 !important;
	--cmplz_button_border_radius: 0px 0px 0px 0px !important;
	--cmplz_slider_active_color: #56c3f0 !important;
	--cmplz_slider_inactive_color: #3a4048 !important;
	--cmplz_slider_bullet_color: #edeff2 !important;
	--cmplz_category_header_always_active_color: #56c3f0 !important;
	--cmplz_title_font_size: 15px !important;
	--cmplz_text_font_size: 13.5px !important;
	--cmplz_button_font_size: 13.5px !important;
}

.cmplz-cookiebanner {
	font-family: var(--font-body);
	box-shadow: 0 -22px 44px -20px rgba(0, 0, 0, 0.8);
}

.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: var(--font-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	clip-path: var(--cut-sm);
}

/* The light grey category blocks look like white patches on the dark banner, so replace them */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: rgba(255, 255, 255, 0.045);
}

/* main.js moves the floating contact rail out of the way by setting an inline bottom from the banner's measured height;
   this rule only adds a transition to that movement and hard-codes no values. */

.contact-rail {
	transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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