/*
 * UNEC – Home About  v1.1.0
 * Figma 88:1146 ("About") — file Q5ckGwby9XewAE51OXln5p
 *
 * Every selector is scoped under #top. The only !important declarations are
 * the four of the container release, which are load-bearing: Enfold writes
 * the container width into a generated post-<id>.css enqueued after this
 * file, so an equally specific rule loses on source order.
 *
 * No -webkit-line-clamp anywhere.
 *
 * v1.1.0 — marker labels now sit ON the leader line, vertically centred on
 * the pin, rather than stacked beneath it. See section 10.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

#top .unec_ha_sec {
	/* Palette */
	--unec_ha_ink: #231f20;
	--unec_ha_brand: #ffc20e;
	--unec_ha_on_dark: #ffffff;
	--unec_ha_rule_a: 0.2;
	--unec_ha_note_a: 0.64;

	/* Type */
	--unec_ha_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--unec_ha_meta_fs: 17px;
	--unec_ha_meta_lh: 26px;
	--unec_ha_stat_fs: 92px;
	--unec_ha_stat_lh: 88px;
	--unec_ha_stat_ls: -0.04em;
	--unec_ha_h4_fs: 32px;
	--unec_ha_h4_lh: 38px;
	--unec_ha_h4_ls: -0.02em;
	--unec_ha_h5_fs: 28px;
	--unec_ha_h5_lh: 34px;
	--unec_ha_h5_ls: -0.02em;
	--unec_ha_h6_fs: 20px;
	--unec_ha_h6_lh: 30px;
	--unec_ha_h6_ls: -0.01em;
	/* Figma's two secondary labels disagree: "Turkey" is 17/26 and the
	 * wrapped "Italy, Spain, France, Ghana, Libya & Malta" is 17/22. Only
	 * the wrapped one shows a line height at all, so 22 is what was drawn
	 * and 22 is what ships. The token is the dial if the house 26 is wanted
	 * back. */
	--unec_ha_note_fs: 17px;
	--unec_ha_note_lh: 22px;

	/* Pretendard typo metrics, verified with fontTools against the shipped
	 * Regular / Medium / SemiBold faces. 2048 / 1949 / 494 / cap 1448,
	 * USE_TYPO_METRICS set. */
	--unec_ha_em_h: 1.19287109375;      /* (1949 + 494) / 2048 */
	--unec_ha_asc_cap: 0.24462890625;   /* (1949 - 1448) / 2048 */
	--unec_ha_desc: 0.2412109375;       /* 494 / 2048 */

	/* Layout */
	--unec_ha_max: 1408px;
	--unec_ha_gutter: max(50px, (100% - var(--unec_ha_max)) / 2);
	/* Sections run 100px top and bottom on this site; Figma draws 160. This
	 * is an ordinary flowing section, so it takes the house rhythm —
	 * claude/section-padding.md. Both padding fields offer "Section
	 * default", which writes nothing so this token governs. */
	--unec_ha_pad_v: 100px;
	--unec_ha_pad_scale: 1;

	/* The gap BETWEEN the two blocks is internal to one section, so Figma's
	 * 160 stands — the house rhythm governs the section's own edges, not
	 * what happens inside it. */
	--unec_ha_block_gap: 160px;

	--unec_ha_head_gap: 24px;           /* label -> hairline             */
	--unec_ha_head_body_gap: 80px;      /* hairline -> the two columns   */
	--unec_ha_col_gap: 249px;
	/* 461 : 249 : 698 at the 1408 measure. The columns are written as a
	 * SHARE of what the gap leaves rather than as two fixed widths, so one
	 * token moves the whole row at a breakpoint and the two can never add up
	 * to more than the measure. 461 / (1408 - 249) = 0.397756. */
	--unec_ha_col_a_f: 0.397756;
	--unec_ha_stack_gap: 24px;          /* "Since 1989" -> its subtitle  */
	--unec_ha_body_gap: 80px;           /* paragraph -> the link         */

	--unec_ha_map_head_gap: 80px;       /* map heading -> the map        */
	--unec_ha_map_head_w: 461px;
	/* The artwork is 1296 of the 1408 measure. Marker positions are a
	 * percentage OF THE ARTWORK and the CSS multiplies by this, so moving
	 * the map's width moves every marker with it instead of leaving them
	 * behind on the old geography. */
	--unec_ha_map_w: 92.0455%;
	--unec_ha_disc_a: 0.9;              /* the map reads through, as drawn */
	--unec_ha_dot_scale: 1;
	--unec_ha_arm_gap: 24px;            /* leader line -> label          */
	--unec_ha_mk_gap: 16px;             /* label title -> note           */

	/* Button */
	--unec_ha_badge: 24px;
	--unec_ha_badge_glyph: 16px;
	--unec_ha_badge_bg: var(--unec_ha_brand);
	--unec_ha_badge_ink: var(--unec_ha_ink);
	--unec_ha_row_gap: 12px;
	--unec_ha_ico_stroke: 2.5;          /* a 24 grid drawn at 16px       */

	--unec_ha_focus: var(--unec_ha_on_dark);
	--unec_ha_motion: 0.25s;
}

/* ------------------------------------------------------------------ *
 * 2. The container release
 *
 * This module ships its own copy rather than borrowing unec-service's:
 * that stylesheet is enqueued only on pages carrying a unec_svc shortcode,
 * so the shared rule is a coincidence, not infrastructure.
 * See claude/container-release.md.
 * ------------------------------------------------------------------ */

#top .unec_ha_host .container,
#top .unec_svc_host .container,
#top .container_wrap:has(> .container .unec_ha_sec:not(.unec_ha_sec_contained)) > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#top .unec_ha_host .content,
#top .unec_ha_host .flex_column,
#top .unec_ha_host .entry-content-wrapper,
#top .container_wrap:has(> .container .unec_ha_sec:not(.unec_ha_sec_contained)) .content,
#top .container_wrap:has(> .container .unec_ha_sec:not(.unec_ha_sec_contained)) .flex_column,
#top .container_wrap:has(> .container .unec_ha_sec:not(.unec_ha_sec_contained)) .entry-content-wrapper {
	float: none;
}

/* ------------------------------------------------------------------ *
 * 3. Section shell
 * ------------------------------------------------------------------ */

#top .unec_ha_sec {
	position: relative;
	display: block;
	width: 100%;
	padding-top: calc(var(--unec_ha_pt, var(--unec_ha_pad_v)) * var(--unec_ha_pad_scale));
	padding-bottom: calc(var(--unec_ha_pb, var(--unec_ha_pad_v)) * var(--unec_ha_pad_scale));
	background-color: var(--unec_ha_ink);
	color: var(--unec_ha_on_dark);
}

/* Enfold styles the bare element (#top div, 1-0-1), which BEATS inheritance
 * from the section, and the cap-trim maths is computed from the font's own
 * metrics — so the whole rhythm would shift with it, silently.
 * claude/services-page.md trap 1. */
#top .unec_ha_sec * {
	font-family: var(--unec_ha_font);
}

#top .unec_ha_sec *,
#top .unec_ha_sec *::before,
#top .unec_ha_sec *::after {
	box-sizing: border-box;
}

#top .unec_ha_inner {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ha_block_gap);
	width: 100%;
	padding-left: var(--unec_ha_gutter);
	padding-right: var(--unec_ha_gutter);
}

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

/* ------------------------------------------------------------------ *
 * 4. Cap-height trim
 *
 * The trim always sits on an inner span; on a plate it would shrink the
 * plate instead of the text.
 * ------------------------------------------------------------------ */

#top .unec_ha_sec .u_ha_trim {
	display: block;
	font-size: var(--u_ha_fs);
	line-height: var(--u_ha_lh);
	letter-spacing: var(--u_ha_ls, 0);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not (text-box-edge: cap alphabetic) {
	#top .unec_ha_sec .u_ha_trim {
		margin-top: calc(-1 * ((var(--u_ha_lh) - var(--unec_ha_em_h) * var(--u_ha_fs)) / 2 + var(--unec_ha_asc_cap) * var(--u_ha_fs)));
		margin-bottom: calc(-1 * ((var(--u_ha_lh) - var(--unec_ha_em_h) * var(--u_ha_fs)) / 2 + var(--unec_ha_desc) * var(--u_ha_fs)));
	}
}

#top .unec_ha_sec .u_ha_meta {
	--u_ha_fs: var(--unec_ha_meta_fs);
	--u_ha_lh: var(--unec_ha_meta_lh);
}

#top .unec_ha_sec .u_ha_stat {
	--u_ha_fs: var(--unec_ha_stat_fs);
	--u_ha_lh: var(--unec_ha_stat_lh);
	--u_ha_ls: var(--unec_ha_stat_ls);
}

#top .unec_ha_sec .u_ha_h4 {
	--u_ha_fs: var(--unec_ha_h4_fs);
	--u_ha_lh: var(--unec_ha_h4_lh);
	--u_ha_ls: var(--unec_ha_h4_ls);
}

#top .unec_ha_sec .u_ha_h5 {
	--u_ha_fs: var(--unec_ha_h5_fs);
	--u_ha_lh: var(--unec_ha_h5_lh);
	--u_ha_ls: var(--unec_ha_h5_ls);
}

#top .unec_ha_sec .u_ha_h6 {
	--u_ha_fs: var(--unec_ha_h6_fs);
	--u_ha_lh: var(--unec_ha_h6_lh);
	--u_ha_ls: var(--unec_ha_h6_ls);
}

#top .unec_ha_sec .u_ha_note {
	--u_ha_fs: var(--unec_ha_note_fs);
	--u_ha_lh: var(--unec_ha_note_lh);
}

/*
 * `display: flow-root` on every wrapper around a trim span is not
 * decoration. Under the negative-margin fallback the span's margins collapse
 * OUT of a plain block, so the wrapper's own box stays at the untrimmed line
 * height while the glyphs sit correctly — and the two trim paths then
 * disagree about every box above it by ~11px. Most of these wrappers happen
 * to be flex items, which already establish a formatting context; the ones
 * that are not would be the silent failure. See claude/home-split-panels.md.
 */
#top .unec_ha_sec .unec_ha_label,
#top .unec_ha_sec .unec_ha_stat,
#top .unec_ha_sec .unec_ha_stat_sub,
#top .unec_ha_sec .unec_ha_body,
#top .unec_ha_sec .unec_ha_map_heading,
#top .unec_ha_sec .unec_ha_mk_title,
#top .unec_ha_sec .unec_ha_mk_note,
#top .unec_ha_sec .unec_ha_more_label {
	display: flow-root;
	margin: 0;
	padding: 0;
	text-transform: none;
}

/* ------------------------------------------------------------------ *
 * 5. Rules
 *
 * A border takes no layout space of its own and consecutive boxes share
 * one; a Figma stroke is its own 1px box. Every hairline here is a real
 * element, which is what the design draws.
 * ------------------------------------------------------------------ */

#top .unec_ha_sec .unec_ha_rule {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--unec_ha_on_dark);
	opacity: var(--unec_ha_rule_a);
}

/* ------------------------------------------------------------------ *
 * 6. The intro block
 * ------------------------------------------------------------------ */

#top .unec_ha_intro {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ha_head_body_gap);
	width: 100%;
}

#top .unec_ha_head {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ha_head_gap);
	width: 100%;
}

#top .unec_ha_sec .unec_ha_label {
	color: var(--unec_ha_on_dark);
	font-weight: 500;
}

#top .unec_ha_cols {
	display: flex;
	align-items: flex-start;
	gap: var(--unec_ha_col_gap);
	width: 100%;
}

#top .unec_ha_col_a {
	display: flex;
	flex: 0 0 calc((100% - var(--unec_ha_col_gap)) * var(--unec_ha_col_a_f));
	flex-direction: column;
	gap: var(--unec_ha_stack_gap);
	min-width: 0;
}

#top .unec_ha_col_b {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--unec_ha_body_gap);
	min-width: 0;
}

#top .unec_ha_sec .unec_ha_stat {
	color: var(--unec_ha_brand);
	font-weight: 600;
}

#top .unec_ha_sec .unec_ha_stat_sub,
#top .unec_ha_sec .unec_ha_body {
	color: var(--unec_ha_on_dark);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * 7. The link
 * ------------------------------------------------------------------ */

#top .unec_ha_sec a.unec_ha_more {
	display: inline-flex;
	flex: 0 0 auto;
	align-self: flex-start;
	align-items: center;
	gap: var(--unec_ha_row_gap);
	margin: 0;
	padding: 0;
	background: none;
	color: var(--unec_ha_on_dark);
	font-size: var(--unec_ha_meta_fs);
	font-weight: 500;
	line-height: var(--unec_ha_badge);
	text-decoration: none;
}

#top .unec_ha_sec .unec_ha_more_label {
	white-space: nowrap;
	color: inherit;
}

#top .unec_ha_sec .unec_ha_badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_ha_badge);
	height: var(--unec_ha_badge);
	border-radius: 999px;
	background-color: var(--unec_ha_badge_bg);
	color: var(--unec_ha_badge_ink);
	transition: background-color var(--unec_ha_motion) ease, color var(--unec_ha_motion) ease;
}

#top .unec_ha_sec .unec_ha_badge .unec_ha_ico {
	display: block;
	width: var(--unec_ha_badge_glyph);
	height: var(--unec_ha_badge_glyph);
}

/* The glyph is a 24 grid drawn at 16px, so Lucide's own 2px stroke would
 * render 1.33px and read thin beside 17px Medium. The width is a token
 * rather than an attribute so it stays one declaration to tune, and the
 * suite measures what actually renders. */
#top .unec_ha_sec .unec_ha_badge svg[viewBox='0 0 24 24'] {
	stroke-width: var(--unec_ha_ico_stroke);
}

/* Figma draws no state. On this dark ground the badge rests brand and goes
 * to the section's own contrast colour, which is the same idea as the
 * product overview's badge running the other way round on white. */
#top .unec_ha_sec a.unec_ha_more:hover,
#top .unec_ha_sec a.unec_ha_more:focus-visible {
	--unec_ha_badge_bg: var(--unec_ha_on_dark);
	--unec_ha_badge_ink: var(--unec_ha_ink);
}

#top .unec_ha_sec a.unec_ha_more:focus-visible {
	outline: 2px solid var(--unec_ha_focus);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ *
 * 8. The map block
 * ------------------------------------------------------------------ */

#top .unec_ha_map_block {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ha_map_head_gap);
	width: 100%;
}

#top .unec_ha_sec .unec_ha_map_heading {
	max-width: var(--unec_ha_map_head_w);
	color: var(--unec_ha_on_dark);
	font-weight: 500;
}

/*
 * The stage is the positioning context. The PLATE is in normal flow and the
 * artwork inside it sets the height — no aspect-ratio token to keep in step
 * with whatever the client uploads.
 *
 * The arms are a SIBLING of the plate rather than children of it, and that
 * is the whole reason the phone layout works: at 768 they simply stop being
 * absolute and fall into flow underneath the map, with the circles left
 * where they are. The alternative — a second copy of the labels for small
 * screens — reads the section twice to a screen reader.
 */
#top .unec_ha_stage {
	position: relative;
	width: 100%;
}

#top .unec_ha_plate {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#top .unec_ha_sec .unec_ha_map {
	display: block;
	width: var(--unec_ha_map_w);
}

#top .unec_ha_sec .unec_ha_map img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * 9. Markers — the circles
 *
 * The circle and the dot are SIBLINGS rather than a box and its ::after.
 * The circle is translucent, exactly as drawn — the country borders read
 * through it — and a nested dot would inherit that opacity and let the map
 * read through the pin as well.
 * ------------------------------------------------------------------ */

#top ul.unec_ha_pins {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

#top ul.unec_ha_pins li.unec_ha_pin {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top ul.unec_ha_pins li.unec_ha_pin::marker {
	content: '';
}

#top .unec_ha_sec .unec_ha_disc,
#top .unec_ha_sec .unec_ha_dot {
	position: absolute;
	/* The marker's own numbers are percentages OF THE ARTWORK; multiplying
	 * by the artwork's share of the measure puts them back in the plate's
	 * coordinates. One token, and the geography follows it. */
	top: calc(var(--unec_ha_my) * 1%);
	left: calc(var(--unec_ha_mx) * var(--unec_ha_map_w) / 100);
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

#top .unec_ha_sec .unec_ha_disc {
	width: calc(var(--unec_ha_ms) * var(--unec_ha_map_w) / 100);
	background-color: var(--unec_ha_brand);
	opacity: var(--unec_ha_disc_a);
}

#top .unec_ha_sec .unec_ha_dot {
	width: calc(var(--unec_ha_md) * var(--unec_ha_dot_scale));
	background-color: var(--unec_ha_ink);
}

/* ------------------------------------------------------------------ *
 * 10. Markers — the leader lines and labels
 *
 * The label sits ON the leader line, both vertically centred on the dot's
 * y, rather than stacked above/below it. The arm is a flex ROW: the line is
 * the flexible middle and grows to fill whatever the label leaves. The arm's
 * top is pinned to the dot's centre and translateY(-50%) lifts the whole row
 * so its centre — the line — lands on that centre.
 *
 * A right arm keeps source order (line, then label) so the line runs from
 * the dot outward to the label. A left arm reverses the two with `order`, so
 * the label sits on the outside and the line still runs back to the dot.
 * ------------------------------------------------------------------ */

#top ul.unec_ha_arms {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top ul.unec_ha_arms li.unec_ha_arm {
	position: absolute;
	/* Centre of the row is dragged onto the dot's centre; the 1px line sits
	 * there because it is the row's flex baseline. */
	top: calc(var(--unec_ha_my) * 1%);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--unec_ha_arm_gap);
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top ul.unec_ha_arms li.unec_ha_arm::marker {
	content: '';
}

/* The hairline is the flexible middle of the row now, not a full-width
 * block. It starts at the DOT's edge (not the circle's) and stretches to
 * meet the label — which is why the arms are painted after the pins and the
 * line reads across the translucent circle. */
#top ul.unec_ha_arms li.unec_ha_arm .unec_ha_rule {
	flex: 1 1 auto;
	width: auto;
}

#top ul.unec_ha_arms li.unec_ha_arm_right {
	right: 0;
	left: calc(var(--unec_ha_mx) * var(--unec_ha_map_w) / 100 + var(--unec_ha_md) / 2);
	align-items: center;
	text-align: right;
}

#top ul.unec_ha_arms li.unec_ha_arm_left {
	right: calc(100% - (var(--unec_ha_mx) * var(--unec_ha_map_w) / 100) + var(--unec_ha_md) / 2);
	left: 0;
	align-items: center;
	text-align: left;
}

/* Left arm: label on the outside, line running back in toward the dot. */
#top ul.unec_ha_arms li.unec_ha_arm_left .unec_ha_mk_text {
	order: 1;
}

#top ul.unec_ha_arms li.unec_ha_arm_left .unec_ha_rule {
	order: 2;
}

/*
 * The label block hugs its own content (title over an optional note) and
 * takes no more of the row than it needs, leaving the rest to the line.
 * With the title kept on one line and the note held to one line too, the
 * block is exactly as wide as its longest string — no hard-coded width per
 * marker. Was min-content when the label stacked; a row can size it by
 * content directly.
 */
#top .unec_ha_sec .unec_ha_mk_text {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--unec_ha_mk_gap);
	max-width: 100%;
}

#top .unec_ha_sec .unec_ha_mk_title {
	color: var(--unec_ha_on_dark);
	font-weight: 500;
	white-space: nowrap;
}

#top .unec_ha_sec .unec_ha_mk_note {
	color: var(--unec_ha_on_dark);
	font-weight: 400;
	white-space: nowrap;
	opacity: var(--unec_ha_note_a);
}

/* ------------------------------------------------------------------ *
 * 11. Responsive — custom properties only, never a re-declaration of a
 * property PHP can write inline (--unec_ha_pt / --unec_ha_pb, and the
 * per-marker --unec_ha_mx / --unec_ha_my / --unec_ha_ms / --unec_ha_md).
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_ha_sec {
		--unec_ha_pad_scale: 0.8;
		--unec_ha_block_gap: 128px;
		--unec_ha_col_gap: 140px;
		--unec_ha_stat_fs: 80px;
		--unec_ha_stat_lh: 78px;
		--unec_ha_h5_fs: 25px;
		--unec_ha_h5_lh: 32px;
		--unec_ha_head_body_gap: 72px;
		--unec_ha_body_gap: 64px;
		--unec_ha_map_head_gap: 64px;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_ha_sec {
		--unec_ha_pad_scale: 0.7;
		--unec_ha_block_gap: 104px;
		--unec_ha_col_gap: 80px;
		--unec_ha_stat_fs: 68px;
		--unec_ha_stat_lh: 66px;
		--unec_ha_h4_fs: 28px;
		--unec_ha_h4_lh: 34px;
		--unec_ha_h5_fs: 22px;
		--unec_ha_h5_lh: 30px;
		--unec_ha_h6_fs: 18px;
		--unec_ha_h6_lh: 26px;
		--unec_ha_note_fs: 15px;
		--unec_ha_note_lh: 20px;
		--unec_ha_arm_gap: 16px;
		--unec_ha_mk_gap: 12px;
		--unec_ha_head_body_gap: 56px;
		--unec_ha_body_gap: 48px;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_ha_sec {
		--unec_ha_pad_scale: 0.6;
		--unec_ha_gutter: 40px;
		--unec_ha_block_gap: 88px;
		--unec_ha_col_gap: 48px;
		--unec_ha_stat_fs: 60px;
		--unec_ha_stat_lh: 58px;
		--unec_ha_map_head_w: 100%;
		--unec_ha_map_head_gap: 48px;
		--unec_ha_note_fs: 14px;
		--unec_ha_note_lh: 19px;
	}

	/* Written at the same specificity as the rule it overrides. A responsive
	 * override shorter than its base rule loses, silently — and a suite that
	 * only checks overflow will never see it.
	 * claude/news-archive-page.md. */
	#top .unec_ha_cols {
		flex-direction: column;
		gap: var(--unec_ha_head_body_gap);
	}

	#top .unec_ha_col_a {
		flex: 0 0 auto;
		width: 100%;
	}

	#top .unec_ha_col_b {
		flex: 0 0 auto;
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_ha_sec {
		--unec_ha_pad_scale: 0.45;
		--unec_ha_gutter: 24px;
		--unec_ha_block_gap: 64px;
		--unec_ha_stat_fs: 48px;
		--unec_ha_stat_lh: 46px;
		--unec_ha_h4_fs: 24px;
		--unec_ha_h4_lh: 30px;
		--unec_ha_h5_fs: 20px;
		--unec_ha_h5_lh: 28px;
		--unec_ha_h6_fs: 18px;
		--unec_ha_h6_lh: 26px;
		--unec_ha_note_fs: 16px;
		--unec_ha_note_lh: 24px;
		--unec_ha_head_body_gap: 40px;
		--unec_ha_body_gap: 40px;
		--unec_ha_map_head_gap: 32px;
		--unec_ha_arm_gap: 12px;
		--unec_ha_mk_gap: 8px;
		--unec_ha_dot_scale: 0.75;
	}

	/*
	 * The leader lines have nowhere to go on a phone: at 375px the map is
	 * 327 wide, and a label pinned beside a circle that is itself a third of
	 * the screen is a puzzle rather than a diagram.
	 *
	 * So the arms stop being absolute and fall into flow beneath the map,
	 * carrying the SAME markup — the circles stay on the map, the words move
	 * under it, and nothing is said twice. The on-line row from section 10 is
	 * unwound back to a stacked column here: hairline over label, source
	 * order restored, the line full-width again.
	 */
	#top ul.unec_ha_arms {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-top: 32px;
	}

	#top ul.unec_ha_arms li.unec_ha_arm,
	#top ul.unec_ha_arms li.unec_ha_arm_left,
	#top ul.unec_ha_arms li.unec_ha_arm_right {
		position: static;
		right: auto;
		left: auto;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		transform: none;
	}

	#top ul.unec_ha_arms li.unec_ha_arm .unec_ha_rule,
	#top ul.unec_ha_arms li.unec_ha_arm_left .unec_ha_rule {
		order: 0;
		flex: 0 0 auto;
		width: 100%;
	}

	#top ul.unec_ha_arms li.unec_ha_arm_left .unec_ha_mk_text {
		order: 0;
	}

	#top .unec_ha_sec .unec_ha_mk_text {
		width: 100%;
		max-width: 100%;
	}

	#top .unec_ha_sec .unec_ha_mk_title {
		white-space: normal;
	}

	#top .unec_ha_sec .unec_ha_mk_note {
		white-space: normal;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_ha_sec {
		--unec_ha_pad_scale: 0.35;
		--unec_ha_block_gap: 48px;
		--unec_ha_stat_fs: 40px;
		--unec_ha_stat_lh: 40px;
		--unec_ha_h4_fs: 22px;
		--unec_ha_h4_lh: 28px;
		--unec_ha_h5_fs: 18px;
		--unec_ha_h5_lh: 26px;
		--unec_ha_dot_scale: 0.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_ha_sec .unec_ha_badge {
		transition: none;
	}
}