/* ---------- Shared section eyebrow (numbered) ---------- */
.pg-home-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.pg-home-eyebrow .n {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	background: #CB0E2A;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	font: 800 13px/1 'Hanken Grotesk', sans-serif;
}

.pg-home-eyebrow .t {
	font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #0C1A3A;
}

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

/* ---------- Adjacent-white-section spacing (same fix as industry-page.css / service-page.css) ----------
   When two plain-white sections stack directly on top of each other with no tint/dark background
   between them, the combined 80px+80px padding reads as too big a gap. Mark each white section
   (the outer <section class="pg-home-XXX">) with this class; when two+ land back to back, halve
   the shared gap at each internal boundary. */
.pg-home-section-white-wrap + .pg-home-section-white-wrap .pg-home-section-inner { padding-top: 40px; }
.pg-home-section-white-wrap:has(+ .pg-home-section-white-wrap) .pg-home-section-inner { padding-bottom: 40px; }

/* Outer full-bleed wrapper for dark sections — same pattern as industry/service pages' -dark-wrap. */
.pg-home-section-dark-wrap { background: #0C1A3A; color: #D4D8E2; }

/* ---------- Hero ---------- */
.pg-home-hero {
	background: linear-gradient(150deg, #15294F 0%, #0C1A3A 68%);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.pg-home-hero-glow {
	position: absolute;
	right: -160px;
	top: -160px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(255,100,119,.14), transparent 70%);
	pointer-events: none;
}

.pg-home-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 96px 64px 72px;
	position: relative;
}

.pg-home-hero-kicker {
	font: 700 12.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #FF6477;
	margin-bottom: 24px;
}

/* Aug-6 hero redesign: 2-col grid (content / photo rail), per the V2 source.
   Aug-7: rail widens to 440px and the columns stretch — the rail now carries the
   "5 – 500+ FTEs" pill as its own full-width row and has to match the content
   column's height for the two to bottom-align. */
.pg-home-hero-grid {
	display: grid;
	grid-template-columns: 1fr 440px;
	gap: 56px;
	align-items: stretch;
}

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

.pg-home-hero h1 .accent { color: #FF6477; }

.pg-home-hero-lede {
	font: 400 20px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #B8C0D2 !important;
	max-width: 620px;
	margin: 0 0 38px !important;
	text-wrap: pretty;
}

.pg-home-hero-lede strong { color: #fff; font-weight: 700; }

.pg-home-hero-trust {
	display: flex;
	align-items: center;
	gap: 10px 22px;
	flex-wrap: wrap;
	margin-bottom: 38px;
	font: 600 13px/1.5 'Hanken Grotesk', sans-serif;
	color: #B8C0D2;
}

.pg-home-hero-trust a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #DDE3EE;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.25);
}

.pg-home-hero-trust a .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #FF6477;
	flex-shrink: 0;
}

.pg-home-hero-ctas {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	/* Aug-6: CTA row lost its bottom margin — the press strip below the hero
	   grid now carries the 52px gap as margin-top instead. */
	margin-bottom: 0;
}

.pg-home-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #CB0E2A;
	color: #fff;
	padding: 17px 30px;
	border-radius: 4px;
	font: 700 15px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(203,14,42,.38);
	transition: transform .16s ease;
}

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

.pg-home-btn-outline-light {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255,255,255,.28);
	color: #fff;
	padding: 16px 28px;
	border-radius: 4px;
	font: 700 15px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	transition: background .16s ease;
}

.pg-home-btn-outline-light:hover { background: rgba(255,255,255,.08); }

.pg-home-hero-pill {
	display: inline-flex;
	align-items: center;
	background: #fff;
	color: #0C1A3A;
	padding: 17px 24px;
	border-radius: 4px;
	font: 700 15px/1 'Hanken Grotesk', sans-serif;
}

/* Aug-7: the pill moved out of the CTA row and became the rail's bottom row.
   Aug-11: the rail's rows are no longer stretched, so the pill needs its own
   22px gap above rather than inheriting one from a 1fr row's leftover space. */
.pg-home-hero-photos .pg-home-hero-pill {
	grid-column: 1 / -1;
	margin-top: 22px;
	display: flex;
	justify-content: center;
	white-space: nowrap;
}

/* Aug-6 hero photo rail: John (CEO) + Ralf (CSO) cards.
   Aug-7: Ralf's 24px offset is gone, the cards are equal-height 300px frames
   filled by absolutely-positioned images, and the rail gains a third auto row
   for the pill. */
/* Aug-11: rows go auto/auto with align-content:start so the cards keep their own
   300px height instead of stretching to fill the hero column, and the rail drops
   from 41px to 97px so the shorter stack still baselines against the hero copy. */
.pg-home-hero-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	align-content: start;
	gap: 16px;
	margin-top: 97px;
}

.pg-home-hero-photo-card {
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(8,12,28,.42);
	border: 1px solid rgba(255,255,255,.1);
	height: 300px;
	min-height: 0;
}

.pg-home-hero-photo-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pg-home-hero-photo-card.john img { object-position: calc(50% - 23px) 22%; }
.pg-home-hero-photo-card.ralf img { object-position: 50% 18%; }

.pg-home-hero-photo-card .scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,20,48,0) 38%, rgba(8,12,28,.92) 100%);
}

.pg-home-hero-photo-card .cap {
	position: absolute;
	left: 16px;
	bottom: 14px;
	right: 16px;
}

.pg-home-hero-photo-card .cap .name {
	font: 700 16px/1.1 'Bricolage Grotesque', sans-serif;
	color: #fff;
}

.pg-home-hero-photo-card .cap .role {
	font: 600 11.5px/1.2 'Hanken Grotesk', sans-serif;
	letter-spacing: .08em;
	color: #FF6477;
	margin-top: 4px;
}

.pg-home-hero-photo-card.ralf .cap .role { color: #7FB2FF; }

.pg-home-hero-press {
	/* Aug-7: 52px → 33px (the rail's own 41px top margin absorbs the rest). */
	margin-top: 33px;
	padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.12);
}

.pg-home-hero-press-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.pg-home-hero-press-head .lbl {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #DDE3EE;
}

.pg-home-hero-press-head .lbl b {
	background: #CB0E2A;
	color: #fff;
	border-radius: 3px;
	padding: 5px 9px;
	font: 700 11.5px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .08em;
}

.pg-home-press-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Aug-12 "last minute" drop: a hair more breathing room between wrapped
	   masthead rows (master: calc(12px + 1mm)). */
	row-gap: calc(12px + 1mm);
}

.pg-home-press-logos span {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font: 700 16px/1 'Bricolage Grotesque', sans-serif;
	color: #DDE3EE;
}

.pg-home-press-logos span::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #CB0E2A;
	margin: 0 18px;
}

.pg-home-press-logos span:last-child::after { display: none; }

/*
 * Each masthead links out to that publication's most recent PITON feature (the
 * same article the Media & Press archive lists). The anchor wraps only the
 * TEXT, not the span — the "•" separator is the span's ::after, and pulling it
 * inside the link would make the dot plus its 36px of margin a clickable dead
 * zone between every pair of logos.
 */
.pg-home-press-logos span a {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.pg-home-press-logos span a:hover,
.pg-home-press-logos span a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.pg-home-hero-press-more { margin-top: 24px; }

/* ---------- Client strip ---------- */
.pg-home-clients {
	background: #F7F8FA;
	border-bottom: 1px solid #EEF0F4;
}

.pg-home-clients-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 44px 64px 48px;
	text-align: center;
}

.pg-home-clients-label {
	font: 700 13px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .16em;
	color: #4D5260;
	margin-bottom: 30px;
}

.pg-home-clients-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
	flex-wrap: nowrap;
}

.pg-home-clients-logos img { width: auto; }

/* 2-up logo slider on small screens — DOM built/torn down by home-clients-slider.js
   at the same 900px breakpoint; desktop keeps the static row above. */
@media (max-width: 900px) {
	.pg-home-clients-viewport { overflow: hidden; }
	.pg-home-clients-logos.is-slider {
		justify-content: flex-start;
		gap: 0;
		will-change: transform;
	}
	.pg-home-clients-slide {
		flex: 0 0 50%;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 12px;
		box-sizing: border-box;
	}
	.pg-home-clients-slide img { max-width: 100%; }
}

.pg-home-clients-inner .pg-home-btn-primary {
	margin-top: 44px;
	box-shadow: 0 10px 26px rgba(203,14,42,.28);
	padding: 15px 26px;
	font-size: 14px;
}

/* ---------- Executive brief ---------- */
.pg-home-brief {
	background: #fff;
}

.pg-home-brief-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 56px;
	align-items: start;
}

.pg-home-brief h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 22px !important;
}

.pg-home-brief p {
	font: 400 18px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	margin: 0 0 16px !important;
	text-wrap: pretty;
}

.pg-home-brief p a { color: #CB0E2A; font-weight: 600; }

.pg-home-timeline-wrap {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid #ECEEF2;
}

.pg-home-timeline-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.pg-home-timeline-head .k {
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #CB0E2A;
}

.pg-home-timeline-head .r {
	font: 600 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .1em;
	color: #9097A4;
}

.pg-home-timeline-wrap h3 {
	font: 700 22px/1.2 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.015em;
	color: #14161E !important;
	margin: 0 0 18px !important;
}

.pg-home-timeline {
	position: relative;
}

.pg-home-timeline::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 3px;
	height: 2px;
	background: #ECEEF2;
}

.pg-home-timeline-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.pg-home-timeline-track .dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0C1A3A;
	box-shadow: 0 0 0 3px #fff;
}

.pg-home-timeline-track .dot.accent { background: #CB0E2A; }

.pg-home-timeline-track .yr {
	font: 700 15px/1 'Hanken Grotesk', sans-serif;
	color: #14161E;
	margin: 10px 0 4px;
}

.pg-home-timeline-track .yr.accent { color: #CB0E2A; }

.pg-home-timeline-track .yr span {
	font: 600 13px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .1em;
	color: #9097A4;
}

.pg-home-timeline-track .yr span.accent { color: #CB0E2A; }

.pg-home-timeline-track .desc {
	font: 500 15px/1.45 'Hanken Grotesk', sans-serif;
	color: #646B7B;
	text-wrap: pretty;
}

.pg-home-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.pg-home-stat-card {
	border-radius: 3px;
	padding: 22px 24px;
}

.pg-home-stat-card.navy { background: #0C1A3A; }
.pg-home-stat-card.grey { background: #F2F5FA; border: 1px solid #E0E7F1; }
.pg-home-stat-card.red { background: #FBEEF0; border: 1px solid #F3DCE0; }

.pg-home-stat-card .v {
	font: 800 32px/1 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.02em;
}

.pg-home-stat-card.navy .v { color: #fff; }
.pg-home-stat-card.grey .v { color: #14161E; }
.pg-home-stat-card.red .v { color: #CB0E2A; }

.pg-home-stat-card .k {
	font: 500 12.5px/1.4 'Hanken Grotesk', sans-serif;
	margin-top: 7px;
}

.pg-home-stat-card.navy .k { color: #B8C0D2; }
.pg-home-stat-card.grey .k,
.pg-home-stat-card.red .k { color: #646B7B; }

.pg-home-ceo-card {
	grid-column: 1 / -1;
	background: linear-gradient(150deg, #15294F 0%, #0C1A3A 68%);
	border-radius: 3px;
	padding: 26px 28px;
	color: #fff;
}

.pg-home-ceo-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.pg-home-ceo-head img {
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
	border: 2px solid rgba(255,255,255,.25);
}

.pg-home-ceo-head .name {
	font: 700 18px/1.3 'Bricolage Grotesque', sans-serif;
}

.pg-home-ceo-head .role {
	font: 600 12.5px/1.4 'Hanken Grotesk', sans-serif;
	color: #FF6477;
}

.pg-home-ceo-head a.tel {
	font: 600 13px/1.4 'Hanken Grotesk', sans-serif;
	color: #DDE3EE;
	text-decoration: none;
	display: inline-block;
	margin-top: 3px;
}

.pg-home-ceo-card .quote {
	font: 700 20px/1.35 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
	text-wrap: pretty;
}

.pg-home-ceo-card .desc {
	font: 400 14px/1.6 'Hanken Grotesk', sans-serif;
	color: #B8C0D2;
	margin-bottom: 18px;
	text-wrap: pretty;
}

.pg-home-ceo-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.pg-home-ceo-actions .pg-home-btn-primary {
	padding: 13px 20px;
	font-size: 13.5px;
	box-shadow: none;
}

.pg-home-ceo-actions a.email {
	font: 600 13px/1 'Hanken Grotesk', sans-serif;
	color: #DDE3EE;
	text-decoration: none;
}

/* ---------- The Selection Problem (Aug-6, section 02) ----------
   Dark navy gradient section between Executive Brief and the 7-Step Framework.
   Dot matrix is static server-side HTML (1,000 <i> spans; .f = one of the 23
   highlighted best-fit providers, .f.p = the chosen partner with a CSS pulse) —
   ported from the V2 source's buildDots() so no JS init is needed. */
.pg-home-selection {
	background: linear-gradient(150deg, #15294F 0%, #0C1A3A 70%);
	color: #fff;
}

.pg-home-selection-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 64px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: start;
}

/* Eyebrow label sits on navy here — the shared .t color (#0C1A3A) would vanish. */
.pg-home-selection .pg-home-eyebrow .t { color: #fff; }

.pg-home-selection h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 22px !important;
	color: #fff !important;
}

.pg-home-selection h2 .accent { color: #FF6477; }

.pg-home-selection-left > p {
	font: 400 17.5px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #fff !important;
	margin: 0 0 16px !important;
	text-wrap: pretty;
}

/* Full-width row beneath both columns (Aug-10 handoff moved it out of the left
   column, so the rule the pills sat under — a divider inside the copy — is gone). */
.pg-home-selection-match {
	grid-column: 1 / -1;
	margin-top: -8px;
}

.pg-home-selection-match .lbl {
	font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: rgba(255,255,255,.8);
	margin-bottom: 14px;
}

.pg-home-selection-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Aug-11: the vetting-criteria pills go from ghost-outline to the solid brand
   gradient — they read as the section's payload, not as muted chrome. */
.pg-home-selection-pills span {
	font: 600 13px/1 'Hanken Grotesk', sans-serif;
	color: #fff;
	background: linear-gradient(90deg, #CB0E2A, #E11D33);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 999px;
	padding: 9px 15px;
}

.pg-home-selection-card {
	background: rgba(255,255,255,.045);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 4px;
	padding: 28px 30px;
}

.pg-home-selection-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 6px;
}

.pg-home-selection-card-head .big {
	font: 800 40px/1 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.025em;
	color: #fff;
}

.pg-home-selection-card-head .lbl {
	font: 600 11px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .12em;
	color: rgba(255,255,255,.8);
	text-align: right;
}

.pg-home-selection-card > .desc {
	font: 500 13.5px/1.5 'Hanken Grotesk', sans-serif;
	color: rgba(255,255,255,.8);
	margin-bottom: 22px;
	text-wrap: pretty;
}

.pg-home-selection-dots {
	display: grid;
	grid-template-columns: repeat(50, 1fr);
	gap: 3px;
}

.pg-home-selection-dots i {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
}

.pg-home-selection-dots i.f { background: #fff; }

.pg-home-selection-dots i.p {
	transform: scale(1.45);
	animation: pgHomeDotPulse 2.4s ease-in-out infinite;
	position: relative;
	z-index: 1;
}

@keyframes pgHomeDotPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.85); }
	50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
}

@media (prefers-reduced-motion: reduce) {
	.pg-home-selection-dots i.p { animation: none; }
}

.pg-home-selection-legend {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.12);
	display: grid;
	gap: 14px;
}

.pg-home-selection-legend .row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pg-home-selection-legend .dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.pg-home-selection-legend .dot.dim { background: rgba(255,255,255,.45); }
.pg-home-selection-legend .dot.fit { background: #fff; }
.pg-home-selection-legend .dot.one { background: #fff; box-shadow: 0 0 0 2px #fff; }

.pg-home-selection-legend .num {
	flex-shrink: 0;
	width: 64px;
	font: 700 15px/1 'Hanken Grotesk', sans-serif;
	color: #fff;
}

.pg-home-selection-legend .txt {
	font: 500 13.5px/1.45 'Hanken Grotesk', sans-serif;
	color: #fff;
}

.pg-home-selection-src {
	font: 400 13px/1.6 'Hanken Grotesk', sans-serif;
	color: rgba(255,255,255,.8);
	margin-top: 14px;
}

.pg-home-selection-callout {
	margin-top: 24px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.4);
	border-left: 3px solid #fff;
	border-radius: 4px;
	padding: 26px 28px;
}

.pg-home-selection-callout .lbl {
	font: 700 12px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #fff;
	margin-bottom: 12px;
}

.pg-home-selection-callout p {
	font: 400 15.5px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #fff !important;
	margin: 0 !important;
	text-wrap: pretty;
}

.pg-home-selection-callout p strong { color: #fff; font-weight: 700; }

/* ---------- 7-step framework ---------- */
.pg-home-framework { background: #fff; }

.pg-home-framework-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 42px;
	gap: 40px;
	flex-wrap: wrap;
}

.pg-home-framework-head h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 14px !important;
	max-width: 720px;
}

.pg-home-framework-head p {
	font: 400 17px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	margin: 0 0 12px !important;
	max-width: 680px;
	text-wrap: pretty;
}

.pg-home-framework-head p:last-child { margin-bottom: 0 !important; }

.pg-home-framework-head .pg-home-btn-primary {
	flex-shrink: 0;
	box-shadow: 0 10px 26px rgba(203,14,42,.28);
	padding: 15px 26px;
	font-size: 14px;
}

/* On phones the head row wraps and the button gets the full row to itself —
   its flex-shrink:0 (correct on desktop, where it sits beside the intro copy)
   would otherwise hold it at max-content (~420px) and overflow the viewport. */
@media (max-width: 560px) {
	.pg-home-framework-head .pg-home-btn-primary {
		flex-shrink: 1;
		max-width: 100%;
		white-space: normal;
		line-height: 1.35;
	}
}

.pg-home-fasttrack {
	border: 1.5px solid #CB0E2A;
	border-radius: 4px;
	background: #FDF6F7;
	padding: 20px;
	margin-bottom: 14px;
}

.pg-home-fasttrack-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.pg-home-fasttrack-head .tag {
	font: 700 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #fff;
	background: #CB0E2A;
	border-radius: 3px;
	padding: 7px 10px;
}

.pg-home-fasttrack-head .desc {
	font: 600 13px/1.4 'Hanken Grotesk', sans-serif;
	color: #8A3742;
}

.pg-home-step-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.pg-home-fasttrack .pg-home-step-grid { margin: 0; }

.pg-home-step-card {
	background: #F7F9FC;
	border: 1px solid #E4E9F1;
	border-radius: 3px;
	padding: 22px 24px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.pg-home-fasttrack .pg-home-step-card {
	background: #fff;
	border-color: #F0D4D9;
}

.pg-home-step-card .num {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: #0C1A3A;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	font: 800 17px/1 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.02em;
}

.pg-home-step-card .num.accent { background: #CB0E2A; }

.pg-home-step-card .title {
	display: block;
	font: 700 15.5px/1.3 'Bricolage Grotesque', sans-serif;
	color: #14161E;
	margin-bottom: 5px;
}

.pg-home-step-card .desc {
	display: block;
	font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif;
	color: #5A5F6E;
}

.pg-home-step-card .desc strong { color: #14161E; font-weight: 700; }

.pg-home-ongoing-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 14px;
}

.pg-home-ongoing-label .tag {
	font: 700 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #0C1A3A;
	background: #E8ECF4;
	border-radius: 3px;
	padding: 7px 10px;
}

.pg-home-ongoing-label .desc {
	font: 600 13px/1.4 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-step-grid.ongoing { margin-bottom: 34px; }

.pg-home-step-final {
	background: #0C1A3A;
	border-radius: 3px;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.pg-home-step-final .headline {
	font: 700 16px/1.3 'Bricolage Grotesque', sans-serif;
	color: #fff;
}

.pg-home-step-final a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 13.5px/1 'Hanken Grotesk', sans-serif;
	color: #FF6477;
	text-decoration: none;
}

/* ---------- Savings calculator ---------- */
.pg-home-calculator { background: #fff; border-top: 1px solid #ECEEF2; }

.pg-home-calculator h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 20px !important;
	max-width: 760px;
	color: #14161E !important;
}

.pg-home-calculator > .pg-home-section-inner > p {
	font: 400 17.5px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	max-width: 680px;
	margin: 0 0 46px !important;
	text-wrap: pretty;
}

.pg-home-calc-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: start;
}

.pg-home-calc-field { margin-bottom: 36px; }

.pg-home-calc-field-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
}

.pg-home-calc-field-head .lbl {
	font: 600 15px/1.3 'Hanken Grotesk', sans-serif;
	color: #42475A;
}

.pg-home-calc-field-head .val {
	font: 700 21px/1 'Hanken Grotesk', sans-serif;
	color: #14161E;
}

.pg-home-calc-field-head .val.accent { color: #CB0E2A; }

.pg-home-calc-field input[type="range"] {
	width: 100%;
	accent-color: #CB0E2A;
	cursor: pointer;
}

.pg-home-calc-field-range {
	display: flex;
	justify-content: space-between;
	font: 500 12px/1 'Hanken Grotesk', sans-serif;
	color: #9097A4;
	margin-top: 8px;
}

.pg-home-calc-note {
	font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif;
	color: #646B7B;
	padding-top: 22px;
	border-top: 1px solid #ECEEF2;
}

.pg-home-calc-result {
	background: #fff;
	border-radius: 3px;
	padding: 26px 30px;
	color: #14161E;
	box-shadow: 0 34px 80px rgba(0,0,0,.35);
}

.pg-home-calc-result-label {
	font: 700 11px/1.5 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #9097A4;
	margin-bottom: 18px;
}

.pg-home-calc-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}

.pg-home-calc-row .lbl {
	font: 600 14px/1 'Hanken Grotesk', sans-serif;
	color: #42475A;
}

.pg-home-calc-row .val {
	font: 700 19px/1 'Hanken Grotesk', sans-serif;
	color: #14161E;
}

.pg-home-calc-row .val.accent { color: #CB0E2A; }

.pg-home-calc-bar {
	height: 9px;
	border-radius: 5px;
	background: #0C1A3A;
	margin-bottom: 16px;
}

.pg-home-calc-bar.track {
	background: #EEF0F4;
	margin-bottom: 18px;
	overflow: hidden;
}

.pg-home-calc-bar.track .fill {
	height: 9px;
	border-radius: 5px;
	background: #CB0E2A;
	transition: width .15s ease;
}

.pg-home-calc-reduction {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid #EEF0F4;
	border-bottom: 1px solid #EEF0F4;
	margin-bottom: 16px;
}

.pg-home-calc-reduction .lbl {
	font: 600 14px/1 'Hanken Grotesk', sans-serif;
	color: #42475A;
}

.pg-home-calc-reduction .val {
	font: 800 22px/1 'Bricolage Grotesque', sans-serif;
	color: #12996B;
	letter-spacing: -0.02em;
}

.pg-home-calc-savings {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.pg-home-calc-savings .lbl {
	font: 600 13px/1.4 'Hanken Grotesk', sans-serif;
	color: #646B7B;
	margin-bottom: 4px;
}

.pg-home-calc-savings .val {
	font: 800 40px/1 'Bricolage Grotesque', sans-serif;
	color: #CB0E2A;
	letter-spacing: -0.025em;
}

.pg-home-calc-savings .permo {
	font: 500 13.5px/1.4 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-calc-result .pg-home-btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px;
	font-size: 14.5px;
	width: 100%;
	box-shadow: 0 12px 28px rgba(203,14,42,.28);
}

/* ---------- 2026 benchmarks ---------- */
.pg-home-benchmarks { background: #EEF2F8; border-top: 1px solid #DEE5F0; }

.pg-home-benchmarks h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 22px !important;
	max-width: 840px;
}

.pg-home-benchmarks > .pg-home-section-inner > p {
	font: 400 18px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	max-width: 820px;
	margin: 0 0 40px !important;
	text-wrap: pretty;
}

.pg-home-benchmarks p strong { color: #14161E; }

/* Aug-7: standalone cost-benchmarks callout above the rate table. */
.pg-home-bench-callout {
	background: #fff;
	border-left: 3px solid #CB0E2A;
	border-radius: 3px;
	padding: 26px 30px;
	margin: 0 0 28px;
}

.pg-home-bench-callout h3 {
	font: 700 20px/1.3 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.01em;
	margin: 0 0 12px !important;
	color: #14161E !important;
}

.pg-home-bench-callout p {
	font: 400 16px/1.65 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	margin: 0 !important;
	text-wrap: pretty;
}

.pg-home-table {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 24px;
}

/* Aug-7: titled rate table + closing disclaimer row. */
.pg-home-table-title {
	padding: 20px 26px 16px;
	border-bottom: 1px solid #EEF0F4;
	font: 700 19px/1.3 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.01em;
	color: #14161E;
}

.pg-home-table-note {
	padding: 14px 26px;
	border-top: 1px solid #EEF0F4;
	font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-table-head {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	padding: 16px 26px;
	background: #0C1A3A;
	color: #fff;
}

.pg-home-table-head div {
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .1em;
}

.pg-home-table-head div:nth-child(2) { color: #FF6477; }
.pg-home-table-head div:nth-child(3) { color: #9FB0CC; }

.pg-home-table-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	padding: 15px 26px;
	align-items: center;
	border-top: 1px solid #EEF0F4;
}

/* The first data row sits directly under the navy head and needs no hairline.
   :first-of-type would stop matching now that a .pg-home-table-title div can
   precede the head, so key off the head itself. */
.pg-home-table-head + .pg-home-table-row { border-top: none; }

.pg-home-table-row .fn {
	font: 600 15px/1.35 'Hanken Grotesk', sans-serif;
	color: #14161E;
}

.pg-home-table-row .ph {
	font: 600 16px/1 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
}

.pg-home-table-row .in {
	font: 600 16px/1 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-tco-head {
	padding: 22px 26px 18px;
	border-bottom: 1px solid #EEF0F4;
}

.pg-home-tco-head .lbl {
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .1em;
	color: #CB0E2A;
	margin-bottom: 10px;
}

.pg-home-tco-head p {
	font: 400 15px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	margin: 0 !important;
	max-width: 820px;
	text-wrap: pretty;
}

.pg-home-tco-table-head {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.7fr;
	padding: 13px 26px;
	background: #0C1A3A;
	color: #fff;
}

.pg-home-tco-table-head div {
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .1em;
}

/* Aug-7: the Philippines column moved ahead of India, so the accent swaps too. */
.pg-home-tco-table-head div:nth-child(2) { color: #FF6477; }
.pg-home-tco-table-head div:nth-child(3) { color: #9FB0CC; }

.pg-home-tco-row {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.7fr;
	padding: 15px 26px;
	align-items: center;
	border-top: 1px solid #EEF0F4;
}

.pg-home-tco-row .vec {
	font: 600 14.5px/1.35 'Hanken Grotesk', sans-serif;
	color: #14161E;
}

.pg-home-tco-row .in {
	font: 600 15px/1 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-tco-row .ph {
	font: 600 15px/1 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
}

.pg-home-tco-row .ph.text,
.pg-home-tco-row .in.text {
	font: 400 13px/1.5 'Hanken Grotesk', sans-serif;
}

.pg-home-tco-row .ph.text { color: #14161E; font-weight: 600; }
.pg-home-tco-row .in.text { color: #646B7B; font-weight: 400; }

.pg-home-tco-row .delta {
	font: 400 13px/1.5 'Hanken Grotesk', sans-serif;
	color: #4D5260;
}

.pg-home-benchmarks-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.pg-home-benchmarks-foot .note {
	font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-benchmarks-foot .links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}

.pg-home-btn-outline-dark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #14161E;
	border: 1px solid #E2E5EB;
	padding: 14px 26px;
	border-radius: 4px;
	font: 700 14px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	transition: transform .16s ease;
}

.pg-home-btn-outline-dark:hover { transform: translateY(-2px); }

.pg-home-benchmarks .pg-home-btn-primary {
	box-shadow: 0 10px 26px rgba(203,14,42,.28);
	padding: 15px 26px;
	font-size: 14px;
}

/* ---------- Services hub ---------- */
.pg-home-services { background: #F7F8FA; border-top: 1px solid #ECEEF2; }

.pg-home-services h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 22px !important;
	max-width: 820px;
}

.pg-home-services > .pg-home-section-inner > p {
	font: 400 18px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	max-width: 760px;
	margin: 0 0 42px !important;
}

.pg-home-services-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.pg-home-services-card {
	background: #CB0E2A;
	border-radius: 3px;
	padding: 24px 28px;
	text-decoration: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	transition: all .2s ease;
}

.pg-home-services-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(203,14,42,.32);
}

.pg-home-services-card .text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pg-home-services-card .title {
	font: 700 20px/1.2 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.01em;
}

.pg-home-services-card .cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 700 13px/1 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
	background: #fff;
	padding: 12px 18px;
	border-radius: 4px;
	align-self: flex-start;
}

.pg-home-services-card .num {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF6477;
	border: 1px solid #FF6477;
	border-radius: 3px;
	font: 800 40px/1 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.03em;
	color: #fff;
	flex-shrink: 0;
}

/* ---------- Case studies ---------- */
.pg-home-casestudies { background: #fff; }

.pg-home-cs-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 42px;
	gap: 40px;
	flex-wrap: wrap;
}

.pg-home-cs-head h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 !important;
	max-width: 720px;
}

.pg-home-cs-head .all {
	flex-shrink: 0;
	font: 700 13.5px/1 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
	text-decoration: none;
}

.pg-home-cs-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.pg-home-cs-card {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-top: 3px solid #CB0E2A;
	border-radius: 3px;
	padding: 28px 30px;
	text-decoration: none;
	color: #14161E;
	display: flex;
	flex-direction: column;
	transition: all .2s ease;
}

.pg-home-cs-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(20,22,30,.08);
	border-color: #D9DDE5;
}

.pg-home-cs-card .head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
}

.pg-home-cs-card .head img { width: auto; }

.pg-home-cs-card .tag {
	font: 600 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .08em;
	padding: 6px 10px;
	border-radius: 6px;
	flex-shrink: 0;
}

.pg-home-cs-card .stat {
	font: 800 40px/1 'Bricolage Grotesque', sans-serif;
	color: #CB0E2A;
	letter-spacing: -0.025em;
}

.pg-home-cs-card .stat-desc {
	font: 600 12.5px/1.4 'Hanken Grotesk', sans-serif;
	color: #646B7B;
	margin: 8px 0 16px;
}

.pg-home-cs-card p {
	font: 400 14px/1.6 'Hanken Grotesk', sans-serif !important;
	color: #5A5F6E !important;
	margin: 0 0 20px !important;
	flex: 1;
	text-wrap: pretty;
}

.pg-home-cs-card .cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 13px/1 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
}

.pg-home-cs-strip {
	margin-top: 22px;
	background: #CB0E2A;
	border-radius: 3px;
	padding: 32px 36px;
	display: grid;
	grid-template-columns: auto auto auto 1fr;
	gap: 48px;
	align-items: center;
	color: #fff;
}

.pg-home-cs-strip .stat .v {
	font: 800 44px/1 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.025em;
}

.pg-home-cs-strip .stat .k {
	font: 500 12.5px/1.4 'Hanken Grotesk', sans-serif;
	color: rgba(255,255,255,.75);
	margin-top: 7px;
}

.pg-home-cs-strip .note {
	font: 500 14.5px/1.6 'Hanken Grotesk', sans-serif;
	color: rgba(255,255,255,.85);
	text-wrap: pretty;
	border-left: 1px solid rgba(255,255,255,.25);
	padding-left: 36px;
}

/* ---------- Clients speak ---------- */
.pg-home-testimonials { background: #F7F8FA; border-top: 1px solid #ECEEF2; }

.pg-home-testimonials h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 22px !important;
	max-width: 820px;
}

.pg-home-testimonials > .pg-home-section-inner > p {
	font: 400 18px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	max-width: 700px;
	margin: 0 0 42px !important;
}

.pg-home-testi-feature {
	background: #0C1A3A;
	border-radius: 3px;
	margin-bottom: 18px;
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
}

.pg-home-testi-feature-body { flex: 1; padding: 40px 48px; }

.pg-home-testi-feature-body blockquote {
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.pg-home-testi-feature-body blockquote p {
	font: 500 15px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #fff !important;
	margin: 0 !important;
	text-wrap: pretty;
}

.pg-home-testi-feature-attr {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

.pg-home-testi-feature-attr .name {
	font: 700 15px/1.3 'Bricolage Grotesque', sans-serif;
	color: #fff;
}

.pg-home-testi-feature-attr .role {
	font: 500 13px/1.4 'Hanken Grotesk', sans-serif;
	color: rgba(255,255,255,.65);
	margin-top: 2px;
}

.pg-home-testi-feature-img {
	flex-shrink: 0;
	width: 38%;
	position: relative;
}

.pg-home-testi-feature-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.pg-home-testi-feature-img .badge {
	position: absolute;
	left: 24px;
	bottom: 16px;
	background: rgba(255,255,255,.94);
	border-radius: 6px;
	padding: 9px 14px;
	display: flex;
	align-items: center;
	box-shadow: 0 6px 18px rgba(20,22,30,.14);
}

.pg-home-testi-feature-img .badge img {
	position: static;
	height: 18px;
	width: auto;
}

.pg-home-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.pg-home-testi-card {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pg-home-testi-card-img {
	position: relative;
	height: 170px;
	overflow: hidden;
	flex-shrink: 0;
}

.pg-home-testi-card-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pg-home-testi-card-img .badge {
	position: absolute;
	left: 24px;
	bottom: 16px;
	background: rgba(255,255,255,.94);
	border-radius: 6px;
	padding: 9px 14px;
	display: flex;
	align-items: center;
	box-shadow: 0 6px 18px rgba(20,22,30,.14);
}

.pg-home-testi-card-img .badge img {
	position: static;
	height: 22px;
	width: auto;
}

.pg-home-testi-card-body {
	padding: 26px 32px 30px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.pg-home-testi-card-body blockquote {
	margin: 0 0 24px !important;
	padding: 0 !important;
	border: none !important;
	flex: 1;
}

.pg-home-testi-card-body blockquote p {
	font: 500 15px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #14161E !important;
	margin: 0 !important;
	text-wrap: pretty;
}

.pg-home-testi-card-attr {
	padding-top: 18px;
	border-top: 1px solid #EEF0F4;
}

.pg-home-testi-card-attr .name {
	font: 700 14.5px/1.3 'Bricolage Grotesque', sans-serif;
	color: #14161E;
}

.pg-home-testi-card-attr .role {
	font: 500 12.5px/1.4 'Hanken Grotesk', sans-serif;
	color: #646B7B;
	margin-top: 2px;
}

/* ---------- Media & press ---------- */
.pg-home-media { background: #F7F8FA; border-top: 1px solid #ECEEF2; }

.pg-home-media-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 46px;
	gap: 40px;
	flex-wrap: wrap;
}

.pg-home-media-head h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 !important;
	max-width: 640px;
}

.pg-home-media-head .sub {
	flex-shrink: 0;
	font: 500 13px/1.5 'Hanken Grotesk', sans-serif;
	color: #5F6675;
	max-width: 280px;
	text-align: right;
}

.pg-home-media-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

.pg-home-media-card {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-top: 3px solid #CB0E2A;
	border-radius: 3px;
	padding: 26px 28px 28px;
	text-decoration: none;
	color: #14161E;
	display: flex;
	flex-direction: column;
	transition: all .2s ease;
}

.pg-home-media-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(20,22,30,.08);
	border-color: #D9DDE5;
}

.pg-home-media-card .meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.pg-home-media-card .tag {
	font: 600 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .1em;
	padding: 6px 11px;
	border-radius: 6px;
}

.pg-home-media-card .src {
	font: 500 12px/1 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-media-card .title {
	font: 700 17px/1.35 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
	text-wrap: pretty;
}

.pg-home-media-card .cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 13px/1 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
}

.pg-home-media-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid #E4E7EC;
}

.pg-home-media-foot .note {
	font: 400 13.5px/1.55 'Hanken Grotesk', sans-serif;
	color: #646B7B;
}

.pg-home-media .pg-home-btn-primary {
	box-shadow: 0 10px 26px rgba(203,14,42,.28);
	padding: 15px 26px;
	font-size: 14px;
}

/* ---------- FAQ ---------- */
.pg-home-faq { background: #F7F8FA; border-top: 1px solid #ECEEF2; }

.pg-home-faq h2 {
	font: 700 46px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 0 22px !important;
	max-width: 820px;
}

.pg-home-faq > .pg-home-section-inner > p {
	font: 400 18px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #4D5260 !important;
	max-width: 720px;
	margin: 0 0 42px !important;
}

.pg-home-faq-columns {
	column-count: 2;
	column-gap: 20px;
}

details.pg-home-faq-item {
	background: #fff;
	border: 1px solid #ECEEF2;
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 16px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

details.pg-home-faq-item[open] {
	border-color: #F3C7CD;
	box-shadow: 0 12px 32px rgba(203,14,42,.08);
}

details.pg-home-faq-item summary {
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 24px;
	font: 700 16px/1.4 'Bricolage Grotesque', sans-serif;
	color: #14161E;
	list-style: none;
}

details.pg-home-faq-item summary::-webkit-details-marker { display: none; }

details.pg-home-faq-item[open] summary { color: #CB0E2A; }

.pg-home-faq-ic {
	flex-shrink: 0;
	font: 300 28px/0.7 'Hanken Grotesk', sans-serif;
	color: #CB0E2A;
	transition: transform .22s ease;
}

details.pg-home-faq-item[open] .pg-home-faq-ic { transform: rotate(45deg); }

.pg-home-faq-body {
	padding: 0 24px 22px;
	font: 400 14.5px/1.62 'Hanken Grotesk', sans-serif;
	color: #5A5F6E;
}

.pg-home-faq-body .rate-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 13px;
}

.pg-home-faq-body .rate-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	border-bottom: 1px dashed #ECEEF2;
	padding-bottom: 7px;
}

.pg-home-faq-body .rate-row:last-child { border-bottom: none; }

.pg-home-faq-body .rate-row .price {
	font: 600 13.5px/1.4 'Hanken Grotesk', sans-serif;
	color: #14161E;
	flex-shrink: 0;
}

.pg-home-faq-body .attr {
	display: block;
	margin-top: 13px;
	font: 600 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .08em;
	color: #CB0E2A;
}

/* ---------- Final CTA ---------- */
.pg-home-final-cta {
	background: linear-gradient(140deg, #CB0E2A, #A50B22);
	color: #fff;
}

.pg-home-final-cta-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 88px 64px;
	text-align: center;
}

.pg-home-final-cta h2 {
	font: 700 50px/1.06 'Bricolage Grotesque', sans-serif !important;
	letter-spacing: -0.022em;
	margin: 0 auto 20px !important;
	max-width: 820px;
	color: #fff !important;
}

.pg-home-final-cta p {
	font: 400 19px/1.62 'Hanken Grotesk', sans-serif !important;
	color: #FCE3E7 !important;
	max-width: 660px;
	margin: 0 auto 42px !important;
	text-wrap: pretty;
}

.pg-home-final-cta-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.pg-home-final-cta-actions .pg-home-btn-primary {
	background: #fff;
	color: #CB0E2A;
	padding: 18px 34px;
	font-size: 15.5px;
	box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.pg-home-final-cta-actions .pg-home-btn-outline-light {
	border-color: rgba(255,255,255,.45);
	padding: 17px 30px;
}

.pg-home-final-cta-note {
	font: 500 12.5px/1.5 'Hanken Grotesk', sans-serif;
	color: rgba(255,255,255,.6);
	margin-top: 18px;
}

@media (max-width: 900px) {
	.pg-home-brief-grid,
	.pg-home-calc-grid,
	.pg-home-services-grid,
	.pg-home-cs-grid,
	.pg-home-step-grid,
	.pg-home-testi-grid,
	.pg-home-media-grid,
	.pg-home-timeline-track,
	.pg-home-stat-grid {
		grid-template-columns: 1fr;
	}

	/* Aug-6 hero: the V2 source ships no mobile rule for its 1fr/400px hero
	   grid, so per the rollout plan it collapses to one column here with the
	   two photo cards in a 2-up row below the text. Selection section follows
	   the same single-column collapse as every other 2-col section grid. */
	.pg-home-hero-grid,
	.pg-home-selection-inner {
		grid-template-columns: 1fr !important;
	}

	.pg-home-hero-grid { gap: 40px; }
	.pg-home-selection-inner { gap: 48px; }

	/* The rail's Aug-7 41px top margin is a desktop two-column concern only —
	   stacked, the 40px grid gap already separates it from the CTA row. */
	.pg-home-hero-photos { max-width: 560px; margin-top: 0; }

	/* ---- Benchmark tables → labeled mini-cards (Option A, 2026-08-04) ----
	   A plain 1fr collapse left bare numbers with no country labels (the header
	   row stacks separately and loses its column alignment). Instead: hide the
	   header, give each row its function name as a title spanning both columns,
	   and keep the two country values side by side, each carrying its own
	   ::before label so the data stays self-describing. */
	.pg-home-table-head,
	.pg-home-tco-table-head { display: none; }

	.pg-home-table-row,
	.pg-home-tco-row {
		grid-template-columns: 1fr 1fr;
		gap: 2px 12px;
	}

	.pg-home-table-row .fn,
	.pg-home-tco-row .vec {
		grid-column: 1 / -1;
		margin-bottom: 8px;
	}

	.pg-home-table-row .ph::before,
	.pg-home-table-row .in::before,
	.pg-home-tco-row .ph::before,
	.pg-home-tco-row .in::before {
		display: block;
		font: 600 11px/1 'Hanken Grotesk', sans-serif;
		letter-spacing: .06em;
		margin-bottom: 5px;
	}

	.pg-home-table-row .ph::before,
	.pg-home-tco-row .ph::before { content: 'PHILIPPINES'; color: #CB0E2A; }
	.pg-home-table-row .in::before,
	.pg-home-tco-row .in::before { content: 'INDIA'; color: #9097A4; }

	.pg-home-tco-row .delta {
		grid-column: 1 / -1;
		margin-top: 10px;
		padding-top: 8px;
		border-top: 1px dashed #EEF0F4;
	}
	.pg-home-faq-columns { column-count: 1; }
	.pg-home-cs-strip { grid-template-columns: 1fr; gap: 20px; }
	.pg-home-cs-strip .note { border-left: none; padding-left: 0; }
	/* Featured testimonial: side-by-side squeezes the 38% photo column into a
	   sliver on small screens — stack it, quote on top, full-width photo below.
	   The photo is position:absolute inside its column, so the stacked column
	   needs an explicit height to render at all. */
	.pg-home-testi-feature { flex-direction: column; }
	/* Client request (Aug-12): brand image stacks above the quote on small screens. */
	.pg-home-testi-feature-img { width: 100%; min-height: 260px; order: -1; }
	.pg-home-testi-feature-body { padding: 30px 30px 26px; }
}

/* ---------- Mobile-only section padding ----------
   560px is intentionally narrower than the 900px tablet-collapse tier above, so this never fires on
   tablets or larger. .pg-home-hero-inner and .pg-home-section-inner (the generic wrapper nearly every
   homepage section uses) get the full padding swap to 40px/30px per instruction. The other
   64px-horizontal-inset wrappers below keep their own tuned vertical rhythm and only get the
   horizontal fix, so every section's left/right edge still lines up with the hero. !important guards
   against inline per-section padding. */
/* (The Aug-6 rule releasing the h1's inline white-space:nowrap span is gone:
   the Aug-7 H1 rewrite dropped that span, leaving the selector unmatched.) */

@media (max-width: 560px) {
	.pg-home-hero-inner { padding: 40px 30px !important; }
	.pg-home-section-inner { padding: 40px 30px !important; }
	.pg-home-selection-inner { padding: 40px 30px !important; }
	/* Photo cards drop to ~150px columns at 375 — a 300px-tall crop reads
	   like a sliver of forehead; shorten the frame to keep faces centered.
	   Aug-7 moved the sizing from the img to the card (the img now fills it).
	   Aug-11: the base rule switched min-height -> height, so this override
	   has to set `height` too or the card stays 300px tall on phones. */
	.pg-home-hero-photo-card { height: 200px; }
	/* The FTE pill is pinned nowrap so it reads as one line beside the photos;
	   at phone widths that line is wider than the viewport. Release it. */
	.pg-home-hero-photos .pg-home-hero-pill {
		white-space: normal;
		text-align: center;
		line-height: 1.4;
	}
	.pg-home-clients-inner,
	.pg-home-final-cta-inner {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	.pg-home-media-head .sub {
		text-align: left;
	}
}

/* ---------- Authorship & Verification (Aug 5 handoff rollout) ---------- */
.pg-auth-inner { max-width: 1240px; margin: 0 auto; padding: 56px 64px 64px; }
.pg-auth-eyebrow { margin-bottom: 28px; }
.pg-auth-eyebrow .lbl { font: 700 11.5px/1.5 'Hanken Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #646B7B; }
.pg-auth-eyebrow .lbl::before { content: ''; display: inline-block; width: 24px; height: 2px; background: #CB0E2A; margin-right: 14px; vertical-align: 0.3em; }
.pg-auth-verified-line .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #14161E; margin: 0 8px; vertical-align: middle; }
.pg-auth-name:hover { text-decoration: underline !important; }
.pg-auth-bio:hover { color: #A20B21 !important; border-bottom-color: #A20B21 !important; }
@media (max-width: 900px) {
	.pg-auth-grid { grid-template-columns: 1fr !important; }
	.pg-auth-col-l { border-right: none !important; border-bottom: 1px solid #ECEEF2; }
}
@media (max-width: 560px) {
	.pg-auth-inner { padding: 40px 30px !important; }
	.pg-auth-verified-line .dot { display: block; width: 0; height: 0; margin: 0 0 6px; }
}

/* Client request (Aug-12): on small screens the author/verifier row stacks —
   photo enlarged and centered above, name/title left-aligned below, and the
   74px desktop indent on the bio note/link reset. 800px matches (and, via
   higher specificity, overrides) responsive-type.css's generic principal-photo
   card rule, whose 28px/24px padding must not apply inside the auth card. */
@media (max-width: 800px) {
	:root .pg-auth-grid > div > div[style*="display:flex"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 18px !important;
		padding: 0 !important;
	}

	.pg-auth-grid > div > div[style*="display:flex"] > img {
		width: 140px !important;
		height: 140px !important;
		margin: 0 auto;
	}

	.pg-auth-grid > div > p,
	.pg-auth-grid > div > .pg-auth-bio {
		margin-left: 0 !important;
	}
}

/* Media foot: disclaimer removed — coverage link right on desktop, left on phones */
.pg-home-media-foot a { margin-left: auto; }
@media (max-width: 560px) {
	.pg-home-media-foot a { margin-left: 0; }
}