*,
*::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 ── */

/*
 * Divi's Button module carries its own per-instance styling (custom_button
 * + button_bg_color / button_text_color / button_border_* / button_font
 * etc.), but unlike the section/card/heading fights elsewhere in this file,
 * that per-instance CSS is cached with the page's own `#page-container` ID
 * in the selector (e.g. `#page-container .et_pb_section .et_pb_button_0`,
 * specificity 1-2-0) — an ID always outranks any number of repeated
 * classes, so the `.btn.btn.btn.btn` trick used elsewhere cannot win here
 * no matter how many times it's repeated. Prefixing with `#page-container`
 * (present in Divi's page markup on every page) raises these rules to
 * 1-4-0, which does win.
 */
#page-container .btn.btn.btn.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font) !important;
	font-size: 14px !important;
	line-height: 18px !important;
	letter-spacing: 0.2em !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	padding: 13px 32px !important;
	border-radius: var(--r-pill) !important;
	border: 1px solid var(--white--50) !important;
	color: var(--white) !important;
	background: transparent !important;
	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;
}

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

#page-container .btn-fill.btn-fill.btn-fill.btn-fill {
	background: var(--teal) !important;
	border-color: var(--teal) !important;
	color: var(--near-black) !important;
}

#page-container .btn-fill.btn-fill.btn-fill.btn-fill:hover {
	background: var(--teal-hover) !important;
	border-color: var(--teal-hover) !important;
	color: var(--black) !important;
}

/* ── Sections ── */

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

.section:last-of-type {
	/* border-bottom: none; */
	border-bottom: var(--hairline);
}

/*
 * Drop-in "match the design system" class for a Divi Section/Row/Column
 * that currently has its own flat Design-tab background color — clears it
 * to transparent (revealing the page's black background, same as every
 * .section on the homepage) and sets a sane default text color for
 * whatever's inside, without needing to hand-clear that element's Design
 * tab first. Apply at whichever level actually has the background set;
 * it's deliberately NOT inherited down to nested Columns automatically,
 * so a card-style column (paired with .card) keeps its own background.
 *
 * Deliberately does NOT touch background-image. A section with a real
 * background photo (hero banners, CTA overlays, etc.) needs that image —
 * blanket-clearing it here silently wipes intentional photography the
 * moment this class is added, which is exactly what happened the first
 * time this was tried on this site's page-header section. If a section's
 * background genuinely needs its image cleared too, that should be a
 * deliberate, separate edit (clear it in the Divi Design tab), not a
 * side effect of this class.
 *
 * .seyond-refresh--divider is NOT a separate modifier that requires
 * .seyond-refresh alongside it (unlike .card--pad, which does require
 * .card) — it's the same treatment plus a hairline border-bottom, usable
 * entirely on its own. Every rule below applies to both class names.
 *
 * This only handles background-color + baseline legibility — layer
 * .section-title / .text-body-muted / .meta-label on individual headings
 * and paragraphs for the finer-grained type treatment.
 */
.seyond-refresh.seyond-refresh.seyond-refresh.seyond-refresh,
.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider {
	background-color: transparent !important;
}

.seyond-refresh.seyond-refresh.seyond-refresh.seyond-refresh :is(h1, h2, h3, h4, h5, h6),
.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider :is(h1, h2, h3, h4, h5, h6) {
	color: var(--white) !important;
}

/*
 * Divi's Text module doesn't always wrap its content in a <p> — a
 * single-paragraph text module often renders as raw text directly inside
 * .et_pb_text_inner, with no <p>/<span> for the `p, li` selector above to
 * catch. .et_pb_text (Divi's own stable class on every Text module) is the
 * reliable target for that case, since it's present regardless of what's
 * inside. A heading module also carries .et_pb_text, but its own
 * :is(h1..h6) rule above still wins for the heading itself — a direct
 * match always beats color inherited from this wrapper rule.
 */
.seyond-refresh.seyond-refresh.seyond-refresh.seyond-refresh :is(p, li, .et_pb_text),
.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider :is(p, li, .et_pb_text) {
	color: var(--white--70) !important;
}

/* Hairline divider between sections, matching the border-bottom every
   .section gets on the homepage. Divi sections can carry their own border
   settings, so this is hardened the same way as everything above. */
.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider {
	border-bottom: var(--hairline) !important;
}

.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider.seyond-refresh--divider:last-child {
	border-bottom: none !important;
}

/*
 * Divi's "CSS ID & Classes" field puts a custom class on the module's
 * wrapper div, not on the heading/paragraph tag it renders internally
 * (e.g. class="section-title" lands on .et_pb_module.et_pb_text, while the
 * actual <h1>/<h2>/<h3> inside stays untouched). Typography properties
 * don't reach the real element through that wrapper, and Divi's own
 * per-module Design-tab settings (header_font_size, header_text_color, ...)
 * generate their own class+element rules directly targeting that inner
 * tag — so even where inheritance *would* carry a property down, a
 * same-specificity Divi rule usually still wins outright.
 *
 * These selectors are written to apply whether the class ends up on the
 * heading itself (our own PHP templates) or on a Divi wrapper around one
 * (interior pages built in the Visual Builder), and to reliably beat
 * Divi's own per-module rules (both a page's Theme Options > Custom CSS
 * cache and Divi's own per-module design cache print *very* late — later
 * than anything this plugin enqueues — so a same-specificity !important
 * tie is decided by print order and we lose it). The class is repeated
 * 4x (.section-title.section-title.section-title.section-title) on the
 * descendant form to push specificity past Divi's own rules outright —
 * confirmed empirically to run at least 2 classes deep (e.g.
 * .et_pb_section_N.et_pb_section), so a single doubling wasn't enough
 * margin. The fix holds regardless of where Divi prints its own CSS.
 */
.section-title,
.section-title.section-title.section-title.section-title :is(h1, h2, h3, h4, h5, h6) {
	font-size: clamp(28px, 4vw, 40px) !important;
	line-height: 1.12 !important;
	font-weight: 400 !important;
	letter-spacing: var(--track-display) !important;
	text-transform: uppercase !important;
	color: var(--white) !important;
}

.section-title {
	text-align: center;
	text-wrap: balance;
	margin-bottom: var(--section-title-gap);
}

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

.section-title--start.section-title--start.section-title--start.section-title--start :is(h1, h2, h3, h4, h5, h6) {
	text-align: left !important;
}

.section-title-accent,
.section-title-accent.section-title-accent.section-title-accent.section-title-accent :is(h1, h2, h3, h4, h5, h6, span) {
	color: var(--teal) !important;
}

.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 ── */

/*
 * Unlike headings/paragraphs, .card's properties are legitimately
 * wrapper-level — but on interior Divi pages the wrapper this lands on
 * (a Column, Blurb, etc.) very often already has its OWN Design-tab
 * background/border/padding set, which generates a same-or-higher
 * specificity rule for that specific module. Without !important here,
 * .card silently loses to whatever that module already had configured.
 */
.card.card.card.card {
	background: var(--card-wash), var(--dark-2) !important;
	border: var(--hairline) !important;
	border-radius: var(--radius-card) !important;
}

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

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

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

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

/* ── Type ── */

/* See the .section-title comment above — same wrapper-vs-inner-tag issue
   applies to labels/body copy dropped into a Divi Text module. */
.meta-label,
.meta-label.meta-label.meta-label.meta-label :is(h1, h2, h3, h4, h5, h6, p, span) {
	font-size: var(--text-meta) !important;
	font-weight: 500 !important;
	letter-spacing: var(--track-meta) !important;
	text-transform: uppercase !important;
	color: var(--teal) !important;
}

.text-body-muted,
.text-body-muted.text-body-muted.text-body-muted.text-body-muted :is(p, span) {
	font-size: var(--text-body) !important;
	line-height: var(--text-body-lh) !important;
	color: var(--white--70) !important;
}

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

.link-quiet.link-quiet.link-quiet.link-quiet:hover,
.link-quiet.link-quiet.link-quiet.link-quiet a:hover {
	color: var(--teal) !important;
}

/* ── 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;
	}
}