/**
 * Stop the Inola Smelter — landing page styles.
 *
 * Built to the 2026 SOF-Web comp (Figma node 5:10 / StoptheSmelter.pdf).
 * Measurements in comments are CSS px at a 1440px viewport, taken from that comp.
 *
 * Everything is scoped under `body.sts-landing` so it overrides the theme's
 * default (light) style.css without conflict. A few rules are deliberately
 * double-scoped (`body.sts-landing .sts-btn`) to beat the global
 * `body.sts-landing a { color: var(--acid) }` rule — don't unwind that.
 *
 * @package Theme
 */

/* --------------------------------------------------------------------------
 * Brand display font. The comp sets every display heading in DxMonstral Smooth
 * (the rounded cut) — not the angular Regular, and not Anton. The rest of the
 * type system (DM Serif Display, Basic, Barlow Condensed, JetBrains Mono, Space
 * Mono, Poppins) is loaded from Google Fonts in functions.php.
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: "DxMonstral Smooth";
	src: url("../fonts/DxMonstral-Smooth.woff2") format("woff2"),
		url("../fonts/DxMonstral-Smooth.woff") format("woff"),
		url("../fonts/DxMonstral-Smooth.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

/* --------------------------------------------------------------------------
 * Tokens
 *
 * Colours and their names track the comp's Figma variables:
 *   color/accent/lime  #c6de2a   color/bg/base     #0a0a0a
 *   color/text/primary #ffffff   color/bg/raised   #141414
 *   color/text/muted   #9a9a9a   color/bg/surface  #0e0e0e
 *   color/text/legal   #5e5e5e   color/border/hair #2a2a2a
 * ------------------------------------------------------------------------ */
body.sts-landing {
	/* Palette. */
	--acid: #c6de2a;
	--acid-bright: #d6e75a;
	--ink: #0a0a0a;
	--ink-raise: #141414;
	--ink-surface: #0e0e0e;
	--paper: #fff;
	--muted: #9a9a9a;
	--faint: #5e5e5e;
	--hairline: #2a2a2a;

	/* Type. */
	--font-display: "DxMonstral Smooth", "Arial Black", system-ui, sans-serif;
	--font-serif: "DM Serif Display", Georgia, serif;
	--font-body: "Basic", system-ui, -apple-system, sans-serif;
	--font-label: "Barlow Condensed", system-ui, sans-serif;
	--font-mono-label: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
	--font-btn: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
	--font-num: "Poppins", system-ui, sans-serif;
	/* Retained sans alias so the dormant modal / Gravity Forms rules still resolve. */
	--font-sans: var(--font-body);

	/* Layout. Content measures 110px..1330px at 1440 => a 1220px column. */
	--container: 1220px;
	--gutter: clamp(20px, 7.6vw, 110px);
	--section-y: clamp(64px, 8.5vw, 122px);

	/* The comp indents the hero copy and each stat ~33px past the column edge. */
	--copy-inset: clamp(0px, 2.3vw, 33px);

	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

html {
	scroll-behavior: smooth;
}

body.sts-landing a {
	color: var(--acid);
	text-decoration: none;
}

body.sts-landing a:hover {
	color: var(--acid-bright);
}

body.sts-landing ::selection {
	background: var(--acid);
	color: var(--ink);
}

body.sts-landing :focus-visible {
	outline: 2px solid var(--acid);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * Shared building blocks
 * ------------------------------------------------------------------------ */
.sts-landing .sts-section {
	position: relative;
	padding: var(--section-y) var(--gutter);
}

/* The comp lays a faint dust texture over the near-black sections. */
.sts-landing .sts-section--dark {
	background-color: var(--ink);
}

.sts-landing .sts-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grain.webp");
	background-size: 500px 500px;
	background-repeat: repeat;
	opacity: 0.24;
	pointer-events: none;
}

.sts-landing .sts-section--raise {
	background-color: var(--ink-raise);
}

.sts-landing .sts-section__inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
}

.sts-landing .sts-accent {
	color: var(--acid);
}

.sts-landing .sts-is-hidden {
	display: none;
}

/* --------------------------------------------------------------------------
 * Eyebrow — Barlow Condensed SemiBold, accent colour, wide tracking.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-eyebrow {
	margin: 0 0 22px;
	font-family: var(--font-label);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--acid);
}

/* The Facts sets its eyebrow a step larger than the hero's. */
.sts-landing .sts-facts .sts-eyebrow {
	font-size: 17px;
}

/* --------------------------------------------------------------------------
 * Two-line display heading: white lead, accent second line. DxMonstral Smooth.
 * The base size (62px) is the comp's section H2; the hero and closing CTA set
 * their own larger sizes below.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-display {
	margin: 0 0 34px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 4.3vw, 62px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
}

.sts-landing .sts-display__lead,
.sts-landing .sts-display__accent {
	display: block;
}

.sts-landing .sts-display__accent {
	color: var(--acid);
}

.sts-landing .sts-display--center {
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Buttons — ~80px tall, Space Mono Bold, 2px lime border, 2px radius.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
}

.sts-landing .sts-actions--center {
	justify-content: center;
}

.sts-landing .sts-actions--nav {
	margin-top: 0;
	gap: 10px;
}

/* body-scoped so the colours beat the global `body.sts-landing a` rule. */
body.sts-landing .sts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 0 clamp(28px, 3.2vw, 44px);
	border: 2px solid transparent;
	border-radius: 2px;
	background: transparent;
	font-family: var(--font-btn);
	font-size: clamp(15px, 1.35vw, 19px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.sts-landing .sts-btn--primary {
	background: var(--acid);
	border-color: var(--acid);
	color: var(--ink);
}

body.sts-landing .sts-btn--primary:hover,
body.sts-landing .sts-btn--primary:focus-visible {
	background: var(--acid-bright);
	border-color: var(--acid-bright);
	color: var(--ink);
}

body.sts-landing .sts-btn--ghost {
	border-color: var(--acid);
	color: var(--paper);
}

body.sts-landing .sts-btn--ghost:hover,
body.sts-landing .sts-btn--ghost:focus-visible {
	background: var(--acid);
	color: var(--ink);
}

/* --------------------------------------------------------------------------
 * Sticky nav — hidden until the hero has scrolled past
 * ------------------------------------------------------------------------ */
.sts-landing .sts-nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 70;
	padding: 12px var(--gutter);
	background: rgba(10, 10, 10, 0.92);
	border-bottom: 1px solid var(--hairline);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);

	/* Hidden state. `visibility` also keeps it out of the tab order. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}

.sts-landing .sts-nav--visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sts-landing .sts-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--container);
	margin: 0 auto;
}

.sts-landing .sts-nav__brand {
	margin: 0;
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The nav's buttons are a compact version of the pair. */
.sts-landing .sts-actions--nav .sts-btn {
	min-height: 46px;
	padding: 0 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
 * Hero
 *
 * Full-bleed farmland-and-smelter photo under a diagonal scrim: the sky and
 * stacks stay readable top-right while the copy column bottom-left is darkened
 * for contrast, fading to solid ink at the base so it meets The Facts cleanly.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(560px, 57vw, 820px);
	padding: clamp(72px, 10.7vw, 154px) var(--gutter) clamp(72px, 11vw, 159px);
	background-color: var(--ink);
}

/* The photograph + scrim live on their own layer so it can "breathe" — a very
   slow scale drift — without moving the copy or the smog canvas. Baseline scale
   is >1 so the zoom never exposes the photo's edges inside overflow:hidden. */
.sts-landing .sts-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(207deg, rgba(10, 10, 10, 0.28) 22%, rgba(10, 10, 10, 0.7) 52%, rgba(10, 10, 10, 0.94) 80%, var(--ink) 100%),
		linear-gradient(90deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.5) 38%, rgba(10, 10, 10, 0.14) 70%, rgba(10, 10, 10, 0) 100%),
		var(--sts-hero-bg, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	transform: scale(1.04);
	animation: sts-hero-breathe 40s ease-in-out infinite;
	will-change: transform;
}

@keyframes sts-hero-breathe {
	0%,
	100% {
		transform: scale(1.04);
	}
	50% {
		transform: scale(1.1);
	}
}

/* Interactive smog canvas: drifts OVER everything, including the copy and
   buttons (z-index above the copy's 2). pointer-events:none makes it invisible
   to hit-testing, so clicks pass straight through to the buttons/links beneath
   while hero-fog.js still reads the pointer from the section itself. */
.sts-landing .sts-hero__fog {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* Feather the smog to nothing before it reaches any edge so it reads as haze
	   held INSIDE the frame. Without this the canvas clips on a hard line and the
	   upward-drifting, toroidally-wrapping puffs get visibly guillotined at the
	   top/sides — which is what "the smoke leaves the page" looks like. Two inset
	   linear gradients composited with intersect give a soft rectangular vignette
	   (opaque only where BOTH are opaque = every edge softened). */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 clamp(40px, 9%, 130px), #000 calc(100% - clamp(40px, 9%, 130px)), transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 clamp(40px, 12%, 140px), #000 calc(100% - clamp(40px, 12%, 140px)), transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 clamp(40px, 9%, 130px), #000 calc(100% - clamp(40px, 9%, 130px)), transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 clamp(40px, 12%, 140px), #000 calc(100% - clamp(40px, 12%, 140px)), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Black fade along the hero's bottom edge so the smog (and photo) dissolve into
   the ink instead of clipping on a hard line where the section ends. Sits above
   the smog (z-index 4) but only in the empty band below the buttons, and its top
   ~8% is transparent, so the copy is never touched. */
.sts-landing .sts-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: clamp(120px, 24%, 220px);
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, transparent 8%, var(--ink) 100%);
}

.sts-landing .sts-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
}

/* Wide enough that "INOLA SMELTER" stays on one line at the comp's 100px. */
.sts-landing .sts-hero__copy {
	max-width: 720px;
	margin-left: var(--copy-inset);
}

.sts-landing .sts-hero__title {
	margin: 0 0 16px;
	font-size: clamp(46px, 7vw, 100px);
	line-height: 0.94;
	letter-spacing: -0.02em;
	text-wrap: initial;
}

/* DM Serif Display, uppercase and upright — the comp is not italic here. */
.sts-landing .sts-hero__subhead {
	margin: 0 0 18px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.26vw, 32.5px);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--paper);
}

.sts-landing .sts-hero__intro {
	margin: 0;
	max-width: 600px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--muted);
}

.sts-landing .sts-hero .sts-actions {
	margin-top: 30px;
}

.sts-landing .sts-hero__sentinel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * The Facts
 * ------------------------------------------------------------------------ */
/* The "Get the Facts" buttons and the skip link both target #facts. By the time
   either lands here the sticky bar is on screen (its threshold is the bottom of
   the hero), so hold the section's top edge clear of it. */
.sts-landing .sts-facts {
	padding-top: clamp(72px, 11vw, 158px);
	scroll-margin-top: 24px;
}

/* The skip link targets #facts and the section carries tabindex="-1" so focus
   actually lands here for keyboard/AT users. It is a programmatic focus target,
   not an interactive control, so suppress the ring on the whole band. */
.sts-landing .sts-facts:focus {
	outline: none;
}

.sts-landing .sts-facts__intro {
	margin: 0;
	max-width: 980px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--muted);
}

/* Four across, on an even pitch at 1440. */
.sts-landing .sts-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 0;
	margin-top: clamp(56px, 9vw, 130px);
}

.sts-landing .sts-stat {
	padding-left: var(--copy-inset);
}

.sts-landing .sts-stat__value {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(30px, 3.1vw, 44px);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--acid);
}

.sts-landing .sts-stat__label {
	margin: 14px 0 0;
	font-family: var(--font-mono-label);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Three bordered cards, 24px apart, on the surface tone. */
.sts-landing .sts-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: clamp(56px, 9vw, 130px);
}

.sts-landing .sts-card {
	display: flex;
	flex-direction: column;
	padding: 40px 40px 44px;
	background: var(--ink-surface);
	border: 1px solid var(--hairline);
	border-radius: 3px;
}

.sts-landing .sts-card__num {
	margin: 0 0 35px;
	font-family: var(--font-num);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--acid);
}

/* DM Serif Display, uppercase. Author-controlled line breaks come through as
   <br>. 28px keeps the longest title on two lines inside the card column. */
.sts-landing .sts-card__title {
	margin: 0 0 18px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(22px, 1.95vw, 28px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--paper);
}

.sts-landing .sts-card__body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
 * Timeline — "How we got here"
 *
 * NOT CURRENTLY RENDERED. The 2026 comp drops this section, so the renderer no
 * longer includes it (see inc/landing-page.php → theme_landing_content()). The
 * styles are kept intact so the section can be switched back on without a
 * rebuild.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-timeline__grid {
	display: grid;
	grid-template-columns: 453fr 684fr;
	gap: clamp(32px, 5.8vw, 83px);
	align-items: start;
}

.sts-landing .sts-timeline__media {
	margin: 0;
}

.sts-landing .sts-timeline__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 453 / 575;
	object-fit: cover;
	object-position: center top;
}

.sts-landing .sts-timeline__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sts-landing .sts-timeline__row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 0 18px;
	padding: 23px 0;
	border-top: 1px solid var(--hairline);
}

.sts-landing .sts-timeline__date {
	font-family: var(--font-mono-label);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--acid);
}

.sts-landing .sts-timeline__text {
	font-size: 15px;
	line-height: 1.57;
	color: var(--muted);
}

.sts-landing .sts-timeline__closing {
	margin: clamp(24px, 2.2vw, 32px) 0 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.25vw, 32px);
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.sts-landing .sts-timeline__closing-lead,
.sts-landing .sts-timeline__closing-accent {
	display: block;
}

.sts-landing .sts-timeline__closing-accent {
	color: var(--acid);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
 * Closing CTA
 * ------------------------------------------------------------------------ */
.sts-landing .sts-cta {
	padding-top: clamp(80px, 11.5vw, 166px);
	padding-bottom: clamp(88px, 13vw, 192px);
}

.sts-landing .sts-cta__inner {
	text-align: center;
}

.sts-landing .sts-cta .sts-display {
	margin-bottom: clamp(28px, 3.4vw, 45px);
	font-size: clamp(34px, 4.6vw, 66px);
}

.sts-landing .sts-cta__body {
	margin: 0 auto;
	max-width: 846px;
	line-height: 1.68;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
 * Closing brand band — giant "STOP THE INOLA SMELTER" over a dusk landscape
 * ------------------------------------------------------------------------ */
.sts-landing .sts-brandband {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: clamp(200px, 21.8vw, 314px);
	padding: clamp(48px, 9vw, 130px) var(--gutter);
	background-color: var(--ink);
	text-align: center;
}

.sts-landing .sts-brandband__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.38;
	pointer-events: none;
	user-select: none;
}

/* Interactive smog over the band's photo — same engine as the hero. */
.sts-landing .sts-brandband__fog {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/* Same edge-feather as the hero so the smog stays contained within the band
	   rather than clipping on the section's hard sides. (The ::after ink fade
	   already softens the top/bottom; this adds the left/right the fade misses.) */
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 clamp(32px, 8%, 110px), #000 calc(100% - clamp(32px, 8%, 110px)), transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 clamp(24px, 10%, 90px), #000 calc(100% - clamp(24px, 10%, 90px)), transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 clamp(32px, 8%, 110px), #000 calc(100% - clamp(32px, 8%, 110px)), transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 clamp(24px, 10%, 90px), #000 calc(100% - clamp(24px, 10%, 90px)), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Fade the photo + smog into ink at BOTH the top and bottom edges, so the band
   blends into the sections above and below instead of ending on hard lines. The
   middle band stays clear for the wordmark. */
.sts-landing .sts-brandband::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		var(--ink) 0%,
		transparent 26%,
		transparent 74%,
		var(--ink) 100%
	);
}

.sts-landing .sts-brandband__title {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: var(--container);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 5.55vw, 80px);
	line-height: 0.94;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

.sts-landing .sts-brandband__accent {
	color: var(--acid);
}

/* --------------------------------------------------------------------------
 * Footer — one centred line
 * ------------------------------------------------------------------------ */
.sts-landing .sts-footer {
	padding: 48px var(--gutter);
	background: var(--ink-surface);
	border-top: 1px solid var(--hairline);
	text-align: center;
}

.sts-landing .sts-footer__disclaimer {
	margin: 0;
	font-family: var(--font-label);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
}

.sts-landing .sts-footer__legal {
	margin: 14px 0 0;
	font-family: var(--font-label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sts-landing .sts-footer__link {
	color: var(--faint);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sts-landing .sts-footer__link:hover,
.sts-landing .sts-footer__link:focus-visible {
	color: var(--paper);
	border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
 * Signup modal
 *
 * NOT CURRENTLY RENDERED (see footer-landing.php). Kept so the form can be
 * switched back on without a rebuild.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-modal {
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: min(90vh, 900px);
	padding: 0;
	border: 1px solid var(--acid);
	background: var(--ink-raise);
	color: var(--paper);
	overflow: auto;
	overscroll-behavior: contain;
}

/* Scroll lock while the dialog is open. Compensating for the vanished scrollbar
   on both body and the fixed nav keeps the layout from jumping sideways. */
body.sts-landing.sts-scroll-locked {
	overflow: hidden;
	padding-right: var(--sts-scrollbar, 0px);
}

body.sts-landing.sts-scroll-locked .sts-nav {
	padding-right: calc(var(--gutter) + var(--sts-scrollbar, 0px));
}

.sts-landing .sts-modal::backdrop {
	background: rgba(4, 4, 4, 0.82);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.sts-landing .sts-modal__panel {
	position: relative;
	padding: clamp(30px, 4vw, 48px) clamp(20px, 3.4vw, 44px) clamp(26px, 3.4vw, 40px);
}

body.sts-landing .sts-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

body.sts-landing .sts-modal__close:hover,
body.sts-landing .sts-modal__close:focus-visible {
	color: var(--acid);
}

.sts-landing .sts-modal__title {
	margin: 0 0 14px;
	padding-right: 40px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.05;
	text-transform: uppercase;
}

.sts-landing .sts-modal__intro {
	margin: 0 0 26px;
	font-size: 15.5px;
	color: var(--muted);
}

.sts-landing .sts-modal__consent,
.sts-landing .sts-modal__notice {
	margin: 20px 0 0;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--faint);
}

/* --------------------------------------------------------------------------
 * Gravity Forms
 *
 * Gravity Forms 2.10's "orbital" theme is driven almost entirely by custom
 * properties (~770 of them), so the campaign look is applied by re-declaring the
 * relevant ones rather than by out-specifying the plugin's selectors — far less
 * brittle across GF updates. The explicit rules that follow cover the handful of
 * things properties don't express (field grid, full-width submit) and double as a
 * fallback if the form is ever switched to GF's legacy theme, where the
 * properties have no effect.
 * ------------------------------------------------------------------------ */
.sts-landing .sts-modal .gform_wrapper {
	/* Controls. */
	--gf-ctrl-font-family: var(--font-sans);
	--gf-ctrl-font-size: 15.5px;
	--gf-ctrl-color: var(--paper);
	--gf-ctrl-size: 54px;
	--gf-ctrl-bg-color: #16161a;
	--gf-ctrl-bg-color-hover: #16161a;
	--gf-ctrl-bg-color-focus: #16161a;
	--gf-ctrl-bg-color-error: #16161a;
	--gf-ctrl-border-color: rgba(255, 255, 255, 0.16);
	--gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.3);
	--gf-ctrl-border-color-focus: var(--acid);
	--gf-ctrl-border-color-error: #e4572e;
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-accent-color: var(--acid);

	/* Labels. */
	--gf-ctrl-label-color-primary: var(--muted);
	--gf-ctrl-label-color-secondary: var(--muted);
	--gf-ctrl-label-color-tertiary: var(--muted);
	--gf-ctrl-label-color-req: var(--acid);
	--gf-ctrl-label-font-family-primary: var(--font-sans);
	--gf-ctrl-label-font-family-secondary: var(--font-sans);

	/* Descriptions, including the consent checkbox text. */
	--gf-ctrl-desc-color: var(--muted);
	--gf-ctrl-desc-color-error: #ffb59e;
	--gf-ctrl-desc-font-family: var(--font-sans);
	--gf-ctrl-desc-border-color-consent: rgba(255, 255, 255, 0.16);
	--gf-ctrl-desc-border-color-consent-focus: var(--acid);

	/* Checkboxes. */
	--gf-ctrl-choice-check-color: var(--ink);
	--gf-ctrl-checkbox-check-radius: 0;

	/* Submit. */
	--gf-ctrl-btn-font-family: var(--font-sans);
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-btn-size: 64px;
	--gf-ctrl-btn-bg-color-primary: var(--acid);
	--gf-ctrl-btn-bg-color-hover-primary: var(--acid-bright);
	--gf-ctrl-btn-bg-color-focus-primary: var(--acid-bright);
	--gf-ctrl-btn-border-color-primary: var(--acid);
	--gf-ctrl-btn-border-color-hover-primary: var(--acid-bright);
	--gf-ctrl-btn-border-color-focus-primary: var(--acid-bright);
	--gf-ctrl-btn-color-primary: var(--ink);
	--gf-ctrl-btn-color-hover-primary: var(--ink);
	--gf-ctrl-btn-color-focus-primary: var(--ink);

	--gf-color-danger: #e4572e;
}

.sts-landing .sts-modal .gform_wrapper,
.sts-landing .sts-modal .gform_wrapper form {
	margin: 0;
}

.sts-landing .sts-modal .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sts-landing .sts-modal .gfield {
	min-width: 0;
	margin: 0;
	grid-column: span 2;
}

/* First and last name sit side by side; everything else spans the row. */
.sts-landing .sts-modal .gfield--type-name,
.sts-landing .sts-modal .gfield--width-half {
	grid-column: span 1;
}

.sts-landing .sts-modal .gfield_label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

.sts-landing .sts-modal .gfield_required {
	color: var(--acid);
}

.sts-landing .sts-modal .ginput_container {
	margin: 0;
}

.sts-landing .sts-modal input[type="text"],
.sts-landing .sts-modal input[type="email"],
.sts-landing .sts-modal input[type="tel"],
.sts-landing .sts-modal input[type="number"],
.sts-landing .sts-modal textarea,
.sts-landing .sts-modal select {
	width: 100%;
	min-width: 0;
	padding: 15px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 0;
	background: #16161a;
	color: var(--paper);
	font-family: var(--font-sans);
	font-size: 15.5px;
	line-height: 1.4;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sts-landing .sts-modal input::placeholder,
.sts-landing .sts-modal textarea::placeholder {
	color: #6f6f6f;
	opacity: 1;
}

.sts-landing .sts-modal input:focus,
.sts-landing .sts-modal textarea:focus,
.sts-landing .sts-modal select:focus {
	border-color: var(--acid);
	outline: none;
}

/* Consent / SMS opt-in checkboxes. */
.sts-landing .sts-modal .gfield--type-consent .ginput_container_consent,
.sts-landing .sts-modal .gfield_consent .ginput_container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sts-landing .sts-modal .gfield--type-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--acid);
	cursor: pointer;
}

.sts-landing .sts-modal .gfield--type-consent label,
.sts-landing .sts-modal .gfield_consent label {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

.sts-landing .sts-modal .gfield--type-consent .gfield_label,
.sts-landing .sts-modal .gfield--type-html .gfield_label {
	display: none;
}

/* Submit. */
.sts-landing .sts-modal .gform_footer {
	margin: 20px 0 0;
	padding: 0;
}

body.sts-landing .sts-modal .gform_footer input[type="submit"],
body.sts-landing .sts-modal .gform_button {
	display: block;
	width: 100%;
	min-height: 64px;
	padding: 0 28px;
	border: 1px solid var(--acid);
	border-radius: 0;
	background: var(--acid);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

body.sts-landing .sts-modal .gform_footer input[type="submit"]:hover,
body.sts-landing .sts-modal .gform_button:hover {
	background: var(--acid-bright);
}

/* Validation + confirmation. */
.sts-landing .sts-modal .gform_validation_errors {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #e4572e;
	background: rgba(228, 87, 46, 0.12);
	color: #ffb59e;
	font-size: 13.5px;
	line-height: 1.55;
}

.sts-landing .sts-modal .gform_validation_errors h2,
.sts-landing .sts-modal .gform_validation_errors ol,
.sts-landing .sts-modal .gform_validation_errors li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	color: inherit;
	list-style: none;
}

.sts-landing .sts-modal .gfield_validation_message,
.sts-landing .sts-modal .validation_message {
	margin: 8px 0 0;
	color: #ffb59e;
	font-size: 12.5px;
	line-height: 1.5;
}

.sts-landing .sts-modal .gfield_error input[type="text"],
.sts-landing .sts-modal .gfield_error input[type="email"],
.sts-landing .sts-modal .gfield_error input[type="tel"] {
	border-color: #e4572e;
}

.sts-landing .sts-modal .gform_confirmation_message {
	padding: 26px 4px;
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	color: var(--acid);
}

.sts-landing .sts-modal .gform_ajax_spinner {
	display: inline-block;
	margin-left: 12px;
	vertical-align: middle;
}

.sts-landing .sts-modal .gform_hidden,
.sts-landing .sts-modal .gf_invisible {
	display: none;
}

/* --------------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
	body.sts-landing {
		--gutter: clamp(20px, 5vw, 56px);
	}

	.sts-landing .sts-hero {
		min-height: 72vw;
	}

	.sts-landing .sts-hero__copy {
		max-width: 640px;
		margin-left: 0;
	}

	.sts-landing .sts-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px;
	}

	.sts-landing .sts-stat {
		padding-left: 0;
	}

	.sts-landing .sts-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sts-landing .sts-timeline__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.sts-landing .sts-timeline__media img {
		aspect-ratio: 16 / 10;
		object-position: center 20%;
	}

	.sts-landing .sts-timeline__closing {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------ */
@media (max-width: 700px) {
	body.sts-landing {
		font-size: 16px;
	}

	/* The scrim already darkens the copy column; on a narrow viewport that
	   column is most of the width, so the landscape reads behind the copy
	   without a second treatment. */
	.sts-landing .sts-hero {
		min-height: 0;
		padding-top: clamp(88px, 22vw, 132px);
	}

	.sts-landing .sts-hero::before {
		background-position: center right;
	}

	.sts-landing .sts-actions .sts-btn {
		flex: 1 1 100%;
		min-height: 64px;
	}

	.sts-landing .sts-card {
		padding: 30px 26px 34px;
	}

	.sts-landing .sts-timeline__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding: 22px 0;
	}

	/* The nav keeps both CTAs; the brand gives up its space instead. */
	.sts-landing .sts-nav__brand {
		display: none;
	}

	.sts-landing .sts-nav__inner {
		justify-content: stretch;
	}

	.sts-landing .sts-actions--nav {
		flex: 1 1 auto;
	}

	.sts-landing .sts-actions--nav .sts-btn {
		flex: 1 1 0;
		min-height: 44px;
		padding: 0 10px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}

	.sts-landing .sts-modal .gform_fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.sts-landing .sts-modal .gfield,
	.sts-landing .sts-modal .gfield--type-name,
	.sts-landing .sts-modal .gfield--width-half {
		grid-column: span 1;
	}
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.sts-landing .sts-nav {
		transform: none;
		transition: opacity 0.01s linear, visibility 0.01s;
	}

	.sts-landing .sts-nav--visible {
		transform: none;
	}

	/* Hold the hero photo still (hero-fog.js already skips the smog animation). */
	.sts-landing .sts-hero::before {
		animation: none;
	}
}