*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--white: #ffffff;
	--off-white: #f3f3f3;
	--near-black: #0a0a0b;
	--teal: #14b8a6;
	--teal-hover: #0d9488;
	--blue: #4976eb;
	--slate: #4c608a;

	--black: #000000;
	--dark-2: #171b25;
	--dark-3: #1e2432;
	--dark-5: #292b2f;

	--grey-1: #727272;
	--grey-3: #919191;
	--grey-4: #b9b9b9;
	--grey-7: #f2f2f2;

	--white--8: rgba(255, 255, 255, 0.08);
	--white--10: rgba(255, 255, 255, 0.1);
	--white--15: rgba(255, 255, 255, 0.15);
	--white--20: rgba(255, 255, 255, 0.2);
	--white--30: rgba(255, 255, 255, 0.3);
	--white--40: rgba(255, 255, 255, 0.4);
	--white--50: rgba(255, 255, 255, 0.5);
	--white--60: rgba(255, 255, 255, 0.6);
	--white--70: rgba(255, 255, 255, 0.7);
	--white--80: rgba(255, 255, 255, 0.8);
	--white--90: rgba(255, 255, 255, 0.9);

	/* Legacy aliases for unused components */
	--white-90: var(--white--90);
	--white-70: var(--white--70);
	--white-50: var(--white--50);
	--white-30: var(--white--30);
	--white-15: var(--white--15);
	--white-08: var(--white--8);

	--teal--6: color-mix(in srgb, var(--teal) 6%, transparent);

	--font: 'Maven Pro', system-ui, Arial, sans-serif;
	--wrap: 1180px;
	--gutter: 40px;
	--r-pill: 48px;

	--space-sm: 24px;
	--space-md: 34px;
	--space-xl: 90px;
	--section-pad: 90px;
	--section-title-gap: 56px;
	--radius-card: 8px;
	--grid-gap: 24px;

	--track-display: 0.08em;
	--track-meta: 0.16em;
	--text-meta: 12px;
	--text-body: 16px;
	--text-body-lh: 1.625;
	--hairline: 1px solid var(--white--8);
	--inset-gutter: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
	--card-wash: linear-gradient(135deg,
			color-mix(in srgb, var(--teal) 10%, transparent),
			transparent 42%);

	--marquee-logo-height: 32px;
	--marquee-padding-block: 28px;
	--marquee-height: calc(var(--marquee-logo-height) + var(--marquee-padding-block) + var(--marquee-padding-block));

	interpolate-size: allow-keywords;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	background: var(--black);
	color: var(--white);
}

body {
	font-family: var(--font);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--white);
	background: var(--black);
	/* clip (not hidden) so position:sticky keeps working */
	overflow-x: clip;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* ── Buttons ── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.2em;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
	padding: 13px 32px;
	border-radius: var(--r-pill);
	border: 1px solid var(--white--50);
	color: var(--white);
	background: transparent;
	cursor: pointer;
	will-change: color, border-color, background;
	backdrop-filter: blur(6px);
	transition:
		color 0.5s ease,
		border-color 0.5s ease,
		background 0.5s ease;
}

.btn-outline:hover {
	color: var(--teal);
	background: color-mix(in srgb, var(--near-black) 70%, transparent);
	border-color: color-mix(in srgb, var(--teal-hover) 20%, var(--white--15));
}

.btn-fill {
	background: var(--teal);
	border-color: var(--teal);
	color: var(--near-black);
}

.btn-fill:hover {
	background: var(--teal-hover);
	border-color: var(--teal-hover);
	color: var(--black);
}

/* ── Sections ── */

.section {
	padding: var(--section-pad) 0;
	border-bottom: var(--hairline);
	position: relative;
}

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

.section-title {
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.12;
	font-weight: 400;
	letter-spacing: var(--track-display);
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	margin-bottom: var(--section-title-gap);
	color: var(--white);
}

.section-title--start {
	text-align: left;
}

.section-title-accent {
	color: var(--teal);
}

.section-cta {
	display: flex;
	justify-content: center;
	margin-top: var(--space-sm);
}

/* Align full-bleed panels with the centered .wrap column */
.inset-gutter-left {
	padding-left: var(--inset-gutter);
}

.inset-gutter-right {
	padding-right: var(--inset-gutter);
}

/* ── Surfaces ── */

.card {
	background: var(--card-wash), var(--dark-2);
	border: var(--hairline);
	border-radius: var(--radius-card);
}

.card--accent {
	border-color: color-mix(in srgb, var(--teal-hover) 10%, var(--white--8));
}

.card--pad {
	padding: var(--space-md);
}

.media-cover {
	overflow: hidden;
	background: var(--dark-3);
}

.media-cover>img,
.media-cover>video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Type ── */

.meta-label {
	font-size: var(--text-meta);
	font-weight: 500;
	letter-spacing: var(--track-meta);
	text-transform: uppercase;
	color: var(--teal);
}

.text-body-muted {
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	color: var(--white--70);
}

.link-quiet {
	color: inherit;
	text-decoration: none;
	transition: color 0.4s ease;
}

.link-quiet:hover {
	color: var(--teal);
}

/* ── Arrow buttons (carousel) — kept for classic News.svelte ── */

.arrow-btn {
	--arrow-stem: 32px;
	--arrow-stem-hover: 4em;
	--arrow-chev: 6px;
	--arrow-mark: calc(var(--arrow-stem) + var(--arrow-chev));
	--arrow-btn-w: 75px;
	width: var(--arrow-btn-w);
	height: 36px;
	border-radius: 36px;
	border: 1px solid var(--white--30);
	background: transparent;
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: calc((var(--arrow-btn-w) - var(--arrow-mark)) / 2);
	box-sizing: border-box;
	cursor: pointer;
	transition:
		border-color 0.4s ease,
		color 0.4s ease,
		background 0.4s ease;
	flex-shrink: 0;
}

.arrow-btn:hover {
	border-color: var(--teal);
	color: var(--teal);
}

.arrow-btn.prev {
	/* justify-content: flex-start; */
	padding-left: 0;
	padding-right: calc((var(--arrow-btn-w) - var(--arrow-mark)) / 2);
}

.arrow-mark {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.arrow-btn.prev .arrow-mark {
	flex-direction: row-reverse;
}

.arrow-stem {
	display: block;
	width: var(--arrow-stem-hover);
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
	transform: scaleX(calc(var(--arrow-stem) / var(--arrow-stem-hover)));
	transform-origin: left center;
	transition: transform 0.5s ease;
}

.arrow-btn:hover .arrow-stem {
	transform: scaleX(1);
}

.arrow-btn.prev .arrow-stem {
	transform-origin: right center;
}

.arrow-chev {
	display: block;
	width: var(--arrow-chev);
	height: 11px;
	flex-shrink: 0;
	margin-left: -5px;
}

.arrow-btn.prev .arrow-chev {
	transform: scaleX(-1);
	margin-left: 0;
	margin-right: -5px;
}

@media (max-width: 900px) {
	:root {
		--gutter: 8vw;
		--section-pad: 56px;
		--section-title-gap: 36px;
	}
}