/* ---------- Hero ---------- */
@keyframes livePulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}

.pg-wp-hero {
	background: radial-gradient(130% 120% at 84% -10%, #16294C 0%, #0E1B3A 42%, #0A1430 100%);
	border-bottom: 1px solid #0A1430;
	color: #fff;
}

.pg-wp-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 64px 80px;
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: 60px;
	align-items: center;
}

/* Matches .pg-lead-eyebrow-pill's styling exactly (leadership-page.css), which itself matches
   .pg-home-hero-kicker white — a plain label, no pill/background/border/padding. */
.pg-wp-hero-kicker {
	font: 700 12.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #fff;
	margin-bottom: 24px;
}

.pg-wp-hero h1 {
	font: 700 54px/1.05 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.025em;
	margin: 0 0 26px !important;
	max-width: 620px;
	color: #fff !important;
}

.pg-wp-hero h1 span { color: #FF6477; }

.pg-wp-hero-left p {
	font: 400 18px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #B8C0D2 !important;
	max-width: 560px;
	margin: 0 0 38px !important;
	text-wrap: pretty;
}

.pg-wp-hero-left p strong { color: #fff; font-weight: 700; }

.pg-wp-hero-ctas {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 42px;
}

.pg-wp-hero-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	background: #CB0E2A;
	color: #fff;
	padding: 17px 30px;
	border-radius: 4px;
	font: 700 15.5px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(203,14,42,.32);
	transition: transform .16s ease, box-shadow .16s ease;
}

.pg-wp-hero-cta-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(203,14,42,.4);
}

.pg-wp-hero-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	color: #fff;
	padding: 17px 24px;
	border-radius: 4px;
	border: 1px solid rgba(255,255,255,.22);
	font: 600 15px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	background: transparent;
	transition: border-color .16s ease;
}

.pg-wp-hero-cta-secondary:hover { border-color: #fff; }

.pg-wp-hero-meta {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	font: 500 13px/1.5 'Hanken Grotesk', sans-serif;
	color: #fff;
}

.pg-wp-hero-meta .strong { color: #fff; font-weight: 700; }

.pg-wp-hero-meta .dot {
	width: 4px;
	height: 4px;
	background: #CB0E2A;
	border-radius: 50%;
}

.pg-wp-hero-panel {
	background: #0C1A3A;
	border-radius: 3px;
	padding: 32px;
	box-shadow: 0 30px 70px rgba(14,16,22,.28);
	position: relative;
}

.pg-wp-hero-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
	font: 500 12.5px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .12em;
	color: #C2C8D4;
}

.pg-wp-hero-panel-main {
	background: linear-gradient(135deg, #14B981 0%, #0E9468 100%);
	border-radius: 3px;
	padding: 24px 26px;
	margin-bottom: 14px;
}

.pg-wp-hero-panel-main .label {
	font: 500 12.5px/1 'Hanken Grotesk', sans-serif;
	color: #CFF3E5;
	margin-bottom: 10px;
}

.pg-wp-hero-panel-main .value {
	font: 700 52px/0.9 'Bricolage Grotesque', sans-serif;
	color: #fff;
	letter-spacing: -0.02em;
}

.pg-wp-hero-panel-main .value-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.pg-wp-hero-panel-main .bars {
	display: flex;
	gap: 4px;
	align-items: flex-end;
	height: 42px;
}

.pg-wp-hero-panel-main .bars span {
	width: 7px;
	border-radius: 2px;
}

.pg-wp-hero-panel-main .bars span:nth-child(1) { height: 60%; background: rgba(255,255,255,.45); }
.pg-wp-hero-panel-main .bars span:nth-child(2) { height: 74%; background: rgba(255,255,255,.6); }
.pg-wp-hero-panel-main .bars span:nth-child(3) { height: 88%; background: rgba(255,255,255,.78); }
.pg-wp-hero-panel-main .bars span:nth-child(4) { height: 100%; background: #fff; }

.pg-wp-hero-panel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.pg-wp-hero-panel-grid > div {
	background: #15294F;
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 3px;
	padding: 18px;
}

.pg-wp-hero-panel-grid .label {
	font: 500 11px/1.3 'Hanken Grotesk', sans-serif;
	color: #C2C8D4;
	margin-bottom: 10px;
}

.pg-wp-hero-panel-grid .value {
	font: 700 32px/0.9 'Bricolage Grotesque', sans-serif;
}

.pg-wp-hero-panel-grid .value.teal { color: #46C2A8; }
.pg-wp-hero-panel-grid .value.blue { color: #4FA3FF; }

/* ---------- Library grid ---------- */
.pg-wp-library {
	background: #fff;
	border-top: 1px solid #ECEEF2;
}

.pg-wp-library-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 64px;
}

.pg-wp-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.pg-wp-card {
	text-decoration: none;
	background: #0C1A3A;
	border-radius: 3px;
	padding: 20px 20px 18px;
	display: flex;
	flex-direction: column;
	min-height: 158px;
	transition: transform .18s ease, box-shadow .18s ease;
}

a.pg-wp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(12,26,58,.28);
}

a.pg-wp-card.is-crimson:hover {
	box-shadow: 0 14px 32px rgba(142,16,36,.28);
}

.pg-wp-card .eyebrow {
	font: 700 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .12em;
	color: #8FC4FF;
}

.pg-wp-card.is-crimson .eyebrow { color: #FFC2CC; }

.pg-wp-card .title {
	font: 700 16.5px/1.3 'Bricolage Grotesque', sans-serif;
	color: #fff;
	margin: 10px 0 6px;
}

.pg-wp-card .desc {
	font: 400 12px/1.5 'Hanken Grotesk', sans-serif;
	color: #8FA0BE;
	flex: 1;
}

.pg-wp-card.is-crimson .desc { color: #E3A6B0; }

.pg-wp-card .cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 11.5px/1 'Hanken Grotesk', sans-serif;
	color: #FF6477;
	margin-top: 12px;
}

.pg-wp-card.is-crimson .cta { color: #8FC4FF; }

.pg-wp-card.is-soon {
	cursor: default;
	opacity: .55;
}

.pg-wp-card.is-soon:hover {
	transform: none;
	box-shadow: none;
}

.pg-wp-card .cta.soon {
	color: #C2C8D4;
	background: rgba(255,255,255,.08);
	padding: 4px 9px;
	border-radius: 4px;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	align-self: flex-start;
	margin-top: 12px;
}

@media (max-width: 1100px) {
	.pg-wp-hero-inner { grid-template-columns: 1fr; }
	.pg-wp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.pg-wp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.pg-wp-grid { grid-template-columns: 1fr; }
}

/* ---------- Mobile-only section padding ----------
   600px matches this file's own existing smallest tier above, intentionally narrower than the
   900-1100px tablet-collapse tiers, so this never fires on tablets or larger. .pg-wp-hero-inner gets
   the full padding swap to 40px/30px per instruction. .pg-wp-library-inner keeps its own tuned
   vertical rhythm and only gets the horizontal fix, so its left/right edge still lines up with the
   hero. !important guards against inline per-section padding. */
@media (max-width: 600px) {
	.pg-wp-hero-inner { padding: 40px 30px !important; }
	.pg-wp-library-inner {
		padding: 30px 30px !important;
	}
}