/*
 * White Paper landing page — ported from white-paper-immersive-light.html.
 * Class names match the mockup 1:1 so the static reference stays useful
 * for visual diffing. Background images are set inline via Twig
 * (style="background-image:url(...)") rather than JS data-img lookups.
 */

:root {
	--color-black: #131716;
	--color-green-darkest: #003314;
	--color-green-darker: #007129;
	--color-green-dark: #028833;
	--color-green: #00ac3e;
	--color-green-bright: #08cd4f;
	--color-green-light: #fafffc;
	--color-white: #ffffff;
	--color-gray-50: #fafafa;
	--color-gray-100: #edeeee;
	--color-gray-200: #cbcece;
	--color-gray-300: #a9adad;
	--color-gray-400: #868c8c;
	--color-gray-500: #535c5c;
	--color-gray-600: #3a4040;
	--color-gray-700: #313737;
	--color-gray-800: #212424;
	--color-gray-900: #131716;

	--font-mont: "Montserrat", system-ui, sans-serif;
	--font-sans: "Nunito Sans", system-ui, sans-serif;
	--font-editorial: "Playfair Display", Georgia, serif;

	--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
	--pad: clamp(1.25rem, 5vw, 5rem);
	--measure: 38rem;
}

.whitepaper, .whitepaper *, .whitepaper *::before, .whitepaper *::after { box-sizing: border-box; }
html:has(.whitepaper) { scroll-behavior: smooth; }

.whitepaper {
	background: var(--color-white);
	color: var(--color-gray-800);
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.78;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.whitepaper :focus-visible { outline: 2px solid var(--color-green-dark); outline-offset: 4px; }
.whitepaper img { display: block; max-width: 100%; }

.whitepaper .wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--pad); }
.whitepaper .measure { max-width: var(--measure); }

/* Very light paper texture — multiply so it darkens rather than lifts */
.grain {
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.022;
	background-image: var(--grain);
	background-size: 180px 180px;
	mix-blend-mode: multiply;
}

/* =========================================================
   Masthead
   ========================================================= */

.masthead {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem var(--pad);
	color: var(--color-white);
	transition: background-color 450ms var(--ease-fluid), color 450ms var(--ease-fluid), padding 450ms var(--ease-fluid);
}

.masthead.is-stuck {
	background: rgba(255, 255, 255, 0.93);
	backdrop-filter: blur(14px);
	color: var(--color-gray-800);
	padding-block: 0.6875rem;
	box-shadow: 0 1px 0 var(--color-gray-100);
}

.progress { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--color-green); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

.logo { display: flex; align-items: center; gap: 0.6875rem; text-decoration: none; color: inherit; }

.logo__mark { display: block; width: auto; height: 3rem; flex: none; }

@media (min-width: 1000px) {
	.logo__mark { height: 4rem; }
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5625rem;
	padding: 0.8125rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--color-green-dark);
	color: var(--color-white);
	font-family: var(--font-mont);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	will-change: transform;
	transition: transform 260ms var(--ease-fluid), background-color 260ms var(--ease-fluid), color 260ms var(--ease-fluid);
}

.btn:hover { transform: translateY(-2px); background: var(--color-green-darkest); }
.btn svg { width: 0.8125rem; height: 0.8125rem; flex: none; }

.btn--outline { background: transparent; color: var(--color-gray-800); box-shadow: inset 0 0 0 1px var(--color-gray-200); }
.btn--outline:hover { background: var(--color-gray-50); color: var(--color-green-darkest); }

.btn--onPhoto { background: var(--color-white); color: var(--color-green-darkest); }
.btn--onPhoto:hover { background: var(--color-green-bright); color: var(--color-green-darkest); }

.btn--linePhoto { background: transparent; color: var(--color-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.btn--linePhoto:hover { background: rgba(255, 255, 255, 0.14); color: var(--color-white); }

/* =========================================================
   Media primitives — photo panels stay dark-scrimmed so
   white type holds; the page around them is light.
   ========================================================= */

.media { position: absolute; inset: 0; overflow: hidden; z-index: -2; }
.media__img { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; }
.media__tint { position: absolute; inset: 0; background: var(--color-green-darkest); mix-blend-mode: multiply; opacity: 0.5; }
.media__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 21, 9, 0.88) 2%, rgba(0, 21, 9, 0.6) 38%, rgba(0, 21, 9, 0.24) 74%, rgba(0, 21, 9, 0.42) 100%); }

.imgnote {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 5;
	font-family: var(--font-mont);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	background: rgba(0, 21, 9, 0.4);
	padding: 0.25rem 0.5rem;
	pointer-events: none;
}

.imgnote--onLight { color: var(--color-gray-400); background: rgba(255, 255, 255, 0.8); }

/* =========================================================
   Hero
   ========================================================= */

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: 9rem 4.5rem;
	overflow: hidden;
	isolation: isolate;
}

.hero .media__img { animation: hero-drift-in 24s var(--ease-fluid) forwards; }
@keyframes hero-drift-in { from { transform: scale(1.14); } to { transform: scale(1); } }

.hero__topo { position: absolute; inset: -10% -6% auto -6%; height: 118%; z-index: -1; opacity: 0.26; pointer-events: none; }
.hero__topo svg { width: 100%; height: 100%; display: block; }
.hero__topo path { fill: none; stroke: var(--color-green-bright); stroke-width: 1; vector-effect: non-scaling-stroke; }

.eyebrow {
	font-family: var(--font-mont);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-green-bright);
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 2rem;
}

.eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 4.5rem; background: currentColor; opacity: 0.55; }

.hero__title {
	font-family: var(--font-mont);
	font-weight: 800;
	font-size: clamp(2.625rem, 8.4vw, 8rem);
	line-height: 0.9;
	letter-spacing: -0.038em;
	text-transform: uppercase;
	color: var(--color-white);
	margin: 0;
	max-width: 15ch;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

.hero__title em { font-style: normal; display: block; color: var(--color-green-bright); }

.hero__deck {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.125rem, 2.2vw, 1.75rem);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.92);
	max-width: 34ch;
	margin: 2rem 0 0;
}

.hero__foot { margin-top: clamp(2.5rem, 6vh, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; }
.hero__byline { font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); max-width: 36ch; margin: 0; }
.hero__byline strong { font-family: var(--font-mont); font-weight: 700; color: rgba(255, 255, 255, 0.95); }

/* =========================================================
   Light sections
   ========================================================= */

.section { position: relative; padding-block: clamp(5rem, 12vw, 10rem); }
.section--tinted { background: var(--color-gray-50); border-block: 1px solid var(--color-gray-100); }
.section--mint { background: var(--color-green-light); border-block: 1px solid #e2f2e8; }

/* Split layout — label/lede left, body right, at wider widths; stacks below 900px */
.section__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .section__grid { grid-template-columns: 1fr 1fr; } }
.section--split .lede { max-width: none; margin-bottom: 0; }
.section--split .body.measure { max-width: none; }

.label {
	font-family: var(--font-mont);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	margin: 0 0 2rem;
}

/* Large display green is at the AA large-text threshold on white.
   Anything smaller uses green-dark or green-darkest. */
.heading {
	font-family: var(--font-mont);
	font-weight: 800;
	font-size: clamp(1.875rem, 4.6vw, 3.75rem);
	line-height: 1.0;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--color-green);
	margin: 0 0 1.75rem;
	max-width: 18ch;
	text-wrap: balance;
	/* the parent theme's base h2 rule defaults to text-align: center below its `lg:`
	   breakpoint and only goes text-left at lg — pin left here at every size instead
	   of inheriting that mobile default. */
	text-align: left;
}

.heading--ink { color: var(--color-green-darkest); }

.lede {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.1875rem, 2.1vw, 1.625rem);
	line-height: 1.45;
	color: var(--color-gray-900);
	max-width: 34ch;
	margin: 0 0 1.75rem;
}

.body p { margin: 0; color: var(--color-gray-700); }
.body p + p { margin-top: 1.25rem; }
.body p + .sub { margin-top: 2.5rem; }

.sub {
	font-family: var(--font-mont);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	margin: 0 0 0.875rem;
}

.body ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.body ul li { position: relative; padding-left: 1.625rem; margin-bottom: 0.4375rem; color: var(--color-gray-700); }
.body ul li::before { content: ""; position: absolute; left: 0; top: 0.875rem; width: 0.625rem; height: 2px; background: var(--color-green); }

/* =========================================================
   Scrollytelling
   ========================================================= */

.scrolly { position: relative; }
.scrolly__inner { display: grid; }

@media (min-width: 1000px) {
	.scrolly__inner { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

.scrolly__media { position: relative; height: 60svh; overflow: hidden; margin-bottom: 2.5rem; }

@media (min-width: 1000px) {
	.scrolly__media { position: sticky; top: 0; height: 100svh; margin-bottom: 0; }
}

.scrolly__frame {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 900ms var(--ease-fluid), transform 1600ms var(--ease-fluid);
}

.scrolly__frame.is-live { opacity: 1; transform: scale(1); }
.scrolly__frameTint { position: absolute; inset: 0; background: var(--color-green-darkest); mix-blend-mode: multiply; opacity: 0.3; pointer-events: none; }

.scrolly__steps { display: grid; }
.step { padding-block: clamp(2.5rem, 8vh, 6rem); }

@media (min-width: 1000px) {
	.step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}

.step__index {
	font-family: var(--font-mont);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	margin: 0 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.step__index::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.65; }

.step h2 {
	font-family: var(--font-mont);
	font-weight: 800;
	font-size: clamp(1.625rem, 3.4vw, 2.75rem);
	line-height: 1.04;
	letter-spacing: -0.026em;
	text-transform: uppercase;
	color: var(--color-green-darkest);
	margin: 0 0 1.5rem;
	text-wrap: balance;
}

.step .content-block + .content-block { margin-top: 2rem; }

/* =========================================================
   Statement over photography
   ========================================================= */

.statement {
	position: relative;
	min-height: 78svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(4rem, 10vw, 7rem);
}

.statement__text {
	font-family: var(--font-mont);
	font-weight: 800;
	font-size: clamp(1.75rem, 4.6vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--color-white);
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.statement__text em { font-style: normal; color: var(--color-green-bright); }

.statement__attr {
	font-family: var(--font-mont);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
	margin: 2rem 0 0;
}

.statement--center { text-align: center; justify-content: center; }
.statement--center .statement__text { margin-inline: auto; max-width: 24ch; }

/* A light statement variant, for rhythm between the photo panels */
.statement--paper { min-height: 0; background: var(--color-green); padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.statement--paper .statement__text { color: var(--color-green-darkest); text-shadow: none; }
.statement--paper .statement__text em { color: var(--color-white); }
.statement--paper .statement__attr { color: rgba(0, 51, 20, 0.7); }

/* =========================================================
   Numbers — light, hairline grid, no photo behind
   ========================================================= */

.numgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-gray-200);
	border: 1px solid var(--color-gray-200);
	margin-top: 3rem;
}

@media (min-width: 880px) { .numgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.num { background: var(--color-white); padding: clamp(1.5rem, 3.2vw, 2.25rem); }

.num__value {
	font-family: var(--font-mont);
	font-weight: 800;
	font-size: clamp(2.25rem, 5.4vw, 4rem);
	line-height: 0.88;
	letter-spacing: -0.04em;
	color: var(--color-green);
	font-variant-numeric: tabular-nums;
	display: block;
}

.num__label {
	font-family: var(--font-mont);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-900);
	display: block;
	margin-top: 1rem;
}

.num__note { font-size: 0.8125rem; line-height: 1.55; color: var(--color-gray-500); margin: 0.5rem 0 0; }
.numbers__foot { font-size: 0.75rem; line-height: 1.6; color: var(--color-gray-400); margin: 1.5rem 0 0; max-width: 46rem; }

/* =========================================================
   Spending gap — dark figure block, deliberate contrast
   ========================================================= */

.gapfig { max-width: 46rem; margin-top: 3rem; background: var(--color-black); padding: clamp(1.5rem, 3.5vw, 2.25rem); }

.gapfig__cap {
	font-family: var(--font-mont);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-gray-400);
	margin: 0 0 1.5rem;
}

.gap__row + .gap__row { margin-top: 1.625rem; }

.gap__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.625rem;
	font-family: var(--font-mont);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-300);
}

.gap__head span:last-child { font-variant-numeric: tabular-nums; }
.gap__track { height: 0.75rem; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.gap__fill { display: block; height: 100%; width: 0; background: var(--color-green-darker); transition: width 1200ms var(--ease-fluid); }
.gap__row--us .gap__head { color: var(--color-green-bright); }
.gap__row--us .gap__fill { background: var(--color-green-bright); }
.gapfig__foot { font-size: 0.8125rem; line-height: 1.6; color: var(--color-gray-400); margin: 1.625rem 0 0; }

/* =========================================================
   Split figure
   ========================================================= */

.split { display: grid; gap: 1px; background: var(--color-gray-200); border: 1px solid var(--color-gray-200); margin-top: 2rem; max-width: 46rem; }
@media (min-width: 620px) { .split { grid-template-columns: 1fr 1fr; } }

.split__cell { background: var(--color-white); padding: clamp(1.5rem, 3vw, 2rem); }
.split__cell--goal { background: var(--color-green-darkest); }

.split__num { font-family: var(--font-mont); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--color-green-darkest); display: block; font-variant-numeric: tabular-nums; }
.split__cell--goal .split__num { color: var(--color-green-bright); }
.split__label { font-family: var(--font-mont); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gray-500); display: block; margin-top: 0.875rem; }
.split__cell--goal .split__label { color: rgba(255, 255, 255, 0.7); }
.split__note { font-size: 0.8125rem; line-height: 1.55; color: var(--color-gray-500); margin: 0.5rem 0 0; }
.split__cell--goal .split__note { color: rgba(237, 238, 238, 0.75); }

/* =========================================================
   Principles
   ========================================================= */

.principles { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--color-gray-200); border: 1px solid var(--color-gray-200); }
@media (min-width: 780px) { .principles { grid-template-columns: 1fr 1fr; } }

.principle { background: var(--color-white); padding: clamp(1.5rem, 3vw, 2.25rem); }
.principle h3 { font-family: var(--font-editorial); font-style: italic; font-weight: 700; font-size: 1.25rem; color: var(--color-green-darkest); margin: 0 0 0.625rem; }
.principle p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--color-gray-600); }

/* =========================================================
   Contents — "what's inside" two-column list
   ========================================================= */

.inside__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .inside__grid { grid-template-columns: 1fr 1.05fr; } }

/* Named toc-list, not "contents" — the parent theme's Tailwind bundle ships a
   .contents { display: contents } utility that collides with that class name
   and blows up this list's layout. */
.toc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-gray-200); }

.toc-list li {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding-block: 1.125rem;
	border-bottom: 1px solid var(--color-gray-200);
}

.toc-list__n {
	font-family: var(--font-mont);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-green);
	flex: none;
	font-variant-numeric: tabular-nums;
}

.toc-list__t { font-family: var(--font-mont); font-size: 1rem; font-weight: 600; color: var(--color-gray-800); line-height: 1.4; }

/* =========================================================
   Support cards — photography with dark scrims on a light page
   ========================================================= */

.support { display: grid; gap: 1px; background: var(--color-gray-200); border: 1px solid var(--color-gray-200); margin-top: 3rem; }
@media (min-width: 700px) { .support { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .support { grid-template-columns: repeat(3, 1fr); } }

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 17rem;
	padding: clamp(1.25rem, 2.6vw, 1.75rem);
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	background: var(--color-green-darkest);
}

.card__img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.02); will-change: transform; transition: transform 600ms var(--ease-fluid); }
.card:hover .card__img { transform: scale(1.09); }
.card__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 21, 9, 0.94) 12%, rgba(0, 21, 9, 0.58) 54%, rgba(0, 21, 9, 0.28) 100%); }
.card__tint { position: absolute; inset: 0; z-index: -1; background: var(--color-green-darkest); mix-blend-mode: multiply; opacity: 0.3; }

.card__title { font-family: var(--font-mont); font-size: 1.125rem; font-weight: 700; color: var(--color-white); margin: 0 0 0.375rem; }
.card__desc { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); margin: 0; }

.card__arrow { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); color: var(--color-white); will-change: transform; transition: transform 300ms var(--ease-fluid), background-color 300ms var(--ease-fluid); }
.card:hover .card__arrow { transform: translate(3px, -3px); background: var(--color-white); color: var(--color-green-darkest); }
.card__arrow svg { width: 0.9375rem; height: 0.9375rem; }

/* =========================================================
   Closing — light, with portraits
   ========================================================= */

.closing { background: var(--color-gray-50); border-top: 1px solid var(--color-gray-100); padding-block: clamp(5rem, 12vw, 9rem); text-align: center; }
/* text-align: center on .heading itself, not just inherited — the parent theme's
   global stylesheet sets a bare `h2 { text-align: left }` that otherwise wins. */
.closing .heading { margin-inline: auto; text-align: center; }
.closing__copy { color: var(--color-gray-600); max-width: 40rem; margin: 0 auto; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-top: 2.75rem; }

/* Photo variant — full-bleed CTA when a background image is set, in place of the default light background */
.closing--photo { position: relative; overflow: hidden; isolation: isolate; border-top: 0; }
.closing--photo .media__scrim { background: linear-gradient(to bottom, rgba(0, 21, 9, 0.5), rgba(0, 21, 9, 0.68)); }
.closing--photo .heading { color: var(--color-white); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.closing--photo .closing__copy { color: rgba(255, 255, 255, 0.82); }

.signatures { display: grid; gap: 2.5rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--color-gray-200); }
.closing--photo .signatures { border-top-color: rgba(255, 255, 255, 0.2); }
@media (min-width: 760px) { .signatures { grid-template-columns: repeat(3, 1fr); } }

.sig { display: flex; flex-direction: column; align-items: center; }
.sig__portrait { width: 5.5rem; height: 5.5rem; border-radius: 999px; background-size: cover; background-position: center top; margin-bottom: 1.125rem; box-shadow: 0 0 0 1px var(--color-gray-200); }
.sig__line { display: block; width: auto; max-width: 8.5rem; height: 3.5rem; object-fit: contain; object-position: bottom; margin: 0 auto 0.5rem; }
.closing--photo .sig__line { filter: invert(1) brightness(1.9); }
.closing--photo .sig__name { color: var(--color-green-bright); }
.closing--photo .sig__role { color: rgba(255, 255, 255, 0.7); }
.sig__name { font-family: var(--font-mont); font-size: 0.875rem; font-weight: 700; color: var(--color-green-dark); margin: 0; line-height: 1.35; }
.sig__role { font-size: 0.75rem; color: var(--color-gray-500); margin: 0.25rem 0 0; line-height: 1.45; }

/* =========================================================
   Footer
   ========================================================= */

.whitepaper-footer { background: var(--color-black); color: var(--color-gray-300); padding-block: 3rem; text-align: center; }
.whitepaper-footer__mark { margin: 0; color: var(--color-green-bright); }
.whitepaper-footer__logo { height: 3rem; width: auto; }
.whitepaper-footer__note { font-size: 0.75rem; color: var(--color-gray-400); margin: 1.75rem 0 0; }

/* =========================================================
   Motion
   ========================================================= */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease-fluid), transform 800ms var(--ease-fluid); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 90ms; }
.reveal--d2 { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
	html:has(.whitepaper) { scroll-behavior: auto; }
	.whitepaper *, .whitepaper *::before, .whitepaper *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	.reveal { opacity: 1; transform: none; }
	.scrolly__frame { transition: opacity 1ms linear; }
}

.whitepaper-footer__logo {
	height: 112px;
	margin: 0 auto;
}