/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--fa-black: #040404;
	--fa-ink: #0D0D0D;
	--fa-white: #FBFBFB;
	--fa-grey: #DEDEDE;
	--fa-accent: #FF4000;
	--fa-accent-warm: #FF7A3C;

	--fa-t1: #C6C6C6;
	--fa-t2: #B4B4B4;
	--fa-t3: #A9A9A9;
	--fa-t4: #9A9A9A;
	--fa-t5: #8A8A8A;
	--fa-t6: #6E6E6E;
	--fa-t7: #5A5A5A;

	--fa-panel-light: #F1F1F1;
	--fa-field: #F0F0F0;

	--fa-nav-h: 86px;
	--fa-nav-h-sm: 70px;
	--fa-pin: 112px;

	--fa-gutter: clamp(18px, 4vw, 40px);
	--fa-radius-sec: 34px;
	--fa-radius-card: 26px;

	--fa-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--fa-black);
	color: var(--fa-white);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--fa-accent);
}

img {
	max-width: 100%;
}

input,
textarea {
	font-family: inherit;
}

input::placeholder,
textarea::placeholder {
	color: var(--fa-t5);
}

::selection {
	background: var(--fa-accent);
	color: var(--fa-white);
}

:focus-visible {
	outline: 2px solid var(--fa-accent);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

.fa-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--fa-white);
	color: var(--fa-black);
	padding: 12px 20px;
	border-radius: 999px;
}

.fa-skip:focus {
	left: 16px;
	top: 16px;
}

/* ==========================================================================
   3. Keyframes
   ========================================================================== */

@keyframes fa-blip {
	0%, 100% { opacity: .25; }
	50% { opacity: 1; }
}

@keyframes fa-spin {
	from { transform: rotate(0); }
	to { transform: rotate(360deg); }
}

@keyframes fa-pkgbob {
	0%, 100% { translate: 0 0; rotate: -2deg; }
	50% { translate: 0 -4px; rotate: 2deg; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   4. Utilities
   ========================================================================== */

.fa-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: var(--fa-gutter);
	padding-right: var(--fa-gutter);
	width: 100%;
}

.fa-dim { color: var(--fa-t3); }
.fa-dim2 { color: var(--fa-t6); }
.fa-dim3 { color: var(--fa-t5); }
.fa-accent { color: var(--fa-accent); }

.fa-star {
	flex: none;
	fill: var(--fa-accent);
}

.fa-spin {
	animation: fa-spin 14s linear infinite;
}

.fa-blip {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--fa-accent);
	animation: fa-blip 1.8s ease-in-out infinite;
	flex: none;
}

.fa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(251, 251, 251, .2);
	border-radius: 999px;
	padding: 8px 15px;
	margin-bottom: 26px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t2);
}

.fa-sec--paper .fa-eyebrow,
.fa-sec--grey .fa-eyebrow {
	border-color: rgba(4, 4, 4, .18);
	color: var(--fa-t7);
}

/* Declared after the section overrides so the accent variant keeps its colour
   inside a paper or grey panel (the success card lives in a grey section). */
.fa-eyebrow--accent,
.fa-sec--paper .fa-eyebrow--accent,
.fa-sec--grey .fa-eyebrow--accent {
	border-color: rgba(255, 64, 0, .4);
	color: var(--fa-accent);
	font-size: 11px;
	letter-spacing: .06em;
	margin-bottom: 0;
}

.fa-h2 {
	font-size: clamp(28px, 4.6vw, 52px);
	line-height: 1.04;
	font-weight: 500;
	letter-spacing: -.045em;
	margin: 0;
}

.fa-h2--balance {
	line-height: 1.06;
	text-wrap: balance;
}

.fa-h2--wide {
	font-size: clamp(30px, 5vw, 58px);
	line-height: 1.08;
	max-width: 1050px;
	text-wrap: pretty;
}

/* ---- Buttons ---- */

.fa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1;
	border: none;
	border-radius: 999px;
	padding: 16px 26px;
	cursor: pointer;
	white-space: nowrap;
	background: var(--fa-accent);
	color: var(--fa-white);
	will-change: translate;
	transition: translate .3s var(--fa-ease), background .3s ease, color .3s ease;
}

.fa-btn--accent {
	background: var(--fa-accent);
	color: var(--fa-white);
	padding: 14px 22px;
}

.fa-btn--light {
	background: var(--fa-white);
	color: var(--fa-black);
	font-size: 13.5px;
	padding: 13px 24px;
}

.fa-btn--glass {
	background: rgba(251, 251, 251, .06);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(251, 251, 251, .22);
	color: var(--fa-white);
}

.fa-btn--ghost {
	background: transparent;
	border: 1px solid rgba(251, 251, 251, .24);
	color: var(--fa-white);
	font-size: 13.5px;
	padding: 14px 24px;
}

.fa-btn--outline {
	background: transparent;
	border: 1px solid rgba(4, 4, 4, .2);
	color: var(--fa-black);
	padding: 14px 24px;
}

.fa-btn--submit {
	width: 100%;
	background: var(--fa-black);
	color: var(--fa-white);
	padding: 18px;
	font-size: 14.5px;
	margin-top: 22px;
}

.fa-btn--orb {
	background: var(--fa-white);
	color: var(--fa-black);
	gap: 16px;
	padding: 7px 24px 7px 8px;
}

.fa-btn__orb {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 30%, var(--fa-accent-warm), var(--fa-accent) 55%, #B02A00);
	display: block;
	flex: none;
}

/* ==========================================================================
   5. Nav
   ========================================================================== */

.fa-nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	background: rgba(4, 4, 4, .62);
	backdrop-filter: blur(16px);
	transition: background .5s ease, box-shadow .5s ease;
}

.fa-nav.is-past {
	background: rgba(4, 4, 4, .82);
	box-shadow: 0 18px 44px -30px rgba(0, 0, 0, .9);
}

.fa-nav__shell {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 40px);
	height: var(--fa-nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-width: 0;
	transition: height .5s var(--fa-ease);
}

.fa-nav.is-past .fa-nav__shell {
	height: var(--fa-nav-h-sm);
}

.fa-nav__logo {
	display: flex;
	align-items: center;
	flex: none;
}

.fa-nav__logo img {
	display: block;
	height: 54px;
	width: auto;
	transition: height .5s var(--fa-ease);
}

.fa-nav__links {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;
}

.fa-nav__pill {
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	width: 0;
	border-radius: 999px;
	background: rgba(251, 251, 251, .09);
	opacity: 0;
	pointer-events: none;
	transition: transform .5s var(--fa-ease), width .5s var(--fa-ease), opacity .35s ease;
}

.fa-nav__link {
	position: relative;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--fa-t2);
	padding: 10px 16px;
	border-radius: 999px;
	white-space: nowrap;
	transition: color .25s ease;
}

.fa-nav__link:hover,
.fa-nav__link.is-active {
	color: var(--fa-white);
}

.fa-nav__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.fa-nav__rule {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(251, 251, 251, .12);
}

.fa-nav__progress {
	height: 100%;
	width: 0;
	background: var(--fa-accent);
}

.fa-nav__sweep {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 180px;
	background: linear-gradient(90deg, transparent, var(--fa-accent), transparent);
	opacity: 0;
	pointer-events: none;
}

/* ---- Burger + mobile menu ---- */

.fa-burger {
	display: none;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid rgba(251, 251, 251, .24);
	background: rgba(251, 251, 251, .06);
	color: var(--fa-white);
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.fa-burger__bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}

.fa-burger__bars span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--fa-white);
}

.fa-menu {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(4, 4, 4, .96);
	backdrop-filter: blur(20px);
	display: flex;
	flex-direction: column;
	padding: 96px var(--fa-gutter) 40px;
	gap: 6px;
}

.fa-menu__close {
	position: absolute;
	right: clamp(14px, 4vw, 34px);
	top: 14px;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid rgba(251, 251, 251, .24);
	background: rgba(251, 251, 251, .06);
	color: var(--fa-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.fa-menu__link {
	display: block;
	font-size: clamp(24px, 7vw, 34px);
	font-weight: 500;
	letter-spacing: -.04em;
	color: var(--fa-white);
	padding: 14px 0;
	border-bottom: 1px solid rgba(251, 251, 251, .1);
}

.fa-menu__cta {
	margin-top: 26px;
	padding: 18px 26px;
	font-size: 15px;
}

/* ---- Grain ---- */

.fa-grain {
	position: fixed;
	inset: 0;
	z-index: 80;
	pointer-events: none;
	opacity: .055;
	mix-blend-mode: soft-light;
	background-repeat: repeat;
	background-size: 180px 180px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* Cursor ambient glow, injected by the motion layer on fine pointers. */
.fa-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 340px;
	height: 340px;
	margin: -170px 0 0 -170px;
	border-radius: 999px;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition: opacity .6s ease;
	background: radial-gradient(closest-side, rgba(255, 64, 0, .16), transparent 70%);
	mix-blend-mode: screen;
}

/* ==========================================================================
   6. Section shells + the stacking transition
   ========================================================================== */

.fa-sec {
	position: relative;
}

[data-panel] {
	will-change: transform, filter;
	transform-origin: 50% 12%;
	backface-visibility: hidden;
}

/* Every panel after the hero overlaps the one before it by 34px, so the
   rounded top edge reads as a card sliding over the previous section. */
[data-panel] + [data-panel],
.fa-audience + [data-panel],
.fa-footer {
	margin-top: -34px;
}

.fa-sec--paper {
	background: var(--fa-white);
	color: var(--fa-black);
}

.fa-sec--ink {
	background: var(--fa-black);
	color: var(--fa-white);
}

.fa-sec--grey {
	background: var(--fa-grey);
	color: var(--fa-black);
}

.fa-pipeline,
.fa-journey,
.fa-problems,
.fa-compare,
.fa-value,
.fa-stack,
.fa-contact,
.fa-footer {
	border-radius: var(--fa-radius-sec) var(--fa-radius-sec) 0 0;
}

.fa-pipeline { z-index: 3; }
.fa-audience { z-index: 3; margin-top: 0; }
.fa-journey { z-index: 4; }
.fa-problems { z-index: 5; }
.fa-compare { z-index: 6; }
.fa-value { z-index: 7; overflow: hidden; }
.fa-stack { z-index: 8; }
.fa-contact { z-index: 9; }
.fa-footer { z-index: 10; }

.fa-sec__head {
	margin-bottom: 56px;
}

.fa-sec__head--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 70px;
	align-items: end;
}

.fa-sec__head--center {
	max-width: 900px;
	margin: 0 auto 54px;
	text-align: center;
}

.fa-sec__lede {
	font-size: clamp(15px, 1.3vw, 16.5px);
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 0;
	max-width: 520px;
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.fa-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: clamp(110px, 13vh, 168px) 0 clamp(34px, 6vh, 78px);
}

.fa-hero__glow {
	position: absolute;
	left: 50%;
	top: 38%;
	width: 1500px;
	height: 900px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 64, 0, .46), rgba(255, 64, 0, .16) 44%, transparent 74%);
}

.fa-hero__wash {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(255, 64, 0, .16), transparent 78%);
}

/* Full-bleed: the mark spans the whole hero, so the signal line runs edge to
   edge and the peaks use the full height.

   The canvas must be the whole hero rather than a smaller inset box, because
   fa-wave draws relative to its own canvas — an inset box both starts the line
   part-way across the screen and clips any peak taller than half its height.
   `amp` on the element is sized against this box; see the note there. */
.fa-hero__wave {
	position: absolute;
	inset: 0;
	z-index: 1;
	filter: drop-shadow(0 0 22px rgba(255, 64, 0, .45));
}

/* Peak height, as a fraction of the canvas. The canvas is now the hero, whose
   aspect ratio swings from 16:9 on a desktop to 1:2 on a phone — so this is
   tuned per breakpoint to keep the mark's own proportions. Left alone, a phone
   would draw the logo as a narrow vertical spike through the headline. */
.fa-hero__wave fa-wave {
	--fa-amp: 0.45;
	/* Peaks sit at 42%-75% of the hero, to the right of the headline column —
	   the placement the design arrived at, now reached by moving the mark inside
	   a full-width canvas instead of by shrinking the canvas. */
	--fa-shift: 0.29;
}

.fa-hero__wave fa-wave {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fa-hero__scrim {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 62%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(4, 4, 4, .86) 0%, rgba(4, 4, 4, .66) 42%, rgba(4, 4, 4, .24) 72%, transparent 100%);
}

.fa-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	padding: 0 clamp(18px, 5vw, 40px);
	pointer-events: none;
}

.fa-hero__content {
	max-width: 1000px;
}

.fa-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp(14px, 2.6vh, 30px);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--fa-accent);
}

.fa-hero__title {
	font-size: clamp(34px, min(7.4vw, 10.2vh), 88px);
	line-height: .96;
	font-weight: 500;
	letter-spacing: -.05em;
	margin: 0 0 clamp(16px, 3vh, 30px);
	text-wrap: balance;
}

.fa-hero__lede {
	font-size: clamp(15px, 1.5vw, 17.5px);
	line-height: 1.65;
	color: var(--fa-t2);
	max-width: 480px;
	margin: 0 0 clamp(20px, 3.6vh, 38px);
}

.fa-hero__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	pointer-events: auto;
}

/* ==========================================================================
   8. Pipeline
   ========================================================================== */

.fa-pipeline .fa-wrap {
	padding-top: clamp(64px, 8vw, 110px);
	padding-bottom: clamp(70px, 9vw, 120px);
}

.fa-tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.fa-tab {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 38px;
	min-height: 150px;
	cursor: pointer;
	border: none;
	border-radius: 24px;
	padding: 22px;
	font-family: inherit;
	background: var(--fa-panel-light);
	color: var(--fa-black);
	text-align: left;
	transition: background .35s ease, color .35s ease, translate .3s var(--fa-ease);
}

.fa-tab.is-active {
	background: var(--fa-accent);
	color: var(--fa-white);
}

.fa-tab__n {
	display: inline-flex;
	align-self: flex-start;
	border: 1px solid currentColor;
	opacity: .55;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .05em;
}

.fa-tab__title {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1.2;
}

.fa-stage {
	background: var(--fa-black);
	color: var(--fa-white);
	border-radius: 28px;
	padding: clamp(22px, 3.2vw, 46px);
	position: relative;
	overflow: hidden;
}

.fa-stage__wave {
	position: absolute;
	right: -4%;
	bottom: -30%;
	width: 60%;
	height: 120%;
	pointer-events: none;
	opacity: .5;
}

.fa-stage__wave fa-wave {
	display: block;
	width: 100%;
	height: 100%;
}

.fa-stage__panel {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: start;
	position: relative;
}

.fa-stage__col {
	position: relative;
}

.fa-stage__meta {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--fa-accent);
	margin-bottom: 16px;
}

.fa-stage__title {
	font-size: 38px;
	font-weight: 500;
	letter-spacing: -.04em;
	margin: 0;
	line-height: 1.05;
}

.fa-stage__desc {
	font-size: 17px;
	line-height: 1.75;
	color: var(--fa-t1);
	margin: 0 0 26px;
}

.fa-stage__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.fa-stage__bullets li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14.5px;
	color: var(--fa-t4);
	border-top: 1px solid rgba(251, 251, 251, .12);
	padding: 14px 0;
}

/* ==========================================================================
   9. Audience rail
   ========================================================================== */

.fa-rail-track {
	position: relative;
}

/* --fa-f is a shrink factor the motion layer lowers (down to 0.5) when the
   pinned stage is taller than the viewport, so all six cards stay visible for
   the whole of the horizontal travel. It stays at 1 on roomy screens. */
.fa-rail-stage {
	--fa-f: 1;
	position: sticky;
	top: var(--fa-pin);
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px var(--fa-gutter) max(18px, calc(36px * var(--fa-f)));
}

.fa-rail-stage .fa-sec__head--center {
	margin-bottom: max(12px, calc(54px * var(--fa-f)));
}

.fa-rail-stage .fa-eyebrow {
	margin-bottom: max(8px, calc(26px * var(--fa-f)));
}

.fa-rail-stage .fa-h2 {
	font-size: max(27px, calc(clamp(28px, 4.6vw, 52px) * var(--fa-f)));
}

.fa-rail-stage .fa-aud-card {
	min-height: max(150px, calc(280px * var(--fa-f)));
	padding-top: max(18px, calc(34px * var(--fa-f)));
	padding-bottom: max(18px, calc(34px * var(--fa-f)));
}

.fa-rail-stage .fa-aud-card__title {
	font-size: max(17px, calc(24px * var(--fa-f)));
}

.fa-rail-stage .fa-aud-card__desc {
	font-size: max(12.5px, calc(14.5px * var(--fa-f)));
}

.fa-rail {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	margin: 0 calc(-1 * var(--fa-gutter));
	padding: 0 var(--fa-gutter) 6px;
}

.fa-rail::-webkit-scrollbar {
	display: none;
}

.fa-rail__row {
	display: flex;
	gap: 14px;
	width: max-content;
}

.fa-aud-card {
	border-radius: var(--fa-radius-card);
	padding: 34px;
	min-height: 280px;
	width: 340px;
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 26px;
	position: relative;
	overflow: hidden;
	transform-style: preserve-3d;
}

.fa-aud-card--light { background: var(--fa-panel-light); color: var(--fa-black); }
.fa-aud-card--accent { background: var(--fa-accent); color: var(--fa-white); }
.fa-aud-card--dark { background: var(--fa-black); color: var(--fa-white); }

.fa-aud-card--cta {
	background: var(--fa-black);
	color: var(--fa-white);
	gap: 24px;
}

.fa-aud-card__n,
.fa-aud-card__badge {
	align-self: flex-start;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .04em;
	opacity: .75;
	position: relative;
}

.fa-aud-card--light .fa-aud-card__n { border-color: rgba(4, 4, 4, .2); }
.fa-aud-card--accent .fa-aud-card__n { border-color: rgba(251, 251, 251, .5); }
.fa-aud-card--dark .fa-aud-card__n { border-color: rgba(251, 251, 251, .35); }

.fa-aud-card__badge {
	border-color: rgba(255, 64, 0, .5);
	color: var(--fa-accent);
	opacity: 1;
}

.fa-aud-card__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	opacity: .55;
}

.fa-aud-card__body {
	position: relative;
}

.fa-aud-card__title {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 0 0 12px;
}

.fa-aud-card--cta .fa-aud-card__title {
	font-size: 26px;
	margin-bottom: 20px;
}

.fa-aud-card__desc {
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
	opacity: .68;
}

/* ==========================================================================
   10. Journey
   ========================================================================== */

.fa-journey__head {
	padding-top: clamp(64px, 8vw, 100px);
}

.fa-journey__track {
	position: relative;
	height: 400vh;
}

.fa-journey__stage {
	position: sticky;
	top: var(--fa-pin);
	height: calc(100vh - var(--fa-pin));
	overflow: hidden;
}

.fa-journey__grid {
	position: absolute;
	left: -20%;
	right: -20%;
	bottom: -14%;
	height: 70%;
	pointer-events: none;
	opacity: .5;
	background-image:
		linear-gradient(rgba(251, 251, 251, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(251, 251, 251, .07) 1px, transparent 1px);
	background-size: 70px 70px;
	transform: perspective(760px) rotateX(64deg);
	transform-origin: bottom center;
}

.fa-journey__inner {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 26px var(--fa-gutter) 0;
	height: 100%;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.fa-journey__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--fa-t6);
}

.fa-journey__cols {
	position: relative;
	order: 2;
	min-height: 0;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: center;
	padding: 10px 0 24px;
}

.fa-journey__text {
	position: relative;
	height: 100%;
	min-height: 0;
	align-self: stretch;
}

.fa-jstep {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .45s ease, transform .6s var(--fa-ease);
}

.fa-jstep.is-active {
	opacity: 1;
	transform: translateY(0);
}

.fa-jstep__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}

.fa-jstep__n {
	font-size: clamp(22px, 2.6vh, 30px);
	font-weight: 500;
	letter-spacing: -.05em;
	color: var(--fa-accent);
	line-height: 1;
	flex: none;
}

.fa-jstep__title {
	font-size: clamp(20px, 3vh, 30px);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.14;
	margin: 0;
}

.fa-jstep__desc {
	font-size: clamp(13px, 1.8vh, 15px);
	line-height: 1.6;
	color: var(--fa-t4);
	margin: 0;
	max-width: 440px;
}

.fa-journey__shots {
	position: relative;
	height: 100%;
	min-height: 0;
	align-self: stretch;
	border-radius: var(--fa-radius-card);
	overflow: hidden;
	border: 1px solid rgba(251, 251, 251, .12);
}

.fa-jshot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity .5s ease, transform .9s var(--fa-ease);
}

.fa-jshot.is-active {
	opacity: 1;
	transform: scale(1);
}

/* ---- Rail, nodes, package ---- */

.fa-journey__rail {
	position: relative;
	order: 3;
	height: 90px;
	align-self: center;
}

.fa-journey__line {
	position: absolute;
	left: 6%;
	right: 6%;
	top: 48px;
	height: 1px;
	background: rgba(251, 251, 251, .16);
}

.fa-journey__fill {
	position: absolute;
	left: 6%;
	top: 47px;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(255, 64, 0, .3), var(--fa-accent));
	border-radius: 999px;
}

.fa-jnode {
	position: absolute;
	top: 38px;
	margin-left: -11px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid rgba(251, 251, 251, .3);
	background: var(--fa-black);
	transition: background .35s ease, border-color .35s ease, transform .35s var(--fa-ease);
}

.fa-jnode.is-done {
	background: var(--fa-accent);
	border-color: var(--fa-accent);
}

.fa-jnode.is-on {
	background: var(--fa-accent);
	border-color: var(--fa-accent);
	transform: scale(1.3);
}

.fa-jlabel {
	position: absolute;
	top: 4px;
	transform: translateX(-50%);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--fa-t6);
	white-space: nowrap;
	transition: color .35s ease;
}

.fa-jlabel.is-done { color: var(--fa-t2); }
.fa-jlabel.is-on { color: var(--fa-white); }

.fa-jpkg {
	position: absolute;
	left: 6%;
	top: 33px;
	margin-left: -19px;
	width: 38px;
	height: 32px;
	filter: drop-shadow(0 8px 18px rgba(255, 64, 0, .45));
	animation: fa-pkgbob 2.6s ease-in-out infinite;
}

.fa-jpkg__box {
	position: absolute;
	inset: 0;
	border-radius: 5px;
	background: var(--fa-accent);
}

.fa-jpkg__tape-h {
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
	height: 1.5px;
	background: rgba(4, 4, 4, .35);
}

.fa-jpkg__tape-v {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 5px;
	margin-left: -2.5px;
	background: rgba(4, 4, 4, .35);
}

.fa-jpkg__label {
	position: absolute;
	left: 5px;
	right: 5px;
	top: 2px;
	height: 5px;
	border-radius: 2px;
	background: rgba(251, 251, 251, .32);
}

/* ---- Media placeholder ---- */

.fa-slot {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	background:
		repeating-linear-gradient(135deg, rgba(251, 251, 251, .035) 0 10px, transparent 10px 20px),
		rgba(251, 251, 251, .04);
}

.fa-slot__label {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .03em;
	color: var(--fa-t6);
	max-width: 240px;
	line-height: 1.5;
}

.fa-slot__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   11. Problems
   ========================================================================== */

.fa-problems .fa-wrap {
	padding-top: clamp(70px, 9vw, 120px);
	padding-bottom: clamp(70px, 9vw, 120px);
}

.fa-problems__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 70px;
	align-items: start;
}

.fa-problems__aside {
	position: sticky;
	top: 148px;
	align-self: start;
}

.fa-problems__lede {
	font-size: 16px;
	line-height: 1.7;
	color: var(--fa-t5);
	margin: 22px 0 0;
	max-width: 330px;
}

.fa-problems__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fa-prob {
	background: var(--fa-ink);
	border-radius: var(--fa-radius-card);
	padding: clamp(20px, 2.6vw, 34px) clamp(20px, 2.8vw, 36px);
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	transform-style: preserve-3d;
}

.fa-prob__n {
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 500;
	letter-spacing: -.05em;
	color: var(--fa-accent);
	line-height: .9;
}

.fa-prob__title {
	font-size: 25px;
	font-weight: 500;
	letter-spacing: -.03em;
	margin: 0 0 12px;
	line-height: 1.2;
}

.fa-prob__desc {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--fa-t4);
	margin: 0 0 20px;
}

.fa-prob__fix {
	display: inline-block;
	background: rgba(255, 64, 0, .14);
	color: var(--fa-accent);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
}

/* ==========================================================================
   12. Compare deck
   ========================================================================== */

.fa-compare__head {
	padding-top: clamp(74px, 10vw, 110px);
	padding-bottom: 8px;
	max-width: 1400px;
}

.fa-compare__head .fa-h2,
.fa-compare__head .fa-eyebrow {
	max-width: 760px;
}

.fa-compare__lede {
	font-size: 15px;
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 20px 0 0;
	max-width: 560px;
}

.fa-compare__body {
	padding-bottom: clamp(70px, 9vw, 120px);
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
}

.fa-compare__note {
	font-size: 16px;
	line-height: 1.75;
	color: var(--fa-t7);
	margin: 0 0 26px;
	max-width: 400px;
}

.fa-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fa-dot {
	width: 14px;
	height: 3px;
	border-radius: 999px;
	background: rgba(4, 4, 4, .22);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background .4s ease, width .4s ease;
}

.fa-dot.is-on {
	width: 30px;
	background: var(--fa-black);
}

.fa-compare__label {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--fa-t5);
	margin-top: 20px;
}

.fa-deck {
	position: relative;
	height: 400px;
	perspective: 1200px;
}

.fa-dcard {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(430px, 100%);
	height: 290px;
	margin: -145px 0 0 0;
	transform: translate(-50%, 0);
	border-radius: 22px;
	background: var(--fa-white);
	border: 1px solid rgba(4, 4, 4, .10);
	box-shadow: 0 30px 60px -34px rgba(4, 4, 4, .45);
	padding: 30px 32px;
	cursor: pointer;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
}

.fa-dcard--dark {
	background: var(--fa-black);
	color: var(--fa-white);
	border-color: rgba(251, 251, 251, .14);
	box-shadow: 0 30px 60px -34px rgba(4, 4, 4, .6);
}

.fa-dcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.fa-dcard__title {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.15;
}

.fa-dcard__n {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--fa-t5);
}

.fa-dcard--dark .fa-dcard__n { color: var(--fa-t6); }

.fa-dcard__k {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t5);
	margin-bottom: 6px;
}

.fa-dcard--dark .fa-dcard__k { color: var(--fa-t6); }

.fa-dcard__k--accent,
.fa-dcard--dark .fa-dcard__k--accent {
	color: var(--fa-accent);
}

.fa-dcard__v {
	font-size: 14px;
	line-height: 1.6;
	color: var(--fa-t7);
	margin-bottom: 18px;
}

.fa-dcard--dark .fa-dcard__v { color: var(--fa-t4); }

.fa-dcard__v--strong {
	color: var(--fa-black);
	margin-bottom: 0;
}

.fa-dcard--dark .fa-dcard__v--strong { color: var(--fa-white); }

.fa-dcard__rule {
	height: 1px;
	background: rgba(4, 4, 4, .12);
	margin-bottom: 18px;
}

.fa-dcard--dark .fa-dcard__rule { background: rgba(251, 251, 251, .14); }

/* ==========================================================================
   13. Value
   ========================================================================== */

.fa-value__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72%;
	pointer-events: none;
	opacity: .7;
}

.fa-value__wave fa-wave {
	display: block;
	width: 100%;
	height: 100%;
}

.fa-value__inner {
	position: relative;
	padding-top: clamp(72px, 9vw, 130px);
	padding-bottom: clamp(78px, 10vw, 140px);
}

.fa-value__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 36px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--fa-accent);
}

.fa-value .fa-h2--wide {
	margin: 0 0 46px;
}

.fa-value__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	max-width: 980px;
}

.fa-value__cols p {
	font-size: clamp(15px, 1.3vw, 16.5px);
	line-height: 1.8;
	color: var(--fa-t4);
	margin: 0;
}

/* ==========================================================================
   14. Integrations wheel
   ========================================================================== */

.fa-stack__head {
	padding-top: clamp(62px, 8vw, 104px);
	padding-bottom: clamp(66px, 8vw, 110px);
	max-width: 1400px;
}

.fa-stack__head .fa-h2 {
	font-size: clamp(28px, 4.2vw, 46px);
	max-width: 640px;
	margin-bottom: 18px;
}

.fa-stack__lede {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 0;
	max-width: 470px;
}

.fa-wheel-track {
	position: relative;
	height: 320vh;
}

.fa-wheel {
	position: sticky;
	top: var(--fa-pin);
	height: calc(100vh - var(--fa-pin));
	overflow: hidden;
}

.fa-wheel__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(1200px, 140%);
	height: min(1200px, 140%);
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(255, 64, 0, .16), rgba(255, 64, 0, .05) 48%, transparent 74%);
}

.fa-wheel__links {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.fa-wheel__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 196px;
	height: 196px;
	margin: -98px 0 0 -98px;
	border-radius: 999px;
	background: var(--fa-black);
	color: var(--fa-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	z-index: 3;
	box-shadow: 0 40px 90px -40px rgba(4, 4, 4, .5);
}

.fa-wheel__hub-title {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1;
}

.fa-wheel__hub-sub {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .09em;
	color: var(--fa-t5);
}

.fa-plate {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 132px;
	height: 54px;
	margin: -27px 0 0 -66px;
	border-radius: 14px;
	background: var(--fa-white);
	border: 1px solid rgba(4, 4, 4, .12);
	box-shadow: 0 14px 30px -22px rgba(4, 4, 4, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--fa-black);
	text-align: center;
	z-index: 4;
	opacity: 0;
	will-change: transform;
	transition: opacity .4s ease, background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease;
}

/* The last plate carries a longer Greek name than the rest. */
.fa-plate:last-of-type {
	font-size: 11px;
}

.fa-plate.is-linked {
	background: var(--fa-black);
	color: var(--fa-white);
	border-color: var(--fa-accent);
	box-shadow: 0 18px 40px -22px rgba(255, 64, 0, .55);
}

/* ==========================================================================
   15. Contact
   ========================================================================== */

.fa-contact__grid {
	padding-top: clamp(64px, 8vw, 110px);
	padding-bottom: clamp(48px, 6vw, 70px);
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: 60px;
	align-items: start;
}

/* Sticky needs a non-clipping ancestor — never add overflow:hidden to .fa-contact. */
.fa-contact__aside {
	align-self: start;
	position: sticky;
	top: 132px;
}

.fa-contact__lede {
	font-size: clamp(15px, 1.3vw, 16.5px);
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 22px 0 34px;
	max-width: 400px;
}

.fa-contact__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fa-crow {
	background: var(--fa-white);
	border-radius: 20px;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.fa-crow__k {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t5);
}

.fa-crow__v {
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: -.02em;
}

.fa-formcard {
	background: var(--fa-white);
	border-radius: 28px;
	padding: clamp(22px, 3vw, 38px);
}

.fa-formcard__title {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -.03em;
	margin: 0 0 26px;
	line-height: 1.2;
}

.fa-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.fa-input {
	width: 100%;
	font-size: 14.5px;
	color: var(--fa-black);
	background: var(--fa-field);
	border: 1px solid rgba(4, 4, 4, .08);
	border-radius: 16px;
	padding: 16px 18px;
	outline: none;
}

.fa-textarea {
	line-height: 1.6;
	resize: vertical;
}

.fa-form__hint {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fa-t5);
	margin: 10px 0 20px;
}

.fa-form__label {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t5);
	margin-bottom: 12px;
}

.fa-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 10px;
}

.fa-chip {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.01em;
	padding: 11px 18px;
	border-radius: 999px;
	cursor: pointer;
	background: transparent;
	color: var(--fa-t7);
	border: 1px solid rgba(4, 4, 4, .18);
	transition: background .3s ease, color .3s ease, border-color .3s ease, translate .3s var(--fa-ease);
}

.fa-chip.is-on {
	background: var(--fa-accent);
	color: var(--fa-white);
	border-color: var(--fa-accent);
}

.fa-form__error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: rgba(176, 42, 0, .08);
	border: 1px solid rgba(176, 42, 0, .28);
	border-radius: 16px;
	padding: 14px 16px;
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #B02A00;
}

.fa-form__trust {
	font-size: 12px;
	line-height: 1.55;
	color: var(--fa-t3);
	margin: 14px 0 0;
	text-align: center;
}

.fa-sentcard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.fa-sentcard__title {
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -.03em;
	margin: 0;
	line-height: 1.2;
}

.fa-sentcard__body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 0;
}

.fa-sentcard__rule {
	height: 1px;
	background: rgba(4, 4, 4, .12);
	align-self: stretch;
}

.fa-sentcard__urgent {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--fa-t5);
	margin: 0;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.fa-footer {
	background: var(--fa-black);
	color: var(--fa-white);
	position: relative;
}

.fa-footer__grid {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(52px, 7vw, 80px) var(--fa-gutter) 30px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 50px;
}

.fa-footer__logo {
	display: block;
	height: 54px;
	width: auto;
	margin: 0 0 22px -4px;
}

.fa-footer__blurb {
	font-size: 14px;
	line-height: 1.75;
	color: var(--fa-t5);
	max-width: 320px;
	margin: 0 0 26px;
}

.fa-footer__coltitle {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t6);
	margin-bottom: 20px;
}

.fa-footer__links {
	display: flex;
	flex-direction: column;
	gap: 13px;
	font-size: 14.5px;
	color: var(--fa-t2);
}

.fa-footer__legal {
	max-width: 1400px;
	margin: 0 auto;
	padding: 22px var(--fa-gutter);
	border-top: 1px solid rgba(251, 251, 251, .12);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 20px;
	font-size: 12.5px;
	color: var(--fa-t6);
}

.fa-footer__wave {
	display: block;
	width: 100%;
	height: 120px;
}

/* The wordmark is deliberately cropped: the box keeps ~62% of the glyph height
   so the letters run off the bottom edge of the site. */
.fa-footer__markbox {
	overflow: hidden;
	padding: 0 var(--fa-gutter);
	height: 0;
}

.fa-footer__mark {
	display: block;
	width: 100%;
	height: auto;
	opacity: .4;
}

.fa-footer__mark text {
	fill: var(--fa-white);
	font-family: inherit;
	font-size: 100px;
	font-weight: 500;
	letter-spacing: -.055em;
}

/* ==========================================================================
   17. Scroll reveal + word masks
   ========================================================================== */

[data-motion="on"] {
	opacity: 0;
	transform: translateY(22px);
	filter: blur(5px);
}

[data-motion="done"] {
	opacity: 1;
	transform: none;
	filter: none;
}

.fa-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .14em;
	margin-bottom: -.14em;
}

.fa-word__in {
	display: inline-block;
	transform: translateY(108%);
}

.fa-word__in.is-in {
	transform: translateY(0);
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 1219px) {
	.fa-problems__grid,
	.fa-compare__body,
	.fa-contact__grid,
	.fa-sec__head--split {
		gap: 44px;
	}
}

@media (max-width: 1023px) {
	.fa-nav__links {
		display: none;
	}

	.fa-burger {
		display: inline-flex;
	}
}

@media (max-width: 979px) {
	.fa-tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- Below 900px the three pinned stages become plain flow. The scroll
        drivers bail at the same breakpoint (see kinetic.js FA.narrow). ---- */
@media (max-width: 1023px) {
	.fa-hero__wave fa-wave {
		--fa-amp: 0.26;
		--fa-shift: 0.16;
	}
}

@media (max-width: 899px) {
	.fa-sec__head--split,
	.fa-problems__grid,
	.fa-compare__body,
	.fa-contact__grid,
	.fa-stage__panel,
	.fa-value__cols,
	.fa-journey__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.fa-problems__aside,
	.fa-contact__aside {
		position: static;
		top: auto;
	}

	.fa-deck {
		height: 360px;
	}

	/* Audience rail: native swipe instead of a scroll-driven pin. */
	.fa-rail-track {
		height: auto !important;
	}

	.fa-rail-stage {
		position: static;
		padding: 16px var(--fa-gutter) 48px;
	}

	/* Journey: unpinned vertical story. */
	.fa-journey__track {
		height: auto;
	}

	.fa-journey__stage {
		position: static;
		height: auto;
		overflow: visible;
	}

	.fa-journey__grid,
	.fa-journey__rail {
		display: none;
	}

	.fa-journey__inner {
		display: block;
		height: auto;
		padding-bottom: clamp(50px, 8vw, 80px);
	}

	/* The two columns dissolve so each step can sit directly above its own
	   photo — otherwise the stacked layout reads as four texts followed by
	   four unrelated images. */
	.fa-journey__cols {
		overflow: visible;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
		/* Must be stretch: the photo slots have only an absolutely positioned
		   child, so centring would collapse them to zero width. */
		align-items: stretch;
	}

	.fa-journey__text,
	.fa-journey__shots {
		display: contents;
	}

	.fa-jstep,
	.fa-jshot {
		position: static;
		opacity: 1;
		transform: none;
	}

	.fa-jstep:nth-child(1) { order: 1; }
	.fa-jshot:nth-child(1) { order: 2; }
	.fa-jstep:nth-child(2) { order: 3; }
	.fa-jshot:nth-child(2) { order: 4; }
	.fa-jstep:nth-child(3) { order: 5; }
	.fa-jshot:nth-child(3) { order: 6; }
	.fa-jstep:nth-child(4) { order: 7; }
	.fa-jshot:nth-child(4) { order: 8; }

	.fa-jstep {
		margin-top: 18px;
	}

	.fa-jshot {
		height: 210px;
		border-radius: 20px;
		overflow: hidden;
		position: relative;
	}

	/* Integrations: constellation becomes a centred plate grid. */
	.fa-wheel-track {
		height: auto;
	}

	.fa-wheel {
		position: static;
		height: auto;
		overflow: visible;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 0 var(--fa-gutter) 20px;
	}

	.fa-wheel__glow,
	.fa-wheel__links {
		display: none;
	}

	.fa-wheel__hub {
		position: static;
		margin: 0 auto 22px;
		transform: none;
		width: 150px;
		height: 150px;
		flex: 0 0 100%;
	}

	.fa-plate {
		position: static;
		opacity: 1;
		transform: none;
		margin: 0;
		width: 150px;
		height: 52px;
		flex: none;
	}
}

@media (max-width: 767px) {
	:root {
		--fa-nav-h: 72px;
		--fa-nav-h-sm: 64px;
		--fa-pin: 96px;
	}

	.fa-nav__logo img {
		height: 38px;
	}

	.fa-nav__cta {
		padding: 11px 18px;
		font-size: 12.5px;
	}

	.fa-hero {
		padding: 96px var(--fa-gutter) 44px;
	}

	.fa-hero__inner {
		padding: 0;
	}

	/* Full-width scrim and a lower, shorter waveform so the headline stays legible. */
	.fa-hero__scrim {
		width: 100%;
	}

	/* Still full bleed; the full-width scrim below keeps the headline legible.
	   The amplitude drops because the canvas is now taller than it is wide. */
	.fa-hero__wave fa-wave {
		--fa-amp: 0.18;
		--fa-shift: 0.06;
	}

	.fa-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.fa-stage__title {
		font-size: 30px;
	}

	.fa-plate {
		width: calc(50% - 5px);
	}

	/* The deck flattens: no 3D stack, just cards in flow. */
	.fa-deck {
		height: auto;
		perspective: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.fa-dcard {
		position: static;
		width: 100%;
		height: auto;
		min-height: 250px;
		margin: 0;
		transform: none !important;
		padding: 22px 20px;
	}

	.fa-aud-card {
		width: min(300px, 82vw);
	}
}

@media (max-width: 639px) {
	.fa-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fa-form__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 559px) {
	.fa-prob {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

@media (max-width: 419px) {
	.fa-nav__cta {
		display: none;
	}
}

/* ==========================================================================
   19. Interior pages (posts, pages, archives, search, 404)
   ========================================================================== */

.fa-interior-sec {
	border-radius: 0;
	padding-top: calc(var(--fa-nav-h) + clamp(40px, 6vw, 86px));
	padding-bottom: clamp(60px, 8vw, 110px);
	min-height: 70vh;
}

.fa-interior {
	max-width: 900px;
}

.fa-interior__head {
	margin-bottom: clamp(28px, 4vw, 48px);
}

.fa-interior__lede {
	font-size: clamp(15px, 1.3vw, 16.5px);
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 20px 0 0;
	max-width: 620px;
}

.fa-sec--ink .fa-interior__lede {
	color: var(--fa-t4);
}

.fa-interior__empty {
	font-size: 16px;
	line-height: 1.7;
	color: var(--fa-t7);
}

.fa-interior__media {
	margin: 0 0 clamp(24px, 3vw, 40px);
	border-radius: var(--fa-radius-card);
	overflow: hidden;
}

.fa-interior__media img {
	display: block;
	width: 100%;
	height: auto;
}

.fa-interior__search {
	margin-top: 26px;
}

.fa-postmeta {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t5);
	margin-top: 14px;
	text-transform: uppercase;
}

/* ---- Long-form content ---- */

.fa-prose {
	font-size: 16.5px;
	line-height: 1.8;
	color: #2A2A2A;
}

.fa-prose > * + * {
	margin-top: 1.15em;
}

.fa-prose h2,
.fa-prose h3,
.fa-prose h4 {
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.2;
	margin-top: 1.9em;
	color: var(--fa-black);
}

.fa-prose h2 { font-size: clamp(24px, 3vw, 32px); }
.fa-prose h3 { font-size: clamp(20px, 2.4vw, 25px); }
.fa-prose h4 { font-size: 18px; }

.fa-prose a {
	color: var(--fa-accent);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.fa-prose img,
.fa-prose iframe,
.fa-prose video {
	max-width: 100%;
	height: auto;
	border-radius: 18px;
}

.fa-prose blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--fa-accent);
	font-size: 18px;
	color: var(--fa-t7);
}

.fa-prose code,
.fa-prose kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9em;
	background: rgba(4, 4, 4, .06);
	border-radius: 6px;
	padding: .15em .4em;
}

.fa-prose pre {
	background: var(--fa-black);
	color: var(--fa-white);
	border-radius: 18px;
	padding: 22px 24px;
	overflow-x: auto;
}

.fa-prose pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.fa-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.fa-prose th,
.fa-prose td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(4, 4, 4, .12);
}

.fa-prose ul,
.fa-prose ol {
	padding-left: 1.3em;
}

.fa-prose li + li {
	margin-top: .45em;
}

.fa-prose hr {
	border: none;
	border-top: 1px solid rgba(4, 4, 4, .14);
	margin: 2.4em 0;
}

/* ---- Post list ---- */

.fa-postlist {
	display: grid;
	gap: 14px;
}

.fa-postcard {
	background: var(--fa-panel-light);
	border-radius: var(--fa-radius-card);
	padding: clamp(20px, 2.6vw, 32px);
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	transform-style: preserve-3d;
}

.fa-postcard:not(:has(.fa-postcard__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.fa-postcard__media {
	display: block;
	border-radius: 18px;
	overflow: hidden;
}

.fa-postcard__media img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.fa-postcard__title {
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.2;
	margin: 10px 0 10px;
}

.fa-postcard__excerpt {
	font-size: 15px;
	line-height: 1.7;
	color: var(--fa-t7);
	margin: 0 0 14px;
}

.fa-postcard__more {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fa-accent);
}

/* ---- Pagination + post navigation ---- */

.pagination,
.post-navigation {
	margin-top: clamp(34px, 4vw, 56px);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(4, 4, 4, .16);
	font-size: 14px;
	font-weight: 500;
}

.pagination .page-numbers.current {
	background: var(--fa-accent);
	border-color: var(--fa-accent);
	color: var(--fa-white);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.post-navigation a {
	display: block;
	background: var(--fa-panel-light);
	border-radius: 20px;
	padding: 20px 24px;
}

.fa-postnav__k {
	display: block;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--fa-t5);
	margin-bottom: 8px;
	text-transform: uppercase;
}

.fa-postnav__t {
	display: block;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.3;
}

/* ---- Search form ---- */

.fa-searchform {
	display: flex;
	gap: 10px;
	max-width: 520px;
}

.fa-searchform .fa-input {
	flex: 1 1 auto;
}

.fa-sec--ink .fa-searchform .fa-input {
	background: rgba(251, 251, 251, .06);
	border-color: rgba(251, 251, 251, .18);
	color: var(--fa-white);
}

/* ---- Comments ---- */

.fa-comments {
	margin-top: clamp(40px, 5vw, 70px);
	padding-top: clamp(30px, 4vw, 46px);
	border-top: 1px solid rgba(4, 4, 4, .14);
}

.fa-comments__title {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 500;
	letter-spacing: -.03em;
	margin: 0 0 24px;
}

.fa-comments__list,
.fa-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fa-comments__list .children {
	margin-left: clamp(16px, 4vw, 40px);
	margin-top: 12px;
}

.fa-comments__list li {
	margin-bottom: 12px;
}

.fa-comments__list article {
	background: var(--fa-panel-light);
	border-radius: 20px;
	padding: 20px 24px;
}

.fa-comments__list .comment-meta {
	font-size: 12px;
	color: var(--fa-t5);
	margin-bottom: 10px;
}

.fa-comments__list .avatar {
	border-radius: 999px;
	vertical-align: middle;
	margin-right: 10px;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--fa-black);
	background: var(--fa-field);
	border: 1px solid rgba(4, 4, 4, .08);
	border-radius: 16px;
	padding: 16px 18px;
	outline: none;
}

.comment-form p {
	margin: 0 0 12px;
}

.comment-form .submit {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	border: none;
	border-radius: 999px;
	padding: 16px 26px;
	background: var(--fa-accent);
	color: var(--fa-white);
	cursor: pointer;
}

/* ---- 404 ---- */

.fa-404 {
	overflow: hidden;
}

.fa-404__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	pointer-events: none;
	opacity: .7;
}

.fa-404__wave fa-wave {
	display: block;
	width: 100%;
	height: 100%;
}

.fa-404__inner {
	position: relative;
}

.fa-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

@media (max-width: 639px) {
	.fa-postcard {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.fa-postcard__media img {
		height: 190px;
	}

	.post-navigation .nav-links {
		grid-template-columns: minmax(0, 1fr);
	}

	.fa-searchform {
		flex-direction: column;
	}
}

/* ==========================================================================
   20. WordPress core classes
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--fa-white);
	border-radius: 999px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip-path: none;
	color: var(--fa-black);
	display: block;
	font-size: 14px;
	font-weight: 500;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: 1100px;
	margin-left: calc((900px - 1100px) / 2);
	margin-right: calc((900px - 1100px) / 2);
}

.alignfull {
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@media (max-width: 1180px) {
	.alignwide {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

.wp-caption {
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text,
.gallery-caption {
	font-size: 13px;
	color: var(--fa-t5);
	text-align: center;
	margin-top: 10px;
}

.sticky .fa-postcard__title::before {
	content: "★ ";
	color: var(--fa-accent);
}

.bypostauthor > article {
	border: 1px solid rgba(255, 64, 0, .35);
}

.fa-pagelinks {
	margin-top: 1.6em;
	font-size: 14px;
	font-weight: 500;
}

/* ==========================================================================
   21. Contact form plumbing
   ========================================================================== */

/* Honeypot. Kept out of the layout without display:none, which some bots
   detect and skip; aria-hidden plus tabindex keeps it away from real users. */
.fa-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fa-sentcard:focus {
	outline: none;
}

/* Company identification line, below the footer's copyright row. */
.fa-footer__identity {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--fa-gutter) 22px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--fa-t6);
}