/* =============================================================================
 * PerformAd, every page EXCEPT the front page. All rules scoped under .pa-inner.
 *
 * Shared component families (stat tiles, case cards, icon rings, partner tiles) live in
 * components.css so the homepage and these pages share one definition. This file owns the
 * inner-page furniture: page heroes, hub grids, single-item heroes, prose, the CTA band, and the
 * About / Contact / 404 layouts.
 *
 * Colours/spacing/type come from --pa-* aliases only, no raw hex. Motion is transform/opacity and
 * inherits the sitewide reduced-motion guard in tokens.css.
 * ========================================================================== */

/* Header clearance is set sitewide in components.css (the front page also renders a .pa-inner main
 * before a static front page exists, and inner.css is not loaded there). */
.pa-inner {
	padding-block-end: var(--pa-section);
	min-block-size: 60svh;
}

/* =================================================================
 * PAGE HERO
 * ================================================================== */

.pa-inner .pa-hero {
	position: relative;
	isolation: isolate;
	padding-block: var(--pa-xl) var(--pa-2xl);
}

.pa-inner .pa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(52% 70% at 78% 20%, var(--pa-glow) 0%, transparent 72%);
	pointer-events: none;
}

.pa-inner .pa-hero h1 {
	font-size: var(--pa-fs-h2);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin-block: var(--pa-sm) var(--pa-md);
	text-wrap: balance;
}

.pa-inner .pa-hero .pa-lead {
	margin-block: 0;
}

.pa-inner .pa-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.pa-inner .pa-eyebrow a:hover,
.pa-inner .pa-eyebrow a:focus-visible {
	color: var(--pa-green);
	text-decoration: underline;
}

/* --- single-item hero ---------------------------------------------------- */

.pa-inner .single-head {
	display: flex;
	align-items: center;
	gap: var(--pa-md);
	margin-block: var(--pa-sm) var(--pa-md);
}

.pa-inner .single-head h1 {
	margin: 0;
}

.pa-inner .single-head__icon {
	inline-size: 24px;
	block-size: 24px;
	color: var(--pa-green-400);
}

.pa-inner .single-proof {
	display: inline-flex;
	align-items: center;
	gap: var(--pa-xs);
	margin-block-start: var(--pa-md);
	padding: 0.5rem 1rem;
	border: 1px solid var(--pa-green-700);
	border-radius: var(--pa-r-pill);
	font-size: var(--pa-fs-sm);
	color: var(--pa-text-2);
}

.pa-inner .single-proof span {
	font-size: var(--pa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pa-green);
}

/* --- success story hero: abstract console (client pick, 2026-08-05) -------
 * No photography by design: the brand carries through a watermark-scale mark behind the copy plus
 * the logo as the heading, and the result sits in a gauge console echoing the homepage hero. */

.pa-inner .story-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

/* Watermark mark, bled off the trailing edge. Decorative only: it is aria-hidden and the same
   image already appears as the heading, so nothing here carries meaning. */
.pa-inner .story-mark {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: -70px;
	transform: translateY(-50%);
	inline-size: 540px;
	max-inline-size: none;
	block-size: auto;
	opacity: 0.06;
	z-index: -1;
	pointer-events: none;
}

/* The h1 IS the brand mark on a story with a logo (its text name rides along, visually hidden).
   line-height: 1 stops the inherited heading leading from padding the image. */
.pa-inner .story-hero__brand {
	line-height: 1;
	margin-block: 1.4rem 1.1rem;
}

.pa-inner .story-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.pa-inner .story-hero__summary {
	margin-block-start: var(--pa-md);
	max-width: 48ch;
}

/* --- gauge console ------------------------------------------------------- */

.pa-inner .story-gauge {
	background: linear-gradient(160deg, var(--pa-surface), var(--pa-canvas) 75%);
	border: 1px solid var(--pa-border-strong);
	border-radius: var(--pa-r-lg);
	padding: 1.6rem 1.6rem 1.3rem;
	inline-size: min(400px, 100%);
	margin-inline: auto;
}

.pa-inner .story-gauge__head {
	display: flex;
	justify-content: space-between;
	gap: var(--pa-sm);
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pa-muted);
	margin-block-end: 0.4rem;
}

.pa-inner .story-gauge__head b {
	color: var(--pa-green-400);
	font-weight: 600;
}

.pa-inner .story-gauge__fig {
	position: relative;
}

.pa-inner .story-gauge__fig svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Arc paints, tokens only (rule 7). The sweep length is set per story in the pattern. */
.pa-inner .gauge-track {
	stroke: var(--pa-border-strong);
}

.pa-inner .gauge-halo {
	stroke: color-mix(in srgb, var(--pa-green) 22%, transparent);
}

.pa-inner .gauge-fill {
	stroke: var(--pa-green);
}

.pa-inner .story-gauge__read {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	text-align: center;
}

.pa-inner .story-gauge__read .metric {
	font-size: 3.4rem;
	font-weight: 800;
	color: var(--pa-green);
	line-height: 1;
	letter-spacing: -0.03em;
}

.pa-inner .story-gauge__read .what {
	margin-block-start: 0.35rem;
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pa-text-2);
}

/* --- campaign results console -------------------------------------------- */

.pa-inner .story-results {
	padding-block: var(--pa-xl);
	background: var(--pa-surface);
	border-block: 1px solid var(--pa-border);
}

.pa-inner .story-results__cap {
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pa-muted);
	margin-block: 0 var(--pa-md);
}

.pa-inner .story-results__console {
	display: flex;
	align-items: center;
}

.pa-inner .story-tile {
	flex: 1 1 0;
	background: var(--pa-raised);
	border: 1px solid var(--pa-border-strong);
	border-radius: var(--pa-r);
	padding: 1.15rem 1.4rem;
	transition: transform var(--pa-t) var(--pa-ease);
}

.pa-inner .story-tile:hover {
	transform: translateY(-3px);
}

.pa-inner .story-tile__t {
	display: flex;
	justify-content: space-between;
	gap: var(--pa-xs);
	font-size: var(--pa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pa-muted);
}

.pa-inner .story-tile__t b {
	color: var(--pa-green-600);
	font-weight: 700;
}

.pa-inner .story-tile__n {
	font-size: 2.1rem;
	font-weight: 800;
	color: var(--pa-green);
	line-height: 1.15;
	margin-block-start: 0.3rem;
}

/* Dashed feed line between tiles, the same language as the homepage engine section. */
.pa-inner .story-results__con {
	flex: 0 1 4rem;
	position: relative;
	border-block-start: 2px dashed var(--pa-border-strong);
	align-self: center;
	margin-inline: 0.8rem;
}

.pa-inner .story-results__con::after {
	content: "";
	position: absolute;
	inset-block-start: -5px;
	inset-inline-start: 50%;
	transform: translateX(-50%) rotate(45deg);
	inline-size: 8px;
	block-size: 8px;
	background: var(--pa-green-600);
	border-radius: 2px;
}

/* --- story narrative ----------------------------------------------------- */

.pa-inner .story-body {
	padding-block: var(--pa-xl) 0;
}

.pa-inner .story-prose {
	max-width: 70ch;
	margin-inline: auto;
}

/* Pull-quote, injected before the final paragraph by pa_story_pullquote(). */
.pa-inner .story-quote {
	border-inline-start: 3px solid var(--pa-green);
	padding-inline-start: 1.4rem;
	margin-block: var(--pa-lg);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pa-green-400);
	max-width: 34ch;
}

.pa-inner .tag {
	display: inline-block;
	margin-block-start: var(--pa-md);
	padding: 0.32rem 0.75rem;
	border: 1px solid var(--pa-green-700);
	border-radius: var(--pa-r-pill);
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pa-green-400);
	text-decoration: none;
}

a.tag:hover,
a.tag:focus-visible {
	border-color: var(--pa-green);
	color: var(--pa-green);
}

/* =================================================================
 * HUB GRIDS
 * ================================================================== */

.pa-inner .hub {
	padding-block: var(--pa-xl) var(--pa-2xl);
}

.pa-inner .hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pa-md);
}

.pa-inner .hub-card {
	background: var(--pa-surface);
	border: 1px solid var(--pa-border);
	border-radius: var(--pa-r-lg);
	padding: var(--pa-lg);
	transition: transform var(--pa-t) var(--pa-ease), border-color var(--pa-t), box-shadow var(--pa-t);
}

.pa-inner .hub-card:hover {
	transform: translateY(-4px);
	border-color: var(--pa-green-700);
	box-shadow: 0 24px 50px -24px var(--pa-glow-strong);
}

.pa-inner .hub-card__icon {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	border: 1.5px dashed var(--pa-green-600);
	margin-block-end: var(--pa-md);
}

.pa-inner .hub-card__icon svg {
	inline-size: 20px;
	block-size: 20px;
	color: var(--pa-green-400);
}

.pa-inner .hub-card__title {
	font-size: var(--pa-fs-lg);
	margin: 0 0 var(--pa-xs);
}

.pa-inner .hub-card__title a {
	color: var(--pa-text);
	text-decoration: none;
}

.pa-inner .hub-card__title a:hover,
.pa-inner .hub-card__title a:focus-visible {
	color: var(--pa-green-400);
}

.pa-inner .hub-card__desc {
	font-size: var(--pa-fs-sm);
	color: var(--pa-text-2);
	margin: 0;
}

.pa-inner .hub-card__proof {
	margin-block-start: var(--pa-md);
	padding-block-start: var(--pa-sm);
	border-block-start: 1px solid var(--pa-border);
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pa-green-400);
}

/* Story cards are the shared split-ledger `.case` component from components.css; the hub adds
   nothing of its own since the 2026-08-05 redesign. The old `.case-foot` / `.case-more` rules were
   deleted with the markup that used them (the visible "Read the story" link became the card-wide
   stretched overlay link). */

/* =================================================================
 * PROSE
 * ================================================================== */

.pa-prose {
	max-width: 72ch;
	color: var(--pa-text-2);
}

.pa-prose > * + * {
	margin-block-start: var(--pa-md);
}

.pa-prose h2,
.pa-prose h3 {
	color: var(--pa-text);
	margin-block-start: var(--pa-xl);
}

.pa-prose h2 {
	font-size: var(--pa-fs-xl);
}

.pa-prose h3 {
	font-size: var(--pa-fs-lg);
}

.pa-prose a {
	color: var(--pa-green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.pa-prose a:hover,
.pa-prose a:focus-visible {
	color: var(--pa-green-400);
}

.pa-prose ul,
.pa-prose ol {
	padding-inline-start: 1.4rem;
}

.pa-prose li + li {
	margin-block-start: 0.4rem;
}

.pa-prose img {
	border-radius: var(--pa-r);
}

.pa-prose strong {
	color: var(--pa-text);
}

/* =================================================================
 * ABOUT
 * ================================================================== */

.pa-inner .about-body {
	padding-block: var(--pa-md) var(--pa-2xl);
}

.pa-inner .value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pa-md);
	margin-block: var(--pa-2xl) var(--pa-2xl);
}

.pa-inner .value {
	background: var(--pa-surface);
	border: 1px solid var(--pa-border);
	border-radius: var(--pa-r-lg);
	padding: var(--pa-lg);
}

.pa-inner .value h2 {
	font-size: var(--pa-fs-lg);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-block: var(--pa-md) var(--pa-xs);
}

.pa-inner .value p {
	font-size: var(--pa-fs-sm);
	color: var(--pa-text-2);
	margin: 0;
}

.pa-inner .partner-strip {
	margin-block-start: var(--pa-2xl);
	padding-block-start: var(--pa-lg);
	border-block-start: 1px solid var(--pa-border);
}

.pa-inner .partner-strip__label {
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pa-muted);
	margin: 0 0 var(--pa-md);
}

.pa-inner .partner-strip__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pa-md);
}

/* =================================================================
 * CONTACT
 * ================================================================== */

.pa-inner .contact-body {
	padding-block: var(--pa-md) var(--pa-2xl);
}

.pa-inner .contact-grid {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: var(--pa-2xl);
	align-items: start;
}

.pa-inner .contact-form-col {
	background: var(--pa-surface);
	border: 1px solid var(--pa-border);
	border-radius: var(--pa-r-lg);
	padding: var(--pa-lg);
}

.pa-inner .contact-block + .contact-block {
	margin-block-start: var(--pa-lg);
}

.pa-inner .contact-block h2 {
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pa-muted);
	margin: 0 0 var(--pa-xs);
}

.pa-inner .contact-block p,
.pa-inner .contact-block li {
	color: var(--pa-text-2);
	font-size: var(--pa-fs-base);
}

.pa-inner .contact-block a {
	color: var(--pa-green-400);
	text-decoration: none;
}

.pa-inner .contact-block a:hover,
.pa-inner .contact-block a:focus-visible {
	text-decoration: underline;
}

.pa-inner .contact-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.pa-inner .contact-block ol {
	margin: 0;
	padding-inline-start: 1.1rem;
	display: grid;
	gap: 0.5rem;
}

/* =================================================================
 * CTA BAND
 * ================================================================== */

.pa-inner .cta-band {
	padding-block: var(--pa-2xl);
	border-block-start: 1px solid var(--pa-border);
	background: var(--pa-surface);
}

.pa-inner .cta-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-xl);
	flex-wrap: wrap;
}

.pa-inner .cta-band h2 {
	font-size: var(--pa-fs-xl);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 var(--pa-xs);
	text-wrap: balance;
}

.pa-inner .cta-band .pa-lead {
	margin: 0;
	max-width: 46ch;
}

.pa-inner .cta-band__actions {
	display: flex;
	align-items: center;
	gap: var(--pa-md);
	flex-wrap: wrap;
}

.pa-inner .cta-band__email {
	color: var(--pa-text-2);
	font-size: var(--pa-fs-sm);
	text-decoration: none;
}

.pa-inner .cta-band__email:hover,
.pa-inner .cta-band__email:focus-visible {
	color: var(--pa-green-400);
	text-decoration: underline;
}

/* =================================================================
 * 404
 * ================================================================== */

.pa-inner .error-404 {
	text-align: center;
	padding-block: var(--pa-2xl) var(--pa-3xl);
}

.pa-inner .error-404 .pa-eyebrow {
	justify-content: center;
}

.pa-inner .error-404__gauge {
	inline-size: min(220px, 60%);
	margin: 0 auto var(--pa-lg);
}

/* Gauge paint, tokenised in v0.5.5 (was hex literals on the SVG markup in the pattern). */

.pa-inner .e404-track {
	stroke: var(--pa-border);
}

.pa-inner .e404-needle {
	fill: var(--pa-muted);
}

.pa-inner .e404-hub {
	fill: var(--pa-raised);
	stroke: var(--pa-green);
}

.pa-inner .error-404 .pa-lead {
	margin-inline: auto;
}

.pa-inner .error-404__links {
	display: flex;
	justify-content: center;
	gap: var(--pa-sm);
	flex-wrap: wrap;
	margin-block-start: var(--pa-xl);
}

/* =================================================================
 * RESPONSIVE
 * ================================================================== */

@media (max-width: 1024px) {
	.pa-inner .hub-grid,
	.pa-inner .value-grid,
	.pa-inner .partner-strip__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.pa-inner .contact-grid,
	.pa-inner .story-hero__grid {
		grid-template-columns: 1fr;
	}

	/* Stacked: the gauge console goes full width, and the watermark would crowd the copy. */
	.pa-inner .story-gauge {
		inline-size: 100%;
	}

	.pa-inner .story-mark {
		display: none;
	}

	/* The console becomes a stacked list; the horizontal feed lines have nothing to connect. */
	.pa-inner .story-results__console {
		flex-direction: column;
		align-items: stretch;
		gap: var(--pa-sm);
	}

	.pa-inner .story-results__con {
		display: none;
	}
}

@media (max-width: 640px) {
	.pa-inner .hub-grid,
	.pa-inner .value-grid,
	.pa-inner .partner-strip__list {
		grid-template-columns: 1fr;
	}

	.pa-inner .cta-band__inner {
		align-items: flex-start;
	}
}