/**
 * File: wwwroot/css/careers.css
 * Purpose: Career pages styling - Trooper, CVE, Capitol, Dispatcher, Specialty Units
 * Last Updated: 2026-01-22
 * Author: Jessie Martin
 * 
 * Contents:
 *   1.  Hero — accent lines per division
 *   2.  Hero — "How to Apply" CTA circle (colored per division)
 *   3.  Hero — Dispatcher overlay (was missing)
 *   4.  Quick facts — fact-card variants per division
 *   5.  Section eyebrow — division color overrides
 *   6.  Section nav — apply link color for capitol & dispatcher
 *   7.  Salary timeline — left border + rank label per division
 *   8.  Salary section — background per division
 *   9.  Training section — background + accent per division
 *   10. Training CTA button — division colors
 *   11. Training stat label — division accent color
 *   12. Before You Apply — full redesign + division CTA buttons
 *   13. Responsive Design
 *	 14. Accessibility
 * 
 * Notes:
 *   - Uses DPS color variables from dps.css
 *   - Mobile-first approach
 *   - Accessibility-focused (WCAG 2.2 AA)
 */

/**
 * ============================================
 * 1. CSS VARIABLES - DPS OFFICIAL COLOR SCHEME
 * ============================================
 * 
 * Official DPS Colors (2025):
 * These colors are extracted from official DPS badges and branding materials.
 * 
 * Color Palette:
 * - Navy: #11294B (Dark navy blue - backgrounds)
 * - Blue: #1F419B (Royal blue - primary brand)
 * - Orange: #DB4F30 (Burnt orange - GSP accent)
 * - Red: #A22237 (Burgundy - CTAs and urgency)
 * - Yellow: #EADC75 (Cream/pale yellow - CVE accent)
 * - Grey: #D7D5CF (Warm light grey - borders, subtle backgrounds)
 * - Black: #000000 (CVE primary)
 * - White: #FFFFFF (Text and backgrounds)
 */

:root {
	/* ========================================
	   OFFICIAL DPS CORE COLORS (2025)
	   ======================================== */
	--dps-white: #FFFFFF;
	--dps-navy: #11294B; /* Dark navy blue */
	--dps-blue: #1F419B; /* Royal blue (primary brand) */
	--dps-orange: #DB4F30; /* Burnt orange (GSP accent) */
	--dps-red: #A22237; /* Burgundy red (CTAs) */
	--dps-grey: #D7D5CF; /* Warm light grey */
	--dps-black: #000000; /* Pure black (CVE primary) */
	--dps-yellow: #EADC75; /* Cream/pale yellow (CVE accent) */
	/* ========================================
	   BACKWARDS COMPATIBILITY ALIASES
	   These map old variable names to new colors
	   so existing CSS doesn't break
	   ======================================== */
	--dps-royal-blue: var(--dps-blue); /* Alias for --dps-blue */
	--dps-blue-dark: var(--dps-navy); /* Alias for --dps-navy */
	--dps-gold: var(--dps-orange); /* Alias for --dps-orange */
	--dps-dark-gold: #B8401A; /* Darker orange for hover states */
	--dps-gray: #6c757d; /* Medium grey for text */
	--dps-light-gray: #f8f9fa; /* Very light grey for backgrounds */
	/* ========================================
	   GEORGIA STATE PATROL THEME
	   Blue/Grey/Orange color scheme
	   ======================================== */
	--gsp-blue: var(--dps-blue); /* #1F419B */
	--gsp-blue-dark: var(--dps-navy); /* #11294B */
	--gsp-grey: var(--dps-grey); /* #D7D5CF */
	--gsp-grey-light: #E8E6E1; /* Lighter grey */
	--gsp-orange: var(--dps-orange); /* #DB4F30 */
	--gsp-orange-dark: var(--dps-dark-gold); /* #B8401A */
	/* ========================================
	   CVE THEME
	   Black/Yellow color scheme
	   ======================================== */
	--cve-black: var(--dps-black); /* #000000 */
	--cve-black-light: #2c2c2c; /* Lighter black for gradients */
	--cve-yellow: var(--dps-yellow); /* #EADC75 */
	--cve-yellow-dark: #D4C660; /* Darker yellow for hover */
	/* ========================================
	   CAPITOL POLICE THEME
	   Grey/White color scheme
	   ======================================== */
	--capitol-grey: var(--dps-grey); /* #D7D5CF */
	--capitol-grey-dark: #A8A59E; /* Darker grey */
	--capitol-white: var(--dps-white); /* #FFFFFF */
	--capitol-white-off: #F5F5F5; /* Off-white */
}

/* ============================================================
   CAREER SECTION NAV — Sticky sub-nav on detail pages
   Sits below the main navbar, shows sections for current career
   ============================================================ */

.career-section-nav {
	position: fixed;
	top: 72px; /* 72px — sits under main nav */
	left: 0; /* ← make sure this is there */
	right: 0; /* ← make sure this is there */
	width: 100%; /* ← make sure this is there */
	z-index: 1500;
	height: 44px;
	background: rgba(10, 10, 10, 0.70); /* transparent to blend with main navbar */
	backdrop-filter: blur(16px); /* matches main navbar blur level */
	-webkit-backdrop-filter: blur(16px);
	border-top: 2px solid rgba(255,255,255,0.85); /* white separator line */
	border-bottom: 1px solid rgba(255,255,255,0.06);
	transition: top 0.3s ease; /* must match navbar transition duration */
}

/* When main nav hides, section nav locks to top of screen */
body.navbar-is-hidden .career-section-nav {
	top: 0;
}

/* Allows sticky career-section-nav to work inside layout wrapper */
.career-detail-page .overflow-wrapper {
	overflow: visible;
	overflow-x: clip;
}

/* Section anchor offset — accounts for both bars by default */
section[id] {
	scroll-margin-top: 116px;
}

/* When navbar is hidden, only account for section nav height */
body.navbar-is-hidden section[id] {
	scroll-margin-top: 44px;
}

/* CVE variant — black background */
.career-section-nav--cve {
	background: rgba(10, 10, 10, 0.70);
}

/* Capitol variant — dark slate */
.career-section-nav--capitol {
	background: rgba(10, 10, 10, 0.70);
}

/* Dispatcher variant — navy (same as default, distinguished by content) */
.career-section-nav--dispatcher {
	background: rgba(10, 10, 10, 0.70);
}

.career-section-nav__list {
	display: flex;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	padding-top: 8px;
	gap: 0;
	width: 100%;
	justify-content: safe center;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.career-section-nav__list::-webkit-scrollbar {
    display: none;
}

/* Nav links */
.career-section-nav__link {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    padding: 0 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.career-section-nav__link:hover {
    color: rgba(255,255,255,0.9);
}

/* Active section highlight — division-colored underline */
.career-section-nav__link.active {
    color: #fff;
    border-bottom-color: var(--dps-orange); /* swap per division */
}

/* Apply Now link — always highlighted */
.career-section-nav__link--apply {
    color: var(--dps-orange);
    font-weight: 700;
}

/* CVE: yellow active indicator */
.career-section-nav--cve .career-section-nav__link.active {
    border-bottom-color: var(--dps-yellow);
}

.career-section-nav--cve .career-section-nav__link--apply {
    color: var(--dps-yellow);
}

.career-section-nav--cve .career-section-nav__link:hover {
	color: rgba(255,255,255,0.9);
}

/* Capitol: yellow active indicator */
.career-section-nav--capitol .career-section-nav__link.active {
	border-bottom-color: var(--capitol-grey);
}

.career-section-nav--capitol .career-section-nav__link--apply {
	color: var(--capitol-grey);
}

.career-section-nav--capitol .career-section-nav__link:hover {
	color: rgba(255,255,255,0.9);
}

/* ============================================================
   BASE — Black background for the whole GSP section
   ============================================================ */
[data-division="gsp"] .career-section {
	background-color: #000;
	color: #fff;
}

/* ============================================================
   SHARED TYPOGRAPHY
   ============================================================ */
section-eyebrow {
	font-family: var(--font-condensed,'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dps-orange);
	margin-bottom: 0.5rem;
}

[data-division="gsp"] .section-eyebrow {
	color: var(--dps-orange);
}

[data-division="cve"] .section-eyebrow {
	color: var(--dps-yellow);
}

[data-division="capitol"] .section-eyebrow {
	color: var(--dps-grey);
}

[data-division="dispatcher"] .section-eyebrow {
	color: var(--dps-orange);
}

section-eyebrow--light {
	color: rgba(255, 255, 255, 0.7);
}

.section-heading {
	font-family: var(--font-condensed,'Barlow Condensed', 'Oswald', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #FFF;
	margin-bottom: 0.5rem;
	line-height: 1.1;
}

.section-heading--xl {
	font-size: clamp(3rem, 7vw, 5.5rem);
}

.section-heading--light {
	color: #FFF;
}

.section-subtext {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.65);
	max-width: 640px;
	line-height: 1.6;
}

.section-subtext--light {
	color: rgba(255, 255, 255, 0.8);
}

/* ============================================================================
   CAREERS HERO — HONEYCOMB (HIVE) - EXPLORE CAREERS
   ============================================================================ */

.careers-hive {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 6rem 1rem 3rem; /* top pad for fixed navbar */
}

/* Video BG */
.careers-hive__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	filter: blur(0px);
	transform: scale(1.08);
	transition: filter 0.4s ease;
}

/* light overlay */
.careers-hive__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
        to bottom,
        rgba(10, 10, 30, 0.35) 0%,    /* slightly lighter at top */
        rgba(10, 10, 30, 0.50) 60%,   /* darkens through middle */
        rgba(0, 0, 0, 0.97) 100%      /* near black at bottom — feeds into trooper */
    );
	z-index: 2;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition: backdrop-filter 0.4s ease, background 0.4s ease;
}

/* When section has hover class — blur everything */
.careers-hive.is-hovered .careers-hive__video {
	filter: blur(8px);
}

.careers-hive.is-hovered .careers-hive__overlay {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	background: linear-gradient( 160deg, rgba(10, 10, 15, 0.65) 0%, rgba(10, 10, 15, 0.88) 70%, rgba(0, 0, 0, 0.99) 100% );
}

/* Content layer */
.careers-hive__content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

/* Header text */
.hive-eyebrow {
	font-family: var(--font-heading, 'Oswald', sans-serif);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--dps-white);
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.hive-title {
	font-family: var(--font-heading, 'Oswald', sans-serif);
	font-size: clamp(2.5rem, 7vw, 5rem);
	font-weight: 900;
	letter-spacing: 0.06em;
	color: #FFF;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.hive-sub {
	font-size: clamp(0.9rem, 2vw, 1.1rem);
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0;
}

/* ── Honeycomb Grid ── */
.hive-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0; /* vertical gap handled by hex math */
}

.hive-row {
	display: flex;
	justify-content: center;
	gap: 1px;
	margin-top: -30px; /* pulls rows together for hex overlap */
}

.hive-row:first-child {
	margin-top: 0;
}

/* Offset row shifts right by half a hex + gap */
.hive-row--offset {
	transform: translateX(0px); /* half of hex width + half gap */
}

/* ── Individual Hex Cell ── */
.hive-cell {
	display: block;
	width: 190px;
	height: 214px; /* height = width * 1.1547 for regular hex */
	text-decoration: none;
	cursor: pointer;
	flex-shrink: 0;
}

/* Clip path makes the hexagon shape */
.hive-shape {
	width: 100%;
	height: 100%;
	clip-path: none;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.3s ease;
	overflow: hidden;
}

/* Hover state */
.hive-cell:hover .hive-shape {
	background: transparent;
	transform: scale(1.06);
}

.hive-cell:hover .hive-shape::before {
    content: none;   /* kills it completely */
}

/* ── Front face: logo ── */
.hive-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
	padding: 1.5rem;
}

.hive-face--front {
	opacity: 1;
	background: transparent;
	transition: opacity 0.3s ease, background 0.3s ease;
	z-index: 1;
}

.hive-face--back {
	opacity: 0;
	background: transparent;
	z-index: 3;
	padding: 0;
	align-items: stretch;
	justify-content: flex-end;
	transition: opacity 0.3s ease;
	bottom: 0; /* ADD: explicit bottom anchor */
	top: auto; /* ADD: release from top */
	height: auto; /* ADD: only as tall as content */
	inset: unset; /* ADD: override the base .hive-face inset:0 */
	left: 0; /* ADD: full width */
	right: 0; /* ADD: full width */
	position: absolute; /* ADD: explicit */
}

/* On hover: hide logo, show name */
.hive-cell:hover .hive-face--front {
	opacity: 0;
	pointer-events: none;

}

.hive-cell:hover .hive-face--back {
	opacity: 1;
}

/* Logo image */
.hive-logo {
	width: 130px;
	height: auto;
	max-height: 140px;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
	transition: opacity 0.3s ease, transform 0.3s ease;
	mix-blend-mode: normal;
}

.hive-cell:hover .hive-logo {
	opacity: 0;
}

/* Back face: unit name */
.hive-name {
	font-family: var(--font-heading, 'Oswald', sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.3;
	padding: 0.6rem 0.5rem;
	background: rgba(0, 8, 30, 0.92);
	border-top: 2px solid #FFF;
	width: 100%;
	margin: 0;
	border-radius: 0;
	position: relative; /* ADD: ensures it stacks above siblings */
	z-index: 4; /* ADD: top of stack */
}

/* Scroll hint */
.hive-scroll {
	color: rgba(255,255,255,0.5);
	font-family: var(--font-heading, 'Oswald', sans-serif);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color 0.2s ease;
	animation: hive-bounce 2.5s infinite;
}

.hive-scroll:hover {
	color: var(--dps-gold, #FFA500);
}

@keyframes hive-bounce {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(6px);
	}
}

/* ============================================================================
   DIVISION HERO — Option C Left Layout
   Uniform overlay, content left-anchored, bottom nav icons centered.
   ============================================================================ */

.career-hero {
	position: relative;
	min-height: 100vh;
	padding-top: 116px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--dps-navy);
}

/* Video layer */
.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

[data-theme="trooper"] .hero-overlay {
	background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.30) 0%,       /* matches hive bottom — seamless join */
        rgba(10, 10, 15, 0.20) 30%,   /* opens up quickly — video visible */
        rgba(10, 10, 15, 0.65) 65%,   /* holds through the middle */
        rgba(0, 0, 0, 0.95) 100%      /* dark at bottom for next section */
    );
}

[data-theme="cve"] .hero-overlay {
	background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,      /* matches hive bottom — seamless join */
        rgba(10, 10, 15, 0.60) 30%,   /* opens up quickly — video visible */
        rgba(10, 10, 15, 0.65) 65%,   /* holds through the middle */
        rgba(0, 0, 0, 0.95) 100%      /* dark at bottom for next section */
    );
}

[data-theme="capitol"] .hero-overlay {
	background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,      /* matches hive bottom — seamless join */
        rgba(10, 10, 15, 0.60) 30%,   /* opens up quickly — video visible */
        rgba(10, 10, 15, 0.75) 65%,   /* holds through the middle */
        rgba(0, 0, 0, 0.95) 100%      /* dark at bottom for next section */
    );
}

[data-theme="dispatcher"] .hero-overlay {
	background: linear-gradient( to bottom, rgba(0, 0, 0, 0.75) 0%, /* matches hive bottom — seamless join */
	rgba(10, 10, 15, 0.60) 30%, /* opens up quickly — video visible */
	rgba(10, 10, 15, 0.75) 65%, /* holds through the middle */
	rgba(0, 0, 0, 0.95) 100% /* dark at bottom for next section */
	);
}

/* ── CONTENT LAYER ── */
.hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 2rem;
}

.hero-content--left {
	/* Pushes content up slightly so bottom nav has room */
	padding-bottom: 6rem;
}

/* ── BADGE LOCKUP ── */
.hero-lockup {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.hero-lockup-badge {
	width: 56px;
	height: 56px;
	object-fit: contain;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
	flex-shrink: 0;
}

.hero-lockup-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.hero-lockup-agency {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 0.82rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.hero-lockup-division {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 1.2rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.95);
}

/* ── HERO ACCENT LINE ── */
.hero-accent-line {
	width: 285px;
	height: 3px;
	margin-bottom: 1.25rem;
}

/* ── HERO DIVISION COLOR ACCENT LINE ── */
.hero-accent-line--trooper {
	background: var(--dps-orange);
}

.hero-accent-line--cve {
	background: var(--dps-yellow);
}

.hero-accent-line--capitol {
	background: var(--dps-grey);
}

.hero-accent-line--dispatcher {
	background: var(--dps-orange);
}

/* ── TITLE ── */
.hero-title {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: clamp(3.5rem, 8vw, 6.5rem);
	font-weight: 900;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #FFF;
	line-height: 0.92;
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
	margin-bottom: 1.25rem;
}

/* ── SUBTITLE ── */
.hero-subtitle {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: clamp(0.95rem, 2vw, 1.1rem);
	color: rgba(255, 255, 255, 0.80);
	line-height: 1.6;
	max-width: 420px;
	letter-spacing: 0.01em;
}

/* ── BOTTOM NAV ICONS ── */
.hero-bottom-nav {
	position: absolute;
	transform: none;
	left: auto;
	display: flex;
	justify-content: center;
	z-index: 3;
	gap: 4rem;
	bottom: -2px;
}

.hero-nav-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.90);
	transition: color 0.2s ease, transform 0.2s ease;
}

.hero-nav-icon:hover {
	color: #FFF;
	transform: translateY(-3px);
}

.hero-nav-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.60);
	background: rgba(255, 255, 255, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s ease, background 0.2s ease;
	backdrop-filter: blur(4px);
}

.hero-nav-icon:hover .hero-nav-circle {
	border-color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.14);
}

.hero-nav-circle i {
	font-size: 1rem;
}

.hero-nav-label {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* HERO HOW TO APPLY CTA W/ COLOR */
.hero-nav-icon--cta .hero-nav-circle {
	border-color: var(--dps-orange);
	background: rgba(219, 79, 48, 0.22);
}

.hero-nav-icon--cta:hover .hero-nav-circle {
	background: rgba(219, 79, 48, 0.38);
	border-color: var(--dps-orange);
}

/* CVE — yellow CTA circle */
[data-theme="cve"] .hero-nav-icon--cta .hero-nav-circle {
	border-color: var(--dps-yellow);
	background: rgba(234, 220, 117, 0.18);
}

[data-theme="cve"] .hero-nav-icon--cta:hover .hero-nav-circle {
	background: rgba(234, 220, 117, 0.32);
	border-color: var(--dps-yellow);
}

/* Capitol — grey CTA circle */
[data-theme="capitol"] .hero-nav-icon--cta .hero-nav-circle {
	border-color: var(--dps-grey);
	background: rgba(215, 213, 207, 0.18);
}

[data-theme="capitol"] .hero-nav-icon--cta:hover .hero-nav-circle {
	background: rgba(215, 213, 207, 0.30);
	border-color: var(--dps-grey);
}

/* ── ANIMATIONS (unchanged) ── */
.animate-fade-in {
	animation: fadeIn 1s ease-out both;
}

.animate-fade-in-delay {
	animation: fadeIn 1s ease-out 0.3s both;
}

.animate-fade-in-delay-2 {
	animation: fadeIn 1s ease-out 0.6s both;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ============================================================
   QUICK FACTS
   ============================================================ */
.quickfacts-section {
	background-color: #000;
	padding: 5rem 0;
}

.fact-card {
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.5s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	width: 100%;
}

.fact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.fact-card--blue {
	background-color: var(--dps-blue);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.fact-card--grey {
	background-color: #5A6070;
	border: 1px solid rgba(215,213,207,0.2);
}

.fact-icon {
	font-size: 1.75rem;
	color: var(--dps-white);
	margin-bottom: 1rem;
}

.fact-label {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', san-serif);
	font-size: 0.72rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.4rem;
}

.fact-value {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 0.4rem;
}

.fact-desc {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.72) !important;
	line-height: 1.4;
}

/* DIVISION QUICK FACT CARDS COLORS */
/* GSP/Trooper — silver card, white icon */
.fact-card--trooper {
	background-color: #3D4250;
	border: 1px solid rgba(219, 79, 48, 0.9);
}

.fact-card--trooper .fact-icon { 
	color: var(--dps-white);
}

/* CVE — near-black, yellow icon */
.fact-card--cve {
    background-color: #141414;
    border: 1px solid var(--cve-yellow);
}

.fact-card--cve .fact-icon { 
	color: var(--dps-yellow);
}

/* Capitol — dark navy, grey icon */
.fact-card--capitol {
    background-color: var(--dps-navy);
    border: 1px solid rgba(215, 213, 207, 0.9);
}

.fact-card--capitol .fact-icon { 
	color: var(--dps-grey);
}

/* Dispatcher — dark navy, orange-red icon */
.fact-card--dispatcher {
    background-color: #172338;
    border: 1px solid rgba(219, 79, 48, 0.9);
}
.fact-card--dispatcher .fact-icon { 
	color: var(--dps-orange);
}


/* ============================================================
   WHY GSP — VIDEO TESTIMONIALS
   ============================================================ */

.why-section {
	background-color: #0a0a0a;
	padding: 5rem 0;
}

.video-embed-wrap {
	max-width: 900px;
	margin: 0 auto;
	border-radius: 6px;
	overflow: hidden;
	border: 0.5px solid var(--pt-border-bright);
}

.video-embed-wide {
	width: 100%;
    height: auto;
    display: block;
    background: #000;
    border-radius: 4px;
    margin: 0 auto;
}

.video-caption {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin-top: 0.75rem;
}


/* ============================================================
   REQUIREMENTS — ACCORDION (white background, Air Force style)
   ============================================================ */

.requirements-section {
	background-color: #FFF;
	color: #000;
	padding: 6rem 0;
}

.requirements-section .section-eyebrow {
	color: var(--dps-blue);
}

.requirements-section .section-heading {
	color: var(--dps-navy);
}

.requirements-section .section-subtext {
	color: #555;
	max-width: 700px;
}

.accordion {
	border-top: 1px solid #ddd
}

.accordion-item {
	background: transparent;
	border: none;
	border-bottom: 1px solid #ddd;
}

.accordion-btn {
	background: transparent;
	color: var(--dps-navy);
	font-family: var(--font-condensed,'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	font-weight: 700;
	padding: 1.15rem 0;
	text-transform: uppercase;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.accordion-btn::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2311294B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-btn:not(.collapsed) {
	color: var(--dps-blue);
	background: transparent;
}

.accordion-btn:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231F419B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
	padding: 0 0 1.5rem 0;
}

.req-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.req-list li {
	font-size: 1rem;
	color: #333;
	padding-left: 1.5rem;
	position: relative;
	line-height: 1.5;
}

.req-list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--dps-blue);
	font-weight: 700;
}

.req-note {
	display: block;
	font-size: 0.82rem;
	color: #595959;
	margin-top: 0.3rem;
}

/* ============================================================
   SALARY — MODAL CARD STYLE
   ============================================================ */
.salary-section {
	background-color: #0D0D0D;
	padding: 5rem 0;
}

[data-division="cve"] .salary-section {
	background: linear-gradient(to bottom, #0A0A0A 0%, #141414 100%);
}

[data-division="capitol"] .salary-section {
	background: linear-gradient(to bottom, #0D1822 0%, #11294B 100%);
}

[data-division="dispatcher"] .salary-section {
	background: linear-gradient(to bottom, #0D1822 0%, #11294B 100%);
}

.salary-timeline {
	border-left: 3px solid var(--dps-blue);
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.salary-timeline .timeline-item {
	margin-bottom: 0;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: background 0.2s ease;
}

.salary-timeline .timeline-item:last-child { 
	border-bottom: none;
}


.salary-timeline .timeline-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.timeline-rank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.timeline-left { flex: 1; min-width: 0; }

.salary-timeline .timeline-year {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--dps-orange);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.2rem;
}

.salary-timeline--cve {
    border-left-color: var(--dps-yellow);
}

.salary-timeline--cve .timeline-year {
	color: var(--dps-yellow);
}

.salary-timeline--capitol {
    border-left-color: var(--dps-grey);
}
.salary-timeline--capitol .timeline-year { 
	color: var(--dps-grey);
}

.salary-timeline--dispatcher {
    border-left-color: var(--dps-orange);
}

.salary-timeline--dispatcher .timeline-year { 
	color: var(--dps-orange);
}

.timeline-detail {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.80) !important;
    line-height: 1.4;
}

.timeline-salary {
    font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

.timeline-per-yr {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    margin-left: 2px;
}

/* GSP incentive */
.timeline-item--incentive {
    background: rgba(219, 79, 48, 0.06);
    border-left: 3px solid var(--dps-orange);
    margin-left: -3px;
}

.timeline-item--incentive:hover {
    background: rgba(219, 79, 48, 0.1) !important;
}

.timeline-year--incentive { color: var(--dps-orange) !important; }

.timeline-salary--incentive {
    color: var(--dps-orange);
    font-size: 1.6rem;
}

/* CVE incentive */
[data-division="cve"] .timeline-item--incentive {
    background: rgba(234, 220, 117, 0.06) !important;
    border-left: 3px solid var(--dps-white);  /* ← this was there but confirm it's present */
    margin-left: -3px;
}

[data-division="cve"] .timeline-item--incentive:hover {
    background: rgba(234, 220, 117, 0.1) !important;
}

[data-division="cve"] .timeline-year--incentive {
	color: var(--cve-yellow-dark) !important;
}

[data-division="cve"] .timeline-salary--incentive {
	color: var(--cve-yellow-dark) !important;
	font-size: 1.6rem;
}

/* Stagger slide-in animation (triggered by scroll-animations.js) */
.salary-timeline .fade-in-on-scroll {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.salary-timeline .fade-in-on-scroll.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ── Dispatcher salary promo divider ─────────────────────────────── */
.salary-promo-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.salary-promo-divider__line {
	flex: 1;
	border-color: rgba(255, 255, 255, 0.2);
	margin: 0;
}

.salary-promo-divider__label {
	white-space: nowrap;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em !important;
	color: var(--dispatcher-accent, #f97316);
	text-transform: uppercase !important;
}

.salary-promo-divider__note {
	width: 100%;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-style: italic;
}

/* Mobile: stack salary below rank name */
@media (max-width: 575.98px) {
	.timeline-rank-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
	}

	.timeline-salary {
		font-size: 1.25rem;
		text-align: left;
	}
}

/* ============================================================
		WHAT YOU'LL DO - DAY IN THE LIFE — DUTIES CAROUSEL
   ============================================================ */

.duties-section {
	background-color: #0a0a0a;
	padding: 5rem 0 2.5rem;
}

.duties-carousel {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

/* Left/right vignette fade — same as Instagram carousel */
.duties-carousel::before,
.duties-carousel::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	z-index: 10;
	pointer-events: none;
}

.duties-carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(10, 10, 15, 0.85), transparent 100%);
}

.duties-carousel::after {
	right: 0;
	background: linear-gradient(to left, rgba(10, 10, 15, 0.85), transparent 100%);
}

/* Placeholder slide (until real photos arrive) */
.duties-slide-placeholder {
    width: 100%;
    height: 460px;
    background: linear-gradient(135deg, #0A0A0A 0%, #0D1220 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
	color: rgba(215, 213, 207, 0.20);
}

.duties-slide-placeholder i {
	font-size: 4rem;
}

.duties-slide-label {
	font-family: 'Oswald', sans-serif;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(215, 213, 207, 0.25);
}

/* Caption — gradient fade from bottom */
.duties-carousel .carousel-caption {
    background: linear-gradient(0deg, rgba(0,0,0,0.90) 0%, transparent 100%);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 2rem 1.5rem;
    text-align: left;
}

/* Indicators — division-colored dots */
.duties-carousel .carousel-indicators [data-bs-target] {
    background-color: rgba(255, 255, 255, 0.3);
    width: 8px;
    height: 8px;
    border-radius: 50%;
	border: none;
}

.duties-carousel .carousel-indicators .active {
    background-color: var(--dps-orange);
}

[data-division="cve"] .duties-carousel .carousel-indicators .active {
	background-color: var(--dps-yellow);
}

[data-division="capitol"] .duties-carousel .carousel-indicators .active {
	background-color: var(--dps-grey);
}

[data-division="dispatcher"] .duties-carousel .carousel-indicators .active {
	background-color: var(--dps-red);
}

/* Prev/Next buttons */
.duties-carousel .carousel-control-prev,
.duties-carousel .carousel-control-next {
	width: 10%;
	opacity: 0.7;
	z-index: 20;
	transition: opacity 0.2s ease;
}

.duties-carousel .carousel-control-prev:hover,
.duties-carousel .carousel-control-next:hover {
	opacity: 1;
}

/*.trooper-dayinlife-video-wrap {
	max-width: 900px;
	margin: 3rem auto 0;
}

.trooper-video-embed-wide {
	position: relative;
	padding-top: 56.25%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 72px rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.trooper-video-embed-wide iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}
*/

/* ============================================================
   TRAINING — MINIMAL STATS BAR
   ============================================================ */
.training-section {
	background: linear-gradient( to bottom, #0a0a0a 0%, var(--dps-blue) 100% );
	padding: 2.5rem 0 5rem;
}

[data-division="cve"] .training-section {
	background: linear-gradient(to bottom, #0A0A0A 0%, #1A1A00 100%);
}

[data-division="capitol"] .training-section {
	background: linear-gradient(to bottom, #0D1822 0%, #11294B 100%);
}

[data-division="dispatcher"] .training-section {
	background: linear-gradient(to bottom, #0D1822 0%, #11294B 100%);
}

.training-line {
	width: 40px;
	height: 3px;
	background: var(--dps-orange);
	margin-bottom: 1.25rem;
}

.training-line--cve {
	background: var(--cve-yellow);
}

.training-line--capitol {
	background: var(--capitol-grey);
}

.training-heading {
	font-family: var(--font-condensed, 'Barlow Condensed', 'Oswald', sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FFF;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.training-desc {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
	max-width: 420px;
}

.training-cta {
	background: transparent;
	border: 1px solid var(--dps-orange);
	color: var(--dps-orange);
	font-size: 0.85rem;
	padding: 0.6rem 1.4rem;
	border-radius: 4px;
	transition: background 0.2s, border-color 0.2s;
}

.training-cta:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.5);
	color: #FFF;
}

.training-cta--cve {
    border-color: var(--dps-yellow);
    color: var(--dps-yellow);
}
.training-cta--cve:hover {
    background: rgba(234, 220, 117, 0.12);
    border-color: var(--dps-yellow);
    color: var(--dps-yellow);
}

.training-cta--capitol {
    border-color: var(--dps-grey);
    color: var(--dps-grey);
}
.training-cta--capitol:hover {
    background: rgba(215, 213, 207, 0.12);
    border-color: var(--dps-grey);
    color: var(--dps-grey);
}

.training-stats {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Panel eyebrow — sits above the stat rows */
.training-panel-eyebrow {
	font-family: var(--font-condensed, 'Oswald', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--dps-white);
	margin: 0.9rem 0 0.5rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}

.training-stat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.training-stat:last-child {
	border-bottom: none;
}

.training-stat-label {
	font-family: var(--font-condensed,'Barlow Condensed', 'Oswald', sans-serif);
	font-size: 0.90rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--dps-orange);
	min-width: 200px;
	flex-shrink: 0;
}

[data-division="cve"] .training-stat-label {
	color: var(--dps-yellow);
}

[data-division="capitol"] .training-stat-label {
	color: var(--dps-grey);
}

.training-stat-dots {
	flex: 1;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
	min-width: 20px;
	height: 1px;
	margin-bottom: 2px;
}

.training-stat-value {
	font-size: 1rem;
	font-weight: 500;
	color: #FFF;
	text-align: right;
	white-space: nowrap;
}

/* Inline CVO 1 trigger — used in paragraph text and stat value */
.training-inline-link {
    background: transparent;
    border: 1px solid var(--dps-yellow);
    color: var(--dps-yellow);
    font-family: var(--font-condensed, 'Oswald', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    vertical-align: baseline;
}

.training-inline-link:hover,
.training-inline-link:focus-visible {
    background: var(--dps-yellow);
    color: #000;
    outline: none;
}

.training-inline-link:focus-visible {
    outline: 2px solid var(--dps-yellow);
    outline-offset: 2px;
}

/* ============================================================
   TRAINING TOGGLE — CVE path switcher (Cadet / CVO 1)
   ============================================================ */
.training-toggle {
	display: flex;
	gap: 0;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.training-toggle__btn {
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.6rem 0;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.training-toggle__btn:hover {
	color: rgba(255, 255, 255, 0.8);
}

.training-toggle__btn--active {
	color: var(--dps-yellow);
	border-bottom-color: var(--dps-yellow);
}

.training-toggle__btn:focus-visible {
	outline: 2px solid var(--dps-yellow);
	outline-offset: 2px;
	border-radius: 2px;
}

.training-panel--hidden {
	display: none;
}

/* ============================================================
   BEFORE YOU APPLY SECTION
   ============================================================ */

.before-you-apply-section {
	background: #F4F3F0 !important;
	color: #1A1A1A !important;
	padding: 6rem 0 5rem;
	border-top: none !important;
	position: relative; /* creates new stacking context — blocks any bg bleed */
	isolation: isolate;
}

.before-you-apply-section .bya-eyebrow {
    color: var(--dps-blue) !important;
}

.before-you-apply-section .bya-title {
    color: var(--dps-navy) !important;
}

.before-you-apply-section .bya-subtitle {
    color: #4A4A4A !important;
}

.before-you-apply-section .bya-card {
    color: #1A1A2E !important;
}

.before-you-apply-section .bya-card:hover {
    color: #1A1A2E !important;
}

.before-you-apply-section .bya-card__title {
    color: var(--dps-navy) !important;
}

.before-you-apply-section .bya-card__desc {
    color: #4A4A4A !important;
}

.before-you-apply-section .bya-card__icon            { color: var(--dps-blue) !important; }
.before-you-apply-section .bya-card--process .bya-card__icon       { color: var(--dps-blue) !important; }
.before-you-apply-section .bya-card--fitness .bya-card__icon       { color: var(--dps-orange) !important; }
.before-you-apply-section .bya-card--disqualifiers .bya-card__icon { color: var(--dps-red) !important; }
.before-you-apply-section .bya-card--benefits .bya-card__icon      { color: #2D7A3A !important; }

.before-you-apply-section .bya-card__link                          { color: var(--dps-blue) !important; }
.before-you-apply-section .bya-card--fitness .bya-card__link       { color: #B83D22 !important; }
.before-you-apply-section .bya-card--disqualifiers .bya-card__link { color: var(--dps-red) !important; }
.before-you-apply-section .bya-card--benefits .bya-card__link      { color: #2D7A3A !important; }

.before-you-apply-section .bya-cta__prompt { color: #333 !important; }
.before-you-apply-section .bya-cta__note   { color: #666 !important; }

.before-you-apply-section .bya-cta {
    border-top: 1px solid #CCCAC6;
    padding-top: 2rem;
    margin-top: 0.5rem;
}

/* Bootstrap <a> override — cards are anchor tags so Bootstrap's
   link color bleeds through. Target a.bya-card explicitly. */
a.bya-card,
a.bya-card:link,
a.bya-card:visited {
    color: #1A1A2E !important;
    text-decoration: none !important;
}

a.bya-card:hover,
a.bya-card:focus {
    color: #1A1A2E !important;
    text-decoration: none !important;
}

/* Card child elements inside anchor cards */
a.bya-card .bya-card__title { color: var(--dps-navy) !important; }
a.bya-card .bya-card__desc  { color: #4A4A4A !important; }

/* BYA CTA — dual-button layout */
.bya-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.bya-cta__btn-recruiter {
	font-family: var(--font-condensed, 'Oswald', sans-serif) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 0.85rem 2rem !important;
	border-radius: 0 !important;
	border: 2px solid var(--dps-navy, #11294B) !important;
	background: transparent !important;
	color: var(--dps-navy, #11294B) !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	margin-bottom: 1rem;
}

.bya-cta__btn {
    font-family: var(--font-condensed, 'Oswald', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 2.5rem !important;
    border-radius: 0 !important;
    border: 2px solid transparent !important; /* division variants override */
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                transform 0.15s ease;
    margin-bottom: 1rem;
}

/* TROOPER — blue outline */
.before-you-apply-section--trooper .bya-cta__btn {
	border-color: var(--dps-blue) !important;
	background-color: var(--dps-blue) !important;
	color: #FFF !important;
}
.before-you-apply-section--trooper .bya-cta__btn:hover {
    border-color: #FFF !important;
    color: #FFF !important;
    transform: translateY(-2px);
}

/* CVE — black outline */
.before-you-apply-section--cve .bya-cta__btn {
	border-color: #111 !important;
	background-color: #111 !important;
	color: var(--dps-yellow) !important;
}
.before-you-apply-section--cve .bya-cta__btn:hover {
    border-color: #FFF !important;
    color: var(--dps-yellow) !important;
    transform: translateY(-2px);
}

/* CAPITOL — navy outline (grey fails contrast on #F4F3F0) */
.before-you-apply-section--capitol .bya-cta__btn {
	background-color: var(--dps-navy) !important;
	border-color: var(--dps-navy) !important;
	color: #FFF !important;
}
.before-you-apply-section--capitol .bya-cta__btn:hover {
    border-color: #FFF !important;
    color: #FFF !important;
    transform: translateY(-2px);
}

/* DISPATCHER — orange outline */
.before-you-apply-section--dispatcher .bya-cta__btn {
	border-color: #B83D22 !important;
	background-color: #B83D22 !important;
	color: #FFF !important;
}
.before-you-apply-section--dispatcher .bya-cta__btn:hover {
    border-color: #FFF !important;
    color: #FFF !important;
    transform: translateY(-2px);
}

/* Active press */
.bya-cta__btn:active {
    transform: translateY(0) !important;
}

.bya-cta__btn-recruiter:hover,
.bya-cta__btn-recruiter:focus-visible {
	background: var(--dps-navy, #11294B) !important;
	border-color: var(--dps-navy, #11294B) !important;
	color: #fff !important;
	transform: translateY(-2px);
	text-decoration: none !important;
}

.bya-cta__btn-recruiter:focus-visible {
	outline: 2px solid var(--dps-navy, #11294B);
	outline-offset: 3px;
}

/* ============================================================================
   REDUCED MOTION
   Covers every animation defined in careers.css:
   - .animate-fade-in / .animate-fade-in-delay / .animate-fade-in-delay-2
   - .fade-in-on-scroll / .salary-timeline .fade-in-on-scroll
   - .fact-card:hover lift
   - .hero-nav-icon:hover lift
   - .salary-timeline .timeline-item:hover
   - .training-cta:hover
   - @keyframes fadeIn
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {

	/* Hero fade-in animations — show immediately, no motion */
	.animate-fade-in,
	.animate-fade-in-delay,
	.animate-fade-in-delay-2 {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* Scroll-triggered reveal — show all elements immediately */
	.fade-in-on-scroll,
	.salary-timeline .fade-in-on-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* Kill the stagger transition on salary rows */
	.salary-timeline .fade-in-on-scroll.revealed {
		transition: none !important;
	}

	/* Remove hover lifts — keep color/background changes (still useful) */
	.fact-card:hover {
		transform: none;
	}

	.hero-nav-icon:hover {
		transform: none;
	}

	/* Remove transition on timeline hover — just swap bg instantly */
	.salary-timeline .timeline-item {
		transition: none;
	}

	/* Training CTA — remove slide transition */
	.training-cta {
		transition: none;
	}

	/* Hive — disable flip animation, show back face immediately on focus */
	.hive-cell:hover .hive-shape,
	.hive-cell:focus-visible .hive-shape {
		transform: none !important;
	}

	.hive-cell:hover .hive-face--front,
	.hive-cell:focus-visible .hive-face--front {
		opacity: 0 !important;
		transition: none !important;
	}

	.hive-cell:hover .hive-face--back,
	.hive-cell:focus-visible .hive-face--back {
		opacity: 1 !important;
		transition: none !important;
	}

	.hive-face,
	.hive-face--front,
	.hive-face--back,
	.hive-logo {
		transition: none !important;
	}

	/* Kill the bounce animation on scroll hint */
	.hive-scroll {
		animation: none !important;
	}

	/* Hero nav — remove lift, keep circle color change */
	.hero-nav-icon:hover,
	.hero-nav-icon:active {
		transform: none !important;
	}

	.hero-nav-circle {
		transition: border-color 0.15s ease, background 0.15s ease !important;
	}

	/* Accordion — Bootstrap adds a transition on collapse height */
	.accordion-collapse {
		transition: none !important;
	}

	/* Salary timeline rows — no transition needed (bg only) */
	.salary-timeline .timeline-item {
		transition: none !important;
	}

	/* Training CTA — remove scale on active */
	.training-cta:active {
		transform: none !important;
	}

	/* Fact cards — active press */
	.fact-card:active {
		transform: none !important;
	}

	/* Remove hover lift on Apply button — keep color change */
	.bya-cta__btn,
	.bya-cta__btn:hover,
	.bya-cta__btn:active,
	.before-you-apply-section--trooper .bya-cta__btn:hover,
	.before-you-apply-section--cve .bya-cta__btn:hover,
	.before-you-apply-section--capitol .bya-cta__btn:hover,
	.before-you-apply-section--dispatcher .bya-cta__btn:hover {
		transform: none !important;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
		/* Color transitions remain — only motion is removed.
           A user who needs reduced motion still gets visual
           feedback that the button state changed. */
	}

	/* Remove hover lift on cards — keep box-shadow and border changes */
	a.bya-card:hover,
	a.bya-card:active {
		transform: none !important;
	}

	a.bya-card {
		transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
	}
}

/* ============================================================
   GLOBAL FOCUS + ACTIVE STATES — WCAG 2.2 AA
   Covers every interactive element in careers.css that
   was missing :focus-visible and/or :active.

   Rules applied consistently:
   - :focus-visible only (not :focus) so mouse users are
     unaffected — only keyboard/AT users see the ring
   - outline-offset creates breathing room between the
     element edge and the ring
   - :active gives physical press feedback on all devices
   - Dark bg elements: white or accent outline
   - Light bg elements (BYA): dark outline
   ============================================================ */


/* ── SECTION NAV LINKS ── */
.career-section-nav__link:focus-visible {
	outline: 2px solid #FFF;
	outline-offset: -2px; /* inset so it sits inside the nav bar */
	border-radius: 1px;
}

.career-section-nav__link:active {
	color: #FFF;
	opacity: 0.75;
}


/* ── HIVE CELLS (career path grid) ── */
/*
  Hive cells are <a> or <button> tags with a clip-path shape.
  outline follows the bounding box, not the hex shape.
  box-shadow is clipped too. Best option: use outline with
  a visible offset so it appears around the bounding box —
  still clearly communicates which cell has focus.
*/
.hive-cell:focus-visible {
	outline: 3px solid var(--dps-orange);
	outline-offset: 4px;
}

.hive-cell:active .hive-shape {
	transform: scale(0.97); /* press down, mirror the hover scale */
}


/* ── HIVE SCROLL HINT ── */
.hive-scroll:focus-visible {
	outline: 2px solid var(--dps-orange);
	outline-offset: 4px;
}


/* ── HERO BOTTOM NAV ICONS ── */
/*
  Focus targets the icon wrapper; we style the circle
  inside it so the visible indicator matches the hover style.
  The wrapper itself gets outline:none to avoid a double ring.
*/
.hero-nav-icon:focus-visible {
	outline: none;
}

.hero-nav-icon:focus-visible .hero-nav-circle {
	border-color: #FFF;
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* CTA circle — use division accent on focus */
.hero-nav-icon--cta:focus-visible .hero-nav-circle {
	box-shadow: 0 0 0 3px var(--dps-orange);
}

[data-theme="cve"] .hero-nav-icon--cta:focus-visible .hero-nav-circle {
	box-shadow: 0 0 0 3px var(--dps-yellow);
}

[data-theme="capitol"] .hero-nav-icon--cta:focus-visible .hero-nav-circle {
	box-shadow: 0 0 0 3px var(--dps-grey);
}

.hero-nav-icon:active {
	transform: translateY(-1px); /* subtle — less than hover's -3px */
	opacity: 0.85;
}


/* ── FACT CARDS ── */
.fact-card:focus-visible {
	outline: 3px solid #FFF;
	outline-offset: 3px;
}

.fact-card:active {
	transform: translateY(-2px); /* less than hover's -4px */
	transition: transform 0.08s ease;
}


/* ── ACCORDION BUTTONS ── */
/*
  Bootstrap overrides accordion focus with box-shadow.
  We nullify Bootstrap's shadow and replace with our own.
*/
.accordion-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--dps-blue) !important;
}

.accordion-btn:active {
	opacity: 0.75;
}


/* ── SALARY TIMELINE ROWS ── */
/*
  Timeline items aren't always interactive — only add
  focus if they're wrapped in <a> or have tabindex.
  These rules are safe to include preemptively.
*/
.salary-timeline .timeline-item:focus-visible {
	outline: 2px solid var(--dps-orange);
	outline-offset: -2px;
}

.salary-timeline--cve .timeline-item:focus-visible {
	outline-color: var(--dps-yellow);
}

.salary-timeline--capitol .timeline-item:focus-visible {
	outline-color: var(--dps-grey);
}

.salary-timeline--dispatcher .timeline-item:focus-visible {
	outline-color: var(--dps-orange);
}

.salary-timeline .timeline-item:active {
	background: rgba(255, 255, 255, 0.07);
}


/* ── TRAINING CTA BUTTON ── */
.training-cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	/* currentColor = whatever the division sets — works for
       default white, CVE yellow, and Capitol grey automatically */
}

.training-cta:active {
	opacity: 0.8;
	transform: scale(0.98);
}

/* Cards — keyboard focus */
a.bya-card:focus-visible {
	outline: none !important; /* suppress default */
	box-shadow: 0 0 0 3px var(--dps-blue), 0 0 0 5px #F4F3F0 !important; /* gap between card edge and ring */
}

/* Per-division card focus ring color */
.before-you-apply-section--cve a.bya-card:focus-visible {
	box-shadow: 0 0 0 3px #111, 0 0 0 5px #F4F3F0 !important;
}
										
.before-you-apply-section--capitol a.bya-card:focus-visible {
	box-shadow: 0 0 0 3px var(--dps-navy), 0 0 0 5px #F4F3F0 !important;
}

.before-you-apply-section--dispatcher a.bya-card:focus-visible {
	box-shadow: 0 0 0 3px var(--dps-orange), 0 0 0 5px #F4F3F0 !important;
}

/* Apply button — keyboard focus */
.bya-cta__btn:focus-visible {
	outline: 3px solid currentColor !important;
	outline-offset: 4px !important;
	/* currentColor = division accent already set on the button,
       so this works for all four divisions with one rule */
}

/* Active press state — button physically depresses */
.bya-cta__btn:active {
	transform: translateY(1px) !important; /* press down, not snap to zero */
	opacity: 0.88;
}

/* Card active press */
a.bya-card:active {
	transform: translateY(-2px) scale(0.99) !important;
	transition: transform 0.08s ease !important;
}

	
/* ============================================================================
   RESPONSIVE — MOBILE FIRST
   Organized by breakpoint (small to large).
   Only careers.css classes live here — no design-v2 or dps classes.
   
   Breakpoints:
   xs  <  480px   (small phones — e.g. iPhone SE)
   sm  <  576px   (standard phones)
   md  <  768px   (large phones / small tablets — video hide threshold)
   lg  < 1024px   (tablets)
   ============================================================================ */
/* ── xxs: max-width 375px (iPhone SE, Mini) ── */
@media (max-width: 375px) {

	/* === HIVE HERO === */
	.hive-cell {
		width: 88px;
		height: 102px;
	}

	.hive-logo {
		width: 56px;
		max-height: 62px;
	}

	.hive-row {
		gap: 6px;
		margin-top: -26px;
	}

	.hive-row--offset {
		transform: translateX(0px);
	}

	.hive-name {
		font-size: 0.45rem;
		padding: 0.2rem 0.15rem;
		border-top-width: 1px;
	}

	.hive-eyebrow {
		font-size: 0.55rem;
	}

	.hive-title {
		font-size: clamp(1.2rem, 8vw, 1.6rem);
	}

	.careers-hive {
		padding: 4rem 0 1.5rem;
		min-height: 100svh;
	}
}


/* ── xs: max-width 479px ── */
@media (max-width: 479px) {
	/* Hive Hero */
	.hive-cell {
		width: 118px;
		height: 136px;
	}

	.hive-logo {
		width: 76px;
		max-height: 84px;
	}

	.hive-row {
		gap: 10px;
		margin-top: -36px;
	}

	.hive-row--offset {
		transform: translateX(0px);
	}

	.hive-name {
		font-size: 0.58rem;
		padding: 0.35rem 0.25rem;
		border-top-width: 2px;
	}

	.hive-title {
		font-size: clamp(1.6rem, 9vw, 2.5rem);
	}

	.hive-sub {
		font-size: 0.85rem;
		padding: 0 1rem;
	}

	.careers-hive {
		padding: 5rem 0 2rem;
		min-height: 100svh;
	}

	.careers-hive__content {
		max-width: 100%;
		padding: 0;
	}

	/* Hero — tightest screens */
	.career-hero {
		min-height: 100svh;
	}

	.hero-content--left {
		padding: 1rem 1rem 7rem;
	}

	.hero-title {
		font-size: clamp(1.75rem, 13vw, 3rem);
		letter-spacing: 0.01em !important;
		line-height: 0.9;
	}

	.hero-lockup-badge {
		width: 36px;
		height: 36px;
	}

	.hero-lockup-division {
		font-size: 0.68rem;
	}

	.hero-bottom-nav {
		gap: 1.5rem;
		bottom: 1.25rem;
	}

	.hero-nav-label {
		font-size: 0.52rem;
	}

	/* Quick Facts — tighter padding on tiny screens */
	.fact-card {
		padding: 1rem 0.85rem;
	}

	.fact-value {
		font-size: 1rem;
	}

	.fact-icon {
		font-size: 1rem;
		margin-bottom: 0.4rem;
	}

	/* Salary — stack on tiny screens */
	.timeline-rank-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}

	.timeline-salary {
		font-size: 1.15rem;
		text-align: left;
	}

	.timeline-salary--incentive {
		font-size: 1.25rem;
	}

	/* Section headings */
	.section-heading--xl {
		font-size: clamp(2.25rem, 11vw, 3.5rem);
	}

	.section-heading {
		font-size: clamp(1.6rem, 7vw, 2.25rem);
	}

	/* bya btns */
	.bya-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.bya-cta__btn-recruiter {
		text-align: center;
		justify-content: center;
	}
}

/* ── Training stats — all phones < 576px ── */
@media (max-width: 575.98px) {

	.training-stat-dots {
		display: none;
	}

	.training-stat {
		flex-wrap: wrap;
		gap: 0.25rem;
		padding: 0.85rem 0;
	}

	.training-stat-label {
		min-width: unset;
		width: 100%;
		font-size: 0.78rem;
		letter-spacing: 0.10em;
	}

	.training-stat-value {
		text-align: left;
		white-space: normal; /* allow long values to wrap */
		word-break: break-word;
		font-size: 0.92rem;
	}

	.training-section {
		padding: 3rem 1rem;
	}

	.training-desc {
		max-width: 100%;
		font-size: 0.90rem;
	}

	.training-heading {
		font-size: clamp(1.4rem, 6vw, 2rem);
	}
}

/* ── sm: max-width 575px ── */
@media (min-width: 480px) and (max-width: 575.98px) {

	/* justify-content: center + overflow-x: auto clips left side on mobile.
       Switch to flex-start so all tabs are reachable by scrolling. */
	.career-section-nav__list {
		justify-content: flex-start;
		padding-left: 1rem; /* small left indent so first tab isn't flush against edge */
	}
	
	.hive-cell {
		width: 118px;
		height: 136px;
	}

	.hive-logo {
		width: 76px;
		max-height: 84px;
	}

	.hive-row {
		gap: 10px;
		margin-top: -36px;
	}

	.hive-row--offset {
		transform: translateX(0px);
	}

	.hive-name {
		font-size: 0.58rem;
		padding: 0.35rem 0.25rem;
		border-top-width: 2px;
	}

	.hive-title {
		font-size: clamp(1.6rem, 9vw, 2.5rem);
	}

	.hive-sub {
		font-size: 0.85rem;
		padding: 0 1rem;
	}

	.careers-hive {
		padding: 5rem 0 2rem;
		min-height: 100svh;
	}

	.careers-hive__content {
		max-width: 100%;
		padding: 0;
	}

	/* Hero */
	.hero-content--left {
		padding: 1.25rem 1.25rem 7rem;
	}

	.hero-title {
		font-size: clamp(2.75rem, 14vw, 4rem);
		line-height: 0.9;
	}

	.hero-lockup-badge {
		width: 40px;
		height: 40px;
	}

	.hero-bottom-nav {
		gap: 1.75rem;
		bottom: 1.5rem;
	}

	.hero-nav-label {
		font-size: 0.55rem;
	}

	/* Quick Facts */
	.fact-card {
		padding: 1.25rem 1rem;
	}

	.fact-value {
		font-size: 1.05rem;
	}

	.fact-icon {
		font-size: 1.4rem;
		margin-bottom: 0.5rem;
	}

	/* Salary — stack rank/salary */
	.timeline-rank-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.timeline-salary {
		font-size: 1.2rem;
		text-align: left;
	}

	.timeline-salary--incentive {
		font-size: 1.3rem;
	}

	.salary-timeline {
		margin-left: 0;
		margin-right: 0;
	}

	/* Why / Day-in-Life video sections */
	.video-embed-wrap {
		margin-top: 1.5rem;
	}

	.duties-slide-placeholder {
		height: 260px;
	}

	.why-section,
	.duties-section {
		padding: 3rem 1rem;
	}

	/* Requirements */
	.requirements-section {
		padding: 4rem 1rem;
	}

	.accordion-btn {
		font-size: 0.78rem;
		padding: 1.2rem 0;
	}

	.req-list li {
		font-size: 0.9rem;
	}

	/* Section headings */
	.section-heading--xl {
		font-size: clamp(2.5rem, 12vw, 4rem);
	}

	.section-heading {
		font-size: clamp(1.75rem, 7vw, 2.5rem);
	}

	.section-subtext {
		font-size: 0.92rem;
	}
}

/* ── MOBILE ── */
@media (min-width: 576px) and (max-width: 768px) {

	.career-section-nav {
		scrollbar-width: none;
	}

	.career-section-nav::-webkit-scrollbar {
		display: none;
	}

	.career-section-nav__link {
		padding: 0.65rem 0.85rem;
		font-size: 0.78rem;
	}

	/* Hive Hero */
	.careers-hive {
		padding: 5rem 0.5rem 2rem;
		min-height: 100svh;
	}

	.hive-title {
		font-size: clamp(1.8rem, 8vw, 3rem);
	}

	.hive-sub {
		font-size: 0.9rem;
		padding: 0 1rem;
	}

	.hive-row {
		gap: 12px;
		margin-top: -40px;
	}

	.hive-cell {
		width: 150px;
		height: 173px; /* 150 * 1.1547 */
	}

	.hive-logo {
		width: 95px;
		max-height: 105px;
	}

	.hive-row--offset {
		transform: translateX(0px); /* (150/2) + (12/2) */
	}

	.hive-name {
		font-size: 0.65rem;
		padding: 0.4rem 0.3rem;
	}

	/* Hero badge slightly smaller */
	.hero-lockup-badge {
		width: 44px;
		height: 44px;
	}

	/* Hero bottom nav gap */
	.hero-bottom-nav {
		gap: 2rem;
	}

	/* Training — collapse dotted connector lines */
	.training-stat-dots {
		display: none;
	}

	.training-stat {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.training-stat-label {
		min-width: unset;
		width: 100%;
	}

	.training-stat-value {
		text-align: left;
	}

	/* Training section padding */
	.training-section {
		padding: 3.5rem 1rem;
	}

	/* Quickfacts section padding */
	.quickfacts-section {
		padding: 3.5rem 0;
	}

	/* Salary section padding */
	.salary-section {
		padding: 3rem 0;
	}

	/* Why / duties sections */
	.why-section,
	.duties-section {
		padding: 3.5rem 0;
	}
}

/* ── lg: max-width 1023px (tablets) ── */
@media (max-width: 1023.98px) {
	/* Hero — center left-anchored content on tablet */
	.hero-content--left .container .row > [class*="col-"] {
		text-align: center;
	}

	.hero-lockup {
		justify-content: center;
	}

	.hero-accent-line {
		margin-left: auto;
		margin-right: auto;
	}

	.hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	/* Salary timeline — full width on tablet */
	.salary-timeline {
		max-width: 100%;
	}

	/* Training label min-width — relax on tablet */
	.training-stat-label {
		min-width: 160px;
	}
}