/*!
 * unec-about 1.2.5 — About Us "Introduction" section.
 * Figma 88:1345, file Q5ckGwby9XewAE51OXln5p.
 *
 * Every selector is scoped under #top. There is no !important in this file.
 *
 * Custom properties the renderer writes INLINE on the section — no media
 * query in this file may re-declare any of them, because an inline
 * declaration wins over every stylesheet rule and the override would silently
 * never apply (claude/section-padding.md, trap 1):
 *
 *     --unec_ab_pt  --unec_ab_pb  --unec_ab_gap  --unec_ab_cols  --unec_ab_icon
 *
 * The responsive ladder moves --unec_ab_pad_scale (a multiplier) instead, and
 * changes column counts on grid-template-columns directly rather than through
 * a token.
 */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

#top .unec_ab_sec {
	/* ink */
	--unec_ab_ink: #231F20;
	--unec_ab_ink_soft: rgba(35, 31, 32, 0.64);
	--unec_ab_rule_ink: rgba(35, 31, 32, 0.2);
	--unec_ab_rule_light: rgba(255, 255, 255, 0.2);
	--unec_ab_card_bg: #F8F8F9;

	/* container — the house ladder */
	--unec_ab_max: 1408px;
	--unec_ab_edge: 50px;

	/* section rhythm — the house value is 100, not the 160 Figma draws.
	   claude/section-padding.md */
	--unec_ab_pad_v: 100px;
	--unec_ab_pad_scale: 1;

	/* vertical rhythm inside the section */
	--unec_ab_top_gap: 80px;
	--unec_ab_head_gap: 24px;
	--unec_ab_col_gap: 56px;

	/* the two-column split: 461 + 249 + 698 = 1408 */
	--unec_ab_left: 461fr;
	--unec_ab_right: 698fr;
	--unec_ab_split: 249px;
	--unec_ab_split_row: 56px;

	/* card box */
	--unec_ab_card_px: 48px;
	--unec_ab_card_py: 72px;
	--unec_ab_card_gap: 40px;

	/* type */
	--unec_ab_label_fs: 17px;
	--unec_ab_label_lh: 26px;
	--unec_ab_h_fs: 72px;
	--unec_ab_h_lh: calc(var(--unec_ab_h_fs) * 0.9444444444);
	--unec_ab_intro_fs: 17px;
	--unec_ab_intro_lh: 26px;
	--unec_ab_num_fs: 56px;
	--unec_ab_num_lh: calc(var(--unec_ab_num_fs) * 0.9285714286);
	--unec_ab_txt_fs: 20px;
	--unec_ab_txt_lh: calc(var(--unec_ab_txt_fs) * 1.5);

	/* Pretendard typo metrics, upem 2048: ascender 1949, descender 494,
	   capHeight 1448. USE_TYPO_METRICS is set on the shipped faces.
	   Verified with fontTools — claude/certificates-page.md. */
	--unec_ab_asc: 0.9516601563;
	--unec_ab_desc: 0.2412109375;
	--unec_ab_cap: 0.7070312500;
}

/* --------------------------------------------------------------------------
   Container release — v1.0.1
   -------------------------------------------------------------------------- */

/*
 * v1.0.0 relied on unec-service/ for this, as unec-certificates/ and
 * unec-solutions/ do. That was wrong, and it is wrong for them too:
 *
 *   unec-service.css enqueues ONLY when one of ITS OWN shortcodes is on the
 *   page.
 *
 * The certificates and solutions pages happen to carry
 * [unec_service_intro], so the release loads there by accident. The About
 * page carries no unec-service shortcode, so `unec_svc_host` was on the
 * Color Section with nothing on the page reading it — the class was right and
 * the rule simply was not there. Confirmed live: 5 unec-* stylesheets loaded,
 * unec-service.css not among them, `.container` still capped by
 * `.responsive .container { max-width: 1310px }` at 0-2-0.
 *
 * So this module releases the container itself. Three selectors:
 *
 *  1. `.unec_svc_host` — a duplicate of unec-service's rule, and a deliberate
 *     deviation from "reuse, don't copy". Reuse is only reuse if the original
 *     is guaranteed to be present; this one is not. It keeps pages that
 *     already carry the class working in a browser without :has().
 *  2. `.unec_ab_host` — the same opt-in under this module's own name.
 *  3. The :has() route, which needs NO class on the section at all and is
 *     what makes this robust. It walks back UP from our own element, because
 *     `.container` is an ANCESTOR of the section, not a child — a class on the
 *     Color Section cannot reach it any other way (claude/contact-pages.md #2).
 *
 * `width='container'` opts out, so a deliberately contained instance is not
 * released out from under itself.
 *
 * No !important: `#top .unec_svc_host .container` is 1-2-0 and the :has()
 * form 1-3-0, both of which beat `.responsive .container`. Verified against
 * the live page — nothing on it sets `.container` width above 0-2-0.
 */
#top .unec_svc_host .container,
#top .unec_ab_host .container,
#top .container_wrap:has(> .container .unec_ab_sec:not(.unec_ab_sec_contained)) > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

#top .unec_ab_sec {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding-top: calc(var(--unec_ab_pt, var(--unec_ab_pad_v)) * var(--unec_ab_pad_scale));
	padding-bottom: calc(var(--unec_ab_pb, var(--unec_ab_pad_v)) * var(--unec_ab_pad_scale));
	padding-left: max(var(--unec_ab_edge), (100% - var(--unec_ab_max)) / 2);
	padding-right: max(var(--unec_ab_edge), (100% - var(--unec_ab_max)) / 2);
	color: var(--unec_ab_ink);
}

#top .unec_ab_sec_contained {
	padding-left: 0;
	padding-right: 0;
}

/* Enfold styles bare elements (#top div, #top p, #top h2 …) at 1-0-1, which
   beats inheritance from a class. Restated per claude/services-page.md trap 1. */
#top .unec_ab_sec,
#top .unec_ab_sec * {
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-feature-settings: normal;
	font-variant-numeric: normal;
}

#top .unec_ab_in {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--unec_ab_top_gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Cap-height trim — the house method
   -------------------------------------------------------------------------- */

/*
 * `.unec_ab_trim_kids` trims every paragraph of a block of author HTML —
 * a tiny_mce field produces <p> elements this module cannot put a class on.
 * The paragraphs inherit --unec_ab_fs / --unec_ab_lh from the block.
 */
#top .unec_ab_trim,
#top .unec_ab_trim_kids > p {
	--unec_ab_hl: calc((var(--unec_ab_lh) - (var(--unec_ab_asc) + var(--unec_ab_desc)) * var(--unec_ab_fs)) / 2);
	--unec_ab_trim_t: calc(var(--unec_ab_hl) + (var(--unec_ab_asc) - var(--unec_ab_cap)) * var(--unec_ab_fs));
	--unec_ab_trim_b: calc(var(--unec_ab_hl) + var(--unec_ab_desc) * var(--unec_ab_fs));
	font-size: var(--unec_ab_fs);
	line-height: var(--unec_ab_lh);
}

/* display: table composes with the element's own margins instead of fighting
   them, and stops the pseudo-element margin collapsing through. */
#top .unec_ab_trim::before,
#top .unec_ab_trim::after,
#top .unec_ab_trim_kids > p::before,
#top .unec_ab_trim_kids > p::after {
	content: '';
	display: table;
	width: 0;
	height: 0;
}

#top .unec_ab_trim::before,
#top .unec_ab_trim_kids > p::before {
	margin-top: 0;
	margin-bottom: calc(-1 * var(--unec_ab_trim_t));
}

#top .unec_ab_trim::after,
#top .unec_ab_trim_kids > p::after {
	margin-top: calc(-1 * var(--unec_ab_trim_b));
	margin-bottom: 0;
}

@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
	#top .unec_ab_trim,
	#top .unec_ab_trim_kids > p {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	#top .unec_ab_trim::before,
	#top .unec_ab_trim::after,
	#top .unec_ab_trim_kids > p::before,
	#top .unec_ab_trim_kids > p::after {
		content: none;
	}
}

/*
 * The gap that reproduces a blank line between two trimmed paragraphs.
 *
 * A trimmed block ends at its last baseline and starts at its first cap line.
 * In the untrimmed original, the cap line two line boxes down sits
 * 2 × line-height below the cap line above it, so the distance from that
 * baseline to the next cap line is 2 × lh − cap × fs. Computed, not guessed:
 * at 17/26 it is 39.98, and three paragraphs then measure 480.02 against the
 * 480 Figma draws.
 */
#top .unec_ab_trim_kids {
	--unec_ab_para_gap: calc(2 * var(--unec_ab_lh) - var(--unec_ab_cap) * var(--unec_ab_fs));
	display: flex;
	flex-direction: column;
	gap: var(--unec_ab_para_gap);
	/*
	 * The container carries the type as well as the paragraphs do. Anything an
	 * editor leaves outside a <p> is an anonymous flex item here, and without
	 * this it inherits Enfold's `#top div { font-size: 13px }` — one paragraph
	 * visibly smaller than its neighbours. The renderer wraps orphans before
	 * they get this far; this is the belt.
	 */
	font-size: var(--unec_ab_fs);
	line-height: var(--unec_ab_lh);
}

#top .unec_ab_trim_kids > p:empty {
	display: none;
}

#top .unec_ab_trim_kids > p {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Eyebrow + hairline
   -------------------------------------------------------------------------- */

#top .unec_ab_head {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--unec_ab_head_gap);
	width: 100%;
	margin: 0;
	padding: 0;
}

#top .unec_ab_label {
	--unec_ab_fs: var(--unec_ab_label_fs);
	--unec_ab_lh: var(--unec_ab_label_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	overflow-wrap: break-word;
}

#top .unec_ab_rule {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	background-color: var(--unec_ab_rule_ink);
}

/* --------------------------------------------------------------------------
   The split
   -------------------------------------------------------------------------- */

#top .unec_ab_main {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--unec_ab_left) var(--unec_ab_right);
	gap: var(--unec_ab_split_row) var(--unec_ab_split);
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0;
}

#top .unec_ab_col {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--unec_ab_col_gap);
	align-items: flex-start;
	min-width: 0;
	margin: 0;
	padding: 0;
}

#top .unec_ab_h {
	--unec_ab_fs: var(--unec_ab_h_fs);
	--unec_ab_lh: var(--unec_ab_h_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink);
	font-weight: 600;
	letter-spacing: -0.04em;
	text-transform: none;
	overflow-wrap: break-word;
}

#top .unec_ab_intro {
	--unec_ab_fs: var(--unec_ab_intro_fs);
	--unec_ab_lh: var(--unec_ab_intro_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink_soft);
	font-weight: 400;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

#top .unec_ab_cards {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--unec_ab_cols, 2), minmax(0, 1fr));
	gap: var(--unec_ab_gap, 12px);
	align-items: stretch;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_ab_cards > li.unec_ab_card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--unec_ab_card_gap);
	min-width: 0;
	margin: 0;
	padding: var(--unec_ab_card_py) var(--unec_ab_card_px);
	background-color: var(--unec_ab_card_bg);
	list-style: none;
	text-align: center;
}

#top .unec_ab_cards > li.unec_ab_card::before,
#top .unec_ab_cards > li.unec_ab_card::after {
	content: none;
}

#top .unec_ab_icon {
	display: block;
	flex: 0 0 auto;
	width: var(--unec_ab_icon, 48px);
	height: var(--unec_ab_icon, 48px);
	margin: 0;
	padding: 0;
}

#top .unec_ab_glyph {
	display: block;
	width: var(--unec_ab_icon, 48px);
	height: var(--unec_ab_icon, 48px);
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

#top .unec_ab_num {
	--unec_ab_fs: var(--unec_ab_num_fs);
	--unec_ab_lh: var(--unec_ab_num_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink);
	font-weight: 600;
	letter-spacing: -0.04em;
	font-variant-numeric: lining-nums tabular-nums;
}

#top .unec_ab_txt {
	--unec_ab_fs: var(--unec_ab_txt_fs);
	--unec_ab_lh: var(--unec_ab_txt_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink);
	font-weight: 500;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}


/* ==========================================================================
   [unec_about_story] — the dark About block (Figma 88:1307)
   ========================================================================== */

#top .unec_st_sec {
	--unec_st_measure: 698px;
	--unec_st_img: 698fr;
	--unec_st_body: 461fr;
	--unec_st_gap: 249px;
	--unec_st_lead: 64px;
	--unec_st_h_fs: 56px;
	--unec_st_h_lh: calc(var(--unec_st_h_fs) * 0.9285714286);
	--unec_st_ink: #FFFFFF;
	--unec_st_ink_soft: rgba(255, 255, 255, 0.64);
	color: var(--unec_st_ink);
}

#top .unec_st_sec_dark_ink {
	--unec_st_ink: #231F20;
	--unec_st_ink_soft: rgba(35, 31, 32, 0.64);
}

#top .unec_st_in {
	align-items: center;
	gap: var(--unec_st_lead);
}

#top .unec_st_h {
	--unec_ab_fs: var(--unec_st_h_fs);
	--unec_ab_lh: var(--unec_st_h_lh);
	display: block;
	width: 100%;
	max-width: var(--unec_st_measure);
	margin: 0;
	padding: 0;
	color: var(--unec_st_ink);
	font-weight: 600;
	letter-spacing: -0.04em;
	text-transform: none;
	overflow-wrap: break-word;
}

/* 698 + 249 + 461 = 1408 — the Introduction split, mirrored. The fr pair
   holds the ratio at every width from one set of numbers. */
#top .unec_st_row {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--unec_st_img) var(--unec_st_body);
	column-gap: var(--unec_st_gap);
	row-gap: var(--unec_st_lead);
	align-items: end;
	width: 100%;
	margin: 0;
	padding: 0;
}

#top .unec_st_sec_top .unec_st_row {
	align-items: start;
}

#top .unec_st_media {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: rgba(255, 255, 255, 0.04);
}

#top .unec_st_img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center center;
}

#top .unec_st_body {
	--unec_ab_fs: 17px;
	--unec_ab_lh: 26px;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--unec_st_ink_soft);
	font-weight: 400;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

/* ==========================================================================
   [unec_about_team] — Management Message (Figma 142:2303)
   ========================================================================== */

/*
 * Everything in the overlay is anchored either to the right content edge or
 * to the portrait/panel boundary, and the boundary is one expression:
 *
 *   inset + (band − inset) × ratio
 *
 * At 1728 that is 160 + 1568 × 0.44515 = 858, the number Figma draws. Because
 * it is a ratio rather than a width, the whole overlay tracks the band at
 * every viewport without a second set of positions.
 */
#top .unec_mm_sec {
	--unec_mm_h: 800px;

	/*
	 * The band is full bleed, but its CONTENT has to line up with every other
	 * section on the page, so both insets are the house gutter rather than a
	 * fixed 160.
	 *
	 * At 1728 the gutter is (1728 − 1408) / 2 = 160, which is the number Figma
	 * draws — so nothing changes at the design width. Above it the gutter grows
	 * and a fixed 160 would leave the portrait, the eyebrow and the quote frame
	 * hanging left of the section above. At 1900 that is a 87px step, and it is
	 * only visible on a wide screen, which is why it survived the first build.
	 */
	--unec_mm_inset: max(var(--unec_ab_edge), (100% - var(--unec_ab_max)) / 2);
	--unec_mm_edge: max(var(--unec_ab_edge), (100% - var(--unec_ab_max)) / 2);
	--unec_mm_ratio: 0.4451530612;
	--unec_mm_top: 80px;
	--unec_mm_base: 80px;
	--unec_mm_frame_top: 181px;
	--unec_mm_frame_w: 580px;
	--unec_mm_text_w: 461px;
	--unec_mm_rule_split: 225px;
	--unec_mm_title_off: 244px;
	--unec_mm_role_x: 80px;
	--unec_mm_who_gap: 12px;
	--unec_mm_mark: 64px;
	--unec_mm_more_gap: 80px;
	--unec_mm_more_icon: 24px;
	--unec_mm_thumb_w: 107px;
	--unec_mm_thumb_h: 140px;
	--unec_mm_thumb_off: 28px;
	--unec_mm_arrow: 56px;
	--unec_mm_yellow: #FFC20E;
	--unec_mm_title_fs: 92px;
	--unec_mm_title_lh: calc(var(--unec_mm_title_fs) * 0.9565217391);
	--unec_mm_quote_fs: 20px;
	--unec_mm_quote_lh: calc(var(--unec_mm_quote_fs) * 1.5);
	--unec_mm_label_fs: 17px;
	--unec_mm_label_lh: 26px;

	/* full bleed: the band carries its own inset, so the house gutter is off */
	padding-left: 0;
	padding-right: 0;
}

#top .unec_mm_stage {
	--unec_mm_bound: calc(var(--unec_mm_inset) + (100% - var(--unec_mm_inset)) * var(--unec_mm_ratio));
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: var(--unec_mm_h);
	margin: 0;
	padding: 0;
}

#top .unec_mm_plate {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--unec_mm_bound);
	display: block;
	margin: 0;
	padding: 0;
	background-color: var(--unec_mm_yellow);
}

/* --- portraits ---------------------------------------------------------- */

#top .unec_mm_photos {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--unec_mm_inset);
	width: calc(var(--unec_mm_bound) - var(--unec_mm_inset));
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#top .unec_mm_photos .splide__track,
#top .unec_mm_photos .splide__list {
	height: 100%;
}

#top .unec_mm_pslide {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#top .unec_mm_portrait {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center top;
}

#top .unec_mm_who {
	position: absolute;
	bottom: var(--unec_mm_base);
	left: var(--unec_mm_role_x);
	display: flex;
	flex-direction: column;
	gap: var(--unec_mm_who_gap);
	align-items: flex-start;
	margin: 0;
	padding: 0;
}

#top .unec_mm_name {
	--unec_ab_fs: var(--unec_mm_quote_fs);
	--unec_ab_lh: var(--unec_mm_quote_lh);
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-weight: 500;
	letter-spacing: -0.01em;
}

#top .unec_mm_role {
	--unec_ab_fs: var(--unec_mm_label_fs);
	--unec_ab_lh: var(--unec_mm_label_lh);
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.64);
	font-weight: 400;
	letter-spacing: 0;
}

/* --- eyebrow + two-tone hairline ---------------------------------------- */

#top .unec_mm_head {
	position: absolute;
	top: var(--unec_mm_top);
	right: var(--unec_mm_edge);
	left: calc(var(--unec_mm_bound) - var(--unec_mm_rule_split));
	display: flex;
	flex-direction: column;
	gap: var(--unec_ab_head_gap);
	margin: 0;
	padding: 0;
}

#top .unec_mm_label {
	--unec_ab_fs: var(--unec_mm_label_fs);
	--unec_ab_lh: var(--unec_mm_label_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-weight: 500;
	letter-spacing: 0;
}

/* One bar with a hard stop rather than two elements: the stop is the same
   distance the block is offset from the boundary, so the join cannot drift. */
#top .unec_mm_rule {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	background-image: linear-gradient(
		to right,
		var(--unec_ab_rule_light) 0,
		var(--unec_ab_rule_light) var(--unec_mm_rule_split),
		var(--unec_ab_rule_ink) var(--unec_mm_rule_split),
		var(--unec_ab_rule_ink) 100%
	);
}

/* --- the two-tone headline ---------------------------------------------- */

#top .unec_mm_title {
	position: absolute;
	bottom: var(--unec_mm_base);
	left: calc(var(--unec_mm_bound) - var(--unec_mm_title_off));
	margin: 0;
	padding: 0;
}

#top .unec_mm_title_t {
	--unec_ab_fs: var(--unec_mm_title_fs);
	--unec_ab_lh: var(--unec_mm_title_lh);
	display: block;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-weight: 600;
	letter-spacing: -0.04em;
	text-transform: none;
	white-space: nowrap;
}

#top .unec_mm_title_dark {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--unec_ab_ink);
	clip-path: inset(0 0 0 var(--unec_mm_title_off));
}

/* --- the quote frame ----------------------------------------------------- */

#top .unec_mm_frame {
	position: absolute;
	top: var(--unec_mm_frame_top);
	right: var(--unec_mm_edge);
	bottom: var(--unec_mm_base);
	width: var(--unec_mm_frame_w);
	margin: 0;
	padding: 0;
}

/* Top-left of the frame, not inset by its own size: the mark sits beside the
   quote column, 55px clear of it, which is what the frame draws. */
#top .unec_mm_mark {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: var(--unec_mm_mark);
	height: var(--unec_mm_mark);
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink);
}

#top .unec_mm_mark_svg {
	display: block;
	width: 100%;
	height: 100%;
}

#top .unec_mm_quotes {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--unec_mm_text_w);
	margin: 0;
	padding: 0;
}

/* A block-level column, not an inline flow: an inline-level Learn More would
   sit in a line box and add the strut's descender to the slide height, which
   autoHeight then hands to the track. */
#top .unec_mm_qslide {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0;
}

#top .unec_mm_quote {
	--unec_ab_fs: var(--unec_mm_quote_fs);
	--unec_ab_lh: var(--unec_mm_quote_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--unec_ab_ink);
	font-weight: 500;
	font-style: normal;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
	quotes: none;
}

#top .unec_mm_more {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: var(--unec_mm_more_gap) 0 0 0;
	padding: 0;
	color: var(--unec_ab_ink);
	text-decoration: none;
}

#top .unec_mm_more_i {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_mm_more_icon);
	height: var(--unec_mm_more_icon);
	margin: 0;
	padding: 0;
	border-radius: 999px;
	background-color: var(--unec_ab_ink);
	color: var(--unec_mm_yellow);
}

#top .unec_mm_more_t {
	--unec_ab_fs: var(--unec_mm_label_fs);
	--unec_ab_lh: var(--unec_mm_label_lh);
	display: block;
	margin: 0;
	padding: 0;
	font-weight: 500;
	letter-spacing: 0;
}

#top .unec_mm_more:hover .unec_mm_more_t,
#top .unec_mm_more:focus-visible .unec_mm_more_t {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- the next control, wearing the next portrait ------------------------- */

#top .unec_mm_nav {
	position: absolute;
	right: 0;
	bottom: 0;
	width: calc(var(--unec_mm_thumb_off) + var(--unec_mm_thumb_w));
	height: calc(var(--unec_mm_thumb_off) + var(--unec_mm_thumb_h));
	margin: 0;
	padding: 0;
}

#top .unec_mm_thumb_wrap {
	position: absolute;
	top: var(--unec_mm_thumb_off);
	left: var(--unec_mm_thumb_off);
	display: block;
	width: var(--unec_mm_thumb_w);
	height: var(--unec_mm_thumb_h);
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#top .unec_mm_thumb {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center top;
}

#top .unec_mm_thumb_rule {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 64px;
	height: 1px;
	margin: 0;
	padding: 0;
	background-color: var(--unec_ab_ink);
}

#top .unec_mm_next {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--unec_mm_arrow);
	height: var(--unec_mm_arrow);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--unec_ab_ink);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* The house state is brand yellow, but this control sits ON the brand yellow
   panel, so it inverts to white instead. Deliberate deviation, recorded. */
#top .unec_mm_next:hover,
#top .unec_mm_next:focus-visible {
	background-color: #FFFFFF;
	color: var(--unec_ab_ink);
}

#top .unec_mm_next:focus-visible {
	outline: 2px solid var(--unec_ab_ink);
	outline-offset: 2px;
}

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

/* --- before Splide mounts, and when it never does ------------------------ */

/*
 * splide-core sets `.splide { visibility: hidden }` and only reveals it on
 * `.is-initialized`, so with JavaScript off the whole slider is invisible —
 * not merely unslidable. This restores it (1-2-0, so no !important needed).
 *
 * DO NOT also hide the slides past the first. The obvious companion rule —
 *
 *     .unec_mm_photos:not(.is-initialized) .splide__slide:not(:first-child)
 *         { display: none }
 *
 * — is what v1.1.0 was first written with, and it silently breaks the mount.
 * Splide measures during mount, BEFORE it adds `.is-initialized`, and its
 * Layout reads `rect(slides[n]).right − rect(list).left`. A `display: none`
 * slide has an all-zero rect, so the offset came out −160 (the band's own
 * left inset) instead of −1396, and the visible window showed two clones
 * rather than the active slide. Nothing errored; `refresh()` fixed it, which
 * is what gave the cause away.
 *
 * None of it is needed: `.splide__list` is already `display: flex` and
 * `.splide__track` is already `overflow: hidden`, both unconditionally, so
 * without the script the later slides sit outside the window and are clipped.
 * The first slide is all you see either way.
 */
#top .unec_mm_photos:not(.is-initialized),
#top .unec_mm_quotes:not(.is-initialized) {
	visibility: visible;
}

/* The control cannot work without the script, so it is not shown without it. */
#top .unec_mm_stage:not(.unec_mm_ready) .unec_mm_nav {
	display: none;
}


/* ==========================================================================
   [unec_about_history] — Our Journey (Figma 88:1274)
   ========================================================================== */

/*
 * The ring is pinned and the years slide through it. That is not decoration
 * on top of the frame, it IS the frame: Figma draws eight years in a 1764px
 * stack beside a 2499px entry list, with the ring centred on the active year.
 * Two columns of different heights cannot stay in step while both scroll.
 */
#top .unec_hs_sec {
	--unec_hs_col: 616fr;
	--unec_hs_entries_col: 461fr;
	--unec_hs_gap: 331px;
	--unec_hs_ring: 462px;
	--unec_hs_step: 231px;
	--unec_hs_year_fs: 208px;
	--unec_hs_year_lh: calc(var(--unec_hs_year_fs) * 0.9807692308);
	--unec_hs_year_off: 123px;
	--unec_hs_ghost: #F8F8F9;
	--unec_hs_entry_gap: 48px;
	--unec_hs_label_gap: 20px;
	--unec_hs_body_fs: 20px;
	--unec_hs_body_lh: calc(var(--unec_hs_body_fs) * 1.5);
	--unec_hs_tail: calc(var(--unec_hs_ring) / 2);
	--unec_hs_move: 0.6s;
}

/* 616 + 331 + 461 = 1408. The fr pair holds the ratio as the band narrows. */
#top .unec_hs_main {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: var(--unec_hs_col) var(--unec_hs_entries_col);
	column-gap: var(--unec_hs_gap);
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* --- the pinned ring ----------------------------------------------------- */

/*
 * The sticky box is the RING, not the viewport.
 *
 * A sticky element stops travelling when its own bottom reaches the bottom of
 * its containing block, so the taller the box, the sooner the pin line stops
 * short of the end of the list. At 100vh the line stopped half a screen above
 * the last milestone, which could therefore never become current — and at the
 * top of the page it started already past the first one. Sizing the box to the
 * ring costs half a ring at each end instead of half a screen, and the tail on
 * the entry column below covers the remainder.
 *
 * `top` centres the ring in the viewport while it is pinned.
 */
#top .unec_hs_years {
	position: sticky;
	top: calc(50vh - var(--unec_hs_ring) / 2);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: var(--unec_hs_ring);
	min-width: 0;
	margin: 0;
	padding: 0;
}

/*
 * Two ancestors on this install make themselves scroll containers, and a
 * sticky element sticks inside the nearest one rather than the viewport.
 * Neither of them scrolls, so the ring would simply never pin — no error, no
 * warning, the section just would not do the one thing it is for.
 *
 *   #wrap_all  overflow: hidden
 *   body#top   overflow: hidden auto
 *
 * `clip` rather than `visible`, because `overflow: clip` does NOT create a
 * scroll container while still clipping — so sticky resolves against the
 * viewport again and Enfold keeps the horizontal-overflow protection the
 * hidden was there for.
 *
 * `display: flow-root` on #wrap_all is NOT optional, and leaving it out took
 * the whole page down. `overflow: hidden` was doing a second job nobody had
 * written down: it establishes a block formatting context, which is what made
 * #wrap_all contain Enfold's floated columns. `clip` establishes no such
 * context, so the floats escaped, #wrap_all collapsed to zero height — and
 * then clipped everything inside it. A white page, with the markup all
 * present and correct. `flow-root` gives back the formatting context and
 * nothing else.
 *
 * Verified on the live page in both directions: #wrap_all back to its full
 * height, the ring holding at mid-viewport, no horizontal scrollbar, the
 * fixed header and the footer untouched.
 *
 * Only these two are released, and only on pages that actually carry a
 * timeline. Every wrapper between them and the section reads `visible` on
 * this install; if a future Enfold clips one of those too, it needs the same
 * pair — `clip` for the clipping, `flow-root` for the floats.
 */
#top #wrap_all:has(.unec_hs_sec) {
	display: flow-root;
	overflow: clip;
}

#top:has(.unec_hs_sec) {
	overflow-x: clip;
	overflow-y: visible;
}

#top .unec_hs_stage {
	position: relative;
	flex: 0 0 auto;
	width: var(--unec_hs_ring);
	height: var(--unec_hs_ring);
	margin: 0;
	padding: 0;
}

#top .unec_hs_ring {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

#top .unec_hs_track {
	fill: none;
	stroke: var(--unec_ab_rule_ink);
	stroke-width: 1;
}

/* Rotated so the arc starts at twelve o'clock rather than three. */
#top .unec_hs_prog {
	fill: none;
	stroke: var(--unec_ab_ink);
	stroke-width: 1;
	stroke-linecap: butt;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
}

/*
 * The ghosts have to end somewhere once the ring is pinned — the frame draws a
 * stack that fits on the page, and a pinned one does not. A mask fades them
 * out rather than cutting them off, and because the window is absolutely
 * positioned it adds nothing to the sticky box's height.
 */
#top .unec_hs_window {
	position: absolute;
	top: 50%;
	right: 0;
	/*
	 * Wider than the ring on the left, because a revealed four-digit year is
	 * wider than the ring's own box and this window clips BOTH axes — the
	 * first draft sat flush with the stage and painted "2020" as "020". Left
	 * overflow creates no scrollbar in a left-to-right document, so extending
	 * past the gutter costs nothing.
	 */
	left: calc(-1 * var(--unec_hs_ring) / 2);
	height: calc(var(--unec_hs_ring) * 3);
	margin: calc(var(--unec_hs_ring) * -1.5) 0 0 0;
	padding: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}

#top .unec_hs_list {
	position: absolute;
	top: 50%;
	right: var(--unec_hs_year_off);
	width: max-content;
	margin: calc(var(--unec_hs_step) / -2) 0 0 0;
	padding: 0;
	list-style: none;
	transform: translateY(calc(-1 * var(--unec_hs_i, 0) * var(--unec_hs_step)));
	transition: transform var(--unec_hs_move) cubic-bezier(0.4, 0, 0.2, 1);
}

#top .unec_hs_list > li.unec_hs_year {
	position: relative;
	height: var(--unec_hs_step);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The trimmed box is centred, not the line box: `top: 50%` on a box whose
 * height IS the cap height puts the digits' cap centre on the ring's centre
 * line. At 208/204 the two differ by only 0.4px, but the module measures cap
 * lines everywhere else and this stays consistent with that.
 */
#top .unec_hs_y {
	--unec_ab_fs: var(--unec_hs_year_fs);
	--unec_ab_lh: var(--unec_hs_year_lh);
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	margin: 0;
	padding: 0;
	color: var(--unec_hs_ghost);
	font-weight: 600;
	letter-spacing: -0.05em;
	white-space: nowrap;
	/*
	 * width: max-content, and it is load-bearing.
	 *
	 * The box is absolutely positioned inside a list whose own width is 0 —
	 * every year is out of flow, so nothing gives the list an intrinsic width.
	 * A shrink-to-fit box with no available space resolves to its MIN-content,
	 * and the collapsed prefix contributes nothing to that, so the box stayed
	 * the width of "89" and the revealed "19" pushed the suffix out to the
	 * right: the whole stack lost its alignment the moment a year activated.
	 * (text-align: right does not rescue it — browsers overflow to the end
	 * edge regardless of alignment.)
	 *
	 * Sized to max-content instead, the box tracks the reveal and, anchored by
	 * right: 0, grows leftwards — so "89" never moves as "19" appears in front
	 * of it, which is the reason the design right-aligns the stack at all.
	 */
	width: max-content;
	transform: translateY(-50%);
	transition: color var(--unec_hs_move) ease;
}

#top .unec_hs_year.is-active .unec_hs_y {
	color: var(--unec_ab_ink);
}

/*
 * The 2-to-4 digit reveal, as a clip rather than a resize.
 *
 * The first attempt animated a grid track from 0fr to 1fr, which is the usual
 * way to transition to a content-sized width. It resolved the 1fr against
 * stale available space and settled a track NARROWER than the digits, so the
 * year rendered as "020" — a clipped 2020 — and no amount of waiting fixed
 * it, because nothing was still animating.
 *
 * clip-path has none of that: the prefix always occupies its natural width, so
 * the box never changes size and the suffix never moves; the inset simply
 * uncovers it from the right edge leftwards. Layout is untouched, the wipe is
 * exact, and "89" holds still while "19" arrives in front of it — which is
 * what the right-aligned stack is for.
 */
#top .unec_hs_pre {
	display: inline-block;
	vertical-align: baseline;
	clip-path: inset(0 0 0 100%);
	transition: clip-path var(--unec_hs_move) cubic-bezier(0.4, 0, 0.2, 1);
}

#top .unec_hs_year.is-active .unec_hs_pre {
	clip-path: inset(0 0 0 0);
}

/*
 * Reduced motion: everything still arrives, nothing travels.
 *
 * The same rule covers the first paint. The script takes its first
 * measurement before it marks the section ready, so the year that is already
 * correct in the markup never animates into place from slot zero.
 */
#top .unec_hs_main.unec_hs_still .unec_hs_list,
#top .unec_hs_main.unec_hs_still .unec_hs_y,
#top .unec_hs_main.unec_hs_still .unec_hs_pre,
#top .unec_hs_main:not(.unec_hs_ready) .unec_hs_list,
#top .unec_hs_main:not(.unec_hs_ready) .unec_hs_y,
#top .unec_hs_main:not(.unec_hs_ready) .unec_hs_pre {
	transition: none;
}

/* --- the entries --------------------------------------------------------- */

/*
 * The tail is not slack. The pinned ring stops half its own height above the
 * end of this column, so without it the last milestone can never be brought to
 * the line and its year never appears — the one entry a reader is most likely
 * to want. This is the space that lets them reach it.
 */
#top .unec_hs_entries {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--unec_hs_entry_gap);
	min-width: 0;
	margin: 0;
	padding: 0 0 var(--unec_hs_tail) 0;
	list-style: none;
}

#top .unec_hs_entries > li.unec_hs_entry {
	display: flex;
	flex-direction: column;
	gap: var(--unec_hs_label_gap);
	align-items: flex-start;
	min-width: 0;
	margin: 0;
	padding: 0 0 var(--unec_hs_entry_gap) 0;
	border-bottom: 1px solid var(--unec_ab_rule_ink);
	list-style: none;
}

#top .unec_hs_entries > li.unec_hs_entry::before,
#top .unec_hs_entries > li.unec_hs_entry::after {
	content: none;
}

#top .unec_hs_label {
	--unec_ab_fs: var(--unec_ab_label_fs);
	--unec_ab_lh: var(--unec_ab_label_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink_soft);
	font-weight: 400;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

#top .unec_hs_body {
	--unec_ab_fs: var(--unec_hs_body_fs);
	--unec_ab_lh: var(--unec_hs_body_lh);
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_ab_ink);
	font-weight: 500;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Responsive ladder — 1400 / 1180 / 1024 / 768 / 480, descending.
   Every spacing token below is monotonically non-increasing.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1400px) {
	#top .unec_ab_sec {
		--unec_ab_pad_scale: 0.8;
		--unec_ab_top_gap: 64px;
		--unec_ab_col_gap: 48px;
		--unec_ab_split: 160px;
		--unec_ab_split_row: 48px;
		--unec_ab_card_px: 40px;
		--unec_ab_card_py: 56px;
		--unec_ab_card_gap: 32px;
		--unec_ab_h_fs: 64px;
		--unec_st_gap: 160px;
		--unec_st_lead: 56px;
		--unec_st_h_fs: 48px;
		--unec_mm_title_fs: 76px;
		--unec_mm_frame_w: 520px;
		--unec_mm_text_w: 420px;
		--unec_mm_frame_top: 160px;
		--unec_hs_gap: 200px;
		--unec_hs_ring: 400px;
		--unec_hs_step: 200px;
		--unec_hs_year_fs: 180px;
		--unec_hs_year_off: 106px;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_ab_sec {
		--unec_ab_pad_scale: 0.7;
		--unec_ab_top_gap: 56px;
		--unec_ab_head_gap: 20px;
		--unec_ab_col_gap: 40px;
		--unec_ab_split: 96px;
		--unec_ab_split_row: 40px;
		--unec_ab_card_px: 32px;
		--unec_ab_card_py: 48px;
		--unec_ab_card_gap: 28px;
		--unec_ab_h_fs: 56px;
		--unec_ab_num_fs: 48px;
		--unec_ab_txt_fs: 18px;
		--unec_st_gap: 96px;
		--unec_st_lead: 48px;
		--unec_st_h_fs: 40px;
		--unec_mm_top: 64px;
		--unec_mm_base: 64px;
		--unec_mm_title_fs: 60px;
		--unec_mm_title_off: 200px;
		--unec_mm_rule_split: 180px;
		--unec_mm_frame_w: 460px;
		--unec_mm_text_w: 380px;
		--unec_mm_frame_top: 140px;
		--unec_mm_quote_fs: 18px;
		--unec_mm_role_x: 56px;
		--unec_mm_more_gap: 56px;
		--unec_hs_gap: 120px;
		--unec_hs_ring: 320px;
		--unec_hs_step: 160px;
		--unec_hs_year_fs: 144px;
		--unec_hs_year_off: 85px;
		--unec_hs_entry_gap: 40px;
		--unec_hs_body_fs: 18px;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_ab_sec {
		--unec_ab_pad_scale: 0.6;
		--unec_ab_top_gap: 48px;
		--unec_ab_card_py: 44px;
		--unec_st_lead: 40px;
		--unec_st_h_fs: 36px;
		--unec_mm_inset: 0px;
		--unec_mm_top: 48px;
		--unec_mm_base: 48px;
		--unec_mm_title_fs: 56px;
		--unec_mm_role_x: 40px;
		--unec_mm_more_gap: 48px;
		--unec_hs_entry_gap: 36px;
		--unec_hs_label_gap: 16px;
	}

	#top .unec_ab_main {
		grid-template-columns: minmax(0, 1fr);
	}

	/* --- the band stacks: eyebrow, headline, portrait, panel ------------- */

	#top .unec_mm_stage {
		display: flex;
		flex-direction: column;
		height: auto;
		background-color: var(--unec_mm_yellow);
	}

	#top .unec_mm_plate {
		display: none;
	}

	#top .unec_mm_head {
		position: static;
		order: 1;
		padding: var(--unec_mm_top) var(--unec_mm_edge) 0 var(--unec_mm_edge);
	}

	#top .unec_mm_label {
		color: var(--unec_ab_ink);
	}

	/* One tone once there is no boundary to straddle. */
	#top .unec_mm_rule {
		background-image: none;
		background-color: var(--unec_ab_rule_ink);
	}

	#top .unec_mm_title {
		position: static;
		order: 2;
		padding: var(--unec_ab_head_gap) var(--unec_mm_edge) 0 var(--unec_mm_edge);
	}

	#top .unec_mm_title_t {
		color: var(--unec_ab_ink);
		white-space: normal;
	}

	#top .unec_mm_title_dark {
		display: none;
	}

	#top .unec_mm_photos {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		order: 3;
		width: 100%;
		height: auto;
		margin: var(--unec_mm_top) 0 0 0;
		aspect-ratio: 698 / 800;
	}

	#top .unec_mm_frame {
		position: static;
		order: 4;
		width: auto;
		padding: var(--unec_mm_top) var(--unec_mm_edge) var(--unec_mm_base) var(--unec_mm_edge);
	}

	#top .unec_mm_mark {
		position: static;
		margin: 0 0 var(--unec_ab_head_gap) 0;
	}

	#top .unec_mm_quotes {
		position: static;
		width: 100%;
	}

	#top .unec_mm_nav {
		position: relative;
		right: auto;
		bottom: auto;
		margin: var(--unec_mm_more_gap) 0 0 auto;
	}


	/* The pinned ring is a desktop affordance. Below this the years would be
	   taller than the screen with nowhere to pin, and every entry label
	   already carries its own year. */
	#top .unec_hs_main {
		grid-template-columns: minmax(0, 1fr);
	}

	#top .unec_hs_years {
		display: none;
	}

}

@media only screen and (max-width: 768px) {
	#top .unec_ab_sec {
		--unec_ab_pad_scale: 0.45;
		--unec_ab_edge: 40px;
		--unec_ab_top_gap: 40px;
		--unec_ab_head_gap: 16px;
		--unec_ab_col_gap: 32px;
		--unec_ab_split_row: 32px;
		--unec_ab_card_px: 28px;
		--unec_ab_card_py: 40px;
		--unec_ab_card_gap: 24px;
		--unec_ab_h_fs: 44px;
		--unec_ab_num_fs: 44px;
		--unec_st_lead: 32px;
		--unec_st_h_fs: 30px;
		--unec_mm_top: 40px;
		--unec_mm_base: 40px;
		--unec_mm_title_fs: 44px;
		--unec_mm_role_x: 32px;
		--unec_mm_more_gap: 40px;
		--unec_mm_thumb_w: 88px;
		--unec_mm_thumb_h: 116px;
		--unec_mm_arrow: 48px;
		--unec_hs_entry_gap: 32px;
	}

	#top .unec_st_row {
		grid-template-columns: minmax(0, 1fr);
	}

	#top .unec_ab_sec {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	
	#top .unec_hs_entries {
		padding-bottom: 0px !important;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_ab_sec {
		--unec_ab_pad_scale: 0.35;
		--unec_ab_edge: 24px;
		--unec_ab_top_gap: 32px;
		--unec_ab_col_gap: 24px;
		--unec_ab_split_row: 24px;
		--unec_ab_card_px: 24px;
		--unec_ab_card_py: 32px;
		--unec_ab_card_gap: 20px;
		--unec_ab_h_fs: 36px;
		--unec_ab_num_fs: 40px;
		--unec_ab_txt_fs: 17px;
		--unec_st_lead: 24px;
		--unec_st_h_fs: 26px;
		--unec_mm_top: 32px;
		--unec_mm_base: 32px;
		--unec_mm_title_fs: 34px;
		--unec_mm_role_x: 24px;
		--unec_mm_more_gap: 32px;
		--unec_mm_thumb_w: 72px;
		--unec_mm_thumb_h: 94px;
		--unec_mm_arrow: 44px;
		--unec_hs_entry_gap: 28px;
		--unec_hs_body_fs: 17px;
	}

	#top .unec_ab_cards {
		grid-template-columns: minmax(0, 1fr);
	}
}