/* Eight-Seven Inc. site styles
   Ported from the Eight-Seven Corporate Identity design (Home.dc.html).
   Theme values live as custom properties so the Light/Dark toggle only
   has to flip [data-theme] on <html>. */

/* ---------- tokens ---------- */

/*
 * The site is dark-only: the navy, cyan and electric blue of 87dash.com, with
 * its glow kept to the interactive pieces (buttons, badges, focus and hover).
 *
 * The light values below are still defined but nothing applies them, because
 * the glow does not read on a light background. To bring light mode back, wrap
 * the "Apply the dark palette" block in the prefers-color-scheme query it used
 * to sit in. The manual Light/Dark switch stays commented out of the markup;
 * see the .themetoggle blocks in the pages and the theme section of site.js.
 *
 * Dark values are written once as --dk-*, so the block that applies them
 * references those instead of repeating literal colours.
 */

:root {
	color-scheme: light;

	--bg: #f4f4f2;
	--ink: #1b1b19;
	--ink2: #4a4a45;
	--ink3: #66665f;
	--card: rgba(255, 255, 255, 0.62);
	--cardHover: rgba(255, 255, 255, 0.86);
	--hairline: rgba(0, 0, 0, 0.10);
	--hairlineStrong: rgba(0, 0, 0, 0.18);
	--chip: rgba(0, 0, 0, 0.05);
	--accent: oklch(0.52 0.14 248);
	--glowA: rgba(120, 150, 255, 0.16);
	--glowB: rgba(255, 190, 140, 0.14);
	--orbB: transparent;
	--shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 18px -8px rgba(0, 0, 0, 0.16);
	--shadowHover: 0 1px 1px rgba(0, 0, 0, 0.05), 0 16px 34px -14px rgba(0, 0, 0, 0.26);
	--dots: none;
	--dotsMask: none;
	--ctaGlow: none;
	--navBg: rgba(244, 244, 242, 0.72);
	--badgeBorder: transparent;
	--dotGlow: none;
	--field: rgba(255, 255, 255, 0.7);
	--focusRing: rgba(60, 110, 220, 0.16);
	--focusBloom: 0 0 0 transparent;
	--hairlineHover: rgba(0, 0, 0, 0.10);
	--liftGlow: 0 0 0 transparent;
	--cta: #1b1b19;
	--ctaHover: #1b1b19;
	--ctaInk: #f4f4f2;
	--ctaBorder: transparent;
	--ctaGlowHover: none;
	--ghostGlow: none;
	--ghostGlowHover: none;
	--pillGlow: none;
	--badgeInk: #4a4a45;
	--badgeGlow: none;
	--navHover: #1b1b19;
	--linkGlow: none;
	--burger: #1b1b19;
	--danger: #c0392b;

	/* Dark palette. Defined here, applied by the two blocks below. */
	--dk-bg: #060b1c;
	--dk-ink: #f2f0f7;
	--dk-ink2: #bdc6de;
	--dk-ink3: #8d97b3;
	--dk-card: rgba(8, 16, 42, 0.72);
	--dk-cardHover: rgba(10, 20, 48, 0.92);
	--dk-hairline: rgba(111, 227, 255, 0.16);
	--dk-hairlineStrong: rgba(111, 227, 255, 0.45);
	--dk-chip: rgba(46, 99, 255, 0.12);
	--dk-accent: #6fe3ff;
	--dk-glowA: rgba(46, 99, 255, 0.34);
	--dk-glowB: rgba(111, 227, 255, 0.10);
	--dk-orbB: rgba(46, 99, 255, 0.16);
	--dk-shadow: inset 0 1px 0 rgba(111, 227, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.5), 0 10px 26px -12px rgba(0, 0, 0, 0.7);
	--dk-shadowHover: inset 0 1px 0 rgba(111, 227, 255, 0.08), 0 1px 1px rgba(0, 0, 0, 0.55), 0 20px 40px -16px rgba(0, 0, 0, 0.8);
	--dk-dots: radial-gradient(rgba(111, 227, 255, 0.07) 1px, transparent 1px);
	--dk-dotsMask: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
	--dk-ctaGlow: 0 0 0 1px rgba(111, 227, 255, 0.25), 0 0 18px rgba(111, 227, 255, 0.55), 0 0 50px rgba(46, 99, 255, 0.7), inset 0 0 14px rgba(111, 227, 255, 0.35);
	--dk-navBg: rgba(6, 11, 28, 0.72);
	--dk-badgeBorder: rgba(111, 227, 255, 0.4);
	--dk-dotGlow: 0 0 8px #6fe3ff, 0 0 16px #2e63ff;
	--dk-field: #03060f;
	--dk-focusRing: rgba(111, 227, 255, 0.15);
	--dk-focusBloom: 0 0 18px rgba(111, 227, 255, 0.3);
	--dk-hairlineHover: rgba(111, 227, 255, 0.55);
	--dk-liftGlow: 0 0 20px rgba(111, 227, 255, 0.22), 0 0 80px rgba(46, 99, 255, 0.32);
	--dk-cta: #2e63ff;
	--dk-ctaHover: #3b73ff;
	--dk-ctaInk: #fff;
	--dk-ctaBorder: #6fe3ff;
	--dk-ctaGlowHover: 0 0 0 1px rgba(111, 227, 255, 0.5), 0 0 26px rgba(111, 227, 255, 0.8), 0 0 80px rgba(46, 99, 255, 0.9), inset 0 0 18px rgba(111, 227, 255, 0.5);
	--dk-ghostGlow: inset 0 0 12px rgba(111, 227, 255, 0.15);
	--dk-ghostGlowHover: 0 0 16px rgba(111, 227, 255, 0.5), inset 0 0 12px rgba(111, 227, 255, 0.3);
	--dk-pillGlow: 0 0 16px rgba(111, 227, 255, 0.55), 0 0 40px rgba(46, 99, 255, 0.6);
	--dk-badgeInk: #6fe3ff;
	--dk-badgeGlow: 0 0 12px rgba(111, 227, 255, 0.25);
	--dk-navHover: #6fe3ff;
	--dk-linkGlow: 0 0 10px rgba(111, 227, 255, 0.7);
	--dk-burger: #6fe3ff;
	--dk-danger: #ff8a3d;

	--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, sans-serif;
}

/* Apply the dark palette. */
:root {
	color-scheme: dark;
	--bg: var(--dk-bg);
	--ink: var(--dk-ink);
	--ink2: var(--dk-ink2);
	--ink3: var(--dk-ink3);
	--card: var(--dk-card);
	--cardHover: var(--dk-cardHover);
	--hairline: var(--dk-hairline);
	--hairlineStrong: var(--dk-hairlineStrong);
	--chip: var(--dk-chip);
	--accent: var(--dk-accent);
	--glowA: var(--dk-glowA);
	--glowB: var(--dk-glowB);
	--orbB: var(--dk-orbB);
	--shadow: var(--dk-shadow);
	--shadowHover: var(--dk-shadowHover);
	--dots: var(--dk-dots);
	--dotsMask: var(--dk-dotsMask);
	--ctaGlow: var(--dk-ctaGlow);
	--navBg: var(--dk-navBg);
	--badgeBorder: var(--dk-badgeBorder);
	--dotGlow: var(--dk-dotGlow);
	--field: var(--dk-field);
	--focusRing: var(--dk-focusRing);
	--focusBloom: var(--dk-focusBloom);
	--hairlineHover: var(--dk-hairlineHover);
	--liftGlow: var(--dk-liftGlow);
	--cta: var(--dk-cta);
	--ctaHover: var(--dk-ctaHover);
	--ctaInk: var(--dk-ctaInk);
	--ctaBorder: var(--dk-ctaBorder);
	--ctaGlowHover: var(--dk-ctaGlowHover);
	--ghostGlow: var(--dk-ghostGlow);
	--ghostGlowHover: var(--dk-ghostGlowHover);
	--pillGlow: var(--dk-pillGlow);
	--badgeInk: var(--dk-badgeInk);
	--badgeGlow: var(--dk-badgeGlow);
	--navHover: var(--dk-navHover);
	--linkGlow: var(--dk-linkGlow);
	--burger: var(--dk-burger);
	--danger: var(--dk-danger);
}

/* ---------- base ---------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
}

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

* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06); }

h1, h2, h3, p, a { overflow-wrap: anywhere; }

img { display: block; }

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

.mono { font-family: var(--mono); }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- page shell ---------- */

.page {
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow-x: clip;
}

.glow {
	position: absolute;
	top: -320px;
	left: 0;
	width: 1100px;
	height: 700px;
	pointer-events: none;
	filter: blur(90px);
	background:
		radial-gradient(48% 46% at 30% 45%, var(--glowA) 0%, transparent 70%),
		radial-gradient(42% 40% at 62% 30%, var(--glowB) 0%, transparent 72%);
}

.dots {
	position: absolute;
	inset: 0 0 auto 0;
	height: 760px;
	pointer-events: none;
	background-image: var(--dots);
	background-size: 22px 22px;
	mask-image: var(--dotsMask);
	-webkit-mask-image: var(--dotsMask);
}

/* ---------- nav ---------- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px clamp(20px, 4vw, 56px);
	border-bottom: 1px solid var(--hairline);
	background: var(--navBg);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
}

.nav__brand {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.nav__links {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 28px);
}

.nav__link {
	font-size: 14px;
	color: var(--ink2);
	transition: color 0.2s ease;
}

.nav__link:hover { color: var(--navHover); }

.nav__burger {
	appearance: none;
	cursor: pointer;
	width: 44px;
	height: 44px;
	margin: -7px -8px -7px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: none;
	color: var(--burger);
}

.nav__burger span {
	display: block;
	width: 19px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: var(--dotGlow);
	transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

/* The two bars cross into an X while the menu is open. 3.25px is half the
   gap plus half a bar, which brings each bar to the middle. */
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- theme toggle ---------- */

.themetoggle {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--card);
	border: 1px solid var(--hairline);
}

.themetoggle__btn {
	appearance: none;
	border: none;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 500;
	color: var(--ink3);
	background: transparent;
	box-shadow: none;
	transition: color 0.2s ease, background 0.2s ease;
}

.themetoggle__btn[aria-pressed="true"] {
	font-weight: 600;
	color: var(--ink);
	background: var(--cardHover);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* ---------- mobile menu ---------- */

/* Laid over the page under the nav bar (63px tall), so opening it does not
   push the content down. It unrolls from the top edge and the links follow one
   after another. The script only flips [hidden]; allow-discrete keeps the menu
   rendered until the closing transition ends, and @starting-style gives the
   opening one somewhere to start. Browsers without those just show and hide. */
.mobilemenu {
	position: fixed;
	top: 63px;
	left: 0;
	right: 0;
	z-index: 49;
	display: flex;
	flex-direction: column;
	padding: 8px clamp(20px, 4vw, 56px) 18px;
	border-bottom: 1px solid var(--hairline);
	background: var(--navBg);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	clip-path: inset(0);
	transition: clip-path 0.4s cubic-bezier(0.7, 0, 0.2, 1), display 0.4s allow-discrete;
}

.mobilemenu[hidden] {
	display: none;
	clip-path: inset(0 0 100% 0);
}

@starting-style {
	.mobilemenu:not([hidden]) { clip-path: inset(0 0 100% 0); }
}

.mobilemenu__link {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: 17px;
	color: var(--ink);
	border-bottom: 1px solid var(--hairline);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mobilemenu__link:last-of-type { border-bottom: none; }

.mobilemenu[hidden] .mobilemenu__link {
	opacity: 0;
	transform: translateY(-10px);
}

@starting-style {
	.mobilemenu:not([hidden]) .mobilemenu__link {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* Staggered on the way in only; closing fades every link at once. */
.mobilemenu:not([hidden]) .mobilemenu__link:nth-child(1) { transition-delay: 0.12s; }
.mobilemenu:not([hidden]) .mobilemenu__link:nth-child(2) { transition-delay: 0.17s; }
.mobilemenu:not([hidden]) .mobilemenu__link:nth-child(3) { transition-delay: 0.22s; }
.mobilemenu:not([hidden]) .mobilemenu__link:nth-child(4) { transition-delay: 0.27s; }
.mobilemenu:not([hidden]) .mobilemenu__link:nth-child(5) { transition-delay: 0.32s; }
.mobilemenu:not([hidden]) .mobilemenu__link:nth-child(n + 6) { transition-delay: 0.37s; }

.mobilemenu .themetoggle {
	margin-top: 14px;
	align-self: flex-start;
}

.mobilemenu .themetoggle__btn {
	font-size: 13px;
	padding: 8px 18px;
}

/* wide / narrow: replaces the design's <sc-if wide> / <sc-if narrow> */
@media (min-width: 860px) {
	.nav__burger, .mobilemenu { display: none; }
}

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

/* ---------- hero ---------- */

.hero {
	position: relative;
	padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 72px);
	border-bottom: 1px solid var(--hairline);
}

/* The band keeps its full-bleed padding and divider, but the content inside
   is capped at the same 860px as .wrap and .subhero__inner, so the hero copy
   shares a left edge with every section below it. */
.hero__inner {
	max-width: 860px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 4vw, 44px);
	align-items: center;
}

@media (min-width: 780px) {
	/* The copy carries the headline, so it gets the larger share. */
	.hero__inner {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	}
}

.hero__copy {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.eyebrow {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink3);
}

.hero h1 {
	margin: 0;
	font-size: clamp(36px, 5.4vw, 56px);
	line-height: 1.04;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-wrap: pretty;
}

.hero__lede {
	margin: 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink2);
	max-width: 48ch;
	text-wrap: pretty;
}

/* ---------- buttons ---------- */

.btnrow {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.btn {
	display: inline-flex;
	align-items: center;
	appearance: none;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding: 12px 20px;
	border-radius: 999px;
	transition: transform 0.2s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
	color: var(--ctaInk);
	background: var(--cta);
	border-color: var(--ctaBorder);
	box-shadow: var(--ctaGlow);
}

.btn--primary:hover {
	background: var(--ctaHover);
	box-shadow: var(--ctaGlowHover);
}

.btn--ghost {
	color: var(--ink);
	border-color: var(--hairlineStrong);
	box-shadow: var(--ghostGlow);
}

.btn--ghost:hover {
	background: var(--chip);
	border-color: var(--accent);
	box-shadow: var(--ghostGlowHover);
}

/* ---------- surfaces ---------- */

.card {
	background: var(--card);
	border: 1px solid var(--hairline);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: var(--shadow);
}

.card--lift {
	transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.card--lift:hover {
	transform: translateY(-2px);
	background: var(--cardHover);
	border-color: var(--hairlineHover);
	box-shadow: var(--shadowHover), var(--liftGlow);
}

.chipicon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	background: var(--chip);
	border: 1px solid var(--hairline);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--badgeInk);
	background: var(--chip);
	border: 1px solid var(--badgeBorder);
	box-shadow: var(--badgeGlow);
	border-radius: 999px;
	padding: 4px 10px;
}

.badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: var(--dotGlow);
	flex: none;
}

/* ---------- releases card (hero) ---------- */

.releases {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
}

.releases__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--hairline);
}

.releases__label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink3);
}

.releases__all {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent);
}

.release {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	color: inherit;
	border-bottom: 1px solid var(--hairline);
	transition: background 0.2s ease;
}

.release:last-child { border-bottom: none; }
.release:hover { background: var(--chip); }

.release img {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 8px;
}

.release__text { flex: 1; min-width: 0; }

.release__name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.012em;
}

.release__sub {
	font-size: 13px;
	color: var(--ink3);
}

.release__ver {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--ink2);
}

/* ---------- main column ---------- */

.main {
	position: relative;
	padding: clamp(48px, 6vw, 64px) clamp(20px, 4vw, 56px) 80px;
}

.orb {
	position: absolute;
	top: 34%;
	right: -180px;
	width: 760px;
	height: 620px;
	pointer-events: none;
	filter: blur(110px);
	background: radial-gradient(50% 50% at 50% 50%, var(--orbB) 0%, transparent 72%);
}

.wrap {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

section {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.sec__label {
	margin: 0;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink3);
}

.sec__note {
	font-size: 13.5px;
	color: var(--ink3);
}

/* ---------- what we do ---------- */

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

.svc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(18px, 3vw, 28px);
	align-items: center;
	border-radius: 20px;
	padding: 30px;
}

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

.svc__head .chipicon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
}

.svc h3 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.022em;
}

.svc__brand {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--ink3);
}

.svc p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink2);
}

.svcgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 12px;
}

.svcmini {
	border-radius: 18px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.svcmini .chipicon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.svcmini h3 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.012em;
}

.svcmini p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink3);
}

.svcmini__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--hairline);
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--ink3);
}

/* ---------- ventures ---------- */

.venturegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
}

.venture {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-radius: 20px;
	padding: 28px;
	min-height: 220px;
	color: inherit;
}

.venture__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.venture__mark {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--chip);
	border: 1px solid var(--hairline);
}

.venture__mark img { width: 48px; height: 48px; }

.venture__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.venture__name {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.venture__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink3);
	max-width: 38ch;
}

.venture__link {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent);
}

/* ---------- apps ---------- */

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

.app {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	border-radius: 20px;
	padding: clamp(18px, 3vw, 22px) clamp(18px, 3vw, 24px);
	color: inherit;
}

.app__icon {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 12px;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.app__body {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.app__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.app__name {
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.app__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink3);
}

.app__domain {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent);
	white-space: nowrap;
	margin-left: auto;
}

.app--placeholder {
	border: 1px dashed var(--hairlineStrong);
}

.app--placeholder .app__name { color: var(--ink2); }

.app--placeholder .app__desc {
	font-family: var(--mono);
	font-size: 13px;
}

.app__slot {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 12px;
	background: repeating-linear-gradient(135deg, var(--chip) 0 6px, transparent 6px 12px);
	border: 1px solid var(--hairline);
}

/* ---------- how we work ---------- */

.howgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 12px;
}

.how {
	border-radius: 18px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.how__num {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent);
}

.how h3 {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.012em;
}

.how p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink3);
}

/* ---------- about ---------- */

.about__text {
	margin: 0;
	font-size: 19.5px;
	line-height: 1.6;
	color: var(--ink2);
	max-width: 60ch;
	text-wrap: pretty;
}

/* ---------- contact ---------- */

.contactcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-radius: 20px;
	padding: 26px 28px;
}

.contactcard p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink2);
	max-width: 52ch;
}

/* ---------- footer ---------- */

.footer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-top: 1px solid var(--hairline);
	padding-top: 28px;
}

.footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sociallink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--ink);
	border-radius: 999px;
	padding: 10px 16px;
	transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

/* Same hover as .card--lift, kept here so the footer markup stays as it is. */
.sociallink:hover {
	transform: translateY(-2px);
	background: var(--cardHover);
	border-color: var(--hairlineHover);
	box-shadow: var(--shadowHover), var(--liftGlow);
}

.sociallink svg {
	flex: none;
	color: var(--ink2);
	transition: color 0.3s ease;
}

.sociallink:hover svg { color: var(--accent); }

.footer__legal {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ink3);
}

/* ==========================================================================
   Contact page, ported from Contact.dc.html
   ========================================================================== */

@keyframes riseIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.subhero__inner,
	.errorpage__inner { animation: none; }
}

input, textarea, select { font-family: inherit; }

input::placeholder,
textarea::placeholder {
	color: var(--ink3);
	opacity: 0.75;
}

/* current page in the nav */
.nav__link[aria-current="page"],
.mobilemenu__link[aria-current="page"] {
	font-weight: 600;
	color: var(--navHover);
	text-shadow: var(--linkGlow);
}

/* ---------- sub-page hero ---------- */

.subhero {
	position: relative;
	padding: clamp(48px, 7vw, 84px) clamp(20px, 4vw, 56px) clamp(32px, 4vw, 48px);
	border-bottom: 1px solid var(--hairline);
}

.subhero__inner {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: riseIn 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.subhero h1 {
	margin: 0;
	font-size: clamp(34px, 6vw, 56px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.subhero p {
	margin: 0;
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.6;
	color: var(--ink2);
	max-width: 52ch;
	text-wrap: pretty;
}

/* ---------- contact grid ---------- */

.contactbody {
	position: relative;
	padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 56px) clamp(56px, 7vw, 88px);
}

.contactgrid {
	max-width: 860px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 3vw, 28px);
	align-items: stretch;
}

.formcard {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-radius: 22px;
	padding: clamp(22px, 3.2vw, 30px);
}

.formstack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fieldrow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 16px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field__label {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink3);
}

.input {
	width: 100%;
	box-sizing: border-box;
	appearance: none;
	font-size: 16px;
	color: var(--ink);
	background: var(--field);
	border: 1px solid var(--hairline);
	border-radius: 12px;
	padding: 13px 14px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--focusRing), var(--focusBloom);
}

textarea.input {
	resize: vertical;
	min-height: 150px;
	line-height: 1.55;
}

.input[aria-invalid="true"] {
	border-color: var(--danger);
}

/* ---------- topic pills (real radios, so they work without JS) ---------- */

/* A <legend> is laid out in the fieldset's border box, so it never
   participates in flex flow, so the group must stay block-level and the
   pills get their own top margin instead of a flex gap. */
.topicgroup {
	display: block;
	border: none;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

.topicgroup > legend {
	padding: 0;
	line-height: 1;
}

.topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.topic { display: inline-flex; }

.topic input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.topic span {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	padding: 9px 15px;
	border-radius: 999px;
	color: var(--ink2);
	background: var(--chip);
	border: 1px solid var(--hairline);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.topic span:hover { border-color: var(--hairlineHover); }

.topic input:checked + span {
	font-weight: 600;
	color: var(--ctaInk);
	background: var(--cta);
	border-color: var(--ctaBorder);
	box-shadow: var(--pillGlow);
}

.topic input:focus-visible + span {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ---------- form footer ---------- */

.formfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-top: 4px;
	border-top: 1px solid var(--hairline);
}

.formfoot .btn { margin-top: 14px; }

.formfoot p {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink3);
}

.formfoot a { color: var(--accent); }

.formerror {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--danger);
}

.field__error {
	font-size: 12.5px;
	color: var(--danger);
}

/* ---------- sent state ---------- */

.sent {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 4px;
}

.sent__label {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.sent p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}

.sent .btn {
	align-self: flex-start;
	margin-top: 6px;
	background: transparent;
}

/* ---------- info cards ---------- */

.infocard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-radius: 22px;
	padding: clamp(22px, 3.2vw, 28px);
}

.infocard__email {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.infocard p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink3);
}

.infocard p a { color: var(--accent); }

.infocard__place {
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: -0.015em;
	color: var(--ink);
}

/* ---------- full-width page footer (contact) ---------- */

.pagefooter {
	position: relative;
	padding: clamp(32px, 4vw, 44px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 56px);
	border-top: 1px solid var(--hairline);
}

.pagefooter__inner {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ==========================================================================
   Error pages (404 / 403 / 500)
   ========================================================================== */

.errorpage {
	position: relative;
	padding: clamp(60px, 11vw, 120px) clamp(20px, 4vw, 56px) clamp(56px, 8vw, 96px);
}

.errorpage__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	animation: riseIn 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.errorpage__code {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.errorpage h1 {
	margin: 0;
	font-size: clamp(34px, 6vw, 54px);
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.errorpage p {
	margin: 0;
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.6;
	color: var(--ink2);
	max-width: 54ch;
	text-wrap: pretty;
}

.errorpage .btnrow { margin-top: 6px; }

.errorlinks {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.errorlinks a {
	font-size: 14.5px;
	color: var(--ink2);
	transition: color 0.2s ease;
}

.errorlinks a:hover { color: var(--navHover); }

/* ==========================================================================
   Cookie consent
   ========================================================================== */

/* Keeps the spam-trap field out of sight without an inline style attribute,
   which the Content-Security-Policy would block. */
.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.linkish {
	font: inherit;
	color: var(--accent);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.linkish:hover { text-decoration: underline; }

/* Accept and Decline share one style on purpose: UK and EU regulators treat a
   louder Accept button as nudging rather than freely given consent. */
.consent {
	position: fixed;
	z-index: 60;
	left: 16px;
	right: 16px;
	bottom: max(16px, env(safe-area-inset-bottom));
	max-width: 440px;
	padding: 18px 20px;
	border-radius: 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink2);
	background: var(--cardHover);
	border: 1px solid var(--hairline);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	box-shadow: var(--shadowHover);
}

.consent[hidden] { display: none; }

.consent p { margin: 0; }

.consent a { color: var(--accent); }

.consent-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.consent-actions button {
	flex: 1;
	appearance: none;
	padding: 10px 16px;
	border: 1px solid var(--hairlineStrong);
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	background: transparent;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.consent-actions button:hover {
	background: var(--chip);
	border-color: var(--accent);
	box-shadow: var(--ghostGlowHover);
}

@media (prefers-reduced-motion: no-preference) {
	.consent:not([hidden]) { animation: riseIn 0.5s cubic-bezier(0.22, 0.9, 0.3, 1); }
}

/* Cloudflare Turnstile. The widget is a fixed-size iframe from Cloudflare, so
   there is nothing to style inside it; this only gives it room in the form. */
.turnstile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 65px;
}