/* =============================================================================
   Premier Performance Advising
   Tokens are taken verbatim from the design handoff. The design reference styles
   every element inline; this reproduces the same values as a system so the site
   stays editable and consistent.
   ========================================================================== */

/* ---------- Fonts, self-hosted ---------- */
@font-face {
	font-family: 'League Gothic';
	src: url('../fonts/league-gothic-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-latin-var.woff2') format('woff2');
	font-weight: 400 800; /* variable axis — one file covers every weight the design uses */
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
	/* Surfaces */
	--ppa-bg: #0A0E14;
	--ppa-bg-footer: #080B10;
	--ppa-panel: #0E1826;
	--ppa-panel-alt: #0C1119;

	/* Type colours */
	--ppa-headline: #F4F7FA;
	--ppa-body: rgba(232, 236, 241, .72);
	--ppa-body-dim: rgba(232, 236, 241, .65);
	--ppa-body-mid: rgba(232, 236, 241, .68);
	--ppa-body-bright: rgba(232, 236, 241, .78);

	/* Brand */
	--ppa-blue: #4C9FD8;
	--ppa-blue-light: #8FC1E3;
	--ppa-blue-deep: #2C7BB5;
	--ppa-blue-dark: #12395A;

	/* Lines */
	--ppa-hairline: rgba(232, 236, 241, .07);
	--ppa-hairline-mid: rgba(232, 236, 241, .10);
	--ppa-hairline-strong: rgba(232, 236, 241, .14);
	--ppa-border-blue: rgba(143, 193, 227, .45);
	--ppa-border-blue-soft: rgba(76, 159, 216, .28);

	/* Shadow */
	--ppa-btn-shadow: 0 12px 34px rgba(44, 123, 181, .45);

	/* Rhythm */
	--ppa-section-y: clamp(64px, 8vw, 110px);
	--ppa-gutter: clamp(18px, 5vw, 72px);
	--ppa-maxw: 1296px;

	/* Motion */
	--ppa-ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ppa-bg);
	color: #E8ECF1;
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.8;
	font-weight: 500;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--ppa-blue-light); transition: color .25s; }
a:hover { color: #B8DCF2; }

::selection { background: rgba(44, 123, 181, .45); color: #fff; }

/* Square corners everywhere — the design has no rounded corners at all. */
button,
input,
select,
textarea { border-radius: 0; font: inherit; }

/* Visible focus, which a dark theme normally loses. */
:focus-visible {
	outline: 2px solid var(--ppa-blue-light);
	outline-offset: 3px;
}

.ppa-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ppa-blue-deep);
	color: #fff;
	padding: 12px 20px;
	font-weight: 700;
}
.ppa-skip:focus { left: 0; }

/* ---------- Type primitives ---------- */
.ppa-display {
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	line-height: .94;
	color: var(--ppa-headline);
	margin: 0;
}

.ppa-kicker {
	font-size: 12px;
	letter-spacing: .3em;
	font-weight: 700;
	color: var(--ppa-blue);
	text-transform: uppercase;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
}
.ppa-kicker::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ppa-hairline-strong);
}
.ppa-kicker--plain::after { display: none; }

/* Leading 34px rule, per the profile and schedule references. */
.ppa-kicker--lead {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ppa-blue-light);
}
.ppa-kicker--lead::after { display: none; }
.ppa-kicker--lead::before {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--ppa-blue);
	flex: none;
}

.ppa-label {
	font-size: 11px;
	letter-spacing: .26em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ppa-body-mid);
}

.ppa-lede { font-size: 17px; line-height: 1.8; color: var(--ppa-body); }

.ppa-em { color: var(--ppa-blue-light); }

/* ---------- Layout ---------- */
.ppa-section { padding: var(--ppa-section-y) var(--ppa-gutter); }
.ppa-wrap { max-width: var(--ppa-maxw); margin-inline: auto; }

/* ---------- Buttons ---------- */
.ppa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: 19px;
	letter-spacing: .11em;
	text-transform: uppercase;
	padding: 15px 30px;
	min-height: 48px; /* ≥44px hit target */
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .3s, border-color .3s, color .3s;
	cursor: pointer;
}
.ppa-btn--primary {
	background: var(--ppa-blue-deep);
	color: #fff;
	box-shadow: var(--ppa-btn-shadow);
}
.ppa-btn--primary:hover { background: #3A8FC9; color: #fff; }
.ppa-btn--ghost {
	background: transparent;
	color: var(--ppa-headline);
	border-color: var(--ppa-border-blue);
}
.ppa-btn--ghost:hover {
	background: rgba(44, 123, 181, .25);
	border-color: var(--ppa-blue-light);
	color: #fff;
}

/* ---------- Header / nav ---------- */
.ppa-announce {
	background: rgba(44, 123, 181, .14);
	border-bottom: 1px solid var(--ppa-border-blue-soft);
	color: var(--ppa-body-bright);
	font-size: 12.5px;
	letter-spacing: .02em;
	text-align: center;
	padding: 9px var(--ppa-gutter);
}
.ppa-announce a { color: var(--ppa-blue-light); }

.ppa-header {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px var(--ppa-gutter);
	border-bottom: 1px solid rgba(232, 236, 241, .08);
	background: rgba(10, 14, 20, .78);
}
/*
 * The frosting lives on a layer behind the header, not on the header itself.
 *
 * `backdrop-filter` on an element makes it the containing block for any `position: fixed`
 * descendant. With it on .ppa-header, the mobile nav panel's `inset: 0 0 0 auto` resolved against
 * the header's own 390x91 box instead of the viewport, so the panel was 128px tall and most of its
 * links were scrolled out of reach. Moving the filter to a pseudo-element keeps the effect and gives
 * the panel the viewport back.
 */
.ppa-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	pointer-events: none;
}
.ppa-logo { flex: none; display: flex; }
.ppa-logo img {
	height: clamp(18px, 2.6vw, 25px);
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .96;
}

.ppa-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 10px;
	gap: clamp(10px, 3.4vw - 18px, 38px);
	white-space: nowrap;
	font-size: clamp(10.5px, .55vw + 5px, 12px);
	font-weight: 600;
	letter-spacing: clamp(.3px, .18vw - 1px, 1.65px);
	color: var(--ppa-body-mid);
	min-width: 0;
	text-transform: uppercase;
}
.ppa-nav a { color: inherit; text-decoration: none; }
.ppa-nav a:hover { color: #fff; }
.ppa-nav a[aria-current] {
	color: var(--ppa-blue-light);
	text-decoration: underline;
	text-underline-offset: 6px;
}

.ppa-nav-toggle {
	display: none;
	/* Must sit above the open off-canvas panel. Without this the panel — fixed, and later in DOM
	   order — paints over the button, so tapping the hamburger to close it does nothing. Escape
	   and keyboard still worked, which is exactly why it survived the first pass. */
	position: relative;
	z-index: 70;
	background: none;
	border: 1px solid var(--ppa-hairline-strong);
	color: var(--ppa-headline);
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ppa-nav-toggle span,
.ppa-nav-toggle span::before,
.ppa-nav-toggle span::after {
	content: '';
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform .3s, opacity .2s;
}
.ppa-nav-toggle span::before { transform: translateY(-6px); }
.ppa-nav-toggle span::after { transform: translateY(4.5px); }
.ppa-nav-toggle[aria-expanded="true"] span { background: transparent; }
.ppa-nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.ppa-nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translateY(0); }

/* ---------- Footer ---------- */
.ppa-footer {
	background: var(--ppa-bg-footer);
	border-top: 1px solid var(--ppa-hairline);
	padding: clamp(52px, 6vw, 78px) var(--ppa-gutter) 0;
}
.ppa-footer-grid {
	max-width: var(--ppa-maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
}
/*
 * The footer tagline is League Gothic at 32px in the reference. Without an explicit size it
 * inherited the body size and collapsed to a cramped two lines on every page.
 */
.ppa-footer-tagline {
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1;
	margin: 26px 0 24px;
}
.ppa-footer-tagline .ppa-em,
.ppa-footer-tagline span { color: var(--ppa-blue-light); }

.ppa-footer h2 {
	font-size: 11px;
	letter-spacing: .26em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ppa-body-mid);
	margin: 0 0 18px;
}
.ppa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ppa-footer a { color: var(--ppa-body); text-decoration: none; }
.ppa-footer a:hover { color: #fff; }
.ppa-social { display: flex; gap: 12px; }
.ppa-social a {
	width: 42px;
	height: 42px;
	border: 1px solid var(--ppa-hairline-strong);
	display: grid;
	place-items: center;
	transition: border-color .3s, background .3s;
	position: relative;
}
/* The design specifies a 42px tile, but the handoff also asks for >=44px hit targets. Extend the
   touch area past the visible box rather than growing the box, so the design is untouched. */
.ppa-social a::after {
	content: '';
	position: absolute;
	inset: -2px;
}
.ppa-social a:hover { border-color: var(--ppa-blue-light); background: rgba(44, 123, 181, .18); }
.ppa-copyright {
	max-width: var(--ppa-maxw);
	margin: clamp(40px, 5vw, 64px) auto 0;
	border-top: 1px solid var(--ppa-hairline);
	padding: 22px 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--ppa-body-dim);
}

/* ---------- Motion ---------- */
@keyframes ppaRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ppaKen  { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes ppaShine { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 100% 50%; } }
@keyframes ppaSheen { 0% { background-position: 130% 0; } 45% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
@keyframes ppaFloat { from { transform: translateY(0) rotate(45deg); } to { transform: translateY(-20px) rotate(45deg); } }

/* Scroll reveal — JS adds .is-in once the element enters the viewport. */
[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .55s var(--ppa-ease), transform .55s var(--ppa-ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* Anything still hidden when JS has not run must not stay invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

.ppa-ken img {
	animation: ppaKen 28s ease-in-out infinite alternate;
	will-change: transform;
}

/* Hero blue line sheen. */
.ppa-sheen {
	background: linear-gradient(90deg, var(--ppa-blue-light) 0%, var(--ppa-blue-light) 40%, #FFFFFF 50%, var(--ppa-blue-light) 60%, var(--ppa-blue-light) 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: ppaSheen 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.ppa-sheen {
		animation: none;
		background: none;
		-webkit-text-fill-color: var(--ppa-blue-light);
		color: var(--ppa-blue-light);
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.ppa-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.ppa-nav-toggle { display: inline-flex; }
	.ppa-nav {
		position: fixed;
		z-index: 65;
		inset: 0 0 0 auto;
		width: min(320px, 84vw);
		background: var(--ppa-panel);
		border-left: 1px solid var(--ppa-hairline-strong);
		flex-direction: column;
		/* The desktop rule sets flex-wrap:wrap for the horizontal bar. Left on, a column flex wraps
		   into COLUMNS instead of stacking: two or three links fill the height, the rest start a new
		   column off the right edge and out of the viewport. Four of the seven links were unreachable. */
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 4px;
		padding: 96px 28px 32px;
		font-size: 14px;
		letter-spacing: .12em;
		/* Hidden by visibility and opacity, NOT by being translated off-canvas.
		   A position:fixed panel parked at translateX(100%) still extends the document's scroll
		   width — measured 695px wide in a 390px viewport, and 1073px in a 768px one — and no
		   ancestor `overflow` clips it, because a fixed element's containing block is the viewport.
		   Staying inside the viewport and fading/sliding a short distance avoids that entirely. */
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s var(--ppa-ease), visibility 0s linear .3s;
		overflow-y: auto;
	}
	.ppa-nav a { padding: 12px 0; min-height: 44px; display: flex; align-items: center; white-space: normal; }
	.ppa-nav .ppa-nav-cta { margin-top: 14px; width: 100%; justify-content: center; }
	.ppa-nav.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s var(--ppa-ease), visibility 0s;
	}
	body.ppa-nav-open { overflow: hidden; }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.ppa-footer-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Hero
   Decoration (glow, corner line art, dot grid, drop hairline) is pseudo-elements
   so the markup carries no empty divs. Values are lifted from the reference.
   ========================================================================== */
.ppa-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 8vw, 116px) var(--ppa-gutter) clamp(56px, 7vw, 96px);
	text-align: center;
}

/* Radial blue glow + masked dot grid. */
.ppa-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(143, 193, 227, .13) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(1000px 640px at 50% 40%, #000, transparent 74%);
	mask-image: radial-gradient(1000px 640px at 50% 40%, #000, transparent 74%);
	pointer-events: none;
}
.ppa-hero::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 90px;
	transform: translateX(-50%);
	width: min(1100px, 130vw);
	height: 560px;
	background: radial-gradient(closest-side, rgba(44, 123, 181, .22), rgba(44, 123, 181, 0));
	pointer-events: none;
}

.ppa-hero-inner { position: relative; z-index: 1; max-width: var(--ppa-maxw); margin-inline: auto; }

/* Corner line art, left and right. */
.ppa-hero-inner::before,
.ppa-hero-inner::after {
	content: '';
	position: absolute;
	width: 460px;
	height: 340px;
	pointer-events: none;
	z-index: -1;
}
.ppa-hero-inner::before {
	left: -90px;
	bottom: -50px;
	background: repeating-linear-gradient(48deg, rgba(76, 159, 216, .2) 0, rgba(76, 159, 216, .2) 1.5px, transparent 1.5px, transparent 30px);
	-webkit-mask-image: linear-gradient(48deg, #000, transparent 72%);
	mask-image: linear-gradient(48deg, #000, transparent 72%);
}
.ppa-hero-inner::after {
	right: -90px;
	top: -30px;
	background: repeating-linear-gradient(48deg, rgba(76, 159, 216, .16) 0, rgba(76, 159, 216, .16) 1.5px, transparent 1.5px, transparent 30px);
	-webkit-mask-image: linear-gradient(228deg, #000, transparent 72%);
	mask-image: linear-gradient(228deg, #000, transparent 72%);
}

.ppa-hero-kicker {
	font-size: 12px;
	letter-spacing: .34em;
	color: var(--ppa-blue-light);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 38px;
	animation: ppaRise .5s var(--ppa-ease) both;
}

.ppa-hero-title {
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: clamp(52px, 8.2vw, 118px);
	line-height: .93;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: var(--ppa-headline);
	max-width: 1060px;
	margin: 0 auto;
	animation: ppaRise .55s var(--ppa-ease) .06s both;
}
/* The sheen sweep on the second line. */
.ppa-hero-title .ppa-sheen {
	background-image: linear-gradient(100deg, #8FC1E3 0%, #8FC1E3 42%, #EAF5FD 50%, #8FC1E3 58%, #8FC1E3 100%);
	background-size: 230% 100%;
	animation: ppaSheen 6s ease-in-out 1.2s infinite;
}

.ppa-hero-intro {
	max-width: 620px;
	margin: 34px auto 0;
	font-size: 17px;
	line-height: 1.8;
	color: rgba(232, 236, 241, .75);
	font-weight: 500;
	animation: ppaRise .55s var(--ppa-ease) .13s both;
}

.ppa-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 46px);
	justify-content: center;
	margin-top: 38px;
	animation: ppaRise .55s var(--ppa-ease) .2s both;
}

/*
 * The hero's calls to action are underlined text links, not buttons. Values from the reference:
 * League Gothic 19px, .14em tracking, a 1px rule 7px below the baseline.
 */
.ppa-textlink { text-decoration: none; color: inherit; display: inline-flex; }
.ppa-textlink > span {
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ppa-blue-light);
	border-bottom: 1px solid var(--ppa-blue);
	padding-bottom: 7px;
	transition: color .3s, border-color .3s;
	/* Keeps the target ≥44px without moving the rule. */
	padding-top: 12px;
}
.ppa-textlink:hover > span { color: #fff; border-color: var(--ppa-blue-light); }
.ppa-textlink--quiet > span { color: var(--ppa-headline); border-bottom-color: transparent; }
.ppa-textlink--quiet:hover > span { border-bottom-color: var(--ppa-blue-light); }

.ppa-hero-note {
	max-width: 780px;
	margin: 46px auto 0;
	font-size: 17px;
	line-height: 1.85;
	color: rgba(232, 236, 241, .55);
	font-weight: 500;
	animation: ppaRise .55s var(--ppa-ease) .27s both;
}

/*
 * The image band that closes the hero. A 620px strip with a slow Ken Burns drift, under a scrim that
 * fades to the page colour at both ends so it reads as part of the hero rather than a pasted-in
 * photograph. Marked role="presentation" — it carries no information.
 */
.ppa-hero-band { position: relative; overflow: hidden; height: clamp(300px, 42vw, 620px); }
.ppa-hero-band-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 62%;
	animation: ppaKen 24s ease-in-out infinite alternate;
	will-change: transform;
}
.ppa-hero-band::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #0A0E14 0%, rgba(10,14,20,0) 34%, rgba(10,14,20,0) 78%, rgba(10,14,20,.5) 92%, #0A0E14 100%);
}

@media (max-width: 600px) {
	.ppa-hero-actions .ppa-btn { width: 100%; }
	.ppa-hero-inner::before,
	.ppa-hero-inner::after { display: none; }
}

/* =============================================================================
   Shared section primitives
   ========================================================================== */
.ppa-center { text-align: center; }
.ppa-measure { max-width: 760px; margin-inline: auto; }

.ppa-h2 { font-size: clamp(38px, 5.4vw, 76px); }
.ppa-h3 { font-size: clamp(30px, 3.8vw, 54px); }
.ppa-h4 { font-size: clamp(22px, 2.2vw, 30px); }

.ppa-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 5vw, 90px);
}

/* Diamond bullets. */
.ppa-bullets { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.ppa-bullets li {
	position: relative;
	padding-left: 26px;
	color: var(--ppa-body);
	font-size: 16px;
	line-height: 1.7;
}
.ppa-bullets li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .62em;
	width: 7px;
	height: 7px;
	background: var(--ppa-blue);
	transform: rotate(45deg);
}
.ppa-bullets--two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 30px; }

/* Feature panels. */
.ppa-panel {
	position: relative;
	border: 1px solid var(--ppa-hairline-strong);
	background: var(--ppa-panel);
	padding: clamp(30px, 4.5vw, 66px);
}
/* Animated gradient border sheen, drawn with two backgrounds on a transparent border. */
.ppa-panel--sheen {
	border-color: transparent;
	background:
		linear-gradient(var(--ppa-panel), var(--ppa-panel)) padding-box,
		linear-gradient(100deg, rgba(76,159,216,.15), rgba(143,193,227,.65), rgba(76,159,216,.15)) border-box;
	background-size: 100% 100%, 220% 100%;
	animation: ppaShine 9s ease-in-out infinite alternate;
}
/* Corner tick marks. */

/* Numbered cards. */
.ppa-numcards,
.ppa-proof-cards {
	list-style: none;
	margin: clamp(30px, 4vw, 52px) 0 0;
	padding: 0;
	display: grid;
	gap: 22px;
}
.ppa-numcards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ppa-proof-cards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.ppa-numcard {
	border: 1px solid var(--ppa-hairline-mid);
	padding: clamp(22px, 2.6vw, 34px);
	transition: border-color .3s, background .3s;
}
.ppa-numcard:hover { border-color: var(--ppa-border-blue); background: rgba(44,123,181,.06); }

.ppa-numcard-num {
	display: block;
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: 56px;
	line-height: .85;
	color: var(--ppa-blue);
	margin-bottom: 18px;
}
.ppa-numcard-title,
.ppa-cover-title,
.ppa-glass-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--ppa-headline);
	margin: 0 0 10px;
	line-height: 1.35;
}
.ppa-numcard-text,
.ppa-cover-text,
.ppa-glass-text { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--ppa-body-dim); }


/* Icon tiles. */
.ppa-icon-tile {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ppa-hairline-strong);
	color: var(--ppa-blue-light);
	margin-bottom: 18px;
}

/* Quotes. */
.ppa-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(28px, 4vw, 46px); }
.ppa-quote { margin: 0; border-left: 2px solid var(--ppa-blue); padding-left: clamp(20px, 2.4vw, 30px); }
.ppa-quote blockquote { margin: 0; }
.ppa-quote blockquote p { font-style: italic; font-size: 17px; line-height: 1.8; color: var(--ppa-body-bright); margin: 0 0 14px; }
.ppa-quote figcaption { color: var(--ppa-blue-light); }
.ppa-quote--tight { margin-top: 26px; }

/* =============================================================================
   Trust bars — two panels side by side, per the reference's auto-fit grid.
   Each mark is sized individually so their optical weight matches across the row.
   ========================================================================== */
.ppa-trust {
	border-top: 1px solid rgba(232, 236, 241, .08);
	border-bottom: 1px solid rgba(232, 236, 241, .08);
	background: var(--ppa-bg);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.ppa-trust-panel { padding: clamp(28px, 3.4vw, 48px) clamp(18px, 3vw, 44px); }
/* Divider between the two panels; falls away when they stack. */
.ppa-trust-panel + .ppa-trust-panel { border-left: 1px solid rgba(232, 236, 241, .07); }

.ppa-trust-label {
	text-align: center;
	font-size: 11px;
	letter-spacing: .28em;
	font-weight: 700;
	text-transform: uppercase;
	color: rgba(232, 236, 241, .45);
	margin: 0;
}
.ppa-trust-label--accent { color: var(--ppa-blue-light); }

.ppa-trust-logos {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px clamp(16px, 2.5vw, 40px);
	min-height: 76px;
}
.ppa-trust-logo { width: auto; opacity: .82; mix-blend-mode: screen; }

/* Per-mark heights, taken from the reference. */
.ppa-trust-logo--xs { height: clamp(10px, 1.60vw, 23px); }
.ppa-trust-logo--sm { height: clamp(12px, 1.85vw, 27px); }
.ppa-trust-logo--md { height: clamp(14px, 2.15vw, 31px); }
.ppa-trust-logo--lg { height: clamp(15px, 2.36vw, 34px); }

/*
 * Two treatments, because the source art is inconsistent. A flat dark mark just needs flattening to
 * white. A mark supplied inside a dark box needs inverting and desaturating so the box drops away
 * instead of showing as a pale rectangle.
 */
.ppa-trust-logo--white { filter: brightness(0) invert(1); }
.ppa-trust-logo--invert { filter: invert(1) grayscale(1) brightness(1.35); }

@media (max-width: 640px) {
	.ppa-trust-panel + .ppa-trust-panel { border-left: 0; border-top: 1px solid rgba(232, 236, 241, .07); }
}

/* =============================================================================
   The Challenge — centred header, then paragraph columns, then the turn.
   Values from the reference: 110px/96px section padding, 940px header measure,
   1150px body measure, auto-fit columns with 34px/76px gaps.
   ========================================================================== */
.ppa-challenge {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 8vw, 110px) var(--ppa-gutter) clamp(56px, 7vw, 96px);
}
/* The thin blue drop line the reference hangs from the top edge. */
.ppa-challenge::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 70px;
	background: linear-gradient(180deg, rgba(76, 159, 216, .55), rgba(76, 159, 216, 0));
}

.ppa-challenge-head {
	text-align: center;
	max-width: 940px;
	margin-inline: auto;
	scroll-margin-top: 110px;
}
/* Every nav-anchored target clears the sticky header (~91px tall). At 40px the section top landed
   underneath it, so the scroll-spy still highlighted the section above — clicking "The Challenge"
   left "Approach" lit (client review, Jake 2026-08-24). */
#approach, #services, #retreat, #book { scroll-margin-top: 110px; }
.ppa-challenge-head .ppa-kicker { justify-content: center; margin-bottom: 28px; }
.ppa-challenge-title { font-size: clamp(44px, 6.8vw, 86px); line-height: .94; }

.ppa-challenge-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 34px 76px;
	max-width: 1150px;
	margin: 68px auto 0;
}
.ppa-challenge-body p {
	margin: 0;
	font-size: 17px;
	line-height: 1.85;
	color: var(--ppa-body);
	font-weight: 500;
}
/* The bold lead-ins inside the copy go white, not brand blue. */
.ppa-challenge-body strong { color: #fff; font-weight: 700; }

.ppa-challenge-footnote {
	display: block;
	text-align: center;
	max-width: 900px;
	margin: clamp(38px, 4.5vw, 58px) auto 0;
	padding-top: 26px;
	border-top: 1px solid var(--ppa-hairline);
	line-height: 1.9;
}

/* =============================================================================
   Approach / diamonds
   ========================================================================== */
/* Full-bleed split band: photograph on the right 60%, copy on solid colour at the left. The scrim
   is a separate layer rather than a gradient on the media, so the fade always resolves against the
   page background and never against the photo's own edge. */
.ppa-approach {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 560px;
	background: #0C1119;
	border-top: 1px solid var(--ppa-hairline);
	border-bottom: 1px solid var(--ppa-hairline);
}
.ppa-approach-media {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 60%;
	background-size: cover;
	background-position: 62% 45%;
}
.ppa-approach-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #0C1119 0%, #0C1119 42%, rgba(12,17,25,.15) 68%, rgba(12,17,25,.4) 100%);
}
.ppa-approach-copy {
	position: relative;
	max-width: 660px;
	padding: clamp(64px, 9vw, 110px) var(--ppa-gutter);
}
.ppa-approach-title {
	margin: 0;
	font-size: clamp(46px, 7vw, 92px);
	line-height: .9;
}
.ppa-approach-body { margin: 28px 0 0; }

/* Narrow: the photo cannot hold 60% and still leave room for the copy, so it becomes a full-width
   backdrop behind a heavier scrim. */
@media (max-width: 860px) {
	.ppa-approach { min-height: 0; }
	.ppa-approach-media { width: 100%; opacity: .45; }
	.ppa-approach-scrim { background: linear-gradient(180deg, rgba(12,17,25,.86), rgba(12,17,25,.94)); }
	.ppa-approach-copy { max-width: none; }
}

/* =============================================================================
   What makes us different
   ========================================================================== */
.ppa-different-body {
	columns: 2;
	column-gap: clamp(30px, 4vw, 70px);
	margin-top: clamp(26px, 3vw, 40px);
}
.ppa-different-body p { margin: 0 0 18px; break-inside: avoid; color: var(--ppa-body); }
.ppa-science-title { margin: clamp(44px, 5vw, 72px) 0 0; }

/* =============================================================================
   Proof
   ========================================================================== */
.ppa-proof {
	position: relative;
	padding: clamp(64px, 8vw, 110px) var(--ppa-gutter);
	background-image: linear-gradient(rgba(10,14,20,.86), rgba(10,14,20,.92)), var(--ppa-proof-img);
	background-size: cover;
	background-position: center;
}
.ppa-proof-title { display: block; text-align: center; color: var(--ppa-blue); margin: 0; font-size: 15px; /* client review: the 11px label read too small for a section opener */ }
.ppa-glass {
	border: 1px solid var(--ppa-hairline-strong);
	background: rgba(14, 24, 38, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: clamp(24px, 2.8vw, 36px);
}

/* =============================================================================
   For business leaders
   ========================================================================== */
.ppa-leaders-head { text-align: center; max-width: 820px; margin-inline: auto; }
.ppa-leaders-head .ppa-kicker { justify-content: center; }
.ppa-leaders-head .ppa-h2 { margin: 18px 0 22px; }
.ppa-leader-cards {
	list-style: none; margin: clamp(34px, 4vw, 56px) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 22px;
}
.ppa-leader-card {
	flex: 1 1 280px;
	min-width: 250px;
	border: 1px solid var(--ppa-hairline-mid);
	padding: clamp(22px, 2.6vw, 32px);
	transition: border-color .3s;
}
.ppa-leader-card:hover { border-color: var(--ppa-border-blue); }

.ppa-bridge { text-align: center; margin-top: clamp(44px, 5vw, 70px); }
.ppa-diamond { display: inline-block; width: 9px; height: 9px; background: var(--ppa-blue); transform: rotate(45deg); margin-bottom: 26px; }
.ppa-bridge-lead { margin: 0; color: var(--ppa-body-dim); }
.ppa-bridge-q { margin: 10px auto 0; max-width: 820px; font-size: clamp(19px, 2vw, 25px); line-height: 1.55; color: var(--ppa-headline); }
.ppa-bridge-tail { margin: 20px 0 0; color: var(--ppa-blue-light); }

/* =============================================================================
   Services bands.
   The photograph is an absolutely-positioned 58%-wide layer with its fade in the
   same background shorthand, so it bleeds to the viewport edge and the copy sits
   over it. Values from the reference: 560px min-height, 58% media, a 260px
   numeral bleeding 30px below the band, copy column clamp(300px,47%,760px).
   ========================================================================== */
.ppa-services-head { padding: clamp(64px, 8vw, 110px) var(--ppa-gutter) 0; }
.ppa-services-head .ppa-center { max-width: var(--ppa-maxw); margin-inline: auto; margin-bottom: 54px; }
.ppa-services-head .ppa-kicker { justify-content: center; margin-bottom: 24px; }
.ppa-services-head .ppa-h2 { font-size: clamp(38px, 5vw, 62px); line-height: .96; }
.ppa-services-head .ppa-lede { max-width: 850px; margin: 26px auto 0; color: var(--ppa-body-dim); }

/*
 * The band stack is already full-bleed: .ppa-services has no horizontal padding, only the header
 * inside it does. An earlier version also applied a negative gutter margin here, which pushed the
 * stack past the viewport and produced 72px of horizontal scroll on the homepage.
 */
.ppa-bands {
	margin-top: 48px;
	border-bottom: 1px solid rgba(232, 236, 241, .08);
}

.ppa-band {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	border-top: 1px solid rgba(232, 236, 241, .08);
	display: flex;
	align-items: center;
}

.ppa-band-media {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 58%;
	background-image:
		linear-gradient(90deg, #0A0E14 0%, rgba(10,14,20,.62) 26%, rgba(10,14,20,.08) 60%, rgba(10,14,20,.3) 100%),
		var(--ppa-band-img);
	background-size: 100% 100%, cover;
	background-position: 0 0, center;
}
.ppa-band--right .ppa-band-media { right: 0; }
/* Mirrored: image on the left, so the fade runs the other way. */
.ppa-band--left .ppa-band-media {
	left: 0;
	background-image:
		linear-gradient(270deg, #0A0E14 0%, rgba(10,14,20,.62) 26%, rgba(10,14,20,.08) 60%, rgba(10,14,20,.3) 100%),
		var(--ppa-band-img);
}
.ppa-band--left { justify-content: flex-end; }

.ppa-band-num {
	position: absolute;
	bottom: -30px;
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: clamp(140px, 18vw, 260px);
	line-height: .72;
	color: rgba(76, 159, 216, .13);
	pointer-events: none;
}
.ppa-band--right .ppa-band-num { left: 40px; }
.ppa-band--left .ppa-band-num { right: 40px; }

.ppa-band-body {
	position: relative;
	width: clamp(300px, 47%, 760px);
	max-width: 100%;
	padding: clamp(48px, 7vw, 84px) clamp(18px, 5vw, 72px);
}
.ppa-band-kicker {
	margin: 0;
	font-size: 11px;
	letter-spacing: .24em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ppa-blue-light);
}
.ppa-band-title { font-size: clamp(34px, 4.4vw, 54px); line-height: .94; margin: 18px 0 14px; }
.ppa-band-intro { margin: 0; font-size: 17px; line-height: 1.75; color: var(--ppa-body-bright); font-weight: 500; }

/* Single column, per the reference — not a two-column split. */
.ppa-band-bullets { margin-top: 26px; gap: 12px; }
.ppa-band-bullets li { font-size: 17px; line-height: 1.55; color: var(--ppa-body); padding-left: 16px; }
.ppa-band-bullets li::before { background: var(--ppa-blue-light); width: 5px; height: 5px; left: 0; top: .58em; }
.ppa-band-body .ppa-btn { margin-top: 28px; }

@media (max-width: 900px) {
	/* Stacked: the photograph becomes a band above the copy rather than a layer behind it. */
	.ppa-band { display: block; min-height: 0; }
	.ppa-band-media,
	.ppa-band--left .ppa-band-media {
		position: relative;
		width: 100%;
		height: clamp(220px, 46vw, 340px);
		background-image: var(--ppa-band-img);
		background-size: cover;
	}
	.ppa-band-body { width: 100%; }
	.ppa-band-num { display: none; }
}

/* =============================================================================
   Partnership
   ========================================================================== */
.ppa-phases {
	list-style: none;
	margin: clamp(34px, 4vw, 52px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 18px 0;
}
.ppa-phase { padding: 0 clamp(18px, 3.2vw, 46px); }
.ppa-phase-rule {
	width: 1px;
	background: linear-gradient(180deg, rgba(143,193,227,0), rgba(143,193,227,.4), rgba(143,193,227,0));
}
.ppa-phase-label {
	display: block;
	font-size: 22px;
	letter-spacing: .18em;
	line-height: 1;
	white-space: nowrap;
	color: var(--ppa-blue);
}
.ppa-phase-name {
	display: block;
	margin-top: 12px;
	font-size: clamp(30px, 3vw, 42px);
	line-height: .9;
}
/* Once the phases stack there is nothing for a vertical divider to sit between. */
@media (max-width: 720px) {
	.ppa-phases { flex-direction: column; align-items: center; gap: 26px; }
	.ppa-phase-rule { display: none; }
}

/* =============================================================================
   Retreat
   ========================================================================== */
.ppa-retreat-banner { position: relative; overflow: hidden; min-height: clamp(320px, 46vw, 560px); display: grid; }
.ppa-retreat-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ppa-retreat-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,14,20,.45) 0%, rgba(10,14,20,.35) 45%, var(--ppa-bg) 100%);
}
.ppa-retreat-banner-copy {
	position: relative;
	z-index: 1;
	align-self: end;
	max-width: var(--ppa-maxw);
	width: 100%;
	margin-inline: auto;
	padding: 0 var(--ppa-gutter) clamp(34px, 4vw, 60px);
}
.ppa-retreat-banner-copy .ppa-h2 { margin: 16px 0 0; }
/* Display type, not a caption: the reference sets this at 38px League Gothic beside the intro. */
.ppa-retreat-tagline {
	margin: 0;
	max-width: 340px;
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: 38px;
	line-height: 1.06;
	text-transform: uppercase;
	color: var(--ppa-blue-light);
}
/* Tagline and intro sit side by side, the intro separated by a rule rather than a gap. */
.ppa-retreat-lead {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 34px 54px;
	align-items: center;
	max-width: 1160px;
}
.ppa-retreat-lead .ppa-retreat-intro {
	margin: 0;
	border-left: 1px solid rgba(143, 193, 227, .3);
	padding-left: clamp(22px, 3vw, 44px);
}
@media (max-width: 700px) {
	.ppa-retreat-lead .ppa-retreat-intro { border-left: 0; padding-left: 0; }
}
.ppa-retreat-intro { margin: 0 0 clamp(40px, 5vw, 64px); }
.ppa-retreat-covers-title { text-align: center; }
.ppa-retreat-lists { margin-top: clamp(48px, 5.5vw, 78px); }

/* =============================================================================
   Who we are / team panel
   ========================================================================== */
.ppa-who-body { columns: 2; column-gap: clamp(30px, 4vw, 70px); margin-top: clamp(24px, 3vw, 36px); }
.ppa-who-body p { margin: 0 0 18px; break-inside: avoid; color: var(--ppa-body); }
.ppa-quotes-title { margin: clamp(46px, 5vw, 72px) 0 0; }

.ppa-teampanel-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.ppa-teampanel-grid .ppa-h3 { margin: 18px 0 20px; }
.ppa-teampanel-grid .ppa-btn { margin-top: 26px; }
.ppa-teampanel-aside { border-left: 1px solid var(--ppa-hairline-strong); padding-left: clamp(22px, 2.6vw, 34px); color: var(--ppa-body-dim); font-size: 15.5px; }
.ppa-teampanel-aside .ppa-label { display: block; margin-bottom: 12px; color: var(--ppa-blue); }

/* =============================================================================
   Book
   ========================================================================== */
.ppa-book-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.ppa-book-cover img { width: 100%; height: auto; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.ppa-book-panel { background: var(--ppa-panel); border: 1px solid var(--ppa-hairline-strong); padding: clamp(28px, 3.6vw, 54px); }
/* The reference leads this panel with "The framework in your hands." as the display heading and
   demotes the book's actual title to bold body copy beneath it. */
.ppa-book-headline { margin: 0; font-size: clamp(34px, 4.2vw, 58px); line-height: .96; }
.ppa-book-title { margin: 18px 0 0; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ppa-headline); }
.ppa-book-subtitle { color: var(--ppa-blue-light); }
.ppa-book-byline { display: block; margin: 16px 0 22px; }
.ppa-book-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }

/* =============================================================================
   Closing CTA
   ========================================================================== */
.ppa-cta {
	position: relative;
	padding: clamp(72px, 9vw, 130px) var(--ppa-gutter);
	background-image: linear-gradient(rgba(10,14,20,.82), rgba(10,14,20,.9)), var(--ppa-cta-img);
	background-size: cover;
	background-position: center;
}
.ppa-cta-inner .ppa-h2 { margin-bottom: 22px; }
.ppa-cta-inner .ppa-btn { margin-top: 30px; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.ppa-challenge-grid,
	.ppa-teampanel-grid,
	.ppa-book-grid { grid-template-columns: 1fr; }
	.ppa-different-body,
	.ppa-who-body { columns: 1; }
	.ppa-band { grid-template-columns: 1fr; }
	/* Stacked bands read image-first, per the handoff's mobile note. */
	.ppa-band--right .ppa-band-media,
	.ppa-band--left .ppa-band-media { order: 0; }
	.ppa-band--right .ppa-band-body,
	.ppa-band--left .ppa-band-body { order: 1; }
	.ppa-band-media::after { background: none !important; }
	.ppa-teampanel-aside { border-left: 0; border-top: 1px solid var(--ppa-hairline-strong); padding: 22px 0 0; }
}

@media (max-width: 600px) {
	.ppa-band-num { display: none; }
}

/* The Challenge's mid-section turn: diamond marker, display headline, centred paragraph. */
.ppa-turn { text-align: center; max-width: 960px; margin: clamp(52px, 6vw, 84px) auto 0; }
.ppa-diamond--lg { width: 10px; height: 10px; margin-bottom: 34px; }
.ppa-turn-title { font-size: clamp(34px, 4.6vw, 64px); line-height: .94; }
.ppa-turn-body { max-width: 780px; margin: 28px auto 0; font-size: 17px; line-height: 1.85; color: var(--ppa-body); }

/* =============================================================================
   Quote cards — the treatment the reference uses for the partner quotes:
   an animated gradient border and a large League Gothic opening mark.
   ========================================================================== */
.ppa-quote-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(20px, 2.6vw, 34px);
	margin-top: clamp(28px, 4vw, 46px);
}
.ppa-quote-card {
	margin: 0;
	padding: 44px 40px 36px;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--ppa-panel), var(--ppa-panel)) padding-box,
		linear-gradient(120deg, rgba(143,193,227,.7) 0%, rgba(76,159,216,.14) 30%, rgba(44,123,181,.12) 55%, rgba(143,193,227,.55) 100%) border-box;
	background-size: auto, 240% 240%;
	animation: ppaShine 9s linear infinite alternate;
	transition: border-color .4s;
}
.ppa-quote-card:hover { border-color: var(--ppa-border-blue); }
.ppa-quote-mark {
	display: block;
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: 96px;
	line-height: .5;
	color: rgba(76, 159, 216, .4);
	margin-bottom: 18px;
}
.ppa-quote-card blockquote { margin: 0; }
.ppa-quote-card blockquote p {
	font-size: 17px;
	line-height: 1.75;
	color: rgba(232, 236, 241, .85);
	font-style: italic;
	margin: 0 0 16px;
}
.ppa-quote-card figcaption { color: var(--ppa-body-mid); line-height: 1.7; }

/* The image-filled headline variant used by Who We Are keeps a faint stroke so the
   letterforms hold together where the photograph goes dark. */

/* =============================================================================
   Retreat — "what the retreat covers" is a two-column split: the heading on the
   left, a hairline-separated list on the right with the icon in its own column.
   Values from the reference: 76px icon column, 26px gap, 28px row padding.
   ========================================================================== */
.ppa-covers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 44px 80px;
	margin-top: clamp(52px, 7vw, 90px);
	align-items: start;
}
.ppa-covers-title { font-size: clamp(34px, 3.8vw, 52px); line-height: .94; }

.ppa-cover-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Explicit: a superseded rule elsewhere once set display:grid here and silently won, turning the
	   single-column list into two narrow columns. */
	display: block;
	border-top: 1px solid var(--ppa-hairline-mid);
}
.ppa-cover {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 26px;
	padding: 28px 0;
	border-bottom: 1px solid var(--ppa-hairline-mid);
	align-items: start;
}
.ppa-cover .ppa-icon-tile { margin-bottom: 0; }
.ppa-icon-tile--blue { border-color: rgba(76, 159, 216, .4); color: var(--ppa-blue); }
.ppa-cover-text { max-width: 760px; margin-top: 8px; font-size: 17px; line-height: 1.7; color: var(--ppa-body-mid); }

/* Who it is for / Format: gradient-border panels, not plain lists. */
.ppa-retreat-lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 28px;
	margin-top: clamp(52px, 6vw, 76px);
}
.ppa-listpanel {
	border: 1px solid transparent;
	background:
		linear-gradient(rgba(232,236,241,.04), rgba(232,236,241,.04)) padding-box,
		linear-gradient(120deg, rgba(143,193,227,.7) 0%, rgba(76,159,216,.14) 30%, rgba(44,123,181,.12) 55%, rgba(143,193,227,.55) 100%) border-box;
	background-size: auto, 240% 240%;
	animation: ppaShine 10s linear infinite alternate;
	padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3.2vw, 44px);
}
.ppa-listpanel-title { font-size: clamp(28px, 2.8vw, 38px); line-height: .96; margin-bottom: 26px; }
.ppa-listpanel .ppa-bullets { margin-top: 0; gap: 10px; }
.ppa-listpanel .ppa-bullets li { font-size: 17px; line-height: 1.6; color: rgba(232, 236, 241, .62); }

@media (max-width: 640px) {
	.ppa-cover { grid-template-columns: 1fr; gap: 16px; }
}

/* =============================================================================
   Schedule a Conversation
   ========================================================================== */
.ppa-schedule { padding: clamp(56px, 7vw, 96px) var(--ppa-gutter); }
.ppa-schedule-grid {
	max-width: var(--ppa-maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: clamp(36px, 5vw, 84px);
	align-items: start;
}
.ppa-schedule-title { font-size: clamp(40px, 5.4vw, 74px); line-height: .94; margin: 20px 0 24px; }
.ppa-schedule-expect { display: block; margin: clamp(38px, 4.5vw, 58px) 0 0; color: var(--ppa-blue); }

.ppa-ladder { list-style: none; margin: 22px 0 0; padding: 0; }
.ppa-ladder li {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 20px;
	padding: 24px 0;
	border-top: 1px solid var(--ppa-hairline-mid);
	align-items: start;
}
.ppa-ladder-num { font-family: 'League Gothic', 'Arial Narrow', sans-serif; font-size: 30px; color: var(--ppa-blue); }
.ppa-ladder-title { font-size: 18px; font-weight: 700; color: var(--ppa-headline); margin: 0 0 6px; }
.ppa-ladder-text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ppa-body-dim); }

/* Form panel — corner ticks, square fields, no rounded corners anywhere. */
.ppa-formpanel {
	position: relative;
	border: 1px solid var(--ppa-hairline-strong);
	background: var(--ppa-panel);
	padding: clamp(28px, 3.6vw, 52px);
}
.ppa-formpanel::before,
.ppa-formpanel::after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	border: 1px solid var(--ppa-border-blue);
	pointer-events: none;
}
.ppa-formpanel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ppa-formpanel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.ppa-formpanel-title { font-size: clamp(28px, 3vw, 40px); }
.ppa-formpanel-note { margin: 10px 0 26px; font-size: 15px; color: var(--ppa-body-dim); }
.ppa-formpanel-warning {
	border: 1px solid var(--ppa-border-blue-soft);
	padding: 16px 18px;
	font-size: 15px;
	color: var(--ppa-body-bright);
}

.ppa-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 20px; }
.ppa-field { margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.ppa-field label {
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ppa-body-mid);
}
.ppa-field input,
.ppa-field select,
.ppa-field textarea {
	background: rgba(232, 236, 241, .05);
	border: 1px solid rgba(232, 236, 241, .18);
	color: var(--ppa-headline);
	padding: 13px 14px;
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	width: 100%;
	transition: border-color .25s, background .25s;
}
.ppa-field textarea { resize: vertical; min-height: 130px; }
.ppa-field input:focus,
.ppa-field select:focus,
.ppa-field textarea:focus {
	border-color: var(--ppa-blue-light);
	background: rgba(232, 236, 241, .08);
	outline: none;
}
.ppa-form-submit { width: 100%; margin-top: 6px; }
.ppa-form-reassure { margin: 18px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ppa-body-dim); }

/* Direct contact strip. */
.ppa-direct { border-top: 1px solid var(--ppa-hairline); padding: clamp(48px, 6vw, 80px) var(--ppa-gutter); }
.ppa-direct-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 860px) {
	.ppa-direct-grid { grid-template-columns: 1fr; }
}
/* Sized to sit on one line at desktop, as the reference does; `balance` was splitting it in two. */
.ppa-direct-title { font-size: clamp(26px, 2.5vw, 36px); line-height: .94; }
.ppa-direct-phone { display: inline-block; font-size: 26px; margin: 8px 0 6px; text-decoration: none; }
.ppa-direct address { font-style: normal; color: var(--ppa-body); }

/* =============================================================================
   Team roster + profiles
   ========================================================================== */
.ppa-teamhero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 100px) var(--ppa-gutter) clamp(36px, 4vw, 60px); }
.ppa-teamhero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(143, 193, 227, .13) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(1000px 560px at 50% 30%, #000, transparent 74%);
	mask-image: radial-gradient(1000px 560px at 50% 30%, #000, transparent 74%);
}
.ppa-teamhero .ppa-wrap { position: relative; }
.ppa-teamhero-title { font-size: clamp(40px, 6vw, 86px); line-height: .94; margin-top: 20px; }

/* Leadership bands, same geometry as the service bands. */
.ppa-leadbands { border-top: 1px solid var(--ppa-hairline); }
.ppa-leadband {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	padding: clamp(36px, 5vw, 72px) var(--ppa-gutter);
	border-bottom: 1px solid var(--ppa-hairline);
}
.ppa-leadband--left .ppa-leadband-media { order: 2; }
.ppa-leadband-media { aspect-ratio: 4 / 5; overflow: hidden; }
.ppa-leadband-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); }
.ppa-leadband-name { font-size: clamp(34px, 4.4vw, 62px); line-height: .94; margin: 14px 0 10px; }
.ppa-leadband-name a { color: inherit; text-decoration: none; }
.ppa-leadband-name a:hover .ppa-em { color: #fff; }
.ppa-leadband-creds {
	display: block;
	margin-bottom: 18px;
	color: var(--ppa-blue-light);
	/* Credentials keep the case they were written in — "Ph.D., LP." not "PH.D., LP." The base
	   .ppa-label uppercases, which is what made the team page look wrong while the profile pages,
	   already exempted, looked right (client review, Jake 2026-08-24). */
	text-transform: none;
	font-size: 13px;
	letter-spacing: .14em;
}
.ppa-leadband-body .ppa-btn { margin-top: 26px; }

/* Advisor cards. */
.ppa-advisor a:hover .ppa-advisor-photo img { filter: saturate(1); transform: scale(1.04); }
/* Names are forced to two lines so the cards align on a common baseline. */

/* Profile. */
.ppa-profile-hero { position: relative; overflow: hidden; padding: clamp(28px, 3vw, 44px) var(--ppa-gutter) clamp(48px, 6vw, 84px); }
.ppa-profile-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(143, 193, 227, .13) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(900px 620px at 30% 40%, #000, transparent 74%);
	mask-image: radial-gradient(900px 620px at 30% 40%, #000, transparent 74%);
}
.ppa-profile-hero .ppa-wrap { position: relative; }
.ppa-crumb {
	display: flex;
	gap: 10px;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ppa-body-mid);
	margin-bottom: clamp(28px, 4vw, 52px);
}
.ppa-crumb a { color: var(--ppa-blue-light); text-decoration: none; }
/*
 * The reference lays this out with flex, not a fixed ratio: the copy takes `flex:999 1 420px` up to
 * 820px, and the portrait `flex:1 1 340px` between 280px and 460px. A 1.15/.85 grid made the copy
 * column too narrow and the portrait too wide.
 */
.ppa-profile-grid { display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 70px); align-items: center; }
.ppa-profile-copy { position: relative; flex: 999 1 420px; min-width: 0; max-width: 820px; }
.ppa-profile-name { font-size: clamp(58px, 7.4vw, 110px); line-height: .92; margin: 24px 0 0; }
/* Not .ppa-label: the reference keeps the original case ("Psy.D., LP., CMPC") at 14px/.14em. */
.ppa-profile-creds {
	display: block;
	margin-top: 18px;
	font-size: 14px;
	letter-spacing: .14em;
	font-weight: 700;
	text-transform: none;
	color: var(--ppa-blue-light);
}
.ppa-profile-rule { display: block; width: 64px; height: 1px; background: rgba(76, 159, 216, .5); margin: 28px 0; }
.ppa-profile-lead { font-size: 17px; line-height: 1.85; color: var(--ppa-body-bright); font-weight: 500; margin: 0; }
/* The whole bio in one colour — same as the lead. The reference dims paragraphs after the lead, but
   with the full live-site bios in place the drop reads as a mistake, and the client flagged it on
   three profiles (Jake, 2026-08-24). A first attempt added a separate equal-specificity rule one
   line above this one, which the cascade promptly ignored. */
.ppa-profile-copy .ppa-lede { margin-top: 18px; line-height: 1.85; color: var(--ppa-body-bright); }
.ppa-profile-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
/* Offset frame + blue corner ticks around the portrait. */
.ppa-profile-portrait { position: relative; flex: 1 1 340px; min-width: 280px; max-width: 460px; }
/* Offset frame, up and to the left, per the reference. */
.ppa-profile-portrait::before {
	content: '';
	position: absolute;
	left: -18px;
	top: -18px;
	right: 18px;
	bottom: 18px;
	border: 1px solid rgba(76, 159, 216, .22);
	pointer-events: none;
}
.ppa-profile-portrait img {
	position: relative;
	width: 100%;
	height: clamp(420px, 44vw, 560px);
	object-fit: cover;
	background: var(--ppa-panel);
	filter: saturate(.82);
}

.ppa-focus { background: var(--ppa-panel-alt); padding: clamp(44px, 5.5vw, 78px) var(--ppa-gutter); }
.ppa-focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }
.ppa-focus-title { font-size: clamp(28px, 3vw, 42px); }
.ppa-focus-title .ppa-em { color: var(--ppa-blue-light); }
.ppa-focus-list { margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); display: grid; gap: 14px 40px; }
.ppa-focus-list li { border-top: 1px solid var(--ppa-hairline-mid); padding-top: 14px; padding-left: 26px; }
.ppa-focus-list li::before { top: 1.35em; }

.ppa-prevnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); border-top: 1px solid var(--ppa-hairline); }
.ppa-prevnext-item {
	display: block;
	padding: clamp(28px, 3.4vw, 48px) var(--ppa-gutter);
	text-decoration: none;
	color: inherit;
	transition: background .3s;
}
.ppa-prevnext-item:hover { background: rgba(44, 123, 181, .08); }
.ppa-prevnext-item + .ppa-prevnext-item { border-left: 1px solid var(--ppa-hairline); }
.ppa-prevnext-item--next { text-align: right; }
.ppa-prevnext-name { display: block; margin-top: 10px; font-size: clamp(24px, 2.6vw, 36px); }

@media (max-width: 900px) {
	.ppa-leadband { grid-template-columns: 1fr; }
	.ppa-leadband--left .ppa-leadband-media { order: 0; }
	.ppa-profile-grid { grid-template-columns: 1fr; }
	.ppa-prevnext-item + .ppa-prevnext-item { border-left: 0; border-top: 1px solid var(--ppa-hairline); }
	.ppa-prevnext-item--next { text-align: left; }
}

/* Placeholder tone, so hint text reads as a hint and not as an entered value. */
.ppa-field input::placeholder,
.ppa-field textarea::placeholder { color: rgba(232, 236, 241, .34); }
/* The schedule headline balances across lines rather than breaking at a fixed point. */
.ppa-schedule-title { text-wrap: balance; }

/* Zoho's CAPTCHA: its image beside the answer field. Required by Zoho, so it is styled, not hidden. */
.ppa-captcha { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-bottom: 18px; }
.ppa-captcha-field { margin: 0; }
.ppa-captcha-img { border: 1px solid rgba(232, 236, 241, .18); background: #fff; }
@media (max-width: 520px) { .ppa-captcha { grid-template-columns: 1fr; align-items: start; } }

/* =============================================================================
   Team carousel — cards on a 3D arc. Geometry is set by JS per slot; this holds
   the stage, the card chrome and the caption.
   ========================================================================== */
.ppa-teamhero-intro { max-width: 700px; margin: 30px auto 0; }
.ppa-teamhero .ppa-wrap { text-align: center; }
.ppa-teamhero .ppa-kicker { justify-content: center; }

.ppa-fan {
	position: relative;
	margin-top: 56px;
	height: 560px;
	overflow: hidden;
	perspective: 1600px;
}
.ppa-fan-card {
	position: absolute;
	left: 50%;
	top: 50%;
	overflow: hidden;
	border: 1px solid rgba(143, 193, 227, .22);
	background: var(--ppa-panel);
	box-shadow: 0 24px 56px rgba(0, 0, 0, .45);
	/* Placed by JS; this is the pre-paint state so nothing flashes centre-stage on load. */
	opacity: 0;
	transform: translate(-50%, -50%);
	will-change: transform, width, height;
}
.ppa-fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.83); }
.ppa-fan-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 16px 14px;
	background: linear-gradient(180deg, rgba(10, 14, 20, 0), rgba(10, 14, 20, .93));
	text-align: center;
	pointer-events: none;
	transition: opacity .5s ease;
}
.ppa-fan-name { display: block; font-size: 24px; line-height: 1; }
.ppa-fan-role {
	display: block;
	margin-top: 6px;
	font-size: 9.5px;
	letter-spacing: .16em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ppa-blue-light);
}

/* Narrow screens: the arc needs width it does not have, so the stage stands down. */
@media (max-width: 860px) { .ppa-fan { display: none; } }
@media (prefers-reduced-motion: reduce) { .ppa-fan { display: none; } }

/* =============================================================================
   Partnership feature panel
   ========================================================================== */
.ppa-ppanel {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 64px);
	text-align: center;
	/* Two backgrounds: the panel fill on padding-box, the moving gradient on border-box, so the
	   1px border is the only place the gradient shows. */
	background:
		linear-gradient(#0C1119, #0C1119) padding-box,
		linear-gradient(120deg, rgba(143,193,227,.7) 0%, rgba(76,159,216,.14) 30%, rgba(44,123,181,.12) 55%, rgba(143,193,227,.55) 100%) border-box;
	background-size: auto, 240% 240%;
	border: 1px solid transparent;
	animation: ppaShine 8s linear infinite alternate;
}
.ppa-ppanel-media { position: absolute; inset: 0; background-size: 100% 100%, cover; background-position: 0 0, center 30%; }


.ppa-ppanel-inner { position: relative; }
/* .ppa-kicker is a flex row, so the panel's text-align:center does not reach it. */
.ppa-ppanel-inner .ppa-kicker { justify-content: center; }
.ppa-ppanel-title { margin: 0; font-size: clamp(38px, 5.4vw, 64px); line-height: .94; }
.ppa-ppanel-intro { max-width: 780px; margin: 26px auto 0; }
.ppa-ppanel-cta { margin-top: clamp(34px, 4vw, 52px); }

@keyframes ppaShine {
	from { background-position: 0 0, 0% 50%; }
	to   { background-position: 0 0, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.ppa-ppanel { animation: none; }
}

/* =============================================================================
   Workshops — full-width rows
   ========================================================================== */
.ppa-workshops-intro { max-width: 850px; margin: 26px 0 0; }
.ppa-wsrows {
	list-style: none;
	margin: clamp(36px, 4vw, 54px) 0 0;
	padding: 0;
	border-top: 1px solid var(--ppa-hairline-mid);
}
.ppa-wsrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px clamp(20px, 3vw, 40px);
	padding: 32px 10px;
	border-bottom: 1px solid var(--ppa-hairline-mid);
	transition: background .35s;
}
.ppa-wsrow:hover { background: rgba(143, 193, 227, .05); }
.ppa-wsrow-num {
	flex: none;
	width: clamp(52px, 8vw, 110px);
	font-size: 56px;
	line-height: .85;
	color: var(--ppa-blue);
}
/* Grows far harder than the pillars column, so the description takes the slack and the pillars
   stay at their natural width until the row is genuinely too narrow. */
.ppa-wsrow-body { flex: 999 1 280px; min-width: 0; }
.ppa-wsrow-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ppa-headline); }
.ppa-wsrow-text { margin: 8px 0 0; max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--ppa-body-dim); }
.ppa-wsrow-pillars {
	flex: 1 1 220px;
	margin: 0;
	font-size: 11px;
	letter-spacing: .16em;
	line-height: 1.8;
	font-weight: 700;
	text-transform: uppercase;
	text-align: right;
	color: var(--ppa-blue-light);
}
/* Stacked, a right-aligned pillars line reads as a stray fragment. */
@media (max-width: 720px) {
	.ppa-wsrow-num { font-size: 40px; }
	.ppa-wsrow-pillars { text-align: left; }
}

/* Photo-filled headline, the way the reference does it: a bright blue gradient is blended over the
   photograph with `screen`, so the result can never be darker than the gradient. Filling text with a
   raw dark photo — which an earlier version of the approach section did — paints near-black on
   near-black and the words vanish. The stroke keeps the glyph edges readable over the busiest part
   of the image, and a solid colour is declared first so a failed image still leaves visible text. */
.ppa-photofill {
	color: var(--ppa-blue-light);
	background-image:
		linear-gradient(115deg, var(--ppa-blue), var(--ppa-blue-light) 50%, #2C7BB5),
		var(--ppa-photofill-img);
	background-size: cover, cover;
	background-position: center, center 40%;
	background-blend-mode: screen;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-stroke: 1px rgba(143, 193, 227, .25);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.ppa-photofill { color: transparent; }
}

/* =============================================================================
   Per-section heading sizes

   .ppa-h2 caps at 76px, which quietly flattened six distinct sizes in the design to one. The
   reference gives each section its own — 104px for "Proven inside the arena", 46px for the two
   quote sections, and so on. These restore that hierarchy.
   ========================================================================== */
.ppa-different .ppa-h2 { font-size: clamp(38px, 5.8vw, 82px); }
.ppa-science-title { font-size: clamp(30px, 3.4vw, 46px); }
.ppa-workshops .ppa-h2 { font-size: clamp(38px, 4.6vw, 64px); }
.ppa-retreat-title { font-size: clamp(40px, 6.6vw, 82px); }
.ppa-who .ppa-h2 { font-size: clamp(42px, 7.4vw, 104px); line-height: .9; }
/* Both quote sections, whichever heading level they use. */
.ppa-quotes-title { font-size: clamp(30px, 3.4vw, 46px); line-height: .96; margin-bottom: 38px; }
.ppa-cta .ppa-h2 { font-size: clamp(40px, 5.4vw, 74px); }

/* "What makes us different" carries slightly larger numerals than the other numbered lists (60px
   against 56px elsewhere). Verified by reading which section the four 60px numerals sit in — they
   are in .ppa-different, not the challenge section above it. */
.ppa-different .ppa-numcard-num { font-size: 60px; }

/* =============================================================================
   Late corrections found by independent QA
   ========================================================================== */

/* The five "for business leaders" card titles are display type in the reference — 26px League
   Gothic, uppercase — not the 18px bold body style the other card titles share. They sat below the
   30px floor of the heading sweep, which is why the sweep did not catch them. */
.ppa-leader-title {
	margin: 20px 0 10px;
	font-family: 'League Gothic', 'Arial Narrow', sans-serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ppa-headline);
}
.ppa-leader-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ppa-body-dim); }

/* Team-panel heading: 52px in the reference, not the 54px the .ppa-h3 clamp lands on. */
.ppa-teampanel .ppa-h3 { font-size: clamp(30px, 3.6vw, 52px); }

/* =============================================================================
   Section heading with a trailing rule — "Leader|ship", "Advi|sors"
   ========================================================================== */
.ppa-rulehead {
	display: flex;
	align-items: baseline;
	gap: 22px;
	margin: 0;
	padding: clamp(44px, 6vw, 70px) 0 34px;
}
.ppa-rulehead-text { font-size: clamp(34px, 4.4vw, 52px); line-height: .94; }
.ppa-rulehead-rule { flex: 1; height: 1px; background: rgba(232, 236, 241, .1); align-self: center; }
.ppa-leadbands + * .ppa-rulehead,
.ppa-wrap > .ppa-rulehead:first-child { padding-top: 0; }

/* =============================================================================
   Advisor cards — portrait with the name laid over it, description beneath
   ========================================================================== */
.ppa-advisor-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 24px;
}
.ppa-advisor {
	background: rgba(232, 236, 241, .03);
	border: 1px solid rgba(232, 236, 241, .12);
	overflow: hidden;
	transition: border-color .4s, transform .4s;
}
.ppa-advisor:hover { border-color: rgba(143, 193, 227, .5); transform: translateY(-4px); }
.ppa-advisor a { display: block; text-decoration: none; color: inherit; }

.ppa-advisor-media { position: relative; display: block; height: 250px; }
.ppa-advisor-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.8);
}
/* Fades the lower half so the name reads over any portrait. */
.ppa-advisor-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,14,20,0) 45%, rgba(10,14,20,.92) 96%);
}
.ppa-advisor-meta {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 16px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.ppa-advisor-name { font-size: 30px; line-height: .98; color: var(--ppa-headline); }
/* Credentials keep the case they were written in — "Ph.D., LP.", not "PH.D., LP." */
.ppa-advisor-creds {
	flex: none;
	font-size: 10.5px;
	letter-spacing: .08em;
	font-weight: 700;
	text-transform: none;
	color: var(--ppa-blue-light);
}
.ppa-advisor-body {
	display: block;
	padding: 20px 24px 26px;
	font-size: 15px;
	line-height: 1.7;
	font-weight: 500;
	color: rgba(232, 236, 241, .65);
}

/* =============================================================================
   320px overflow fix
   ========================================================================== */
/*
 * Grid and flex children default to `min-width: auto`, which lets an item refuse to shrink below
 * its content's intrinsic width. The footer logo is a wide lockup: at its clamped height it wants
 * 314px, which pushed .ppa-footer-brand past its 284px track and gave the whole page 12px of
 * horizontal scroll at 320px. Every other width had room, which is why it only showed on the
 * narrowest phones.
 */
.ppa-footer-grid > *,
.ppa-nav > * { min-width: 0; }

.ppa-footer .ppa-logo { max-width: 100%; }
.ppa-footer .ppa-logo img {
	max-width: 100%;
	height: auto;          /* keeps the aspect ratio while the width is capped */
	max-height: 25px;
}

/*
 * Long unbreakable tokens — the contact email is 36 characters — cannot wrap by default, so they set
 * a min-content width their column must honour. At 320px that was 314px against a 284px track, which
 * is the rest of the 12px page overflow.
 *
 * `anywhere` rather than `break-word`: only `anywhere` reduces the intrinsic min-content width, which
 * is what grid and flex track sizing actually reads.
 */
.ppa-footer a,
.ppa-footer address,
.ppa-footer li,
.ppa-direct a,
.ppa-direct address { overflow-wrap: break-word; }