/* ============================================================
   SENZARR FRESH — the Fourmula direction.
   Apple-minimal: paper light, ink type, signal used sparingly.
   ============================================================ */

:root {
	--ink: #0E180F;
	--paper: #FAFAFA;
	--cream: #FCFFED;
	--signal: #BBFF00;
	--signal-deep: #9ACC00;
	--radius: 32px;
}

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

::selection { background: var(--signal); color: var(--ink); }

body {
	background: var(--paper);
	color: var(--ink);
}

/* ---------- Preloader ---------- */

.f-loader {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: var(--ink);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 2rem 2.5rem;
	/* v25.12: 0.7s slide shortened to 0.45s. The panel is opaque, so every
	   millisecond it remains on screen is a millisecond Largest Contentful
	   Paint cannot happen. */
	transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
	will-change: transform;
}

.f-loader.is-done { transform: translateY(-100%); }

.f-loader-brand {
	color: var(--paper);
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: 0.95rem;
}

.f-loader-count {
	color: var(--signal);
	font-weight: 800;
	font-size: clamp(3rem, 10vw, 7rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---------- Header: almost nothing ---------- */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 900;
}

.f-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
	background: rgba(250, 250, 250, 0.82);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.f-wordmark,
.f-wordmark a {
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--ink);
	text-decoration: none;
	text-transform: lowercase;
}

.f-header-right {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.f-menu-btn {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	padding: 0.5rem 0.6rem;
}

.f-cta {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	font-size: 0.88rem;
	font-weight: 700;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
}

.f-cta:hover { background: var(--signal); color: var(--ink); }

/* Fullscreen menu overlay */

.f-overlay {
	position: fixed;
	inset: 0;
	z-index: 1500;
	background: var(--ink);
	color: var(--paper);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.5rem, 4vw, 3rem);
	transform: translateY(-102%);
	transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}

.f-overlay.is-open { transform: translateY(0); }

.f-overlay-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.f-overlay-close {
	background: none;
	border: none;
	color: var(--paper);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
}

.f-overlay-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.f-overlay-links a {
	color: var(--paper);
	text-decoration: none;
	font-size: clamp(2.4rem, 7vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	transition: color 0.25s ease, padding-left 0.3s ease;
}

.f-overlay-links a:hover {
	color: var(--signal);
	padding-left: 0.4em;
}

.f-overlay-foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	opacity: 0.8;
}

.f-overlay-foot .f-clock {
	display: flex;
	flex-direction: column;
}

.f-overlay-foot .f-clock-place {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.6;
}

.f-overlay-foot .f-clock-time {
	font-weight: 800;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}

/* ---------- Hero ---------- */

.f-hero {
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.f-hero-title {
	font-size: clamp(3rem, 9.5vw, 8.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.98;
	margin: 0 0 1.5rem;
	max-width: 12ch;
}

.f-hero-title em {
	font-style: normal;
	color: var(--signal-deep);
}

.f-hero-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
	padding-bottom: 2rem;
}

.f-hero-note {
	margin: 0;
	max-width: 380px;
	font-size: 1.05rem;
	line-height: 1.55;
	opacity: 0.75;
}

.f-scroll {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	opacity: 0.65;
	transition: opacity 0.25s ease;
}

.f-scroll:hover { opacity: 1; color: var(--signal-deep); }

.f-copyright {
	font-size: 0.8rem;
	font-weight: 700;
	opacity: 0.5;
}

/* Ticker */

.f-ticker {
	border-top: 1px solid rgba(14, 24, 15, 0.12);
	border-bottom: 1px solid rgba(14, 24, 15, 0.12);
	overflow: hidden;
	padding: 1.1rem 0;
}

.f-ticker-track {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: f-marquee 30s linear infinite;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.f-ticker-track span::after {
	content: "\00B7";
	margin-left: 3rem;
	color: var(--signal-deep);
}

@keyframes f-marquee { to { transform: translateX(-50%); } }

/* ---------- The stack: sections sliding over each other ---------- */

.f-stack { position: relative; }

.f-panel {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: 0 -24px 60px rgba(14, 24, 15, 0.18);
}

.f-panel-ink { background: var(--ink); color: var(--paper); }
.f-panel-cream { background: var(--cream); color: var(--ink); }
.f-panel-paper { background: var(--paper); color: var(--ink); }
.f-panel-signal { background: var(--signal); color: var(--ink); }

.f-label {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	color: var(--signal-deep);
}

.f-panel-ink .f-label { color: var(--signal); }

.f-h2 {
	font-size: clamp(2.2rem, 5.5vw, 4.2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.03;
	margin: 0 0 1.1rem;
	max-width: 16ch;
}

.f-copy {
	margin: 0 0 2rem;
	max-width: 480px;
	font-size: 1.1rem;
	line-height: 1.6;
	opacity: 0.8;
}

.f-panel-inner {
	width: min(1200px, 100%);
	margin: 0 auto;
}

.f-media.wp-block-cover {
	border-radius: 24px;
	overflow: hidden;
	min-height: clamp(260px, 42vh, 460px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

/* ---------- Steps ---------- */

.f-steps { padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2.5rem); }

.f-steps-head { max-width: 1200px; margin: 0 auto 3rem; }

.f-step {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	border-top: 1px solid rgba(14, 24, 15, 0.12);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.f-step.is-visible { opacity: 1; transform: translateY(0); }

.f-step-meta {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.75rem;
	font-weight: 800;
}

.f-step-num { font-size: 0.85rem; color: var(--signal-deep); letter-spacing: 0.12em; }
.f-step-code { font-size: 0.85rem; opacity: 0.45; }

.f-step h3 {
	font-size: clamp(1.7rem, 3.6vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
}

.f-step p { margin: 0 0 1.25rem; opacity: 0.75; max-width: 400px; }

.f-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.f-chips span {
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.45rem 1rem;
	border: 1.5px solid rgba(14, 24, 15, 0.25);
	border-radius: 999px;
}

.f-step-media {
	border-radius: 24px;
	min-height: 300px;
	background: linear-gradient(150deg, var(--ink), #24380F 70%, #4E7A00);
	position: relative;
	overflow: hidden;
}

.f-step:nth-child(odd) .f-step-media { order: -1; }

.f-step-media::after {
	content: "";
	position: absolute;
	right: 1.6rem;
	bottom: 1.6rem;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 20px rgba(187, 255, 0, 0.8);
}

@media (max-width: 800px) {
	.f-step { grid-template-columns: 1fr; }
	.f-step:nth-child(odd) .f-step-media { order: 0; }
}

/* ---------- FAQ ---------- */

.f-faq { max-width: 860px; margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) 1.5rem; }

.f-faq details {
	border-top: 1px solid rgba(14, 24, 15, 0.14);
	padding: 0;
}

.f-faq details:last-of-type { border-bottom: 1px solid rgba(14, 24, 15, 0.14); }

.f-faq summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	cursor: pointer;
	padding: 1.5rem 0;
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: 700;
}

.f-faq summary::-webkit-details-marker { display: none; }

.f-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--signal-deep);
	transition: transform 0.3s ease;
	flex: none;
}

.f-faq details[open] summary::after { transform: rotate(45deg); }

.f-faq details > p {
	margin: 0 0 1.6rem;
	max-width: 640px;
	opacity: 0.8;
	line-height: 1.65;
}

/* ---------- Contact ---------- */

.f-contact {
	background: var(--signal);
	color: var(--ink);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2.5rem);
}

.f-contact-inner { max-width: 860px; margin: 0 auto; }

.f-madlib {
	margin-top: 2rem;
	font-size: clamp(1.25rem, 2.8vw, 1.8rem);
	font-weight: 600;
	line-height: 2.05;
}

.f-blank {
	border: none;
	border-bottom: 3px solid var(--ink);
	background: transparent;
	font: inherit;
	color: var(--ink);
	padding: 0 0.3rem 0.1rem;
	outline: none;
	max-width: 100%;
}

.f-blank::placeholder { color: rgba(14, 24, 15, 0.4); font-weight: 500; }

.f-area {
	display: block;
	width: 100%;
	margin: 0.75rem 0 1.25rem;
	padding: 1rem 1.2rem;
	border: 3px solid var(--ink);
	border-radius: 16px;
	background: rgba(14, 24, 15, 0.05);
	font-family: inherit;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--ink);
	resize: vertical;
	outline: none;
}

.f-submit {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 1rem 2.4rem;
	border: none;
	border-radius: 999px;
	background: var(--ink);
	color: var(--signal);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.f-submit:hover { transform: translateY(-2px); }

.f-note { margin-top: 0.9rem; font-size: 0.95rem; font-weight: 600; min-height: 1.4em; }

/* ---------- Footer ---------- */

.f-footer {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(3.5rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
}

.f-footer-grid {
	max-width: 1200px;
	margin: 0 auto 3rem;
	display: flex;
	justify-content: space-between;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.f-footer a { color: var(--paper); text-decoration: none; opacity: 0.8; }
.f-footer a:hover { color: var(--signal); opacity: 1; }

.f-footer-col { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; }

.f-footer-brand { font-weight: 800; font-size: 1.1rem; text-transform: lowercase; }

.f-footer-legal {
	max-width: 1200px;
	margin: 0 auto;
	font-size: 0.78rem;
	opacity: 0.55;
	border-top: 1px solid rgba(250, 250, 250, 0.12);
	padding-top: 1.5rem;
}

/* ---------- Reveal utility ---------- */

.f-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.f-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.f-loader { display: none; }
	.f-ticker-track { animation: none; }
	.f-reveal, .f-step { opacity: 1 !important; transform: none !important; transition: none; }
	.f-overlay { transition: none; }
	.f-panel { position: static; box-shadow: none; }
}

/* ============================================================
   FRESH 2: the emotion-orbit hero, Fourmula header, dark mode.
   ============================================================ */

/* ---------- Theme variables + dark mode ---------- */

:root {
	--bg: var(--paper);
	--fg: var(--ink);
	--line: rgba(14, 24, 15, 0.12);
	--card: #ffffff;
}

[data-theme="dark"] {
	--bg: var(--ink);
	--fg: var(--paper);
	--line: rgba(250, 250, 250, 0.14);
	--card: #16240F;
}

body { background: var(--bg); color: var(--fg); transition: background 0.4s ease, color 0.4s ease; }

[data-theme="dark"] .f-header { background: rgba(14, 24, 15, 0.82); }
[data-theme="dark"] .f-wordmark a, [data-theme="dark"] .f-menu-btn { color: var(--paper); }
[data-theme="dark"] .f-panel-paper { background: #121D12; color: var(--paper); }
[data-theme="dark"] .f-panel-cream { background: #18261A; color: var(--paper); }
[data-theme="dark"] .f-steps, [data-theme="dark"] .f-faq { color: var(--paper); }
[data-theme="dark"] .f-step { border-color: var(--line); }
[data-theme="dark"] .f-chips span { border-color: rgba(250, 250, 250, 0.3); }
[data-theme="dark"] .f-faq details { border-color: var(--line); }
[data-theme="dark"] .f-ticker { border-color: var(--line); }
[data-theme="dark"] .f-scroll { color: var(--paper); }
[data-theme="dark"] .f-cta { background: var(--signal); color: var(--ink); }

/* ---------- Header, Fourmula anatomy ---------- */

.f-header { gap: 1rem; }

.f-header .wp-block-site-logo img,
.f-header .fx-logo {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	display: block;
}

.fx-pill {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--ink);
	color: var(--paper);
	border-radius: 999px;
	padding: 0.4rem 0.5rem 0.4rem 1.1rem;
	box-shadow: 0 8px 26px rgba(14, 24, 15, 0.28);
}

[data-theme="dark"] .fx-pill { background: #060B06; }

.fx-menu {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: none;
	color: var(--paper);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0.4rem 0.4rem;
}

.fx-burger {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.fx-burger::before,
.fx-burger::after {
	content: "";
	height: 2px;
	border-radius: 2px;
	background: var(--paper);
}

.fx-theme {
	background: none;
	border: none;
	color: var(--paper);
	cursor: pointer;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease;
}

.fx-theme:hover { background: rgba(250, 250, 250, 0.12); }
.fx-theme svg { width: 18px; height: 18px; fill: currentColor; }
.fx-theme .fx-sun { display: none; }
[data-theme="dark"] .fx-theme .fx-sun { display: block; }
[data-theme="dark"] .fx-theme .fx-moon { display: none; }

.fx-pct {
	background: rgba(250, 250, 250, 0.16);
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
	font-size: 0.88rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	min-width: 62px;
	text-align: center;
}

@media (max-width: 760px) {
	.fx-pct { display: none; }
	.fx-pill { padding-left: 0.8rem; }
}

/* ---------- Sticky time chip ---------- */

.fx-timechip {
	position: fixed;
	left: 1.1rem;
	bottom: 1.1rem;
	z-index: 850;
	display: flex;
	gap: 1rem;
	align-items: center;
	background: var(--ink);
	color: var(--paper);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	box-shadow: 0 8px 26px rgba(14, 24, 15, 0.3);
}

.fx-timechip .f-clock-time { color: var(--signal); font-variant-numeric: tabular-nums; }
.fx-timechip .f-clock-place { opacity: 0.6; margin-right: 0.35rem; text-transform: uppercase; font-size: 0.6rem; }

@media (max-width: 640px) { .fx-timechip { display: none; } }

/* ---------- The emotion-orbit hero ---------- */

.fx-hero {
	position: relative;
	min-height: 94vh;
	display: flex;
	flex-direction: column;
	padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
	overflow: clip;
}

.fx-stage {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

.fx-man {
	position: relative;
	z-index: 2;
	width: min(340px, 60vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
}

.fx-man .wp-block-cover {
	width: 100%;
	aspect-ratio: 3 / 4;
	min-height: 0 !important;
	border-radius: 46% 46% 40% 40% / 38% 38% 30% 30%;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(14, 24, 15, 0.22);
}

.fx-man-caption {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0;
}

/* The orbit of feelings */
.fx-orbit {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 3;
}

.fx-orbit-ring {
	position: relative;
	width: 0;
	height: 0;
	animation: fx-orbit 70s linear infinite;
}

.fx-bubble {
	position: absolute;
	top: 0;
	left: 0;
	transform:
		rotate(var(--a))
		translateX(var(--r, clamp(190px, 30vw, 340px)))
		rotate(calc(var(--a) * -1));
}

.fx-bubble-inner {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--card);
	color: var(--ink);
	border-radius: 999px;
	padding: 0.65rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 800;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(14, 24, 15, 0.16);
	transform: translate(-50%, -50%);
	animation: fx-counter 70s linear infinite, fx-bob 4.5s ease-in-out var(--bob, 0s) infinite alternate;
}

[data-theme="dark"] .fx-bubble-inner { color: var(--ink); }

.fx-bubble-inner::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--signal);
	flex: none;
}

@keyframes fx-orbit { to { transform: rotate(360deg); } }
@keyframes fx-counter { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes fx-bob { from { margin-top: -5px; } to { margin-top: 5px; } }

/* Bottom row, Fourmula's exact composition */
.fx-hero-bottom {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.fx-hero-title {
	margin: 0;
	font-size: clamp(2.6rem, 6.5vw, 5.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
}

.fx-hero-title .fx-muted { color: rgba(14, 24, 15, 0.38); display: block; }
[data-theme="dark"] .fx-hero-title .fx-muted { color: rgba(250, 250, 250, 0.4); }

.fx-hero-bottom .f-copyright { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.4rem; }

@media (max-width: 760px) {
	.fx-bubble { --r: clamp(140px, 42vw, 190px); }
	.fx-bubble-inner { font-size: 0.72rem; padding: 0.5rem 0.9rem; }
	.fx-hero-bottom { flex-direction: column; align-items: flex-start; }
	.fx-hero-bottom .f-copyright { position: static; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-orbit-ring, .fx-bubble-inner { animation: none; }
	body { transition: none; }
}

/* ============================================================
   v11.2 fixes: transparent header, undistorted logo, hero image
   ============================================================ */

/* 2. Header bar goes fully transparent; only its pills carry surfaces,
   so the orbiting thoughts pass behind it unobstructed. */
.f-header,
[data-theme="dark"] .f-header {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* 3. The logo is a wide wordmark, never force it square. */
.f-header .wp-block-site-logo img,
.f-header .fx-logo {
	width: auto;
	height: 52px;
	max-width: 220px;
	border-radius: 0;
	object-fit: contain;
}

/* Hero image sits inside the blob, faces framed high */
.fx-man-cover img.wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- v11.1.1 fixes ---------- */

/* Header: fully transparent so the orbit passes uninterrupted behind the pills */
.f-header {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	pointer-events: none;
}

.f-header > *,
.f-header a,
.f-header button,
.f-header .fx-pill {
	pointer-events: auto;
}

[data-theme="dark"] .f-header { background: transparent; }

/* Logo: natural proportions, never squashed */
.f-header .wp-block-site-logo img,
.f-header .fx-logo {
	width: auto;
	height: 54px;
	max-width: 200px;
	border-radius: 0;
	object-fit: contain;
}

/* The man's photo fills the blob */
.fx-man-cover img.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* ============================================================
   FRESH v12: emotion cloud, echoes, editorial notes.
   ============================================================ */

/* Outer ring: wider, slower, counter-direction */
.fx-orbit-ring--outer {
	animation-duration: 105s;
	animation-direction: reverse;
}

.fx-orbit-ring--outer .fx-bubble {
	--r: clamp(280px, 42vw, 480px);
}

.fx-orbit-ring--outer .fx-bubble-inner {
	animation: fx-counter-rev 105s linear infinite, fx-bob 5.5s ease-in-out var(--bob, 0s) infinite alternate;
	font-size: 0.8rem;
	opacity: 0.92;
}

@keyframes fx-counter-rev { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 760px) {
	.fx-orbit-ring--outer .fx-bubble { --r: clamp(175px, 46vw, 230px); }
	.fx-orbit-ring--outer .fx-bubble:nth-child(even) { display: none; }
	.fx-orbit-ring .fx-bubble:nth-child(7) { display: none; }
}

/* Chips on the ink panel need paper borders */
.f-panel-ink .f-chips span { border-color: rgba(250, 250, 250, 0.35); }

/* ---------- Echoes: the Cleo-learned carousel, minimal ---------- */

.fx-echoes {
	padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2.5rem);
}

.fx-echoes-head {
	max-width: 1200px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.fx-echoes-head .f-h2 { margin-left: auto; margin-right: auto; }

.fx-arrows {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.fx-arrow {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: var(--card);
	color: var(--fg);
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.fx-arrow:hover {
	background: var(--signal);
	color: var(--ink);
	transform: translateY(-2px);
}

[data-theme="dark"] .fx-arrow { color: var(--paper); }
[data-theme="dark"] .fx-arrow:hover { color: var(--ink); }

.fx-echoes-viewport {
	overflow: hidden;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0.5rem 0 1rem;
}

.fx-echoes-track {
	display: flex;
	gap: 1.5rem;
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.fx-ecard {
	flex: 0 0 min(780px, 88%);
	margin: 0;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.75rem;
	align-items: center;
	background: var(--card);
	color: var(--fg);
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 1.5rem;
	box-shadow: 0 18px 50px rgba(14, 24, 15, 0.12);
}

.fx-ecard-media {
	aspect-ratio: 1;
	border-radius: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 1rem;
}

.fx-em-a { background: linear-gradient(160deg, #24380F, #0E180F); }
.fx-em-b { background: linear-gradient(160deg, #4E7A00, #24380F); }
.fx-em-c { background: linear-gradient(160deg, #9ACC00, #4E7A00); }

.fx-ecard-media span {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 18px rgba(187, 255, 0, 0.8);
}

.fx-ecard blockquote {
	margin: 0 0 0.9rem;
	font-size: clamp(1.05rem, 1.9vw, 1.25rem);
	font-weight: 700;
	line-height: 1.5;
}

.fx-ecard figcaption {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal-deep);
}

@media (max-width: 640px) {
	.fx-ecard { grid-template-columns: 1fr; }
	.fx-ecard-media { aspect-ratio: 16 / 9; }
}

/* ---------- Editorial Notes ---------- */

.fx-notes {
	padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2.5rem);
}

.fx-notes-head { max-width: 1200px; margin: 0 auto 2.5rem; }

.fx-notes-grid { max-width: 1200px; margin: 0 auto; }

.fx-notes-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.fx-note {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 1rem 1rem 1.4rem;
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.fx-note:hover {
	transform: translateY(-6px);
	border-color: var(--signal-deep);
}

.fx-note-img {
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.fx-note-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.06);
	transition: filter 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-note:hover .fx-note-img img {
	filter: grayscale(0);
	transform: scale(1.05);
}

.fx-note-date {
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal-deep);
	margin: 0 0 0.35rem;
}

.fx-note-title, .fx-note-title a {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--fg);
	text-decoration: none;
	margin: 0;
}

.fx-note-title a:hover { color: var(--signal-deep); }

.fx-notes-all {
	max-width: 1200px;
	margin: 2rem auto 0;
}

.fx-notes-all a {
	color: var(--signal-deep);
	font-weight: 800;
	text-decoration: none;
}

.fx-notes-all a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 900px) {
	.fx-notes-grid .wp-block-post-template { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-orbit-ring--outer, .fx-orbit-ring--outer .fx-bubble-inner { animation: none; }
	.fx-echoes-track { transition: none; }
	.fx-note:hover { transform: none; }
	.fx-note:hover .fx-note-img img { transform: none; }
}

/* ============================================================
   FRESH v13: Sunfi-style hero — transparent breathing GIF,
   6 straight-to-point pain points, new copy, trust layer.
   ============================================================ */

.fx-hero {
	padding-bottom: 2rem;
}

.fx-stage {
	min-height: 52vh;
}

/* The man: no box, no mask, no background — just the cutout, breathing */
.fx-man--float {
	width: min(300px, 52vw);
	filter: drop-shadow(0 30px 40px rgba(14, 24, 15, 0.18));
}

.fx-man-img {
	width: 100%;
	height: auto;
	display: block;
	background: transparent;
	animation: fx-breathe 4.5s ease-in-out infinite;
}

@keyframes fx-breathe {
	0%, 100% { transform: scale(1) translateY(0); }
	50% { transform: scale(1.035) translateY(-8px); }
}

/* Six-bubble ring: wider spacing, single ring, straight to the point */
.fx-orbit-ring--six {
	animation-duration: 85s;
}

.fx-orbit-ring--six .fx-bubble {
	--r: clamp(220px, 34vw, 400px);
}

.fx-orbit-ring--six .fx-bubble-inner {
	font-size: 0.86rem;
	padding: 0.7rem 1.35rem;
}

@media (max-width: 760px) {
	.fx-orbit-ring--six .fx-bubble { --r: clamp(150px, 44vw, 210px); }
	.fx-orbit-ring--six .fx-bubble-inner { font-size: 0.68rem; padding: 0.5rem 0.9rem; }
}

/* Hero copy block: left-aligned, Sunfi-weighted hierarchy */
.fx-hero-content {
	position: relative;
	z-index: 4;
	max-width: 640px;
	margin-top: 1rem;
}

.fx-kicker {
	font-size: 0.95rem;
	font-weight: 700;
	opacity: 0.6;
	margin: 0 0 0.6rem;
}

.fx-hero-title2 {
	margin: 0 0 1.1rem;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.fx-hero-title2 em {
	font-style: normal;
	color: var(--signal-deep);
}

.fx-hero-support {
	margin: 0 0 1.75rem;
	font-size: 1.05rem;
	line-height: 1.65;
	opacity: 0.78;
	max-width: 560px;
}

.fx-hero-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.fx-hero-cta {
	font-size: 1rem;
	padding: 1rem 1.9rem;
}

/* Trust layer: replaces "1,000+ units sold" */
.fx-trust {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.85rem;
}

.fx-trust-dots {
	display: inline-flex;
}

.fx-trust-dots span {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--signal-deep), var(--deep-forest, #24380F));
	border: 2px solid var(--bg);
	margin-left: -8px;
}

.fx-trust-dots span:first-child { margin-left: 0; }

.fx-trust-text strong { color: var(--fg); }
.fx-trust-text { opacity: 0.7; }

.fx-hero-foot {
	position: relative;
	z-index: 4;
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
}

@media (max-width: 640px) {
	.fx-hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-man-img { animation: none; }
}

/* ============================================================
   FRESH v14: Sunfi-grade pin badges — static, breathing, pointing,
   hover-reveal descriptions. Replaces the orbiting bubble ring.
   ============================================================ */

.fx-hero {
	display: block;
	min-height: 0;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
}

.fx-hero-copy {
	max-width: 760px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.fx-hero-copy .fx-kicker { opacity: 0.6; }
.fx-hero-copy .fx-hero-title2 { margin: 0 auto 1rem; }
.fx-hero-copy .fx-hero-support { margin: 0 auto; max-width: 600px; }

/* ---------- The stage: pins flanking the floating GIF ---------- */

.fx-stage-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: 1300px;
	margin: 0 auto;
}

.fx-pins {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: clamp(320px, 40vw, 460px);
	max-width: 260px;
}

.fx-pins-left { align-items: flex-end; }
.fx-pins-right { align-items: flex-start; }

.fx-man--float {
	flex: none;
	width: min(280px, 30vw);
	filter: drop-shadow(0 30px 40px rgba(14, 24, 15, 0.18));
}

/* ---------- The pin badge ---------- */

.fx-pin {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	animation: fx-pin-breathe 5s ease-in-out infinite;
}

.fx-pins-right .fx-pin { flex-direction: row-reverse; }

.fx-pin:nth-child(1) { animation-delay: 0s; }
.fx-pin:nth-child(2) { animation-delay: .8s; }
.fx-pin:nth-child(3) { animation-delay: 1.6s; }

@keyframes fx-pin-breathe {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.fx-pin-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 0.7rem 1.1rem;
	box-shadow: 0 10px 26px rgba(14, 24, 15, 0.12);
	min-width: 180px;
	max-width: 240px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.fx-pin:hover .fx-pin-card,
.fx-pin:focus-visible .fx-pin-card {
	border-color: var(--signal-deep);
	box-shadow: 0 16px 36px rgba(14, 24, 15, 0.18);
	transform: translateY(-2px);
}

.fx-pin-cap {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--fg);
	opacity: 0.55;
}

.fx-pin-bold {
	display: block;
	font-size: 1rem;
	font-weight: 800;
	color: var(--fg);
	letter-spacing: -0.01em;
	margin-top: 0.1rem;
}

.fx-pin-desc {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--fg);
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.fx-pin:hover .fx-pin-desc,
.fx-pin:focus-visible .fx-pin-desc {
	max-height: 100px;
	opacity: 0.72;
	margin-top: 0.45rem;
}

/* ---------- The animated pointer line, badge to image ---------- */

.fx-pin-line {
	flex: none;
	width: clamp(22px, 4vw, 46px);
	height: 2px;
	position: relative;
	background: repeating-linear-gradient(90deg, var(--signal-deep) 0 6px, transparent 6px 12px);
	opacity: 0.55;
}

.fx-pin-line::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 8px rgba(187, 255, 0, 0.8);
	animation: fx-pin-travel 2.6s ease-in-out infinite;
}

.fx-pins-right .fx-pin-line::after {
	animation-name: fx-pin-travel-rev;
}

@keyframes fx-pin-travel {
	0% { left: 0; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: calc(100% - 7px); opacity: 0; }
}

@keyframes fx-pin-travel-rev {
	0% { left: calc(100% - 7px); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: 0; opacity: 0; }
}

/* ---------- Actions + trust, centered beneath the stage ---------- */

.fx-hero-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	margin: 2.5rem auto 0;
	text-align: center;
}

.fx-hero-actions .fx-trust {
	justify-content: center;
}

@media (max-width: 980px) {
	.fx-stage-row { flex-direction: column; gap: 1.25rem; }
	.fx-pins { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; min-height: 0; }
	.fx-pins-left, .fx-pins-right { align-items: stretch; }
	.fx-pin, .fx-pins-right .fx-pin { flex-direction: column; align-items: center; text-align: center; }
	.fx-pin-line { display: none; }
	.fx-man--float { width: min(240px, 55vw); order: -1; }
	.fx-pin-card { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-pin { animation: none; }
	.fx-pin-line::after { animation: none; opacity: 0.9; left: calc(50% - 3.5px); }
}

/* ============================================================
   FRESH v15: real logo swap, GIF menu, scramble headline,
   rounded GIF corner, vertical connector, CTA pulse.
   ============================================================ */

/* ---------- Logo: theme-correct file, always ---------- */

.fx-logo-wrap {
	position: relative;
	display: inline-block;
	height: 54px;
}

.fx-logo-wrap img {
	height: 54px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	display: block;
}

.fx-logo-wrap img.fx-logo-light {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

[data-theme="dark"] .fx-logo-wrap img.fx-logo-dark { display: none; }
[data-theme="dark"] .fx-logo-wrap img.fx-logo-light { display: block; }

/* ---------- Overlay menu: the clock GIF behind the links ---------- */

.f-overlay { overflow: hidden; }

.f-overlay-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.f-overlay-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.32;
}

.f-overlay-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 24, 15, 0.55), rgba(14, 24, 15, 0.88));
}

.f-overlay-top,
.f-overlay-links,
.f-overlay-foot {
	position: relative;
	z-index: 1;
}

/* ---------- The GIF: rounded to match the pin cards ---------- */

.fx-man-img {
	border-radius: 16px;
	overflow: hidden;
}

/* ---------- Headline: the scramble word + muted second line ---------- */

.fx-hero-title2 {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.fx-signal-word {
	color: var(--signal-deep);
	font-weight: 800;
}

.fx-hero-title2 .fx-muted {
	font-size: 0.52em;
	font-weight: 700;
	opacity: 0.42;
	letter-spacing: -0.02em;
}

.fx-hero-support2 {
	max-width: 620px;
	margin: 1.1rem auto 0;
	font-size: 1.05rem;
	line-height: 1.65;
	opacity: 0.82;
}

.fx-hero-support2 strong {
	color: var(--signal-deep);
	font-weight: 800;
}

/* ---------- Vertical connector: GIF to CTA ---------- */

.fx-stage-wrap {
	position: relative;
}

.fx-vline {
	position: relative;
	width: 2px;
	height: clamp(36px, 6vw, 64px);
	margin: 0 auto;
	background: repeating-linear-gradient(180deg, var(--signal-deep) 0 6px, transparent 6px 12px);
	opacity: 0.55;
}

.fx-vline-dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 8px rgba(187, 255, 0, 0.8);
	animation: fx-vline-travel 2.6s ease-in-out infinite;
}

@keyframes fx-vline-travel {
	0% { top: 0; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { top: calc(100% - 7px); opacity: 0; }
}

/* ---------- CTA: the pulse that lures the click ---------- */

.fx-hero-cta {
	position: relative;
	overflow: visible;
}

.fx-cta-pulse {
	position: absolute;
	inset: -6px;
	border-radius: 999px;
	background: var(--signal);
	opacity: 0.5;
	animation: fx-cta-pulse 2.2s ease-out infinite;
	z-index: 0;
}

.fx-cta-label {
	position: relative;
	z-index: 1;
}

@keyframes fx-cta-pulse {
	0% { transform: scale(1); opacity: 0.45; }
	100% { transform: scale(1.28); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-vline-dot { animation: none; top: calc(50% - 3.5px); }
	.fx-cta-pulse { animation: none; opacity: 0; }
}

/* ============================================================
   FRESH v16: single-line headline, real sub-statement,
   support copy relocated beneath the GIF with dual connectors.
   ============================================================ */

.fx-hero-title2--single {
	display: block;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
}

.fx-hero-sub2 {
	margin: 0.6rem auto 0;
	max-width: 620px;
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: 700;
	opacity: 0.55;
}

.fx-stage-wrap--top { margin-bottom: 0; }

.fx-hero-support2 {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.65;
	opacity: 0.82;
}

.fx-hero-support2 strong {
	color: var(--signal-deep);
	font-weight: 800;
}

/* ============================================================
   FRESH v17: dark-mode text fix + the support-copy word reveal.
   ============================================================ */

/* FIX: WordPress's global theme.json heading/text colors were
   bleeding through with enough specificity to beat our theme
   variables, so plain text in the headline stayed ink-dark even
   against the dark background. Force every hero text element to
   the theme-aware variable, with enough specificity to win. */

html body .fx-hero-copy,
html body .fx-hero-title2,
html body .fx-hero-title2--single,
html body .fx-hero-sub2,
html body .fx-hero-support2,
html body .fx-hero-support2 strong,
html body .fx-pin-cap,
html body .fx-pin-bold,
html body .fx-pin-desc,
html body .fx-trust-text {
	color: var(--fg);
}

html body .fx-signal-word,
html body .fx-hero-title2 em {
	color: var(--signal-deep);
}

html body .fx-hero-support2 strong {
	color: var(--signal-deep);
}

html body .fx-hero-sub2 { opacity: 0.55; }
html body .fx-pin-cap { opacity: 0.55; }
html body .fx-trust-text { opacity: 0.7; }

/* ---------- The support paragraph: words collapse and arrange on scroll ---------- */

.fx-hero-support2 .fx-word {
	display: inline-block;
	opacity: 0.12;
	filter: blur(3px);
	transform: translateY(10px) scale(0.94);
	transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--wi, 0) * 32ms);
}

.fx-hero-support2.is-visible .fx-word {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0) scale(1);
}

/* The CTA waits for the paragraph to finish arranging before it earns its reveal */
.fx-cta-wait {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-cta-wait.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.fx-hero-support2 .fx-word {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
	.fx-cta-wait {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================
   FRESH v18: theme-wide dark-mode text safety net.
   WordPress's own global styles (from theme.json) can attach
   directly to real blocks — headings, post titles, post dates,
   navigation — with enough specificity to quietly override our
   theme-aware color variable. That's what caused text to vanish
   in dark mode. This block forces every text-bearing element on
   the page's general background to the correct theme-aware
   color, at a specificity guaranteed to win, everywhere in the
   theme, not just the hero.
   ============================================================ */

html body .f-h2,
html body .f-copy,
html body .f-label,
html body .f-step h3,
html body .f-step p,
html body .f-step-code,
html body .f-steps-head,
html body .f-faq summary,
html body .f-faq details > p,
html body .fx-echoes-head,
html body .fx-ecard blockquote,
html body .fx-notes-head,
html body .fx-note-title,
html body .fx-note-title a,
html body .fx-notes-all a,
html body .z-note,
html body .f-wordmark,
html body .f-wordmark a,
html body .f-menu-btn,
html body .f-scroll,
html body .f-copyright,
html body .wp-block-post-title,
html body .wp-block-post-title a,
html body .wp-block-post-date {
	color: var(--fg) !important;
}

/* Elements that sit on a background which never changes with the
   theme (always-ink panels, the always-signal contact block, the
   always-ink footer and menu overlay) keep their fixed, deliberate
   contrast and are excluded from the rule above by not being listed. */

/* Real WP block color classes WordPress may inject on post titles
   and headings inside our content: neutralise them explicitly. */
html body .has-text-color.wp-block-post-title,
html body [class*="has-"][class*="-color"].wp-block-post-title {
	color: var(--fg) !important;
}

/* Original opacity declarations on these elements are untouched;
   only color specificity was reinforced above. */

/* ============================================================
   FRESH v19: clickable logo everywhere, footer logo added.
   ============================================================ */

.fx-logo-wrap {
	text-decoration: none;
	cursor: pointer;
}

/* The footer band is permanently ink (it never flips with the
   site theme), so its logo is pinned to the light-colored mark
   at all times, regardless of light/dark mode, so it always
   reads against that fixed dark background. This overrides the
   toggle-driven rule with maximum certainty. */

.f-footer .fx-logo-wrap.fx-logo-wrap--footer img.fx-logo-dark {
	display: none !important;
}

.f-footer .fx-logo-wrap.fx-logo-wrap--footer img.fx-logo-light {
	display: block !important;
	position: static;
}

.fx-logo-wrap--footer {
	margin-bottom: 0.4rem;
}

/* ============================================================
   FRESH v20: the Anakle-style footer.
   ============================================================ */

.f-footer--anakle {
	padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
	overflow: clip;
}

.f-footer-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.f-footer-copyright {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--paper);
}

/* ---------- The giant wordmark, Anakle scale ---------- */

.f-footer-giant {
	display: block;
	text-decoration: none;
	color: var(--paper);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.82;
	font-size: clamp(4.5rem, 16vw, 13rem);
	margin: 0 -0.02em 1.5rem;
	white-space: nowrap;
	overflow: hidden;
}

.f-footer-giant .fg-letter {
	display: inline-block;
	will-change: transform, opacity;
}

/* ---------- Newsletter + link columns ---------- */

.f-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(250, 250, 250, 0.14);
	margin-bottom: 2.5rem;
}

.f-footer-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(250, 250, 250, 0.5);
	margin-bottom: 0.9rem;
}

.f-footer-news-copy {
	margin: 0 0 1.4rem;
	max-width: 420px;
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 0.75;
}

.f-newsletter { max-width: 420px; }

.f-newsletter-row {
	display: flex;
	align-items: center;
	background: rgba(250, 250, 250, 0.06);
	border: 1px solid rgba(250, 250, 250, 0.2);
	border-radius: 999px;
	padding: 0.35rem 0.4rem 0.35rem 1.3rem;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.f-newsletter-row:focus-within {
	border-color: var(--signal);
	background: rgba(250, 250, 250, 0.1);
}

.f-newsletter-input {
	flex: 1;
	border: none;
	background: none;
	outline: none;
	color: var(--paper);
	font: inherit;
	font-size: 0.95rem;
	padding: 0.7rem 0.5rem 0.7rem 0;
}

.f-newsletter-input::placeholder {
	color: rgba(250, 250, 250, 0.4);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 700;
}

.f-newsletter-submit {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: var(--signal);
	color: var(--ink);
	font-size: 1.1rem;
	cursor: pointer;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.f-newsletter-submit:hover {
	transform: translateX(3px) scale(1.05);
	background: var(--paper);
}

.f-newsletter-responses .response {
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

#mce-error-response { color: #ff8080; }
#mce-success-response { color: var(--signal); }

.f-footer-col a {
	display: block;
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: 0.6rem;
	color: var(--paper);
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.25s ease;
}

.f-footer-col a:hover {
	color: var(--signal);
	padding-left: 0.3rem;
}

@media (max-width: 860px) {
	.f-footer-grid {
		grid-template-columns: 1fr;
	}
	.f-footer-giant { font-size: clamp(3.2rem, 18vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
	.f-footer-giant .fg-letter {
		transform: none !important;
		opacity: 1 !important;
	}
}

/* ============================================================
   FRESH v21: newsletter stays on-page, branded success card.
   ============================================================ */

.f-newsletter {
	position: relative;
}

/* Mailchimp's own script writes its response text into these divs
   and shows them without leaving the page. We restyle them to match
   the brand instead of Mailchimp's default plain text. */
.f-newsletter-responses .response {
	margin-top: 0.85rem;
	padding: 0.75rem 1.1rem;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
}

#mce-error-response {
	background: rgba(255, 128, 128, 0.12);
	color: #ff9a9a;
	border: 1px solid rgba(255, 128, 128, 0.3);
}

#mce-success-response {
	background: rgba(187, 255, 0, 0.1);
	color: var(--signal);
	border: 1px solid rgba(187, 255, 0, 0.3);
}

/* Our own branded success card, swapped in over the form the moment
   Mailchimp's script confirms the subscription, so the confirmation
   feels like part of Senzarr rather than a stock plugin message. */
.f-newsletter-success {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.1rem 1.4rem;
	border-radius: 999px;
	background: rgba(187, 255, 0, 0.08);
	border: 1px solid rgba(187, 255, 0, 0.35);
	opacity: 0;
	transform: translateY(8px);
	animation: f-newsletter-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.f-newsletter-success[hidden] {
	display: none;
}

@keyframes f-newsletter-in {
	to { opacity: 1; transform: translateY(0); }
}

.f-newsletter-check {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--signal);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.9rem;
}

.f-newsletter-success-text {
	font-weight: 700;
	color: var(--paper);
	font-size: 0.95rem;
}

/* A gentle shake when Mailchimp reports an error (bad email, already
   subscribed, etc.), so the feedback reads as intentional, not broken. */
.f-newsletter-row.has-error {
	animation: f-newsletter-shake 0.4s ease;
}

@keyframes f-newsletter-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

/* ============================================================
   FRESH v22: sticky social rail, simplified footer.
   ============================================================ */

/* The footer grid now holds only the newsletter column */
.f-footer-grid {
	grid-template-columns: 1fr;
	max-width: 460px;
}

.f-footer-legal {
	font-weight: 700;
	opacity: 0.6;
}

/* ---------- Sticky social rail ---------- */

.fx-social-rail {
	position: fixed;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 800;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--ink);
	padding: 0.6rem;
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(14, 24, 15, 0.28);
}

.fx-social-rail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--paper);
	transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.fx-social-rail a:hover {
	background: var(--signal);
	color: var(--ink);
	transform: scale(1.08);
}

.fx-social-rail svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

@media (max-width: 900px) {
	.fx-social-rail { display: none; }
}

/* ============================================================
   FRESH v17: the Signal Spine + revamped middle sections.
   One continuous animated thread carries the visitor from the
   hero to the final CTA. Every section is a station on it.
   ============================================================ */

/* ---------- The spine: the thread between stations ---------- */

.fx-spine {
	position: relative;
	height: clamp(64px, 9vw, 110px);
	display: flex;
	justify-content: center;
	background: var(--bg);
}

/* The dashed thread itself */
.fx-spine::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: repeating-linear-gradient(180deg, var(--signal-deep) 0 6px, transparent 6px 12px);
	opacity: 0.5;
}

/* The travelling pulse */
.fx-spine-dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 10px rgba(187, 255, 0, 0.85);
	animation: fx-spine-travel 2.8s ease-in-out infinite;
}

@keyframes fx-spine-travel {
	0% { top: 0; opacity: 0; }
	12% { opacity: 1; }
	88% { opacity: 1; }
	100% { top: calc(100% - 8px); opacity: 0; }
}

/* Where the spine sits between two differently-coloured sections,
   it inherits the colour of the section it is leaving so the
   transition reads as one continuous surface. */
.fx-spine + .fx-sec--ink,
.fx-sec--ink + .fx-spine { background: var(--ink); }
.fx-sec--cream + .fx-spine { background: var(--cream); }
.fx-sec--paper + .fx-spine { background: var(--bg); }

[data-theme="dark"] .fx-sec--cream + .fx-spine { background: #18261A; }

/* The final segment aims into the CTA and brightens as it lands */
.fx-spine--final::before { opacity: 0.8; }
.fx-spine--final .fx-spine-dot { animation-duration: 1.9s; }

/* ---------- Section shells + colour rhythm ---------- */

.fx-sec {
	padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem);
}

.fx-sec--ink { background: var(--ink); color: var(--paper); }
.fx-sec--cream { background: var(--cream); color: var(--ink); }
.fx-sec--paper { background: var(--bg); color: var(--fg); }

[data-theme="dark"] .fx-sec--cream { background: #18261A; color: var(--paper); }

.fx-sec-inner {
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}

.fx-sec-label {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--signal-deep);
	margin: 0 0 1rem;
}

.fx-sec--ink .fx-sec-label { color: var(--signal); }

.fx-sec-h2 {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 auto 1.1rem;
	max-width: 20ch;
}

.fx-sec-copy {
	margin: 0 auto;
	max-width: 620px;
	font-size: 1.05rem;
	line-height: 1.7;
	opacity: 0.8;
}

.fx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin-top: 2rem;
}

.fx-chips span {
	font-size: 0.82rem;
	font-weight: 700;
	padding: 0.55rem 1.2rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	opacity: 0.75;
}

/* ---------- The four moves ---------- */

.fx-moves {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 3rem;
	text-align: left;
}

.fx-move {
	position: relative;
	padding-top: 1.6rem;
	border-top: 2px solid rgba(14, 24, 15, 0.14);
}

[data-theme="dark"] .fx-move { border-color: rgba(250, 250, 250, 0.16); }

.fx-move-num,
.fx-move-code {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.fx-move-num { color: var(--signal-deep); }
.fx-move-code { opacity: 0.4; margin-left: 0.5rem; }

.fx-move-dot {
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 12px rgba(187, 255, 0, 0.7);
	vertical-align: middle;
}

.fx-move--last { border-top-color: var(--signal); }

.fx-move h3 {
	margin: 0.9rem 0 0.5rem;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fx-move p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 0.72;
}

@media (max-width: 900px) {
	.fx-moves { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.fx-moves { grid-template-columns: 1fr; }
}

/* ---------- Selected Signals: the editorial portfolio ---------- */

.fx-cases {
	max-width: 1180px;
	margin: 3.5rem auto 0;
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 7vw, 6rem);
}

.fx-case {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.fx-case--flip .fx-case-cover { order: 2; }
.fx-case--flip .fx-case-meta { order: 1; }

.fx-case-cover.wp-block-cover {
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-case:hover .fx-case-cover.wp-block-cover {
	transform: translateY(-8px);
}

.fx-case-cover img.wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.05);
	transform: scale(1.02);
	transition: filter 0.8s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-case:hover .fx-case-cover img.wp-block-cover__image-background {
	filter: grayscale(0);
	transform: scale(1.07);
}

.fx-case-meta { text-align: left; }

.fx-case-num {
	display: block;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: var(--signal);
	margin-bottom: 0.8rem;
}

.fx-case-title {
	margin: 0 0 0.7rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.fx-case-line {
	margin: 0 0 1.4rem;
	font-size: 1.02rem;
	line-height: 1.6;
	opacity: 0.72;
	max-width: 34ch;
}

.fx-case-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.fx-case-tags span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(250, 250, 250, 0.28);
	border-radius: 999px;
	opacity: 0.7;
}

@media (max-width: 860px) {
	.fx-case { grid-template-columns: 1fr; }
	.fx-case--flip .fx-case-cover,
	.fx-case--flip .fx-case-meta { order: 0; }
}

/* ---------- Echoes: one quote at a time ---------- */

.fx-quotes {
	position: relative;
	max-width: 900px;
	margin: 3rem auto 0;
	text-align: center;
}

.fx-quote {
	margin: 0;
	display: none;
}

.fx-quote.is-active {
	display: block;
	animation: fx-quote-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fx-quote-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.fx-quote-mark {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 1.75rem;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 26px rgba(187, 255, 0, 0.6);
}

.fx-quote blockquote {
	margin: 0 0 1.6rem;
	font-size: clamp(1.3rem, 3vw, 2.1rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

.fx-quote figcaption {
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--signal-deep);
}

.fx-quotes-nav {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.fx-qdot {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 999px;
	background: rgba(14, 24, 15, 0.22);
	cursor: pointer;
	padding: 0;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

[data-theme="dark"] .fx-qdot { background: rgba(250, 250, 250, 0.25); }

.fx-qdot.is-active {
	width: 34px;
	background: var(--signal-deep);
}

/* ---------- FAQ inside the new shell ---------- */

.fx-faq {
	max-width: 780px;
	margin: 2.75rem auto 0;
	text-align: left;
}

.fx-faq details {
	border-top: 1px solid rgba(14, 24, 15, 0.16);
}

[data-theme="dark"] .fx-faq details { border-color: rgba(250, 250, 250, 0.16); }

.fx-faq details:last-of-type { border-bottom: 1px solid rgba(14, 24, 15, 0.16); }
[data-theme="dark"] .fx-faq details:last-of-type { border-bottom-color: rgba(250, 250, 250, 0.16); }

.fx-faq summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	cursor: pointer;
	padding: 1.4rem 0;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 700;
}

.fx-faq summary::-webkit-details-marker { display: none; }

.fx-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	color: var(--signal-deep);
	transition: transform 0.3s ease;
}

.fx-faq details[open] summary::after { transform: rotate(45deg); }

.fx-faq details > p {
	margin: 0 0 1.5rem;
	max-width: 640px;
	line-height: 1.7;
	opacity: 0.78;
}

/* ---------- Letters grid in the new shell ---------- */

.fx-sec .fx-notes-grid { margin-top: 3rem; }
.fx-sec .fx-notes-all { text-align: center; margin-top: 2.25rem; }

/* ---------- Dark-mode text safety for the new sections ---------- */

html body .fx-sec,
html body .fx-sec-h2,
html body .fx-sec-copy,
html body .fx-move h3,
html body .fx-move p,
html body .fx-case-title,
html body .fx-case-line,
html body .fx-quote blockquote,
html body .fx-faq summary,
html body .fx-faq details > p {
	color: var(--fg);
}

html body .fx-sec--ink,
html body .fx-sec--ink .fx-sec-h2,
html body .fx-sec--ink .fx-sec-copy,
html body .fx-sec--ink .fx-case-title,
html body .fx-sec--ink .fx-case-line,
html body .fx-sec--ink .fx-case-tags span {
	color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
	.fx-spine-dot { animation: none; top: calc(50% - 4px); }
	.fx-case:hover .fx-case-cover.wp-block-cover { transform: none; }
	.fx-case:hover .fx-case-cover img.wp-block-cover__image-background { transform: scale(1.02); }
	.fx-quote.is-active { animation: none; }
}

/* ============================================================
   FRESH v18: the Screen, the logo formation, and the new pages.
   ============================================================ */

/* ---------- The Screen: a TV standing in the page ---------- */

.fx-screen-sec {
	background: var(--ink);
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 6rem);
	overflow: clip;
}

.fx-screen-marquee {
	overflow: hidden;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.fx-screen-marquee-track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
	animation: f-marquee 26s linear infinite;
	font-size: clamp(2.5rem, 7vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(250, 250, 250, 0.22);
	white-space: nowrap;
}

.fx-screen {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: 22px;
	overflow: hidden;
	background: #060B06;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(187, 255, 0, 0.16);
}

.fx-screen-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A faint scanline sheen so it reads as a screen, not a plain video box */
.fx-screen-scan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
		radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

.fx-screen-sound {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1.2rem;
	border: 1px solid rgba(250, 250, 250, 0.3);
	border-radius: 999px;
	background: rgba(14, 24, 15, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--paper);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.fx-screen-sound:hover { border-color: var(--signal); }

.fx-screen-sound-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: rgba(250, 250, 250, 0.45);
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.fx-screen-sound.is-on .fx-screen-sound-dot {
	width: 26px;
	background: var(--signal);
	box-shadow: 0 0 12px rgba(187, 255, 0, 0.8);
}

.fx-screen-cap {
	max-width: 1080px;
	margin: 1.4rem auto 0;
	text-align: center;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(250, 250, 250, 0.55);
}

/* ---------- The logo formation ---------- */

.fx-mark {
	max-width: 300px;
	margin: 2.5rem auto 1rem;
}

.fx-mark svg { width: 100%; height: auto; overflow: visible; }

.fx-mark-bar,
.fx-mark-dot {
	fill: var(--fg);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-mark-bar[data-bar="0"] { transform: translateX(-90px) rotate(-8deg); }
.fx-mark-bar[data-bar="1"] { transform: translateX(90px) rotate(7deg); }
.fx-mark-bar[data-bar="2"] { transform: translateX(-70px) rotate(6deg); }
.fx-mark-dot { fill: var(--signal-deep); transform: translate(60px, 60px) scale(0.4); }

.fx-mark.is-formed .fx-mark-bar,
.fx-mark.is-formed .fx-mark-dot {
	opacity: 1;
	transform: none;
}

.fx-mark.is-formed .fx-mark-bar[data-bar="1"] { transition-delay: 0.15s; }
.fx-mark.is-formed .fx-mark-bar[data-bar="2"] { transition-delay: 0.3s; }
.fx-mark.is-formed .fx-mark-dot { transition-delay: 0.55s; }

/* ---------- Shared page heads ---------- */

.fx-page-head {
	padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.fx-page-title {
	margin: 0 auto 1.2rem;
	font-size: clamp(2.3rem, 6vw, 4.6rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.02;
	max-width: 22ch;
}

.fx-page-lead {
	margin: 0 auto;
	max-width: 640px;
	font-size: 1.08rem;
	line-height: 1.7;
	opacity: 0.75;
}

/* ---------- Editorial feed (archive) ---------- */

.fx-feed {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.fx-feed .wp-block-post-template {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-feed-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 2.75rem) 0;
	border-top: 1px solid var(--line);
	transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-feed .wp-block-post-template > *:last-child .fx-feed-row {
	border-bottom: 1px solid var(--line);
}

.fx-feed-row:hover { padding-left: 0.8rem; }

.fx-feed-img {
	border-radius: 18px;
	overflow: hidden;
}

.fx-feed-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-feed-row:hover .fx-feed-img img {
	filter: grayscale(0);
	transform: scale(1.05);
}

.fx-feed-date {
	display: block;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--signal-deep);
	margin-bottom: 0.5rem;
}

.fx-feed-title,
.fx-feed-title a {
	margin: 0 0 0.6rem;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--fg);
	text-decoration: none;
}

.fx-feed-title a:hover { color: var(--signal-deep); }

.fx-feed-excerpt {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	opacity: 0.7;
	max-width: 52ch;
}

@media (max-width: 760px) {
	.fx-feed-row { grid-template-columns: 1fr; }
}

/* ---------- Single letter / single signal ---------- */

.fx-letter-head,
.fx-work-head {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}

.fx-letter-date {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--signal-deep);
	margin-bottom: 1rem;
}

.fx-letter-title,
.fx-work-title {
	margin: 0 auto 1.1rem;
	font-size: clamp(2rem, 5vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.06;
}

.fx-letter-lead,
.fx-work-lead {
	margin: 0 auto;
	max-width: 620px;
	font-size: 1.1rem;
	line-height: 1.65;
	opacity: 0.72;
}

.fx-letter-hero,
.fx-work-hero {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.fx-letter-hero img,
.fx-work-hero img {
	width: 100%;
	border-radius: 24px;
	display: block;
}

.fx-letter-body,
.fx-work-body {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
	font-size: 1.08rem;
	line-height: 1.8;
}

.fx-letter-body p,
.fx-work-body p { margin: 0 0 1.4rem; }

.fx-letter-body h2,
.fx-work-body h2 {
	margin: 2.5rem 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fx-letter-body blockquote,
.fx-work-body blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--signal);
	font-size: 1.2rem;
	font-weight: 700;
	font-style: normal;
}

/* ---------- CTA band + shared bits ---------- */

.fx-cta-band {
	background: var(--signal);
	color: var(--ink);
	text-align: center;
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
}

html body .fx-cta-band .fx-sec-h2 { color: var(--ink); margin-bottom: 1.75rem; }
.fx-cta-band .f-cta { background: var(--ink); color: var(--signal); }

.fx-contact-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin: 1.75rem 0;
}

.fx-contact-links a {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--signal);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.25s ease;
}

.fx-contact-links a:hover { border-color: var(--signal); }

.fx-cases--archive {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.fx-cases--archive .wp-block-post-template {
	display: flex !important;
	flex-direction: column;
	gap: clamp(3rem, 7vw, 5.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-case-cover-img { border-radius: 26px; overflow: hidden; }

.fx-case-cover-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.8s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-case:hover .fx-case-cover-img img {
	filter: grayscale(0);
	transform: scale(1.05);
}

.fx-pagination {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	gap: 0.75rem;
	font-weight: 800;
}

.fx-pagination a, .fx-pagination span {
	color: var(--fg);
	text-decoration: none;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
}

.fx-pagination a:hover { background: var(--signal); color: var(--ink); }

.fx-empty {
	padding: 4rem 1.5rem;
	opacity: 0.6;
	font-weight: 700;
}

.fx-notes-grid--ink {
	background: var(--ink);
	padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

html body .fx-notes-grid--ink .fx-note-title,
html body .fx-notes-grid--ink .fx-note-title a { color: var(--paper); }

/* Dark-mode safety for the new page types */
html body .fx-page-title,
html body .fx-page-lead,
html body .fx-feed-title,
html body .fx-feed-title a,
html body .fx-feed-excerpt,
html body .fx-letter-title,
html body .fx-work-title,
html body .fx-letter-lead,
html body .fx-work-lead,
html body .fx-letter-body,
html body .fx-work-body,
html body .fx-pagination a,
html body .fx-pagination span {
	color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
	.fx-screen-marquee-track { animation: none; }
	.fx-mark-bar, .fx-mark-dot { opacity: 1 !important; transform: none !important; }
	.fx-feed-row:hover { padding-left: 0; }
}

/* ============================================================
   FRESH v18.1: the giant type runs BEHIND the screen, Anakle-style,
   so the video sits on top of the moving words rather than under them.
   ============================================================ */

.fx-screen-marquee { display: none; }

.fx-screen-stage {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.fx-screen-bedrock {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	pointer-events: none;
	overflow: hidden;
}

.fx-bed-row { overflow: hidden; }

.fx-bed-track {
	display: flex;
	width: max-content;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.9;
	white-space: nowrap;
	font-size: clamp(3.5rem, 11vw, 9rem);
}

.fx-bed-row--a .fx-bed-track {
	animation: f-marquee 34s linear infinite;
	color: var(--fg);
	opacity: 0.92;
}

.fx-bed-row--b .fx-bed-track {
	animation: f-marquee 26s linear infinite reverse;
	color: var(--signal);
	opacity: 0.85;
}

/* On the ink section the top row reads paper-white */
.fx-screen-sec .fx-bed-row--a .fx-bed-track { color: var(--paper); }

/* The screen now floats above the moving type */
.fx-screen-stage .fx-screen {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	max-width: 1000px;
}

@media (max-width: 700px) {
	.fx-bed-track { font-size: clamp(2.5rem, 15vw, 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
	.fx-bed-row--a .fx-bed-track,
	.fx-bed-row--b .fx-bed-track { animation: none; }
}

/* ============================================================
   FRESH v19: the hero's design language, carried down the page.
   Asymmetric splits, floating cards, connective threads, depth.
   ============================================================ */

/* ---------- Asymmetric split sections ---------- */

.fx-split { padding: clamp(4.5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 2.5rem); }

.fx-split-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.fx-split--flip .fx-split-copy { order: 2; }
.fx-split--flip .fx-split-stage { order: 1; }

.fx-split-copy { text-align: left; }

.fx-split-h2 {
	display: flex;
	flex-direction: column;
	margin: 0 0 1.2rem;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.04;
}

.fx-split-muted { opacity: 0.42; }

.fx-split-copytext {
	margin: 0;
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.7;
	opacity: 0.78;
}

.fx-chips--left { justify-content: flex-start; margin-top: 1.75rem; }

@media (max-width: 900px) {
	.fx-split-inner { grid-template-columns: 1fr; }
	.fx-split--flip .fx-split-copy,
	.fx-split--flip .fx-split-stage { order: 0; }
}

/* ---------- Floating card stage with connective thread ---------- */

.fx-split-stage {
	position: relative;
	min-height: clamp(320px, 40vw, 400px);
}

.fx-pin--float {
	position: absolute;
	left: var(--fx, 0);
	top: var(--fy, 0);
	animation: fx-pin-breathe 5.5s ease-in-out var(--bob, 0s) infinite;
	z-index: 2;
}

.fx-pin--float .fx-pin-card { min-width: 210px; }

.fx-pin-bold { font-size: 1.5rem; letter-spacing: -0.02em; }
.fx-pin--float .fx-pin-bold { font-size: 1.7rem; }

.fx-pin-card--alarm {
	border-color: rgba(187, 255, 0, 0.5);
	box-shadow: 0 14px 40px rgba(187, 255, 0, 0.14), 0 10px 26px rgba(0, 0, 0, 0.3);
}

.fx-pin-card--alarm .fx-pin-bold { color: var(--signal-deep); }

.fx-thread {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.fx-thread path {
	fill: none;
	stroke: var(--signal-deep);
	stroke-width: 1.5;
	stroke-dasharray: 6 7;
	opacity: 0.5;
	animation: fx-thread-flow 1.6s linear infinite;
}

@keyframes fx-thread-flow { to { stroke-dashoffset: -26; } }

/* ---------- The before/after demonstration ---------- */

.fx-split-stage--demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 0;
}

.fx-demo-card {
	width: 100%;
	max-width: 400px;
	padding: 1.5rem 1.6rem;
	border-radius: 20px;
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: 0 14px 40px rgba(14, 24, 15, 0.12);
}

.fx-demo-card p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
	font-weight: 600;
}

.fx-demo-card--before p { opacity: 0.5; }

.fx-demo-card--after {
	border-color: var(--signal);
	box-shadow: 0 20px 50px rgba(154, 204, 0, 0.22);
}

.fx-demo-card--after p { font-weight: 800; }

.fx-demo-tag {
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
	opacity: 0.55;
}

.fx-demo-card--after .fx-demo-tag { color: var(--signal-deep); opacity: 1; }

.fx-demo-arrow { padding: 0.9rem 0; }

.fx-demo-line {
	position: relative;
	display: block;
	width: 2px;
	height: 46px;
	margin: 0 auto;
	background: repeating-linear-gradient(180deg, var(--signal-deep) 0 6px, transparent 6px 12px);
	opacity: 0.6;
}

.fx-demo-dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 10px rgba(187, 255, 0, 0.85);
	animation: fx-spine-travel 2s ease-in-out infinite;
}

/* ---------- The four moves as cards ---------- */

.fx-moves--cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.1rem;
	margin-top: 3rem;
	border: none;
}

.fx-pin--stack {
	display: block;
	width: 100%;
	animation: fx-pin-breathe 6s ease-in-out infinite;
}

.fx-moves--cards .fx-pin:nth-child(2) { animation-delay: .5s; }
.fx-moves--cards .fx-pin:nth-child(3) { animation-delay: 1s; }
.fx-moves--cards .fx-pin:nth-child(4) { animation-delay: 1.5s; }

.fx-pin--stack .fx-pin-card {
	min-width: 0;
	max-width: none;
	width: 100%;
	padding: 1.5rem 1.4rem;
	text-align: left;
}

.fx-pin--signal .fx-pin-card {
	border-color: var(--signal);
	box-shadow: 0 16px 44px rgba(154, 204, 0, 0.2);
}

.fx-pin--signal .fx-pin-bold { color: var(--signal-deep); }

@media (max-width: 900px) { .fx-moves--cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fx-moves--cards { grid-template-columns: 1fr; } }

/* ---------- Echoes as a floating card ---------- */

.fx-quotes--card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	box-shadow: 0 26px 70px rgba(14, 24, 15, 0.14);
}

/* ---------- FAQ as card rows ---------- */

.fx-faq--cards details {
	border: 1px solid var(--line);
	border-radius: 18px;
	margin-bottom: 0.8rem;
	padding: 0 1.4rem;
	background: var(--card);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fx-faq--cards details:last-of-type { border-bottom: 1px solid var(--line); }

.fx-faq--cards details[open],
.fx-faq--cards details:hover {
	border-color: var(--signal-deep);
	box-shadow: 0 14px 36px rgba(14, 24, 15, 0.1);
}

/* Dark-mode safety for the new pieces */
html body .fx-split-h2,
html body .fx-split-copytext,
html body .fx-demo-card p,
html body .fx-demo-tag { color: var(--fg); }

html body .fx-sec--ink .fx-split-h2,
html body .fx-sec--ink .fx-split-copytext { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
	.fx-pin--float, .fx-pin--stack { animation: none; }
	.fx-thread path, .fx-demo-dot { animation: none; }
}

/* ============================================================
   FRESH v19.1: fix the collapsed method cards.
   .fx-pin-card is a <span>. In the hero its parent is a flex
   container, which gives it block formatting. The method cards
   used display:block on the parent, so the span fell back to
   inline layout, collapsed to a sliver, and its text overflowed.
   ============================================================ */

.fx-pin--stack {
	display: flex;
	flex-direction: column;
}

.fx-pin--stack .fx-pin-card {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	box-sizing: border-box;
	padding: 1.6rem 1.5rem 1.7rem;
	text-align: left;
	min-height: 100%;
}

/* On the method cards the description is core content, not a
   hover extra, so it stays open permanently. */
.fx-pin--stack .fx-pin-desc {
	max-height: none;
	opacity: 0.72;
	margin-top: 0.6rem;
	overflow: visible;
}

.fx-pin--stack .fx-pin-cap {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.5;
}

.fx-pin--stack .fx-pin-bold {
	display: block;
	margin-top: 0.35rem;
	font-size: 1.6rem;
	line-height: 1.1;
}

.fx-moves--cards {
	align-items: stretch;
}

.fx-moves--cards .fx-pin { height: 100%; }

/* Same guard for the floating evidence cards, so they can never
   collapse the same way regardless of parent display. */
.fx-pin--float .fx-pin-card {
	display: block;
	box-sizing: border-box;
}

/* Footer now carries the real page nav beside the newsletter */
.f-footer-grid {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	max-width: 900px;
	gap: clamp(2rem, 5vw, 4rem);
}

.f-footer-nav a {
	display: block;
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 0.55rem;
	color: var(--paper);
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.25s ease;
}

.f-footer-nav a:hover { color: var(--signal); padding-left: 0.3rem; }

@media (max-width: 760px) {
	.f-footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FRESH v20: responsive hardening — phone, tablet, iPad Pro.
   ============================================================ */

/* Skip link for keyboard and screen-reader users */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 3000;
	padding: 0.8rem 1.4rem;
	background: var(--ink);
	color: var(--signal);
	font-weight: 800;
	border-radius: 0 0 12px 0;
}

.skip-link:focus { left: 0; }

/* Visible focus rings everywhere (accessibility + SEO signal) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--signal-deep);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Images never overflow their container */
img { max-width: 100%; height: auto; }

/* ---------- Tablet / iPad portrait (768–1024) ---------- */
@media (min-width: 761px) and (max-width: 1024px) {
	.fx-split-inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.fx-split--flip .fx-split-copy,
	.fx-split--flip .fx-split-stage { order: 0; }
	.fx-split-stage { min-height: 300px; }
	.fx-moves--cards { grid-template-columns: repeat(2, 1fr); }
	.fx-case { grid-template-columns: 1fr; }
	.fx-feed-row { grid-template-columns: 220px 1fr; }
	.fx-social-rail { display: none; }
	.fx-screen-stage { padding: 1.5rem 0; }
	.fx-bed-track { font-size: clamp(3rem, 9vw, 5.5rem); }
}

/* ---------- Phone (≤760) ---------- */
@media (max-width: 760px) {
	.fx-sec, .fx-split { padding-left: 1.25rem; padding-right: 1.25rem; }

	/* Floating evidence cards can't be absolutely positioned on a phone —
	   they'd overlap. Stack them instead. */
	.fx-split-stage {
		position: static;
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}
	.fx-pin--float {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
	}
	.fx-pin--float .fx-pin-card { min-width: 0; width: 100%; }
	.fx-thread { display: none; }

	/* Descriptions can't rely on hover on touch devices */
	.fx-pin-desc {
		max-height: none !important;
		opacity: 0.7 !important;
		margin-top: 0.5rem !important;
		overflow: visible !important;
	}

	.fx-split-h2 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
	.fx-sec-h2 { font-size: clamp(1.85rem, 8vw, 2.4rem); max-width: none; }
	.fx-page-title { font-size: clamp(2rem, 9vw, 2.8rem); }

	.fx-demo-card { max-width: none; }
	.fx-quotes--card { padding: 2rem 1.25rem; border-radius: 20px; }
	.fx-quote blockquote { font-size: clamp(1.15rem, 5.5vw, 1.5rem); }

	.fx-screen { border-radius: 14px; }
	.fx-screen-sound { right: 0.6rem; bottom: 0.6rem; padding: 0.5rem 0.9rem; font-size: 0.62rem; }
	.fx-mark { max-width: 220px; }

	.fx-notes-grid .wp-block-post-template { grid-template-columns: 1fr; }
	.fx-cases--archive .wp-block-post-template { gap: 2.5rem; }

	.f-footer-giant { font-size: clamp(2.6rem, 17vw, 4.5rem); }
	.fx-cta-band { padding: 3rem 1.25rem; }
}

/* ---------- Small phone (≤400) ---------- */
@media (max-width: 400px) {
	.fx-pin-bold, .fx-pin--float .fx-pin-bold { font-size: 1.35rem; }
	.fx-hero-title2 { font-size: clamp(1.7rem, 9vw, 2.2rem); }
	.f-newsletter-row { padding-left: 1rem; }
	.fx-sec, .fx-split { padding-top: 3.25rem; padding-bottom: 3.25rem; }
}

/* ---------- Landscape phone: don't let full-height blocks trap people ---------- */
@media (max-height: 520px) and (orientation: landscape) {
	.fx-hero { min-height: 0; padding-bottom: 2rem; }
	.f-overlay-links a { font-size: 1.5rem; }
}

/* ============================================================
   FRESH v20.1: performance.
   17 infinite animations were running permanently — marquees,
   9 spine pulses, the orbit, the breathing cards, the CTA glow —
   even when scrolled far off screen. Every one of those forces
   the browser to keep compositing frames it will never show.
   This lets JavaScript park them when they're not visible.
   ============================================================ */

.fx-off,
.fx-off *,
.fx-off *::before,
.fx-off *::after {
	animation-play-state: paused !important;
}

/* Only promote layers on things actually moving right now, so the
   GPU isn't holding textures for every card on the page at once. */
.fx-pin,
.fx-spine-dot,
.fx-bed-track,
.f-ticker-track,
.fx-man-img {
	will-change: auto;
}

.fx-pin:hover,
.fx-sec:not(.fx-off) .fx-spine-dot,
.fx-screen-sec:not(.fx-off) .fx-bed-track {
	will-change: transform;
}

/* Video posters render instantly while the file streams in behind them */
.fx-screen-video,
.senzarr-hero-video {
	background-color: #060B06;
}

/* ============================================================
   FRESH v20.2: portfolio pages brought up to homepage standard.
   The archive had lost the serial numbers and the alternating
   composition that made the homepage version work, and the single
   page had no case-study metadata. Both restored here.
   ============================================================ */

/* Auto-numbered, auto-alternating archive rows */
.fx-cases--archive .wp-block-post-template { counter-reset: sg; }

.fx-case--auto { counter-increment: sg; position: relative; }

.fx-case--auto .fx-case-meta::before {
	content: "SG " counter(sg, decimal-leading-zero);
	display: block;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: var(--signal-deep);
	margin-bottom: 0.85rem;
}

/* Every second row mirrors, so the eye zig-zags down the page */
.fx-cases--archive .wp-block-post-template > *:nth-child(even) .fx-case--auto .fx-case-cover-img { order: 2; }
.fx-cases--archive .wp-block-post-template > *:nth-child(even) .fx-case--auto .fx-case-meta { order: 1; }

.fx-case--auto .fx-case-title,
.fx-case--auto .fx-case-title a {
	color: var(--fg);
	text-decoration: none;
	display: block;
}

.fx-case--auto .fx-case-title a:hover { color: var(--signal-deep); }

.fx-cases--archive .fx-case-tags a {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--fg);
	text-decoration: none;
	opacity: 0.7;
}

.fx-cases--archive .fx-case-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* ---------- Single project: the case-study meta bar ---------- */

.fx-workmeta {
	max-width: 1080px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
	padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.fx-workmeta-item { display: flex; flex-direction: column; gap: 0.35rem; }

.fx-workmeta-item span {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.5;
}

.fx-workmeta-item strong {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.fx-workmeta-item--out strong { color: var(--signal-deep); }

html body .fx-workmeta-item strong,
html body .fx-workmeta-item span { color: var(--fg); }
html body .fx-workmeta-item--out strong { color: var(--signal-deep); }

@media (max-width: 760px) {
	.fx-workmeta { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
}

/* ---------- Contact form: consent + result states ---------- */

.f-optin {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 1.4rem 0 0.4rem;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	max-width: 46ch;
}

.f-optin input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	accent-color: var(--ink);
	cursor: pointer;
}

.f-note.is-good,
.f-note.is-bad {
	margin-top: 1rem;
	padding: 0.9rem 1.2rem;
	border-radius: 14px;
	font-weight: 700;
}

.f-note.is-good {
	background: rgba(14, 24, 15, 0.1);
	border: 1px solid rgba(14, 24, 15, 0.28);
}

.f-note.is-bad {
	background: rgba(180, 40, 40, 0.12);
	border: 1px solid rgba(180, 40, 40, 0.4);
}

/* Once sent, dim the fields so it's obvious the submission completed */
.f-madlib.is-sent p,
.f-madlib.is-sent .f-area,
.f-madlib.is-sent .f-optin,
.f-madlib.is-sent .f-submit {
	opacity: 0.4;
	pointer-events: none;
}

/* ============================================================
   FRESH v22: play button, creative cursor, logo auto-invert,
   packages, and the % counter fix.
   ============================================================ */

/* The % counter sits on a permanently dark pill, so it must always be
   paper-white regardless of the site theme. Earlier it was pulled into
   the theme-aware colour list, which made it invisible in light mode. */
html body .fx-pct { color: var(--paper); }

/* ---------- Animated play button on the screen ---------- */

.fx-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.fx-screen.is-playing .fx-play {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.9);
}

.fx-play-core {
	position: relative;
	z-index: 2;
	width: clamp(64px, 9vw, 92px);
	height: clamp(64px, 9vw, 92px);
	border-radius: 50%;
	background: var(--signal);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 40px rgba(187, 255, 0, 0.35);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-play-core svg { width: 44%; height: 44%; fill: var(--ink); }

.fx-play:hover .fx-play-core { transform: scale(1.12); }

/* Two rings pulsing outward, like a signal broadcasting */
.fx-play-ring {
	position: absolute;
	top: 0;
	left: 50%;
	width: clamp(64px, 9vw, 92px);
	height: clamp(64px, 9vw, 92px);
	margin-left: calc(clamp(64px, 9vw, 92px) / -2);
	border-radius: 50%;
	border: 2px solid var(--signal);
	opacity: 0;
	animation: fx-play-pulse 2.6s ease-out infinite;
	pointer-events: none;
}

.fx-play-ring--2 { animation-delay: 1.3s; }

@keyframes fx-play-pulse {
	0%   { transform: scale(1);   opacity: 0.65; }
	100% { transform: scale(2.4); opacity: 0; }
}

.fx-play-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--paper);
	opacity: 0.75;
	transition: opacity 0.25s ease;
}

.fx-play:hover .fx-play-label { opacity: 1; }

/* The button drifts subtly toward the pointer, set from JS */
.fx-screen { --px: 0px; --py: 0px; }
.fx-screen .fx-play {
	transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py)));
}

/* ---------- The creative cursor ---------- */

@media (hover: hover) and (pointer: fine) {
	body.fx-cursor-on,
	body.fx-cursor-on a,
	body.fx-cursor-on button,
	body.fx-cursor-on summary,
	body.fx-cursor-on label,
	body.fx-cursor-on input,
	body.fx-cursor-on textarea { cursor: none; }
}

.fx-cursor { display: none; }

body.fx-cursor-on .fx-cursor {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}

.fx-cur-dot {
	position: fixed;
	top: 0; left: 0;
	width: 8px; height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 10px rgba(187, 255, 0, 0.9);
	will-change: transform;
}

/* A dashed ring that trails behind — the thread motif, following the pointer */
.fx-cur-ring {
	position: fixed;
	top: 0; left: 0;
	width: 38px; height: 38px;
	margin: -19px 0 0 -19px;
	border-radius: 50%;
	border: 1.5px dashed rgba(154, 204, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fx-cur-spin 6s linear infinite;
	transition: width .25s ease, height .25s ease, margin .25s ease, background .25s ease, border-color .25s ease, border-style .25s ease;
	will-change: transform;
}

@keyframes fx-cur-spin { to { transform: rotate(360deg); } }

.fx-cur-label {
	font-size: 0.55rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--ink);
	opacity: 0;
	transition: opacity .2s ease;
	animation: fx-cur-unspin 6s linear infinite;
}

@keyframes fx-cur-unspin { to { transform: rotate(-360deg); } }

.fx-cursor.is-link .fx-cur-ring {
	width: 54px; height: 54px; margin: -27px 0 0 -27px;
	background: rgba(187, 255, 0, 0.16);
	border-style: solid;
	border-color: var(--signal);
}

.fx-cursor.is-view .fx-cur-ring {
	width: 78px; height: 78px; margin: -39px 0 0 -39px;
	background: var(--signal);
	border-color: var(--signal);
	border-style: solid;
}

.fx-cursor.is-view .fx-cur-label { opacity: 1; }
.fx-cursor.is-view .fx-cur-dot { opacity: 0; }

/* ---------- Logo auto-invert against the section behind it ---------- */

.fx-logo-wrap img { transition: opacity .35s ease; }

/* Default (light background): dark mark */
.f-header .fx-logo-dark { display: block; }
.f-header .fx-logo-light { display: none; }

/* Over a dark section: white mark. Set by JS. */
.f-header.is-on-dark .fx-logo-dark { display: none; }
.f-header.is-on-dark .fx-logo-light { display: block; position: static; }

/* Menu and wordmark follow the same rule so nothing disappears */
.f-header.is-on-dark .f-menu-btn,
.f-header.is-on-dark .f-wordmark a { color: var(--paper); }

/* ---------- The Investment: three packages ---------- */

.fx-packs-grid {
	max-width: 1200px;
	margin: 3.5rem auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

.fx-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(250, 250, 250, 0.045);
	border: 1px solid rgba(250, 250, 250, 0.16);
	border-radius: 26px;
	padding: 2.2rem 1.9rem 2rem;
	transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
}

.fx-pack:hover {
	transform: translateY(-8px);
	border-color: rgba(187, 255, 0, 0.45);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
}

.fx-pack--featured {
	background: rgba(187, 255, 0, 0.06);
	border-color: var(--signal);
	box-shadow: 0 22px 60px rgba(154, 204, 0, 0.18);
}

.fx-pack-badge {
	position: absolute;
	top: -13px;
	left: 1.9rem;
	background: var(--signal);
	color: var(--ink);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.4rem 1rem;
	border-radius: 999px;
}

.fx-pack-for {
	margin: 0 0 0.9rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal-deep);
	min-height: 2.4em;
}

.fx-pack-name {
	margin: 0 0 0.8rem;
	font-size: clamp(2rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.fx-pack--featured .fx-pack-name { color: var(--signal); }

.fx-pack-line {
	margin: 0 0 1.5rem;
	font-size: 0.98rem;
	line-height: 1.6;
	opacity: 0.75;
}

.fx-pack-list {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.fx-pack-list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.94rem;
	line-height: 1.5;
}

.fx-pack-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--signal-deep);
}

.fx-pack--featured .fx-pack-list li::before { background: var(--signal); }

.fx-pack-out {
	margin: auto 0 1.5rem;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(250, 250, 250, 0.16);
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.45;
}

.fx-pack-out span {
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 0.4rem;
}

.fx-pack-cta {
	display: block;
	text-align: center;
	padding: 1rem 1.4rem;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font-weight: 800;
	font-size: 0.98rem;
	text-decoration: none;
	transition: transform .2s ease, background .25s ease, color .25s ease;
}

.fx-pack-cta:hover { transform: translateY(-2px); background: var(--signal); }
.fx-pack--featured .fx-pack-cta { background: var(--signal); color: var(--ink); }
.fx-pack--featured .fx-pack-cta:hover { background: var(--paper); }

.fx-packs-note {
	max-width: 700px;
	margin: 2.75rem auto 0;
	text-align: center;
	font-size: 0.98rem;
	opacity: 0.7;
}

.fx-packs-note a { color: var(--signal); font-weight: 800; }

html body .fx-packs .fx-pack-name,
html body .fx-packs .fx-pack-line,
html body .fx-packs .fx-pack-list li,
html body .fx-packs .fx-pack-out,
html body .fx-packs-note { color: var(--paper); }
html body .fx-packs .fx-pack--featured .fx-pack-name { color: var(--signal); }

@media (max-width: 980px) {
	.fx-packs-grid { grid-template-columns: 1fr; max-width: 520px; }
	.fx-pack-for { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-play-ring { animation: none; opacity: 0; }
	.fx-cur-ring, .fx-cur-label { animation: none; }
	.fx-pack:hover { transform: none; }
}

/* ============================================================
   FRESH v23: the thank-you page.
   A unique URL rather than an inline message, so GA4 / Meta Pixel /
   Google Ads can record the conversion against a real page.
   ============================================================ */

.fx-ty {
	padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.fx-ty-inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

/* The confirmation mark: the signal dot, arrived */
.fx-ty-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-bottom: 2rem;
}

.fx-ty-core {
	position: relative;
	z-index: 2;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--signal);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 34px rgba(187, 255, 0, 0.4);
	animation: fx-ty-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.fx-ty-core svg { width: 30px; height: 30px; }

@keyframes fx-ty-pop {
	from { transform: scale(0.4); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.fx-ty-ring {
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	border: 2px solid var(--signal);
	opacity: 0;
	animation: fx-play-pulse 2.8s ease-out infinite;
}

.fx-ty-ring--2 { animation-delay: 1.4s; }

.fx-ty-title {
	margin: 0 0 1.1rem;
	font-size: clamp(2.1rem, 5.5vw, 3.8rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.03;
}

.fx-ty-lead {
	margin: 0 auto 2.25rem;
	max-width: 560px;
	font-size: 1.1rem;
	line-height: 1.7;
	opacity: 0.8;
}

.fx-ty-lead strong { font-weight: 800; opacity: 1; }

/* The deliverability nudge — a good reply is worthless in a spam folder */
.fx-ty-note {
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
	padding: 1.3rem 1.5rem;
	border-radius: 18px;
	border: 1px solid var(--line);
	background: var(--card);
}

.fx-ty-note-label {
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--signal-deep);
	margin-bottom: 0.5rem;
}

.fx-ty-note p { margin: 0; font-size: 0.98rem; line-height: 1.6; opacity: 0.85; }
.fx-ty-note strong { font-weight: 800; opacity: 1; }

/* Booking CTA */
.fx-ty-cta {
	position: relative;
	display: inline-block;
	margin-top: 1.75rem;
	padding: 1.15rem 2.4rem;
	border-radius: 999px;
	background: var(--signal);
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.fx-ty-cta:hover { transform: translateY(-2px); }
.fx-ty-cta .fx-cta-label { position: relative; z-index: 1; }

.fx-ty-micro {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	opacity: 0.55;
}

/* Two things to do while waiting */
.fx-ty-links {
	max-width: 1000px;
	margin: 3rem auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.fx-ty-link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 2rem 1.8rem;
	border-radius: 24px;
	border: 1px solid var(--line);
	background: var(--card);
	text-decoration: none;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.fx-ty-link:hover {
	transform: translateY(-6px);
	border-color: var(--signal-deep);
	box-shadow: 0 20px 50px rgba(14, 24, 15, 0.12);
}

.fx-ty-link-tag {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--signal-deep);
}

.fx-ty-link-title {
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

.fx-ty-link-go {
	margin-top: auto;
	padding-top: 0.8rem;
	font-size: 0.88rem;
	font-weight: 800;
	color: var(--signal-deep);
}

html body .fx-ty-title,
html body .fx-ty-lead,
html body .fx-ty-note p,
html body .fx-ty-link-title { color: var(--fg); }

html body .fx-ty-book .fx-sec-h2,
html body .fx-ty-book .fx-sec-copy,
html body .fx-ty-micro { color: var(--paper); }

@media (max-width: 760px) {
	.fx-ty-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-ty-ring { animation: none; opacity: 0; }
	.fx-ty-core { animation: none; }
	.fx-ty-link:hover { transform: none; }
}

/* ============================================================
   FRESH v24: The Listeners.
   Deliberately simple mechanics: a staggered fade-and-rise driven by
   IntersectionObserver, plus a monochrome-to-colour hover. No scroll-
   linked maths, nothing that can desync or jitter.
   ============================================================ */

.fx-team {
	max-width: 1200px;
	margin: 3.5rem auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.fx-member {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease var(--d, 0ms), transform .8s cubic-bezier(.22,1,.36,1) var(--d, 0ms);
}

.fx-team.is-in .fx-member { opacity: 1; transform: translateY(0); }

.fx-member-shot {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(160deg, #24380F, #0E180F);
	margin-bottom: 1.1rem;
}

.fx-member-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.06);
	transform: scale(1.02);
	transition: filter .7s ease, transform 1s cubic-bezier(.22,1,.36,1);
}

.fx-member:hover .fx-member-img {
	filter: grayscale(0);
	transform: scale(1.06);
}

.fx-member-empty {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(250,250,250,.04) 0 10px, transparent 10px 20px);
}

/* The signal dot arrives on hover, bottom-right of the frame */
.fx-member-dot {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 16px rgba(187,255,0,.8);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}

.fx-member:hover .fx-member-dot { opacity: 1; transform: scale(1); }

.fx-member-name {
	margin: 0 0 .2rem;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.fx-member-role {
	margin: 0 0 .5rem;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--signal-deep);
}

.fx-member-line {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	opacity: .72;
}

.fx-member-links {
	margin: .7rem 0 0;
	display: flex;
	gap: .9rem;
}

.fx-member-links a {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg);
	text-decoration: none;
	opacity: .55;
	transition: opacity .2s ease, color .2s ease;
}

.fx-member-links a:hover { opacity: 1; color: var(--signal-deep); }

html body .fx-member-name,
html body .fx-member-line { color: var(--fg); }

@media (max-width: 1024px) { .fx-team { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .fx-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .fx-team { grid-template-columns: 1fr; max-width: 320px; } }

@media (prefers-reduced-motion: reduce) {
	.fx-member { opacity: 1; transform: none; transition: none; }
	.fx-member:hover .fx-member-img { transform: scale(1.02); }
}

/* ============================================================
   FRESH v25: the Studio (About) page, Anakle structure.
   ============================================================ */

.fx-studio-head {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}

.fx-studio-title {
	margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
	font-size: clamp(2.8rem, 9vw, 7rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.fx-studio-mark { color: var(--signal-deep); }

.fx-studio-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

.fx-studio-cols p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.75;
	opacity: 0.78;
}

.fx-studio-hero.wp-block-cover {
	max-width: 1200px;
	margin: 0 auto;
	border-radius: 28px;
	overflow: hidden;
}

@media (max-width: 820px) {
	.fx-studio-cols { grid-template-columns: 1fr; }
}

/* ---------- Kinetic statement ---------- */

.fx-kinetic {
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 2.5rem);
	max-width: 1200px;
	margin: 0 auto;
}

.fx-kinetic-text {
	margin: 0;
	font-size: clamp(1.5rem, 3.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.25;
}

/* Each word dims until the line is read, then lifts to full contrast */
.fx-kinetic-text .fx-kw {
	display: inline-block;
	opacity: 0.18;
	transition: opacity .5s ease;
}

.fx-kinetic-text .fx-kw.is-lit { opacity: 1; }

/* ---------- Our Principles ---------- */

.fx-principles { padding-top: clamp(3.5rem, 7vw, 5.5rem); }

.fx-principles-head {
	max-width: 1200px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: end;
}

.fx-principles-title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
}

.fx-principles-note {
	margin: 0 0 1.2rem;
	font-size: 1.02rem;
	line-height: 1.6;
	opacity: 0.7;
}

.fx-principles-cta {
	display: inline-block;
	padding: .9rem 1.9rem;
	border-radius: 999px;
	background: var(--signal);
	color: var(--ink);
	font-weight: 800;
	text-decoration: none;
	transition: transform .2s ease;
}

.fx-principles-cta:hover { transform: translateY(-2px); }

.fx-principles-list {
	max-width: 1200px;
	margin: 0 auto;
	border-top: 1px solid rgba(250,250,250,.18);
}

.fx-principle {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
	border-bottom: 1px solid rgba(250,250,250,.18);
	transition: padding-left .35s cubic-bezier(.22,1,.36,1);
}

.fx-principle:hover { padding-left: .8rem; }

.fx-principle-letter {
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--signal);
}

.fx-principle p {
	margin: 0;
	font-size: clamp(1.05rem, 2.1vw, 1.4rem);
	font-weight: 600;
	line-height: 1.5;
}

html body .fx-principles-title,
html body .fx-principle p,
html body .fx-principles-note { color: var(--paper); }

@media (max-width: 820px) {
	.fx-principles-head { grid-template-columns: 1fr; }
	.fx-principle { grid-template-columns: 60px 1fr; }
}

/* ---------- Studio image strip ---------- */

.fx-strip {
	overflow: hidden;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.fx-strip-track {
	display: flex;
	width: max-content;
	gap: 1.25rem;
	animation: f-marquee 46s linear infinite;
}

.fx-strip-track > span { display: flex; gap: 1.25rem; }

.fx-strip-shot {
	flex: none;
	margin: 0;
	width: clamp(230px, 26vw, 400px);
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(160deg, #24380F, #0E180F);
}

.fx-strip-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1) contrast(1.05);
	transition: filter .7s ease, transform 1s cubic-bezier(.22,1,.36,1);
}

.fx-strip-shot:hover .fx-strip-img {
	filter: grayscale(0);
	transform: scale(1.05);
}

.fx-strip:hover .fx-strip-track { animation-play-state: paused; }

/* ---------- Signals Received (testimonials) ---------- */

.fx-received-code {
	display: block;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--signal-deep);
	margin-bottom: 1rem;
}

.fx-received-lead {
	max-width: 900px;
	margin: 3.5rem auto 0;
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: 28px;
	border: 1px solid var(--line);
	background: var(--card);
	box-shadow: 0 26px 70px rgba(14,24,15,.1);
	position: relative;
}

/* A quiet waveform behind the lead quote: the signal, received */
.fx-received-lead::after {
	content: "";
	position: absolute;
	right: 2rem;
	bottom: 1.6rem;
	width: 92px;
	height: 22px;
	background:
		repeating-linear-gradient(90deg, var(--signal-deep) 0 3px, transparent 3px 9px);
	opacity: .35;
	mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
}

.fx-received-lead blockquote { margin: 0 0 1.6rem; }

.fx-received-lead blockquote p {
	margin: 0;
	font-size: clamp(1.25rem, 2.8vw, 1.95rem);
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: -.02em;
}

.fx-received-lead figcaption,
.fx-received-stat figcaption,
.fx-received-card figcaption {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.fx-received-lead figcaption strong,
.fx-received-stat figcaption strong,
.fx-received-card figcaption strong {
	font-size: 1rem;
	font-weight: 800;
}

.fx-received-lead figcaption span,
.fx-received-stat figcaption span,
.fx-received-card figcaption span {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	opacity: .6;
}

.fx-received-pair {
	max-width: 900px;
	margin: 1.5rem auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.fx-received-stat,
.fx-received-card {
	padding: clamp(1.75rem, 3vw, 2.4rem);
	border-radius: 26px;
	border: 1px solid var(--line);
	background: var(--card);
	display: flex;
	flex-direction: column;
}

.fx-received-stat {
	background: var(--ink);
	border-color: var(--ink);
}

.fx-received-num {
	display: block;
	font-size: clamp(3.4rem, 8vw, 5.4rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: .9;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}

.fx-received-unit {
	display: block;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--signal);
	margin-bottom: 1rem;
}

.fx-received-stat-line {
	margin: 0 0 1.6rem;
	font-size: .98rem;
	line-height: 1.55;
	color: var(--paper);
	opacity: .78;
}

html body .fx-received-stat figcaption strong,
html body .fx-received-stat figcaption span,
html body .fx-received-stat .fx-received-code { color: var(--paper); }
html body .fx-received-stat .fx-received-code { color: var(--signal); }

.fx-received-card blockquote { margin: 0 auto 1.5rem 0; }

.fx-received-card blockquote p {
	margin: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.6rem);
	font-weight: 700;
	line-height: 1.4;
}

.fx-received-card em {
	font-style: normal;
	color: var(--signal-deep);
}

html body .fx-received-lead blockquote p,
html body .fx-received-card blockquote p,
html body .fx-received-lead figcaption strong,
html body .fx-received-card figcaption strong { color: var(--fg); }

@media (max-width: 760px) {
	.fx-received-pair { grid-template-columns: 1fr; }
	.fx-received-lead::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-strip-track { animation: none; }
	.fx-kinetic-text .fx-kw { opacity: 1; }
	.fx-principle:hover { padding-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   v25.2 — RESPONSIVE HEADER
   
   Problem this solves: .fx-pill was position:absolute, left:50%, so it
   was lifted out of flow and centred over whatever sat beneath it. On
   desktop there was room. On a 390px phone the logo (200px), the pill
   (~150px) and the CTA (~150px) needed ~500px of a 390px bar, so the
   pill landed on top of both neighbours.
   
   Fix: the pill only floats free where there is room for it. Below
   1024px all three zones return to normal flex flow and share the bar.
   ═══════════════════════════════════════════════════════════════════ */

.f-header {
	position: sticky;
	top: 0;
	z-index: 900;
	gap: 0.75rem;
}

/* The three zones. Logo and CTA hold their size, the middle absorbs slack. */
.f-header > .fx-logo-wrap { flex: 0 0 auto; }
.f-header > .f-cta        { flex: 0 0 auto; }

/* ---------- Logo: full lockup on desktop, icon alone on mobile ----------
   The icon sits at the left edge of the lockup, so cropping to a square
   from the left isolates it without needing a second asset. Tune the
   crop with --logo-icon-w if your PNG carries edge padding. */

.fx-logo-wrap {
	--logo-icon-w: 46px;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.f-header .fx-logo-wrap img {
	height: 44px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	object-position: left center;
	transition: width .3s ease, max-width .3s ease;
}

@media (max-width: 1024px) {
	.fx-pill {
		position: static;
		left: auto;
		transform: none;
	}
	.f-header {
		padding-left: clamp(0.9rem, 3vw, 1.5rem);
		padding-right: clamp(0.9rem, 3vw, 1.5rem);
	}
}

@media (max-width: 760px) {
	.f-header {
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
		gap: 0.5rem;
	}

	/* Icon only. Crop the lockup to a square from its left edge. */
	.f-header .fx-logo-wrap img {
		width: var(--logo-icon-w);
		max-width: var(--logo-icon-w);
		height: var(--logo-icon-w);
		object-fit: cover;
		object-position: left center;
	}

	/* Menu pill: tighter, no scroll percentage (already hidden at 760). */
	.fx-pill {
		padding: 0.3rem 0.35rem 0.3rem 0.75rem;
		gap: 0.15rem;
		box-shadow: 0 4px 16px rgba(14, 24, 15, 0.22);
	}
	.fx-menu   { font-size: 0.85rem; gap: 0.45rem; padding: 0.3rem 0.25rem; }
	.fx-burger { width: 17px; gap: 3px; }
	.fx-theme  { width: 32px; height: 32px; }
	.fx-theme svg { width: 16px; height: 16px; }

	/* CTA: shortened label, so it stops colliding with the pill. */
	.f-cta {
		font-size: 0.8rem;
		padding: 0.6rem 1rem;
		white-space: nowrap;
	}
	.f-cta .f-cta-long  { display: none; }
	.f-cta .f-cta-short { display: inline; }
}

/* Very narrow phones: drop the theme toggle into the overlay menu instead. */
@media (max-width: 380px) {
	.fx-pill  { padding-left: 0.6rem; }
	.fx-menu  { font-size: 0.8rem; }
	.f-cta    { font-size: 0.75rem; padding: 0.55rem 0.85rem; }
}

.f-cta .f-cta-short { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   v25.2 — PER-ZONE CONTRAST
   
   The existing script sampled one point near the logo and toggled a
   single .is-on-dark. That is correct for the logo and wrong for the
   pill and the CTA, which sit over different parts of the page and
   frequently over a different background colour.
   
   Now each zone is sampled where it actually sits and carries its own
   class, so the bar stays legible over any section it passes.
   ═══════════════════════════════════════════════════════════════════ */

.fx-pill,
.f-cta,
.fx-logo-wrap img {
	transition: background-color .35s ease, color .35s ease,
	            box-shadow .35s ease, opacity .3s ease;
}

/* --- Logo --- */
.f-header .fx-logo-dark  { display: block; }
.f-header .fx-logo-light { display: none; }
.f-header.is-logo-dark .fx-logo-dark  { display: none; }
.f-header.is-logo-dark .fx-logo-light { display: block; position: static; }

/* --- Menu pill: dark chip on light ground, light chip on dark ground --- */
.f-header .fx-pill {
	background: var(--ink);
	color: var(--paper);
}
.f-header .fx-menu,
.f-header .fx-theme { color: var(--paper); }
.f-header .fx-burger::before,
.f-header .fx-burger::after { background: var(--paper); }

.f-header.is-pill-dark .fx-pill {
	background: rgba(250, 250, 250, 0.96);
	color: var(--ink);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
}
.f-header.is-pill-dark .fx-menu,
.f-header.is-pill-dark .fx-theme { color: var(--ink); }
.f-header.is-pill-dark .fx-burger::before,
.f-header.is-pill-dark .fx-burger::after { background: var(--ink); }
.f-header.is-pill-dark .fx-theme:hover { background: rgba(14, 24, 15, 0.1); }
.f-header.is-pill-dark .fx-pct {
	background: rgba(14, 24, 15, 0.12);
	color: var(--ink);
}

/* --- CTA: same inversion, and Signal Green on dark so it still pulls --- */
.f-header .f-cta {
	background: var(--ink);
	color: var(--paper);
}
.f-header .f-cta:hover {
	background: var(--signal);
	color: var(--ink);
}
.f-header.is-cta-dark .f-cta {
	background: var(--signal);
	color: var(--ink);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}
.f-header.is-cta-dark .f-cta:hover {
	background: var(--paper);
	color: var(--ink);
}

/* The scroll percentage inherits from the pill, so keep it in step. */
html body .f-header.is-pill-dark .fx-pct { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
	.fx-pill, .f-cta, .fx-logo-wrap img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   v25.4 — GLOBAL GUTTER
   
   Audit found 47 of 73 container classes with no horizontal padding of
   their own. Most inherit it from a padded parent, but the ones that do
   not were letting text run to the screen edge on narrow phones, and
   the padded ones bottomed out at 20px on a 320px screen, which is
   tighter than it should be.
   
   Rather than patch each class, a single gutter token is applied as a
   FLOOR using max(). Existing padding is preserved wherever it is
   already larger, so nothing that currently looks right changes. Only
   the sections that were too tight get widened.
   ═══════════════════════════════════════════════════════════════════ */

:root {
	--gutter: clamp(1.25rem, 5vw, 2.5rem);
	--content-max: 1200px;
}

/* Never let anything force sideways scroll. clip beats hidden here:
   it does not create a scroll container, so sticky positioning on the
   header keeps working. */
html {
	overflow-x: clip;
	max-width: 100%;
}

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

/* Section shells: raise the floor without lowering any existing ceiling. */
.fx-sec,
.fx-hero,
.f-contact,
.fx-page-head,
.fx-work-head,
.fx-letter-head,
.fx-studio-head,
.fx-kinetic,
.fx-cta-band,
.fx-screen-sec,
.fx-faq,
.f-ticker,
.f-panel,
.fx-received,
.fx-letter-body,
.f-footer {
	padding-left: max(var(--gutter), 1.25rem);
	padding-right: max(var(--gutter), 1.25rem);
}

/* Containers that centre on a max-width but carried no padding: below
   their max-width they sat flush against the viewport edge. */
.fx-sec-inner,
.f-contact-inner,
.fx-hero-copy,
.fx-hero-support2,
.fx-notes-grid,
.fx-principles-head,
.fx-split-inner,
.fx-ty-inner,
.f-footer-grid,
.f-footer-legal,
.fx-studio-cols,
.fx-received-pair,
.fx-moves,
.fx-packs-grid,
.fx-quotes-nav,
.fx-contact-links,
.fx-hero-actions {
	max-width: min(var(--content-max), 100%);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Long unbroken strings (URLs, emails, brand names) are a common cause
   of overflow on narrow screens. */
.fx-sec-inner,
.f-contact-inner,
.fx-received,
.fx-studio-cols,
.fx-kinetic-text,
.f-footer,
blockquote,
figcaption {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Media and embeds must never exceed their container. */
img, video, iframe, svg, table {
	max-width: 100%;
	height: auto;
}

/* Small phones: a touch more breathing room proportionally, since 20px
   on a 320px screen reads as cramped. */
@media (max-width: 480px) {
	:root { --gutter: 1.375rem; }

	.fx-sec,
	.fx-hero,
	.f-contact,
	.fx-page-head,
	.fx-work-head,
	.fx-letter-head,
	.fx-studio-head,
	.fx-kinetic,
	.fx-cta-band,
	.fx-screen-sec,
	.fx-faq,
	.fx-received,
	.f-footer {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	/* Cards inside sections should not double up the gutter. */
	.fx-received-card,
	.fx-received-lead,
	.fx-received-stat,
	.f-panel {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* The full-bleed About cover is the deliberate exception: it spans edge
   to edge by design, so the gutter applies to its contents, not itself. */
.fx-studio-hero.wp-block-cover.alignfull {
	max-width: 100%;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.fx-studio-hero.wp-block-cover.alignfull .wp-block-cover__inner-container {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Featured image drives the cover; keep the crop centred and generous. */
.fx-studio-hero.wp-block-cover img.wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}

@media (max-width: 760px) {
	.fx-studio-hero.wp-block-cover.alignfull { min-height: 380px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   v25.5 — FORM OVERFLOW: THE ACTUAL CAUSE
   
   The gutter added in v25.4 padded the section, but the form was still
   breaking out of it, so the fix looked like it did nothing.
   
   Root cause: the stylesheet has no box-sizing reset. .f-area sets
   width:100% AND padding:1rem 1.2rem AND border:3px. Under the default
   content-box model that computes to 100% + 38.4px + 6px, so the
   textarea is 44px wider than the column holding it and its right edge
   is pushed off screen. That is exactly the clipped placeholder in the
   screenshots, and no amount of section padding could ever fix it.
   
   Secondary cause: the mad-lib inputs carry HTML size attributes
   (size="18" and friends). Those set an intrinsic character width that
   ignores the viewport, so on a narrow screen they force the line box
   wider than the column.
   ═══════════════════════════════════════════════════════════════════ */

/* The reset that should have been here from the start. Border-box makes
   padding and border count INSIDE a declared width, which is what every
   width:100% rule in this stylesheet already assumes. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- The mad-lib form ---------- */

.f-contact-inner {
	max-width: min(860px, 100%);
	box-sizing: border-box;
}

.f-madlib {
	max-width: 100%;
}

.f-madlib p {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Inputs must never exceed the column, whatever their size attribute says. */
.f-madlib .f-blank {
	max-width: 100%;
	box-sizing: border-box;
}

.f-area {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 760px) {
	/* Stack the blanks. Inline inputs inside flowing sentences cannot
	   wrap mid-element, so on a narrow column they are guaranteed to
	   overshoot. Full-width blocks are both safer and far easier to
	   fill in with a thumb. */
	.f-madlib {
		font-size: clamp(1.05rem, 4.6vw, 1.35rem);
		line-height: 1.75;
	}

	.f-madlib p {
		margin: 0 0 0.35rem;
	}

	.f-madlib .f-blank {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0.4rem 0 0.9rem;
		padding: 0.55rem 0.2rem;
		font-size: 1.02rem;
		border-bottom-width: 2px;
		/* Below the iOS zoom threshold would be 16px; keep at or above it
		   so focusing a field does not zoom the whole page. */
	}

	.f-madlib .f-blank::placeholder { font-size: 1rem; }

	.f-area {
		font-size: 1rem;
		padding: 0.85rem 0.95rem;
		border-width: 2px;
		border-radius: 14px;
	}

	.f-optin {
		max-width: 100%;
		font-size: 0.88rem;
	}

	.f-submit {
		width: 100%;
		max-width: 100%;
		padding: 0.95rem 1.5rem;
		font-size: 1rem;
		text-align: center;
	}

	/* The section's own rounded top corners eat into the usable width;
	   soften them so the form is not squeezed further. */
	.f-contact {
		border-radius: 24px 24px 0 0;
		padding-top: clamp(3rem, 12vw, 5rem);
		padding-bottom: clamp(3rem, 12vw, 5rem);
	}
}

/* iOS zooms the viewport when a focused field is under 16px. Hold the
   floor at 16px so the page never jumps on tap. */
@media (max-width: 760px) {
	.f-madlib .f-blank,
	.f-area,
	.f-newsletter-input,
	input[type="text"],
	input[type="email"],
	textarea {
		font-size: max(1rem, 16px);
	}
}

/* ---------- Sticky header legibility ---------- */
/* The header is transparent by design so the page reads through it. On a
   narrow screen that means body text runs underneath the pill and becomes
   unreadable, which is what the screenshots show. A soft scrim restores
   separation without making the bar look like a solid block. */

@media (max-width: 900px) {
	.f-header::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: -1;
		background: linear-gradient(
			to bottom,
			var(--bg, var(--paper)) 0%,
			var(--bg, var(--paper)) 55%,
			transparent 100%
		);
		opacity: 0.92;
	}

	[data-theme="dark"] .f-header::before {
		background: linear-gradient(
			to bottom,
			var(--ink) 0%,
			var(--ink) 55%,
			transparent 100%
		);
	}

	/* Sections that set their own background need the scrim to match, so
	   the bar blends rather than banding. */
	.f-contact .f-madlib { scroll-margin-top: 90px; }
}

/* Anchor jumps must clear the sticky bar rather than land under it. */
html {
	scroll-padding-top: 96px;
}

@media (max-width: 760px) {
	html { scroll-padding-top: 80px; }
}

/* Three fixed-size circles sized on the content-box model (a width plus a
   border that was expected to sit outside it). Border-box would shrink each
   by its border, so they keep the old model and render pixel-identical. */
.fx-arrow,
.fx-trust-dots span,
.fx-cur-ring {
	box-sizing: content-box;
}


/* ═══════════════════════════════════════════════════════════════════
   v25.6 — GENEROUS GUTTERS + A HARD SAFETY NET
   
   v25.5 stopped the form breaking out of its column. This makes the
   remaining margin actually feel deliberate rather than merely legal,
   and adds a containment rule so no future element can bleed to the
   edge even if it is mis-sized.
   ═══════════════════════════════════════════════════════════════════ */

:root {
	--gutter: clamp(1.75rem, 7vw, 3rem);
}

/* Typical phones get the most generous proportional margin, because this
   is where the cramped feel was worst. */
@media (max-width: 480px) {
	:root { --gutter: 1.75rem; }   /* 28px */
}

/* Below 360px the screen simply cannot spare 28px each side without
   squeezing the copy, so it eases back rather than going tighter than
   the previous build. */
@media (max-width: 360px) {
	:root { --gutter: 1.5rem; }    /* 24px */
}

/* Respect notch and rounded-corner insets on modern phones, so landscape
   and edge-to-edge displays keep their margin too. */
@supports (padding: env(safe-area-inset-left)) {
	:root {
		--gutter-safe-l: max(var(--gutter), env(safe-area-inset-left));
		--gutter-safe-r: max(var(--gutter), env(safe-area-inset-right));
	}

	.fx-sec,
	.fx-hero,
	.f-contact,
	.fx-page-head,
	.fx-work-head,
	.fx-letter-head,
	.fx-studio-head,
	.fx-kinetic,
	.fx-cta-band,
	.fx-screen-sec,
	.fx-faq,
	.fx-received,
	.f-header,
	.f-footer {
		padding-left: var(--gutter-safe-l);
		padding-right: var(--gutter-safe-r);
	}
}

/* ---------- The contact section specifically ---------- */
/* This is the one the screenshots show, so it gets belt and braces:
   its own gutter, a contained inner column, and a clip so nothing
   inside it can ever reach the edge again. */

.f-contact {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	overflow-x: clip;
}

.f-contact-inner {
	width: 100%;
	max-width: min(860px, 100%);
	margin-inline: auto;
	box-sizing: border-box;
}

.f-madlib,
.f-madlib p,
.f-madlib .f-blank,
.f-area,
.f-optin,
.f-submit,
.f-note {
	max-width: 100%;
	box-sizing: border-box;
}

/* Same treatment for the newsletter form in the footer, which has the
   same inline-input structure and the same failure mode. */
.f-newsletter,
.f-newsletter-form,
.f-newsletter-scroll,
.f-newsletter-row,
.f-newsletter-input {
	max-width: 100%;
	box-sizing: border-box;
}

.f-newsletter-row {
	display: flex;
	width: 100%;
}

.f-newsletter-input {
	flex: 1 1 auto;
	min-width: 0; /* lets a flex item shrink below its content width */
}

/* ---------- Universal containment ---------- */
/* A flex or grid child refuses to shrink below its content by default,
   which is the single most common cause of a stubborn overflow. */
.fx-sec > *,
.f-contact > *,
.fx-hero > *,
.f-footer > * {
	min-width: 0;
	max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════
   v25.6 — EDITORIAL LETTERS INDEX
   The blog index had no home.html, so it fell through to index.html and
   rendered plain. This is the designed version.
   ═══════════════════════════════════════════════════════════════════ */

.fx-letters-mark {
	position: relative;
	white-space: nowrap;
}

.fx-letters-mark::after {
	content: "";
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	bottom: 0.06em;
	height: 0.36em;
	background: var(--signal);
	z-index: -1;
	border-radius: 3px;
}

.fx-letters-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

.fx-letters-chip {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	border: 2px solid currentColor;
	opacity: 0.55;
}

/* ---------- Lead letter ---------- */

.fx-lead-letter {
	max-width: min(1120px, 100%);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.fx-lead-letter-row {
	position: relative;
	background: var(--cream);
	border-radius: 28px;
	overflow: hidden;
	padding: clamp(1.25rem, 3vw, 2rem);
	transition: transform .4s ease, box-shadow .4s ease;
}

.fx-lead-letter-row:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(14, 24, 15, 0.14);
}

[data-theme="dark"] .fx-lead-letter-row { background: rgba(250, 250, 250, 0.05); }

.fx-lead-letter-tag {
	display: inline-block;
	background: var(--signal);
	color: var(--ink);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	margin-bottom: 1.1rem;
}

.fx-lead-letter-img img {
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
}

.fx-lead-letter-body { margin-top: 1.5rem; }

.fx-lead-letter-title {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0.5rem 0 0.75rem;
}

.fx-lead-letter-title a { text-decoration: none; color: inherit; }
.fx-lead-letter-title a:hover { color: var(--signal-deep); }

.fx-lead-letter-excerpt {
	font-size: 1.05rem;
	line-height: 1.65;
	opacity: 0.75;
	max-width: 62ch;
}

/* ---------- Divider ---------- */

.fx-letters-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: min(1120px, 100%);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
}

.fx-letters-divider-line {
	flex: 1;
	height: 2px;
	background: currentColor;
	opacity: 0.14;
}

.fx-letters-divider-label {
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.5;
	white-space: nowrap;
}

/* ---------- Empty state ---------- */

.fx-letters-empty {
	text-align: center;
	padding: clamp(2.5rem, 8vw, 4.5rem) var(--gutter);
	max-width: 48ch;
	margin: 0 auto;
}

.fx-letters-empty-mark {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--signal);
	margin: 0 auto 1.25rem;
	box-shadow: 0 0 0 8px rgba(187, 255, 0, 0.18);
}

.fx-letters-empty-title {
	font-size: 1.35rem;
	font-weight: 800;
	margin: 0 0 0.5rem;
}

.fx-letters-empty-copy { opacity: 0.68; margin: 0; }

/* ---------- Subscribe band ---------- */

.fx-letters-cta {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(3.5rem, 9vw, 6rem) var(--gutter);
	text-align: center;
}

.fx-letters-cta-inner { max-width: min(720px, 100%); margin: 0 auto; }

.fx-letters-cta .fx-sec-label { color: var(--signal); opacity: 1; }

.fx-letters-cta-title {
	font-size: clamp(1.8rem, 5vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0.75rem 0 1rem;
	color: var(--paper);
}

.fx-letters-cta-copy {
	opacity: 0.72;
	font-size: 1.02rem;
	line-height: 1.65;
	margin: 0 auto 1.9rem;
	max-width: 54ch;
}

.fx-letters-cta-btn {
	display: inline-block;
	background: var(--signal);
	color: var(--ink);
	font-weight: 800;
	font-size: 0.95rem;
	padding: 0.9rem 2rem;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .25s ease, background .25s ease;
}

.fx-letters-cta-btn:hover {
	background: var(--paper);
	transform: translateY(-2px);
}

@media (max-width: 760px) {
	.fx-letters-meta { gap: 0.4rem; }
	.fx-letters-chip { font-size: 0.68rem; padding: 0.35rem 0.7rem; }
	.fx-lead-letter-row { border-radius: 22px; }
	.fx-letters-divider { gap: 0.75rem; }
	.fx-letters-divider-label { font-size: 0.68rem; letter-spacing: 0.14em; }
}


/* ═══════════════════════════════════════════════════════════════════
   v25.6 — 404
   Built on the brand idea rather than a generic error: a page that has
   gone quiet, and a scope still listening for it.
   ═══════════════════════════════════════════════════════════════════ */

.fx-404 {
	min-height: 76vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3.5rem, 10vw, 7rem) var(--gutter);
	text-align: center;
}

.fx-404-inner { max-width: min(660px, 100%); margin: 0 auto; }

/* Concentric rings pulsing outward from a signal dot. */
.fx-404-scope {
	position: relative;
	width: 150px;
	height: 150px;
	margin: 0 auto 2.25rem;
	display: grid;
	place-items: center;
}

.fx-404-wave {
	position: absolute;
	inset: 0;
	border: 2px solid var(--signal);
	border-radius: 50%;
	opacity: 0;
	animation: fx404Pulse 3.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.fx-404-wave--2 { animation-delay: 1.05s; }
.fx-404-wave--3 { animation-delay: 2.1s; }

.fx-404-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--signal);
	box-shadow: 0 0 0 7px rgba(187, 255, 0, 0.2);
	animation: fx404Blink 3.2s ease-in-out infinite;
}

@keyframes fx404Pulse {
	0%   { transform: scale(0.28); opacity: 0; }
	18%  { opacity: 0.85; }
	100% { transform: scale(1); opacity: 0; }
}

@keyframes fx404Blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.85); }
}

.fx-404-label {
	color: var(--signal-deep);
	opacity: 1;
	margin-bottom: 1rem;
}

.fx-404-title {
	font-size: clamp(2.1rem, 7vw, 3.9rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin: 0 0 1.1rem;
}

.fx-404-mark {
	position: relative;
	white-space: nowrap;
}

.fx-404-mark::after {
	content: "";
	position: absolute;
	left: -0.05em;
	right: -0.05em;
	bottom: 0.08em;
	height: 0.34em;
	background: var(--signal);
	z-index: -1;
	border-radius: 3px;
}

.fx-404-lead {
	font-size: clamp(1.02rem, 2.4vw, 1.2rem);
	line-height: 1.65;
	margin: 0 auto 0.9rem;
	max-width: 52ch;
}

.fx-404-copy {
	font-size: 0.98rem;
	line-height: 1.65;
	opacity: 0.65;
	margin: 0 auto 2.25rem;
	max-width: 52ch;
}

.fx-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: 2.75rem;
}

.fx-404-btn {
	display: inline-block;
	padding: 0.75rem 1.4rem;
	border-radius: 999px;
	border: 2px solid currentColor;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	color: inherit;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}

.fx-404-btn:hover {
	background: var(--ink);
	color: var(--paper);
	transform: translateY(-2px);
}

.fx-404-btn--primary {
	background: var(--signal);
	border-color: var(--signal);
	color: var(--ink);
}

.fx-404-btn--primary:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--signal);
}

[data-theme="dark"] .fx-404-btn:hover {
	background: var(--signal);
	color: var(--ink);
}

.fx-404-search {
	border-top: 2px solid currentColor;
	padding-top: 1.9rem;
	max-width: 460px;
	margin: 0 auto;
}

.fx-404-search { border-color: rgba(128, 128, 128, 0.22); }

.fx-404-search-label {
	font-size: 0.86rem;
	font-weight: 700;
	opacity: 0.6;
	margin: 0 0 0.9rem;
}

.fx-404-searchform .wp-block-search__label { display: none; }

.fx-404-searchform .wp-block-search__inside-wrapper {
	border: 2px solid currentColor;
	border-radius: 999px;
	padding: 0.25rem 0.25rem 0.25rem 1.1rem;
	background: transparent;
}

.fx-404-searchform .wp-block-search__input {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
	outline: none;
	padding: 0.55rem 0;
	min-width: 0;
}

.fx-404-searchform .wp-block-search__button {
	background: var(--ink);
	color: var(--signal);
	border: none;
	border-radius: 999px;
	padding: 0.6rem 1.3rem;
	font-family: inherit;
	font-weight: 800;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.fx-404-searchform .wp-block-search__button:hover {
	background: var(--signal);
	color: var(--ink);
}

@media (max-width: 760px) {
	.fx-404 { min-height: 68vh; }
	.fx-404-scope { width: 112px; height: 112px; margin-bottom: 1.75rem; }
	.fx-404-actions { gap: 0.5rem; }
	.fx-404-btn { padding: 0.65rem 1.1rem; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-404-wave,
	.fx-404-dot { animation: none; }
	.fx-404-wave--1 { opacity: 0.5; transform: scale(1); }
	.fx-404-wave--2 { opacity: 0.3; transform: scale(0.7); }
	.fx-404-wave--3 { opacity: 0.15; transform: scale(0.42); }
	.fx-lead-letter-row:hover { transform: none; }
	.fx-404-btn:hover,
	.fx-letters-cta-btn:hover { transform: none; }
}

/* Target for the Letters subscribe button; offset so the sticky bar does
   not cover the form when the jump lands. */
.f-newsletter-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 110px;
}

/* fx-feed-meta is carried over from archive.html, where it was also
   unstyled. It is the text column beside each feed thumbnail. */
.fx-feed-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.fx-letters-head {
	padding-bottom: clamp(2rem, 5vw, 3rem);
}


/* ═══════════════════════════════════════════════════════════════════
   v25.9 — CURSOR CONTRAST

   The cursor was Signal Green everywhere. Measured against the actual
   backgrounds in this theme:

     on Signal Green   1.00:1   invisible
     on Paper          1.16:1   effectively invisible
     on Cream          1.19:1   effectively invisible
     on Ink           15.06:1   fine

   So it only ever worked on the dark sections. The green contact panel
   was the worst case and the one that mattered most, because that is
   where people are aiming at form fields.

   The script measures whatever sits under the pointer and adds
   .is-on-light when ink contrasts better. Ink on green is 15.06:1.
   ═══════════════════════════════════════════════════════════════════ */

.fx-cursor .fx-cur-dot,
.fx-cursor .fx-cur-ring {
	transition: background-color .18s ease, border-color .18s ease,
	            box-shadow .18s ease;
}

/* Over any light ground, including the Signal Green form panel. */
.fx-cursor.is-on-light .fx-cur-dot {
	background: var(--ink);
	box-shadow: 0 0 10px rgba(14, 24, 15, 0.45);
}

.fx-cursor.is-on-light .fx-cur-ring {
	border-color: rgba(14, 24, 15, 0.8);
}

.fx-cursor.is-on-light .fx-cur-label {
	color: var(--ink);
}

/* Hover states keep their emphasis, inverted to stay readable. */
.fx-cursor.is-on-light.is-link .fx-cur-ring {
	background: rgba(14, 24, 15, 0.12);
	border-color: var(--ink);
}

.fx-cursor.is-on-light.is-view .fx-cur-ring {
	background: var(--ink);
	border-color: var(--ink);
}

.fx-cursor.is-on-light.is-view .fx-cur-label {
	color: var(--signal);
}

/* Over the green panel specifically the dot carries a thin light rim, so
   it reads against both the green field and the dark input underlines it
   passes over. */
.f-contact:hover ~ * .fx-cursor.is-on-light .fx-cur-dot,
.fx-cursor.is-on-light .fx-cur-dot {
	border: 1px solid rgba(250, 250, 250, 0.35);
}

/* Form fields deserve a clearer aim point than a dot. */
.fx-cursor.is-on-light.is-link .fx-cur-dot {
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
}

@media (prefers-reduced-motion: reduce) {
	.fx-cursor .fx-cur-dot,
	.fx-cursor .fx-cur-ring { transition: none; }
}

/* Hero media renders as <video> once a converted file exists, so it needs
   the same box the <img> had. */
video.fx-man-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Newsletter: inline error and sending state, now that the subscribe
   happens on-page instead of on a Mailchimp-hosted screen. */
.f-newsletter-error {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: #FF6B6B;
}

.f-newsletter-form.is-sending .f-newsletter-submit {
	opacity: 0.55;
	cursor: wait;
}

.senzarr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   SIGNAL REPORT LANDING PAGE
   Everything is scoped under .senzarr-lp so none of it can reach the
   rest of the site. The page runs on Ink because it has no site header
   to sit beneath.
   ═══════════════════════════════════════════════════════════════════ */

body:has(.senzarr-lp) { background: var(--ink); }

.senzarr-lp {
	--lp-gutter: clamp(1.2rem, 4vw, 3rem);
	background: var(--ink);
	color: var(--paper);
	font-weight: 600;
	font-size: clamp(1.05rem, .5vw + .95rem, 1.2rem);
	line-height: 1.55;
}

.senzarr-lp img { max-width: 100%; height: auto; display: block; }
.lp-wrap { max-width: 64rem; margin: 0 auto; padding-inline: var(--lp-gutter); }
.senzarr-lp section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.lp-centre { text-align: center; }

/* Header: the mark alone. No navigation, because every link out is an
   exit the form does not get. */
.lp-head {
	/* Was clamp(1.3rem,3vw,2rem) top and bottom, which on a wide screen
	   pushed the headline well below the fold. A lead-magnet header is a
	   signature, not a navigation bar. */
	padding: .85rem var(--lp-gutter);
	text-align: center;
	border-bottom: 1px solid rgba(250, 250, 250, .08);
}
.lp-head a { display: inline-block; line-height: 0; }
.lp-head img {
	width: clamp(112px, 12vw, 138px);
	margin: 0 auto;
	opacity: .94;
	transition: opacity .18s ease;
}
.lp-head a:hover img { opacity: 1; }
.lp-head a:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }

.lp-hero {
	padding-top: clamp(1.6rem, 3.2vw, 2.6rem) !important;
	background: radial-gradient(120% 90% at 50% 0%, #16241a 0%, var(--ink) 62%);
}

.lp-trust {
	display: inline-flex; align-items: center; gap: .6rem;
	font-size: .86rem; font-weight: 800; color: var(--signal); margin: 0 0 1rem;
}
.lp-dots { display: inline-flex; gap: .32rem; }
.lp-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.lp-dots i:nth-child(2) { opacity: .5; }
.lp-dots i:nth-child(3) { opacity: .2; }

.lp-badge {
	display: inline-flex; align-items: center; gap: .7rem;
	background: rgba(250, 250, 250, .07);
	border: 1px solid rgba(250, 250, 250, .16);
	border-radius: 999px; padding: .5rem 1.05rem; margin: 0 0 1.5rem;
	font-size: clamp(.76rem, 1.5vw, .92rem); font-weight: 800;
}
.lp-badge b {
	background: var(--signal); color: var(--ink);
	border-radius: 99px; padding: .16rem .6rem; font-size: .76em;
}

/* The page's loudest element. Scale from direct-response practice,
   sentence case because the argument is that volume is not the answer.
   
   Each line is its own block, so the break points are fixed rather than
   left to the browser. The previous version let line one wrap naturally
   inside a 16ch box, and "Why people follow you," needs about 23ch, so
   it broke after "follow" and the shape collapsed. The ceiling is now
   5rem, which is the largest size where the longest line still fits the
   64rem column. */
.lp-h1 {
	font-weight: 900; letter-spacing: -.04em; line-height: .95;
	margin: 0 auto; font-size: clamp(2.15rem, 6.4vw, 5rem);
	max-width: 100%; color: var(--paper);
	text-wrap: balance;
}
.lp-h1 span { display: block; }
.lp-h1 .lp-l2 { opacity: .74; }
.lp-h1 .lp-l3 { opacity: .44; }

/* Scoped to .senzarr-lp so it outranks the ".senzarr-lp p" reset further
   down. Without the extra class the p rule wins on specificity, resets
   the auto side margins to zero, and the block stops centring. */
.senzarr-lp .lp-sub {
	margin: 1.8rem auto 0; max-width: 40rem; font-weight: 800;
	font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.4;
	color: rgba(250, 250, 250, .9);
	text-wrap: balance;
}
.lp-sub em { font-style: normal; color: var(--signal); }

/* Mockup fan */
.lp-fan {
	position: relative; margin: clamp(2.5rem, 6vw, 4rem) auto 0;
	max-width: 56rem; height: clamp(15rem, 34vw, 25rem);
}
.lp-fan img {
	position: absolute; border-radius: 6px;
	box-shadow: 0 22px 55px rgba(0, 0, 0, .6);
	will-change: transform;
}

/* Breathing. A slow vertical drift, each slot offset so the group never
   moves in unison, which would read as a slide rather than a float. */
@keyframes lp-float-mid  { 0%,100%{transform:translateX(-50%) translateY(0)}   50%{transform:translateX(-50%) translateY(-13px)} }
@keyframes lp-float-a    { 0%,100%{transform:rotate(-8deg) translateY(0)}      50%{transform:rotate(-8deg) translateY(-9px)} }
@keyframes lp-float-b    { 0%,100%{transform:rotate(-4deg) translateY(0)}      50%{transform:rotate(-4deg) translateY(-11px)} }
@keyframes lp-float-c    { 0%,100%{transform:rotate(8deg) translateY(0)}       50%{transform:rotate(8deg) translateY(-10px)} }
@keyframes lp-float-d    { 0%,100%{transform:rotate(4deg) translateY(0)}       50%{transform:rotate(4deg) translateY(-12px)} }

.lp-fan .cover { animation: lp-float-mid 6.5s ease-in-out infinite; }
.lp-fan .a     { animation: lp-float-a  7.4s ease-in-out infinite .5s; }
.lp-fan .b     { animation: lp-float-b  8.1s ease-in-out infinite 1.1s; }
.lp-fan .c     { animation: lp-float-c  7.7s ease-in-out infinite .8s; }
.lp-fan .d     { animation: lp-float-d  8.6s ease-in-out infinite 1.5s; }
.lp-fan .cover {
	left: 50%; top: 2%; width: 26%; transform: translateX(-50%);
	z-index: 5; border-radius: 8px; box-shadow: 0 30px 70px rgba(0,0,0,.75);
}
.lp-fan .a { left: 6%;  top: 6%;  width: 23%; transform: rotate(-8deg); }
.lp-fan .b { left: 20%; top: 34%; width: 23%; transform: rotate(-4deg); }
.lp-fan .c { right: 6%;  top: 6%;  width: 23%; transform: rotate(8deg); }
.lp-fan .d { right: 20%; top: 34%; width: 23%; transform: rotate(4deg); }

.lp-cta {
	display: inline-block; background: var(--signal); color: var(--ink);
	font-weight: 900; font-size: clamp(1.05rem, 2.1vw, 1.4rem);
	padding: 1.15rem clamp(1.6rem, 4vw, 3rem); border-radius: 14px;
	text-decoration: none; border: 0; cursor: pointer; line-height: 1.15;
	font-family: inherit;
	transition: transform .16s ease, background .16s ease;
}
.lp-cta small { display: block; font-size: .66em; font-weight: 700; opacity: .72; margin-top: .3rem; }
.lp-cta:hover { transform: translateY(-2px); background: #fff; color: var(--ink); }
.lp-cta:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.lp-cta-wrap { margin-top: clamp(2rem, 5vw, 3rem); }
.senzarr-lp .lp-fine { margin: 1rem auto 0; max-width: 34rem; font-size: .85rem; font-weight: 700; color: rgba(250,250,250,.45); }

.lp-h2 {
	font-weight: 900; letter-spacing: -.03em; line-height: 1.02;
	font-size: clamp(1.9rem, 4.4vw, 3.2rem); margin: 0 0 1.4rem;
	color: inherit;
}
.senzarr-lp p { margin: 0 0 1.05rem; }
.senzarr-lp .lp-lead { max-width: 36rem; }
.senzarr-lp .lp-centre .lp-lead { margin-inline: auto; }
.lp-dim { color: rgba(250, 250, 250, .72); }

.lp-paper { background: var(--paper); color: var(--ink); }
.lp-paper .lp-h2 { color: var(--ink); }

/* The letter. Narrower measure, left aligned, set slightly larger than
   body copy so it reads as correspondence rather than a page block. */
.lp-letter {
	max-width: 36rem; margin: 0 auto;
	font-size: clamp(1.08rem, .5vw + 1rem, 1.24rem);
	line-height: 1.65; font-weight: 600;
}
.lp-letter p { margin: 0 0 1.15rem; }
.lp-letter b { font-weight: 900; }
.lp-salutation { font-weight: 900; font-size: 1.25em; letter-spacing: -.02em; margin-bottom: 1.5rem !important; }
.lp-letter mark {
	background: linear-gradient(transparent 58%, var(--signal) 58%);
	color: inherit; padding: 0 .12em; font-weight: 800;
}
.lp-punch {
	font-weight: 900; letter-spacing: -.02em; line-height: 1.18;
	font-size: clamp(1.5rem, 3.3vw, 2.2rem); margin: 2rem 0 !important;
}
.lp-punch em { font-style: normal; color: var(--signal-deep); }
.lp-sign { margin-top: 2.2rem !important; font-weight: 700; }
.lp-sign span { color: #6B7568; font-size: .9em; }

.lp-inside { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.lp-inside li {
	padding: 1.4rem 0; border-top: 2px solid rgba(250, 250, 250, .14);
	display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: baseline;
}
.lp-inside li:last-child { border-bottom: 2px solid rgba(250, 250, 250, .14); }
.lp-inside b { font-weight: 900; font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: -.01em; }
.lp-pg { font-weight: 900; color: var(--signal); white-space: nowrap; font-size: .9rem; }

.lp-notfor {
	margin-top: 2.2rem; padding: 1.4rem 1.6rem; border-radius: 12px;
	background: rgba(250, 250, 250, .06); font-size: .98rem; max-width: 36rem;
	border-left: 5px solid rgba(250, 250, 250, .25);
}
.lp-notfor b { display: block; margin-bottom: .4rem; font-weight: 900; }

.lp-quotes {
	display: grid; gap: 1.2rem; margin-top: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.lp-quotes blockquote {
	margin: 0; padding: 1.6rem; background: #fff; border-radius: 14px;
	border-left: 6px solid var(--signal);
}
.lp-quotes blockquote p { font-size: 1rem; font-weight: 700; margin-bottom: .9rem; }
.lp-quotes cite { font-style: normal; font-size: .86rem; color: #6B7568; font-weight: 700; }
.lp-quotes cite b { color: var(--ink); display: block; font-weight: 900; }

.lp-formwrap { max-width: 30rem; margin: 2.4rem auto 0; }
.lp-form { text-align: left; }
.lp-form label { display: block; font-weight: 800; margin: 1.1rem 0 .4rem; font-size: .95rem; }
.lp-form input, .lp-form select {
	width: 100%; font: inherit; font-weight: 700; font-size: max(1rem, 16px);
	padding: .9rem 1rem; border-radius: 11px;
	border: 2px solid rgba(250, 250, 250, .22);
	background: rgba(250, 250, 250, .07); color: var(--paper);
	box-sizing: border-box;
}
.lp-form input::placeholder { color: rgba(250, 250, 250, .35); }
.lp-form input:focus, .lp-form select:focus { outline: 0; border-color: var(--signal); }
.lp-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--signal) 50%),
	                  linear-gradient(135deg, var(--signal) 50%, transparent 50%);
	background-position: calc(100% - 21px) 55%, calc(100% - 14px) 55%;
	background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
}
.lp-form select option { background: var(--ink); color: var(--paper); }
.lp-form .lp-cta { width: 100%; margin-top: 1.7rem; text-align: center; }
.lp-form.is-sending .lp-cta { opacity: .6; cursor: wait; }

.lp-msg {
	padding: 1.1rem 1.3rem; border-radius: 12px; font-weight: 800;
	margin: 0 0 1.5rem; text-align: left;
}
.lp-msg.is-ok { background: var(--signal); color: var(--ink); }
.lp-msg.is-bad { background: rgba(217, 74, 74, .16); color: #FFB4B4; border: 1px solid rgba(217,74,74,.4); }

.lp-foot {
	padding: 2.2rem var(--lp-gutter); font-size: .85rem; font-weight: 700;
	color: rgba(250, 250, 250, .5); display: flex; flex-wrap: wrap; gap: .8rem;
	justify-content: space-between; max-width: 64rem; margin: 0 auto;
}
.lp-foot a { color: var(--signal); text-decoration: none; }
.lp-foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
	/* Cover only. Four spreads at phone width are illegible, and they cost
	   the visitor data for something they cannot read. */
	.lp-fan .a,
	.lp-fan .b,
	.lp-fan .c,
	.lp-fan .d { display: none; }

	.lp-fan {
		height: auto;
		max-width: 17rem;
		margin-top: clamp(2rem, 7vw, 3rem);
	}
	.lp-fan .cover {
		position: static; width: 100%; transform: none;
		margin: 0 auto; border-radius: 10px;
		box-shadow: 0 26px 60px rgba(0, 0, 0, .7);
		animation: lp-float-plain 6.5s ease-in-out infinite;
	}

	.lp-inside li { grid-template-columns: 1fr; }

	/* Hierarchy: the headline must stay clearly louder than the line
	   under it, and they need air between them. */
	.senzarr-lp .lp-sub {
		margin-top: 2.2rem;
		font-size: 1.02rem;
		line-height: 1.45;
		max-width: 26rem;
	}
	.lp-h1 { line-height: 1.02; }

	.lp-trust { font-size: .78rem; margin-bottom: .9rem; }
	.lp-badge {
		font-size: .78rem; padding: .5rem .9rem; margin-bottom: 1.3rem;
		line-height: 1.3; text-align: left;
	}
	.lp-badge b { flex: 0 0 auto; }

	.lp-cta { width: 100%; padding-inline: 1.2rem; }
	.lp-cta-wrap { margin-top: 2rem; }
}

@keyframes lp-float-plain { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }

@media (prefers-reduced-motion: reduce) {
	.lp-fan img { animation: none !important; }
}