/* ==========================================================================
   Vertwo Premium — Components
   --------------------------------------------------------------------------
   Component-level styles: nav, footer, buttons, etc.
   These are the styles that apply to specific named widgets.
   --------------------------------------------------------------------------
   Most of this is ported verbatim from the prototype (01-homepage.html).
   Where prototype CSS uses .pb-canvas (the canvas-rendered pixel field
   on the "Join Us" button), we've replaced it with a simpler rotating-
   beam variant. The fancy canvas version can be added in a later polish
   pass — for now we have the rotating beam, glow, and label.
   ========================================================================== */


/* ╔════════════════════════════════════════════════════════════════════╗
   ║  LIQUID GLASS NAV — floating rounded box                          ║
   ╚════════════════════════════════════════════════════════════════════╝ */

nav#nav {
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%) translateY(0);
	z-index: 300;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 14px 10px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: saturate(220%) blur(36px);
	-webkit-backdrop-filter: saturate(220%) blur(36px);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow:
		0 8px 40px rgba(0, 0, 0, 0.30),
		0 2px 0 rgba(255, 255, 255, 0.08) inset;
	transition:
		transform .5s cubic-bezier(.16, 1, .3, 1),
		opacity .5s ease,
		background .4s,
		border-color .4s,
		box-shadow .4s;
	white-space: nowrap;
}

nav#nav.light {
	background: rgba(248, 248, 252, 0.60);
	border-color: rgba(200, 200, 210, 0.25);
	box-shadow:
		0 8px 36px rgba(0, 0, 0, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

nav#nav.hidden {
	transform: translateX(-50%) translateY(calc(-100% - 16px));
	opacity: 0;
	pointer-events: none;
}

/* v0.32.30 — keep nav hidden while a lightbox has the body scroll-locked.
   The lock helper in main.js sets body[data-vw-scroll-lock] when the
   lightbox opens (and removes it on close). Without this rule, the
   scroll-hide-on-down/show-on-up logic in main.js sees scrollY change
   from N → 0 when the lock engages and shows the nav OVER the lightbox.
   Higher specificity than `nav#nav.hidden` so this rule wins regardless
   of the .hidden class state. */
body[data-vw-scroll-lock] nav#nav {
	transform: translateX(-50%) translateY(calc(-100% - 16px)) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ── Pill (the inner rounded container that holds menu links) ── */
.nav-pill {
	display: flex;
	align-items: center;
	padding: 5px 8px;
	border-radius: 980px;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.32);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -1px 0 rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: visible;
}

nav#nav.light .nav-pill {
	background: rgba(255, 255, 255, 0.78);
	border-color: rgba(0, 0, 0, 0.09);
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.07),
		inset 0 1px 0 #fff;
}

/* ── Magnetic hover pill — slides under hovered nav item ── */
.nav-hover-pill {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 980px;
	box-sizing: border-box;
	background: var(--orange);
	border: 1px solid rgba(245, 166, 35, 0.6);
	box-shadow:
		0 0 14px rgba(242, 122, 15, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease;
	will-change: transform, width, height;
	contain: layout paint;
	transform: translate3d(0, 0, 0);
	z-index: 0;
}

nav#nav.light .nav-hover-pill {
	background: rgba(242, 122, 15, 0.18);
	border-color: rgba(242, 122, 15, 0.50);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.nav-hover-pill.visible {
	opacity: 1;
}

/* ── Logo ── */
/* v0.14.6 — container-holds-the-size pattern.
   ──────────────────────────────────────────────────────────────
   v0.14.5 set width/height directly on the SVG. Chrome rendered
   correctly at 153×52, but Safari (macOS) kept showing it small
   and iPad Safari behaved differently across orientations:
   landscape was tiny, portrait the logo disappeared entirely.
   Root cause is a long-standing WebKit quirk: when an inline
   <svg> has BOTH explicit width/height attributes AND CSS
   width/height inside a flex parent, Safari's layout pipeline
   can resolve the outer box from the SVG's intrinsic size
   (1274.4×433 here) instead of the CSS values, then either
   overflow the parent or zero out the box depending on flex
   constraints. Chrome resolves CSS-first cleanly; Safari does
   not.

   v0.14.6 sidesteps the SVG sizing pipeline entirely: the
   <a class="nav-logo"> wrapper carries the fixed pixel
   dimensions and the SVGs inside fill 100% of that wrapper.
   Safari now sees a vanilla 153×52 block with `flex: 0 0 auto`
   — no SVG intrinsic-size to negotiate, no flex collapse edge
   case, no orientation-dependent disappearing. The SVG itself
   stretches to fit via its viewBox and the default
   preserveAspectRatio="xMidYMid meet". Belt and suspenders:
   min-width and min-height on the wrapper match width/height
   to defeat any flex-shrink path that survives, plus
   aspect-ratio as a last-resort backstop.

   The display:flex on .nav-logo from v0.14.5 is gone — switching
   to display:block keeps the two SVG variants (one shown, one
   display:none) layered cleanly without flex doing anything. */
.nav-logo {
	display: block;
	flex: 0 0 auto;
	width: 153px;
	min-width: 153px;
	height: 52px;
	min-height: 52px;
	aspect-ratio: 1274.4 / 433;
	position: relative;
}

.nav-logo-svg {
	width: 100%;
	height: 100%;
	display: block;
}

nav#nav.light .nav-logo-svg.logo-dark { display: block; }
nav#nav.light .nav-logo-svg.logo-white { display: none; }
nav:not(.light) .nav-logo-svg.logo-dark { display: none; }
nav:not(.light) .nav-logo-svg.logo-white { display: block; }

/* ── Menu links ── */
.nav-links {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 3px;
	list-style: none;
	position: relative;
	z-index: 1;
	margin: 0;
}

.nav-links li {
	display: flex;
	align-items: center;
}

.nav-links a {
	font-size: 0.95rem;
	font-weight: 700;
	font-family: var(--font-title);
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.92);
	padding: 8px 18px;
	border-radius: 980px;
	transition: color .2s;
	display: block;
	position: relative;
	z-index: 1;
}

.nav-links a:hover {
	color: #fff !important;
	background: none;
}

nav#nav.light .nav-links a {
	color: rgba(26, 26, 26, 0.80);
}

nav.light .nav-links a:hover {
	color: var(--black) !important;
	background: none;
}


/* ╔════════════════════════════════════════════════════════════════════╗
   ║  JOIN US — animated CTA button (simplified from prototype)         ║
   ╚════════════════════════════════════════════════════════════════════╝
   Step 2 simplified version: rotating gradient beam border + soft pulse
   glow + label. The prototype's full canvas-rendered pixel field is a
   separate enhancement we can add later.                                  */

.pb-wrap {
	position: relative;
	display: inline-block;
	padding: 2px;
	border-radius: 999px;
	isolation: isolate;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}

.pb-wrap:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 4px;
}

/* Rotating beam */
.pb-wrap::before {
	content: "";
	position: absolute;
	inset: -80%;
	background: conic-gradient(
		from 0deg,
		transparent                0deg,
		rgba(242, 122, 15, 0.10)  25deg,
		rgba(242, 122, 15, 0.50)  55deg,
		var(--gold)               85deg,
		rgba(242, 122, 15, 0.50) 115deg,
		rgba(242, 122, 15, 0.10) 145deg,
		transparent              175deg,
		transparent              205deg,
		rgba(242, 122, 15, 0.12) 235deg,
		rgba(242, 122, 15, 0.45) 265deg,
		var(--orange)            295deg,
		rgba(242, 122, 15, 0.45) 325deg,
		rgba(242, 122, 15, 0.12) 355deg
	);
	animation: pb-spin 7s linear infinite;
	z-index: -1;
}

.pb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #141414;
	border-radius: 999px;
	padding: 9px 26px;
	cursor: pointer;
	overflow: hidden;
	user-select: none;
}

.pb-glow {
	position: absolute;
	left: 50%;
	bottom: -35%;
	transform-origin: center bottom;
	transform: translateX(-50%);
	width: 90%;
	height: 115%;
	background: radial-gradient(
		ellipse at center bottom,
		rgba(242, 122, 15, 0.70),
		rgba(245, 166, 35, 0.32) 38%,
		rgba(242, 122, 15, 0.08) 65%,
		transparent 82%
	);
	animation: pb-pulse 3.2s ease-in-out infinite;
	pointer-events: none;
	filter: blur(10px);
	z-index: 0;
}

/* Pixel field — drawn only during hover / click */
.pb-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.pb-vignette {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 65%;
	height: 230%;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.70)   0%,
		rgba(0, 0, 0, 0.50)  22%,
		rgba(0, 0, 0, 0.22)  48%,
		transparent          80%
	);
	pointer-events: none;
	filter: blur(3px);
	z-index: 2;
}

.pb-label {
	position: relative;
	z-index: 3;
	font-family: var(--font-title);
	font-weight: 900;
	font-size: 0.95rem;
	letter-spacing: -0.005em;
	color: #FFFFFF;
	pointer-events: none;
	white-space: nowrap;
}

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

@keyframes pb-pulse {
	0%, 100% { opacity: .45; transform: translateX(-50%) scale(.85); }
	50%      { opacity: .78; transform: translateX(-50%) scale(1.12); }
}

/* Pause CSS animations when the button is off-screen (JS toggles class) */
.pb-wrap.pb-paused::before,
.pb-wrap.pb-paused .pb-glow { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.pb-wrap::before,
	.pb-glow {
		animation: none;
	}
	.pb-glow { opacity: .55; }
}


/* ╔════════════════════════════════════════════════════════════════════╗
   ║  HAMBURGER + MOBILE MENU                                           ║
   ╚════════════════════════════════════════════════════════════════════╝ */

.nav-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 9px;
	flex-shrink: 0;
	margin-left: 6px;
	transition: background .2s;
}

nav.light .nav-hamburger {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.12);
}

.nav-hamburger:hover {
	background: rgba(255, 255, 255, 0.22);
}

.hb-line {
	width: 15px;
	height: 1.5px;
	border-radius: 2px;
	background: #fff;
	transition: all .3s;
	display: block;
}

nav.light .hb-line {
	background: var(--black);
}

.nav-hamburger.open .hb-line:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}
.nav-hamburger.open .hb-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.nav-hamburger.open .hb-line:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* ── Mobile menu — expand-down inside the nav body ── */
.mobile-menu {
	display: none;
}

.mobile-menu a {
	display: block;
	padding: 14px 18px;
	border-radius: 12px;
	font-family: var(--font-title);
	letter-spacing: -0.01em;
	font-size: 1.05rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.92);
	transition:
		background .3s ease,
		color .3s ease,
		box-shadow .3s ease,
		opacity .4s cubic-bezier(.16, 1, .3, 1),
		transform .4s cubic-bezier(.16, 1, .3, 1);
	opacity: 0;
	transform: translateY(-6px);
}

nav.light .mobile-menu a {
	color: rgba(26, 26, 26, 0.80);
}

.mobile-menu a:hover {
	background: var(--orange);
	box-shadow:
		0 0 14px rgba(242, 122, 15, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

nav.light .mobile-menu a:hover {
	background: rgba(242, 122, 15, 0.18);
	color: var(--black);
	box-shadow: none;
}

nav.mobile-open .mobile-menu a {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger reveal — see prototype for the full 5-value transition syntax */
nav.mobile-open .mobile-menu a:nth-of-type(1) { transition-delay: 0s, 0s, 0s, .18s, .18s; }
nav.mobile-open .mobile-menu a:nth-of-type(2) { transition-delay: 0s, 0s, 0s, .22s, .22s; }
nav.mobile-open .mobile-menu a:nth-of-type(3) { transition-delay: 0s, 0s, 0s, .26s, .26s; }
nav.mobile-open .mobile-menu a:nth-of-type(4) { transition-delay: 0s, 0s, 0s, .30s, .30s; }
nav.mobile-open .mobile-menu a:nth-of-type(5) { transition-delay: 0s, 0s, 0s, .34s, .34s; }
nav.mobile-open .mobile-menu a:nth-of-type(6) { transition-delay: 0s, 0s, 0s, .38s, .38s; }

.mobile-menu-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
	margin: 8px 6px;
}

nav.light .mobile-menu-divider {
	background: rgba(0, 0, 0, 0.10);
}

.mobile-joinus {
	text-align: center;
	margin-top: 4px;
	padding: 12px;
	background: var(--orange);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.9rem;
}

.mobile-joinus:hover {
	background: var(--black) !important;
	color: var(--orange) !important;
}


/* ╔════════════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE NAV — verbatim from prototype                          ║
   ║  Switches to hamburger at 1023px and below                         ║
   ╚════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 1023px) {
	nav#nav {
		top: 12px;
		padding: 10px 14px 10px 18px;
		width: calc(100% - 20px);
		left: 10px;
		transform: none;
		border-radius: 16px;
		justify-content: space-between;
		flex-wrap: wrap;
		row-gap: 0;
		gap: 0 10px;
	}
	nav#nav.hidden {
		transform: translateY(calc(-100% - 12px));
		opacity: 0;
		pointer-events: none;
	}
	.nav-pill,
	.nav-hover-pill,
	.nav-links,
	.pb-wrap {
		display: none !important;
	}
	.nav-hamburger {
		display: flex;
	}
	.nav-logo {
		/* v0.14.6 — container-holds-the-size pattern (see the desktop
		   rule for full diagnostic; pixel dimensions track the same
		   1274.4:433 ratio). 48 × 1274.4 / 433 = 141.27 → 141px. */
		width: 141px;
		min-width: 141px;
		height: 48px;
		min-height: 48px;
	}

	/* Mobile menu lives INSIDE the nav and grows its height on tap */
	.mobile-menu {
		display: block;
		width: 100%;
		order: 99;
		max-height: 0;
		overflow: hidden;
		margin-top: 0;
		padding: 0 4px;
		transition:
			max-height .6s cubic-bezier(.7, 0, .3, 1),
			margin-top  .6s cubic-bezier(.7, 0, .3, 1),
			padding     .6s cubic-bezier(.7, 0, .3, 1);
	}
	nav.mobile-open .mobile-menu {
		max-height: 520px;
		margin-top: 10px;
		padding: 4px 4px 2px;
	}
}

/* Touch-device link padding — applies to ≥1024px touch devices (iPad Pro etc) */
@media (hover: none) {
	.nav-links a {
		padding: 13px 20px;
	}
}


/* ╔════════════════════════════════════════════════════════════════════╗
   ║  FOOTER — 3-column dark with contact form                           ║
   ╚════════════════════════════════════════════════════════════════════╝ */

footer {
	background: #1d1d1f;
	padding: 52px 24px 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.65);
}

.ft-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ft-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 28px;
}

.ft-left-col {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 56px;
	align-items: start;
}

/* Brand block */
.ft-brand-logo {
	display: flex;
	align-items: flex-start;
	margin-top: -18px;
	margin-bottom: 18px;
}

.ft-brand-logo svg {
	height: 80px;
	width: auto;
	display: block;
}

.ft-brand-tag {
	font-size: 0.88rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.52);
	line-height: 1.75;
	margin-bottom: 24px;
}

/* Socials */
.ft-socials {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ft-soc {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 980px;
	color: rgba(255, 255, 255, 0.62);
	background: transparent;
	text-decoration: none;
	overflow: hidden;
	transition:
		color .55s cubic-bezier(.22, 0.61, 0.36, 1),
		border-color .55s cubic-bezier(.22, 0.61, 0.36, 1),
		background .55s cubic-bezier(.22, 0.61, 0.36, 1),
		padding .75s cubic-bezier(.22, 0.61, 0.36, 1);
}

.ft-soc .ft-soc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ft-soc .ft-soc-icon svg {
	width: 16px;
	height: 16px;
}

.ft-soc .ft-soc-label {
	display: inline-block;
	max-width: 0;
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.005em;
	opacity: 0;
	transform: translateX(-4px);
	transition:
		max-width .75s cubic-bezier(.22, 0.61, 0.36, 1),
		margin-left .75s cubic-bezier(.22, 0.61, 0.36, 1),
		opacity .55s cubic-bezier(.22, 0.61, 0.36, 1),
		transform .75s cubic-bezier(.22, 0.61, 0.36, 1);
}

.ft-soc:hover {
	color: #fff;
	border-color: rgba(242, 122, 15, 0.55);
	background: rgba(242, 122, 15, 0.12);
	padding: 0 14px;
}

.ft-soc:hover .ft-soc-label {
	max-width: 120px;
	margin-left: 8px;
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 768px) {
	.ft-soc {
		width: 38px;
		height: 38px;
		padding: 0;
		justify-content: center;
	}
	.ft-soc .ft-soc-label {
		display: none;
	}
	.ft-soc:hover {
		padding: 0;
		color: var(--orange);
		border-color: rgba(242, 122, 15, 0.50);
		background: rgba(242, 122, 15, 0.08);
	}
}

/* Pages column */
.ft-col-head {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 16px;
}

.ft-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 0;
	margin: 0;
}

.ft-links a {
	font-size: 0.88rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.65);
	transition: color .2s;
}

.ft-links a:hover {
	color: var(--orange);
}

/* Contact form */
.ft-contact-head {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 16px;
}

.ft-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ft-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ft-input {
	width: 100%;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 300;
	color: #fff;
	outline: none;
	transition:
		border-color .2s,
		background .2s;
}

.ft-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.ft-input:focus {
	border-color: rgba(242, 122, 15, 0.5);
	background: rgba(255, 255, 255, 0.09);
}

textarea.ft-input {
	resize: none;
	height: 80px;
	line-height: 1.5;
}

.ft-submit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}

.ft-privacy {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.50);
	line-height: 1.6;
}

.ft-submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 26px;
	border-radius: 980px;
	background: var(--orange);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.88rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(242, 122, 15, 0.30);
	transition:
		background .3s ease,
		transform .3s cubic-bezier(.16, 1, .3, 1),
		box-shadow .4s ease;
}

.ft-submit:hover {
	background: #d96d00;
	transform: translateY(-1px);
	box-shadow:
		0 4px 14px rgba(242, 122, 15, 0.35),
		0 10px 24px rgba(242, 122, 15, 0.45);
}

.ft-submit svg {
	flex-shrink: 0;
	transition: transform .3s ease;
}

/* v0.32.72 — Footer form: error / status / captcha additions.
   The base form styling (inputs, submit pill) is untouched — these
   rules slot in around it. */
.ft-input.is-error {
	/* Red ring instead of the default white-on-white-glass border, so
	   server-side validation errors are unmissable against the dark
	   footer. The error class is removed on `input` events (see
	   footer-form.js) — type one keystroke and the highlight clears. */
	border-color: rgba(255, 90, 90, 0.65);
	box-shadow: 0 0 0 2px rgba(255, 90, 90, 0.18);
}

.ft-captcha-wrap {
	/* Cloudflare Turnstile widget container. Sits between the textarea
	   and the submit row. data-size="flexible" lets the widget fill the
	   column width — keeps it readable in narrow footer columns. */
	margin-top: 4px;
}

.ft-status {
	/* Inline status message — empty until the form has been submitted.
	   Two states: .is-success (green-ish) and .is-error (red-ish). The
	   in-flight "Sending…" state uses the neutral white-dim color. */
	margin: 10px 0 0;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.65);
	min-height: 1.2em;  /* reserve space so layout doesn't jump on first message */
}
.ft-status.is-success { color: #6ee19a; }
.ft-status.is-error   { color: #ff7373; }

.ft-submit.is-busy {
	/* While the AJAX request is in flight, dim + disable pointer so
	   double-submits are impossible. JS also sets [disabled]. */
	opacity: 0.6;
	cursor: progress;
	pointer-events: none;
}

.ft-submit:hover svg {
	transform: translateX(4px);
}

/* Footer bottom row */
.ft-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ft-copy {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.55);
}

.ft-copy b {
	color: var(--orange);
	font-weight: 500;
}

.ft-flag {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.55);
}

/* Footer responsive */
@media (max-width: 900px) {
	.ft-top {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	/* Brand + Pages stay side-by-side per prototype — only the form drops below */
}

@media (max-width: 600px) {
	footer {
		padding: 40px 18px 24px;
	}
	/* Tighten the brand+pages columns on small phones so they fit */
	.ft-left-col {
		grid-template-columns: 1.3fr 1fr;
		gap: 28px;
	}
	.ft-form-row {
		grid-template-columns: 1fr;
	}
	.ft-submit-row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.ft-bottom {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
	.ft-brand-logo svg {
		height: 56px !important;
	}
	.ft-brand-logo {
		margin-top: -12px;
		margin-bottom: 14px;
	}
}

/* Only on truly tiny screens (< 380px) do we stack brand above pages,
   because at that width side-by-side becomes unreadable. */
@media (max-width: 380px) {
	.ft-left-col {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Shared utility classes — ported verbatim from prototype
   (eyebrow, v-btn, btn-orange used across Stats + Portfolios)
   ═══════════════════════════════════════════════════════════════ */

/* Orange CTA — prototype lines 30-65 */
.btn-orange{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;border-radius:980px;
  background:var(--orange);color:#fff !important;
  font-weight:600;font-size:0.88rem;font-family:var(--font-body);
  border:1px solid rgba(242,122,15,0.45);
  box-shadow:0 4px 14px rgba(242,122,15,0.25),inset 0 1px 0 rgba(255,255,255,0.14);
  transition:background .35s ease,color .35s ease,border-color .35s ease,
             transform .35s cubic-bezier(.16,1,.3,1),
             box-shadow .4s ease;
  cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn-orange:hover{
  background:#D96A00;
  transform:translateY(-1px);
  box-shadow:
    0 4px 14px rgba(242,122,15,0.30),
    0 10px 24px rgba(242,122,15,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-orange svg{
  flex-shrink:0;
  transition:transform .3s ease;
}
.btn-orange:hover svg{transform:translateX(4px)}

/* Ghost variant for dark backgrounds — outline only, fills orange on hover.
   Shares the gap-grow + lift + glow behavior with the solid variant. */
.btn-orange.ghost{
  background:transparent;
  color:var(--orange) !important;
  border:1px solid rgba(242,122,15,0.5);
  box-shadow:0 0 0 rgba(242,122,15,0);
}
.btn-orange.ghost:hover{
  background:var(--orange);
  color:#fff !important;
  border-color:var(--orange);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(242,122,15,0.45);
}

/* Two-stage "V-button" — prototype lines 83-294 */
.v-btn{
  /* tokens — tweak here to rescale */
  --btn-h:             72px;
  --pad:               8px;
  --pill-h:            calc(var(--btn-h) - var(--pad) * 2);
  --pill-min:          var(--pill-h);
  --gap-after-circle:  16px;
  --label-x:           calc(var(--pad) + var(--pill-min) + var(--gap-after-circle));
  --pad-right:         26px;
  --text-size:         22px;
  --arrow-size:        22px;
  /* JS (assets/js/main.js) sets --pill-max = button width − 16px on
     mount + ResizeObserver. The CSS-side max() below ensures the
     gradient never under-sizes the pill even if JS hasn't run yet
     (Gutenberg block editor preview, server-rendered loops in
     archive templates, race-with-font-load on slow devices, etc.).
     Pre-v0.14.16 the fallback was 320px and any button wider than
     that exposed solid orange to the right of the gradient — Vic's
     bug screenshot. The new fallback (720px) keeps short buttons
     looking exactly the same as before, while the max() expression
     guarantees long buttons span the gradient end-to-end regardless
     of JS state. */
  --pill-max:          720px;

  position:relative;
  display:inline-flex;
  align-items:center;
  height:var(--btn-h);
  padding:0 var(--pad-right) 0 var(--label-x);
  border:0;
  border-radius:999px;
  background-color:var(--white);
  cursor:pointer;
  overflow:hidden;
  font-family:var(--font-title);
  font-size:0; /* kills inline-flex baseline gap */
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  vertical-align:middle;

  /* shadow stack matched in shape between rest+hover for smooth tween */
  box-shadow:
    0 0 0 -6px  rgba(242,122,15,0),
    0 0 0 -10px rgba(255, 94,138,0),
    0 2px 6px   rgba(0,0,0,0.05),
    inset 0 0 0 0.5px rgba(0,0,0,0.04);
  transition:box-shadow 950ms cubic-bezier(0.33,1,0.68,1);
}
.v-btn:hover,
.v-btn:focus-visible{
  box-shadow:
    0 10px 24px -6px  rgba(242,122,15,0.55),
    0 22px 48px -10px rgba(255, 94,138,0.42),
    0  4px 10px       rgba(0,0,0,0.08),
    inset 0 0 0 0.5px rgba(0,0,0,0.04);
}

.v-btn__label{
  font-family:inherit;
  font-weight:900;
  font-size:var(--text-size);
  letter-spacing:-0.015em;
  text-transform:lowercase;
  line-height:1;
  white-space:nowrap;
  display:block;
}
.v-btn__label--dark{
  position:relative;
  z-index:1;
  color:var(--black);
  transition:transform 220ms cubic-bezier(0.4,0,0.2,1);
}
.v-btn:active .v-btn__label--dark{
  transform:translateY(2px);
  transition-duration:110ms;
}
.v-btn__label--light{
  position:absolute;
  left:calc(var(--label-x) - var(--pad));
  top:50%;
  transform:translateY(-50%);
  color:var(--white);
}

.v-btn__pill{
  position:absolute;
  top:var(--pad);
  bottom:var(--pad);
  left:var(--pad);
  width:var(--pill-min);
  border-radius:999px;
  overflow:hidden;
  z-index:2;
  background-color:var(--orange); /* solid base — always visible */
  background-image:linear-gradient(
    90deg,
    #F27A0F   0%,
    #F48030  14%,
    #F78540  27%,
    #FA8756  40%,
    #FC8366  52%,
    #FD7D74  64%,
    #FE7581  76%,
    #FE6B86  88%,
    #FF5E8A 100%
  );
  background-size:max(var(--pill-max), 100%) 100%;
  background-position:left center;
  background-repeat:no-repeat;
  box-shadow:
    inset 0 0 0 rgba(60,18,0,0),
    inset 0 0 0 rgba(60,18,0,0);
  transition:
    width      720ms cubic-bezier(0.22,1.18,0.34,1),
    transform  220ms cubic-bezier(0.4,0,0.2,1),
    box-shadow 320ms cubic-bezier(0.4,0,0.2,1);
  will-change:width,transform;
}
.v-btn:hover .v-btn__pill,
.v-btn:focus-visible .v-btn__pill{
  width:calc(100% - var(--pad) * 2);
}
.v-btn:active .v-btn__pill{
  transform:translateY(2px) scale(0.992);
  transform-origin:30px center;
  box-shadow:
    inset 0 5px 14px rgba(60,18,0,0.34),
    inset 0 2px 4px  rgba(60,18,0,0.20);
  transition:
    width      720ms cubic-bezier(0.22,1.18,0.34,1),
    transform  120ms cubic-bezier(0.4,0,0.2,1),
    box-shadow 140ms cubic-bezier(0.4,0,0.2,1);
}

.v-btn__arrow{
  position:absolute;
  left:calc((var(--pill-min) - var(--arrow-size)) / 2);
  top:50%;
  margin-top:calc(var(--arrow-size) / -2);
  width:var(--arrow-size);
  height:var(--arrow-size);
  color:var(--white);
  display:block;
}
.v-btn__arrow svg{
  display:block;
  width:100%;
  height:100%;
  shape-rendering:geometricPrecision;
}

/* DARK COLOR VARIANT — black pill for light backgrounds.
   The pill BASE flips from white→black; the orange circle and
   the hover gradient stay exactly as in the default variant.
   Resting label is WHITE on the black pill (readable at rest);
   on hover the orange→pink pill sweeps in and the BLACK label
   inside it replaces the white one — a clean color-flip moment
   timed to the gradient's expansion. */
.v-btn--dark{
  background-color:var(--black);
}
.v-btn--dark .v-btn__label--dark{
  color:var(--white); /* readable at rest on the black pill */
}
.v-btn--dark .v-btn__label--light{
  color:var(--black); /* shown on hover, sits on the orange→pink gradient */
}
.v-btn--dark .v-btn__arrow{
  color:var(--black); /* sits on orange circle / orange-pink pill — black for brand contrast */
}

/* size modifier — kept for future re-use.
   v0.20.4 (Vic feedback): bumped from 56→64px so the "all articles"
   homepage CTA + archive "load more" button read with a bit more
   weight. Mobile override below scales in lockstep. */
.v-btn--sm{
  --btn-h:             64px;
  --text-size:         17px;
  --arrow-size:        19px;
  --gap-after-circle:  13px;
  --pad-right:         22px;
}

/* "All articles" button — prevent text clipping at tablet/mobile.
   .vn-footer uses display:flex at ≤820px and would shrink the button
   below its content width (flex-shrink defaults to 1). flex-shrink:0
   forces the button to render at natural content width. Padding tokens
   are kept generous so the last glyph breathes against the pill edge. */
@media (max-width: 1023px){
  .vn-footer .v-btn{
    --pad-right:        18px;          /* was 14px — restore breathing room */
    --gap-after-circle: 10px;          /* was 8px */
    flex-shrink:        0;             /* never collapse below natural width */
  }
}
@media (max-width: 600px){
  .vn-footer .v-btn{
    --text-size:        13px;          /* was 12px — slight bump for legibility */
    --pad-right:        14px;          /* was 12px */
    --gap-after-circle: 8px;           /* was 7px */
  }
}


/* responsive — aligned to homepage 600px breakpoint */
@media (max-width:600px){
  .v-btn{
    --btn-h:             60px;
    --text-size:         17px;
    --arrow-size:        18px;
    --gap-after-circle:  12px;
    --pad-right:         20px;
  }
  /* v0.20.4 — sm mobile bump in lockstep with desktop bump above
     (was 48px, text 13px → bump to 54px, text 15px). */
  .v-btn--sm{
    --btn-h:             54px;
    --text-size:         15px;
    --arrow-size:        17px;
    --gap-after-circle:  11px;
    --pad-right:         18px;
  }
}

@media (prefers-reduced-motion:reduce){
  .v-btn,
  .v-btn__pill,
  .v-btn__label--dark{transition-duration:0.01ms !important}
}

/* Section eyebrow — prototype line 1840 */
.eyebrow{font-size:0.72rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}

/* Section title — shared across multiple sections (Jobs CTA, etc.).
   Mobile breakpoints in section CSS use this as the size baseline. */
.s-title{font-size:clamp(2rem,4.2vw,3rem);font-weight:900;font-family:var(--font-title);letter-spacing:-0.04em;line-height:1.08;color:var(--black)}
.s-title.light{color:#fff}


/* ─────────────────────────────────────────────────────────────
   v0.8.3 — Back-to-top button
   --------------------------------------------------------------
   Verbatim port of prototype lines 2042-2066. Floating circular
   button bottom-right, orange brand fill, fades in/out via the
   .visible class which main.js toggles based on window.scrollY.
   Hidden by default (opacity 0 + pointer-events none) so it
   doesn't intercept clicks before the user has scrolled.
   ─────────────────────────────────────────────────────────── */

#backToTop{
  position:fixed;bottom:28px;right:28px;z-index:400;
  width:44px;height:44px;border-radius:50%;
  background:var(--orange);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(242,122,15,0.45);
  opacity:0;transform:translateY(12px) scale(0.85);
  transition:opacity .3s ease,
             transform .3s cubic-bezier(.16,1,.3,1),
             background .25s ease,
             box-shadow .25s ease;
  pointer-events:none;
}
#backToTop.visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
#backToTop:hover{
  background:#d96a00;
  transform:translateY(-2px) scale(1.05);
  box-shadow:
    0 4px 20px rgba(242,122,15,0.55),
    0 0 0 4px rgba(242,122,15,0.20),
    0 0 24px rgba(242,122,15,0.55);
}
#backToTop svg{
  width:18px;height:18px;
  stroke:#fff;fill:none;
  stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:520px){
  #backToTop{
    width:36px;height:36px;
    bottom:20px;right:20px;
  }
  #backToTop svg{width:14px;height:14px}
}