:root {
	--civ-bg: #f7f5f1;
	--civ-surface: #ffffff;
	--civ-ink: #0a1622;
	--civ-muted: #3f4c58;
	--civ-navy: #071521;
	--civ-navy-raised: #102230;
	--civ-border: #c6ccd1;
	--civ-border-dark: #2d4050;
	--civ-primary: #078d9b;
	--civ-primary-hover: #056f79;
	--civ-signal: #ef3d38;
	--civ-focus: #c4a7ff;
	--civ-success: #18845a;
	--civ-shell: 1400px;
	--civ-radius: 5px;
}

html { scroll-behavior: smooth; }
html:has(body.civskills-design-active) { overflow-x: clip; }

body.civskills-design-active {
	margin: 0;
	background: var(--civ-bg);
	color: var(--civ-ink);
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
	overflow-x: clip;
}

.civskills-design-active *,
.civskills-design-active *::before,
.civskills-design-active *::after { box-sizing: border-box; }
.civskills-design-active a { color: inherit; }
.civskills-design-active :where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--civ-focus);
	outline-offset: 3px;
}

.civskills-design-active #site-header,
.civskills-design-active #site-footer,
.civskills-design-active .site-header,
.civskills-design-active .site-footer { display: none; }

.civskills-design-active.home :where(.site-main, main, .page-content, .entry-content) {
	width: 100% !important;
	max-width: none;
	margin: 0;
	padding: 0;
}
.civskills-design-active.home main.site-main,
.civskills-design-active.home .page-content {
	width: 100% !important;
	max-width: none !important;
}
.civskills-design-active.home :where(.page-header, .entry-title) { display: none; }
.civskills-design-active.home .alignfull {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}
.civskills-design-active.page:not(.home) .site-main {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
	padding-block: 64px;
}

.civskills-shell,
.civskills-design-active .wp-block-group__inner-container,
.civskills-design-active .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	width: min(var(--civ-shell), calc(100% - 80px));
	max-width: var(--civ-shell);
	margin-inline: auto;
}

.civskills-site-header {
	position: relative;
	z-index: 50;
	background: var(--civ-navy);
	border-bottom: 1px solid var(--civ-border-dark);
	color: #f7f9fb;
}
.civskills-site-header__inner {
	min-height: 82px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.civskills-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none !important; }
.civskills-brand img { display: block; width: 220px; height: auto; }
.civskills-primary-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.civskills-primary-nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 42px; }
.civskills-primary-nav__links li { margin: 0; }
.civskills-primary-nav__links a,
.civskills-link-button {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	color: #f7f9fb;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
}
.civskills-primary-nav__links a:hover,
.civskills-primary-nav__links .current-menu-item > a,
.civskills-link-button:hover { color: #74dce6; border-bottom-color: currentColor; }
.civskills-primary-nav__actions { display: flex; align-items: center; gap: 20px; }

.civskills-button,
.civskills-design-active .wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	border: 1px solid transparent;
	border-radius: var(--civ-radius);
	font-family: "Segoe UI", Arial, sans-serif !important;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
	box-shadow: inset 0 1px rgba(255,255,255,.14);
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.civskills-button:active,
.civskills-design-active .wp-block-button__link:active { transform: translateY(1px); }
.civskills-button--primary,
.civskills-button-primary .wp-block-button__link { background: var(--civ-primary); border-color: #12a7b7; color: #fff; }
.civskills-button--primary:hover,
.civskills-button-primary .wp-block-button__link:hover { background: var(--civ-primary-hover); color: #fff; }
.civskills-button-secondary .wp-block-button__link { background: transparent; border-color: #19a4b3; color: #6fdae4; }
.civskills-button-secondary .wp-block-button__link:hover { background: rgba(111,218,228,.1); color: #fff; }

.civskills-site-header .civskills-menu-toggle {
	display: none !important;
	min-height: 44px;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--civ-border-dark);
	border-radius: var(--civ-radius);
	background: var(--civ-navy-raised);
	color: #fff;
	font: inherit;
	font-weight: 800;
}
.civskills-menu-toggle__icon { width: 20px; height: 20px; display: inline-flex; flex: 0 0 20px; }
.civskills-menu-toggle__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }

.civskills-home-hero {
	position: relative;
	height: 356px;
	padding: 0;
	background: var(--civ-navy);
	color: #f7f9fb;
	overflow: hidden;
}
.civskills-design-active.home .civskills-home-hero,
.civskills-design-active.home .civskills-manifesto,
.civskills-design-active.home .civskills-courses-section {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}
.civskills-home-hero > .civskills-home-hero__grid,
.civskills-home-hero > .civskills-proof-list,
.civskills-courses-section > :where(h2, .wp-block-shortcode),
.civskills-manifesto > p {
	width: min(var(--civ-shell), calc(100% - 80px)) !important;
	max-width: var(--civ-shell) !important;
	margin-inline: auto !important;
}
.civskills-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .18;
	background-image: linear-gradient(rgba(119,154,180,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(119,154,180,.2) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: linear-gradient(to right, #000 0 44%, transparent 72%);
}
.civskills-home-hero__grid {
	position: relative;
	z-index: 1;
	height: 100%;
	display: grid !important;
	grid-template-columns: 430px minmax(0, 1fr);
	gap: 26px;
	align-items: center !important;
}
.civskills-home-hero__grid > .wp-block-column { min-width: 0; }
.civskills-home-hero h1 {
	max-width: 430px;
	margin: 0;
	color: #fff;
	font-family: "Segoe UI", Arial, sans-serif !important;
	font-size: clamp(48px, 4.15vw, 62px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: .98;
}
.civskills-home-hero h1 mark { padding: 0; background: transparent; color: var(--civ-signal); }
.civskills-home-hero__intro { max-width: 420px; margin: 18px 0 20px; color: #e2e8ed; font-size: 18px; line-height: 1.42; }
.civskills-home-hero .wp-block-buttons { gap: 16px; margin: 0; }
.civskills-home-hero__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 456px;
	margin: 0;
	border: 0;
	background: #111;
	overflow: hidden;
}
.civskills-home-hero__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--civ-navy), transparent 16%);
	pointer-events: none;
}
.civskills-home-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.civskills-proof-list {
	position: absolute;
	z-index: 3;
	right: max(40px, calc((100% - var(--civ-shell)) / 2));
	bottom: 18px;
	width: min(660px, calc(100% - 500px)) !important;
	max-width: 660px !important;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	color: #f4f8fa;
	font-size: 14px;
	font-weight: 800;
}
.civskills-proof-list li {
	min-height: 58px;
	margin: 0;
	padding: 12px 14px 12px 44px;
	display: flex;
	align-items: center;
	background: rgba(6,18,29,.82);
	border: 1px solid #aebbc4;
	border-radius: 5px;
	backdrop-filter: blur(4px);
}
.civskills-proof-list li::before {
	content: "";
	position: absolute;
	margin-left: -28px;
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	border-radius: 50%;
}
.civskills-home-hero > .civskills-proof-list {
	width: min(660px, calc(100% - 500px)) !important;
	max-width: 660px !important;
	margin: 0 !important;
}

.civskills-manifesto { position: relative; padding: 10px 0; background: #0d1e2d; color: #fff; border-block: 1px solid var(--civ-border-dark); text-align: center; }
.civskills-manifesto::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 106px; height: 14px; transform: translateX(-50%); background: #0d1e2d; clip-path: polygon(0 0,100% 0,86% 100%,14% 100%); }
.civskills-manifesto p { margin: 0 auto; font-size: 18px; font-weight: 800; }
.civskills-manifesto p::after { content: ""; display: block; width: 64px; height: 4px; margin: 8px auto -10px; background: var(--civ-signal); }

.civskills-section { padding: 18px 0 14px; background: var(--civ-bg); }
.civskills-section h2 {
	margin: 0 0 12px;
	color: var(--civ-ink);
	font-family: "Segoe UI", Arial, sans-serif !important;
	font-size: clamp(32px, 3vw, 42px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.08;
}
.civskills-capability-layout { display: grid; gap: 14px; }
.civskills-course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.civskills-course-card {
	min-width: 0;
	background: var(--civ-surface);
	border: 1px solid var(--civ-border);
	border-radius: var(--civ-radius);
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
	overflow: hidden;
}
.civskills-course-card--compact { display: grid; grid-template-rows: 132px minmax(113px, auto); min-height: 245px; }
.civskills-course-card__media { display: block; min-width: 0; background: #dce2e5; overflow: hidden; }
.civskills-course-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 180ms ease, transform 220ms ease; }
.civskills-course-card:hover .civskills-course-card__media img { filter: grayscale(.2); transform: scale(1.015); }
.civskills-course-card__media--drone img { object-position: 55% center; transform: scale(1.38); }
.civskills-course-card__media--radio img { object-position: 5% center; transform: scale(2.35); transform-origin: left center; }
.civskills-course-card__media--medical img { object-position: 96% center; transform: scale(2.25); transform-origin: right center; }
.civskills-course-card:hover .civskills-course-card__media--drone img { transform: scale(1.4); }
.civskills-course-card:hover .civskills-course-card__media--radio img { transform: scale(2.38); }
.civskills-course-card:hover .civskills-course-card__media--medical img { transform: scale(2.28); }
.civskills-course-card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.civskills-course-card--compact .civskills-course-card__body { padding: 12px 18px; }
.civskills-course-card h3 { margin: 0; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 21px; font-weight: 800; line-height: 1.12; }
.civskills-course-card h3 a { text-decoration: none !important; }
.civskills-course-card h3 a:hover { text-decoration: underline !important; text-decoration-color: var(--civ-primary) !important; text-underline-offset: 4px; }
.civskills-course-card .civskills-button { min-height: 40px; margin-top: auto; padding: 7px 18px; font-size: 15px; }
.civskills-course-status { margin-top: auto; padding: 7px 12px; color: var(--civ-muted); background: #edf0f2; border: 1px solid var(--civ-border); border-radius: 4px; font-size: 14px; font-weight: 800; }

.civskills-home-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.civskills-home-panel { min-width: 0; min-height: 150px; padding: 12px 18px; background: #fff; border: 1px solid var(--civ-border); border-radius: var(--civ-radius); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.civskills-home-panel h3 { margin: 0 0 8px; font-family: "Segoe UI", Arial, sans-serif !important; font-size: 18px; font-weight: 800; }
.civskills-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.civskills-benefit { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 12px; }
.civskills-benefit + .civskills-benefit { border-left: 1px solid var(--civ-border); }
.civskills-benefit .civskills-course-icon { width: 32px; height: 32px; color: #087f8b; }
.civskills-benefit span { min-width: 0; display: grid; gap: 3px; }
.civskills-benefit strong { font-size: 14px; line-height: 1.2; }
.civskills-benefit small { color: var(--civ-muted); font-size: 11px; line-height: 1.3; }
.civskills-path-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.civskills-path-header h3 { margin: 0; }
.civskills-path-header a { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; color: #056d78; border: 1px solid var(--civ-border); border-radius: 4px; font-size: 12px; font-weight: 800; text-decoration: none !important; }
.civskills-path-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--civ-border); border-radius: 4px; overflow: hidden; }
.civskills-path-list li { min-height: 34px; display: grid; grid-template-columns: 24px 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 4px 10px; font-size: 12px; }
.civskills-path-list li + li { border-top: 1px solid var(--civ-border); }
.civskills-path-number { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: var(--civ-primary); border-radius: 50%; font-size: 11px; font-weight: 800; }
.civskills-path-list .civskills-course-icon { width: 20px; height: 20px; color: var(--civ-ink); }
.civskills-path-list li > span:nth-child(3) { display: grid; line-height: 1.12; }
.civskills-path-list strong { font-size: 12px; }
.civskills-path-list small { color: var(--civ-muted); font-size: 10px; }
.civskills-path-list em { color: var(--civ-muted); font-size: 11px; font-style: normal; }

.civskills-course-icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.civskills-empty { padding: 40px; border: 1px dashed var(--civ-border); background: #fff; text-align: center; }
.civskills-callout { padding: 36px; background: var(--civ-navy); border: 1px solid var(--civ-border-dark); border-radius: var(--civ-radius); color: #fff; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.civskills-callout h2 { margin-top: 0; color: #fff; }

.civskills-site-footer { background: #fff; border-top: 1px solid var(--civ-border); color: #3c4853; }
.civskills-site-footer__inner { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.civskills-brand--footer img { width: 160px; }
.civskills-site-footer p { margin: 0; font-size: 13px; }

@media (max-width: 1180px) {
	.civskills-primary-nav__links { gap: 22px; }
	.civskills-home-hero__grid { grid-template-columns: 400px minmax(0,1fr); }
	.civskills-home-hero__image { left: 420px; }
}

@media (max-width: 1024px) {
	.civskills-site-header__inner { flex-wrap: wrap; padding-block: 12px; }
	.civskills-site-header .civskills-menu-toggle { display: inline-flex !important; margin-left: auto; }
	.civskills-primary-nav { width: 100%; max-height: 0; align-items: stretch; flex-basis: 100%; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; visibility: hidden; pointer-events: none; transition: max-height 220ms ease, padding 180ms ease, visibility 0s linear 220ms; }
	.civskills-site-header.is-menu-open .civskills-primary-nav { max-height: 520px; padding: 8px 0 12px; visibility: visible; pointer-events: auto; transition-delay: 0s; }
	.civskills-primary-nav__links, .civskills-primary-nav__actions { align-items: stretch; flex-direction: column; gap: 4px; }
	.civskills-primary-nav__links a, .civskills-link-button, .civskills-primary-nav__actions .civskills-button { width: 100%; min-height: 48px; justify-content: flex-start; padding-inline: 12px; }
	.civskills-primary-nav__actions .civskills-button { justify-content: center; }
	.civskills-home-hero { height: auto; min-height: 610px; padding: 36px 0 24px; }
	.civskills-home-hero__grid { height: auto; display: flex !important; flex-direction: column; align-items: stretch !important; }
	.civskills-home-hero__image { position: relative; inset: auto; height: 280px; margin-top: 18px; }
	.civskills-home-hero > .civskills-proof-list { position: relative; right: auto; bottom: auto; width: min(var(--civ-shell), calc(100% - 80px)) !important; max-width: var(--civ-shell) !important; margin: 16px auto 0 !important; }
	.civskills-course-grid { grid-template-columns: 1fr 1fr; }
	.civskills-home-panels { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
	.civskills-shell,
	.civskills-design-active .wp-block-group__inner-container,
	.civskills-design-active .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { width: calc(100% - 32px); }
	.civskills-home-hero > .civskills-home-hero__grid,
	.civskills-home-hero > .civskills-proof-list,
	.civskills-courses-section > :where(h2, .wp-block-shortcode),
	.civskills-manifesto > p { width: calc(100% - 32px) !important; }
	.civskills-brand img { width: 166px; }
	.civskills-home-hero h1 { font-size: clamp(44px, 12vw, 60px); }
	.civskills-home-hero__intro { font-size: 18px; }
	.civskills-proof-list { grid-template-columns: 1fr; gap: 8px; }
	.civskills-proof-list li { min-height: 48px; }
	.civskills-manifesto p { font-size: 15px; }
	.civskills-section { padding-top: 24px; }
	.civskills-section h2 { font-size: 34px; }
	.civskills-course-grid { grid-template-columns: 1fr; }
	.civskills-benefit-grid { grid-template-columns: 1fr; }
	.civskills-benefit { padding: 10px 4px; }
	.civskills-benefit + .civskills-benefit { border-left: 0; border-top: 1px solid var(--civ-border); }
	.civskills-site-footer__inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 20px; }
}

@media (max-width: 560px) {
	.civskills-brand img { width: 156px; }
	.civskills-home-hero { padding-top: 28px; }
	.civskills-home-hero .wp-block-buttons, .civskills-home-hero .wp-block-button, .civskills-home-hero .wp-block-button__link { width: 100%; }
	.civskills-home-hero__image { height: 210px; }
	.civskills-course-card__body { padding: 18px; }
	.civskills-home-panel { padding: 16px; }
	.civskills-path-header { align-items: flex-start; }
	.civskills-path-list li { grid-template-columns: 24px 22px minmax(0,1fr); }
	.civskills-path-list em { grid-column: 3; }
}

@media (max-width: 340px) {
	.civskills-shell,
	.civskills-design-active .wp-block-group__inner-container,
	.civskills-design-active .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { width: calc(100% - 24px); }
	.civskills-home-hero > .civskills-home-hero__grid,
	.civskills-home-hero > .civskills-proof-list,
	.civskills-courses-section > :where(h2, .wp-block-shortcode),
	.civskills-manifesto > p { width: calc(100% - 24px) !important; }
	.civskills-brand img { width: 144px; }
	.civskills-menu-toggle span:last-child { display: none; }
	.civskills-menu-toggle { width: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.civskills-design-active *, .civskills-design-active *::before, .civskills-design-active *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
