/*
 * UNEC – Home Hero  v1.1.0
 * Figma 88:1204 ("Hero_area") — file Q5ckGwby9XewAE51OXln5p
 *
 * THE BACKGROUND PHOTOGRAPH IS NOT HERE. It is set on the Enfold Color
 * Section this element sits in, so the client changes it where they already
 * know how. Everything drawn on top of it is in this file.
 *
 * The two cards are drawn in DIFFERENT STATES, not as two different designs:
 * "Products" is the rest state and "Services" is the hover state — the
 * designer left a Font Awesome cursor on the second card to say so, the same
 * annotation as on the split panels.
 *
 * Every selector is scoped under #top. The only !important declarations are
 * the four of the container release.
 *
 * No -webkit-line-clamp anywhere.
 */

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

#top .unec_hh_sec {
	/* Palette */
	--unec_hh_ink: #231f20;
	--unec_hh_ink_rgb: 35 31 32;
	--unec_hh_brand: #ffc20e;
	--unec_hh_paper: #ffffff;
	--unec_hh_num_a: 0.64;

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

	/*
	 * TYPE IS SIZED OFF THE SMALLER OF THE TWO VIEWPORT DIMENSIONS.
	 *
	 * The hero fills the screen, so the thing that makes it overflow is not
	 * always the width — a 1440 x 800 laptop is wide and short, and a phone
	 * is the other way round. `min(vw, svh)` takes whichever is tighter, and
	 * the clamp keeps it readable at the bottom and off Figma's 92 at the
	 * top: the headline now tops out at 80/78 rather than 92/88, which is
	 * what lets the whole stack sit inside one screen.
	 *
	 * Every formula lands EXACTLY on its maximum at the design's own
	 * 1728 x 1117, so the drawn layout is still the layout at that size.
	 */
	--unec_hh_title_fs: clamp(32px, min(4.6296vw, 7.1621svh), 80px);
	--unec_hh_title_lh: clamp(34px, min(4.5139vw, 6.983svh), 78px);
	--unec_hh_title_ls: -0.04em;
	--unec_hh_lead_fs: clamp(15px, min(1.3889vw, 2.1486svh), 24px);
	--unec_hh_lead_lh: clamp(22px, min(1.8519vw, 2.8648svh), 32px);
	--unec_hh_lead_ls: -0.02em;
	--unec_hh_card_fs: clamp(15px, min(1.1574vw, 1.7905svh), 20px);
	--unec_hh_card_lh: clamp(22px, min(1.7361vw, 2.6858svh), 30px);
	--unec_hh_card_ls: -0.01em;

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

	/* Layout */
	--unec_hh_max: 1408px;
	--unec_hh_gutter: max(50px, (100% - var(--unec_hh_max)) / 2);
	/*
	 * The hero fills the screen. `svh` — not `vh` — because a phone's `vh`
	 * counts the browser chrome that slides away, so 100vh is taller than
	 * what the visitor can actually see. `svh` is the height that is always
	 * there.
	 *
	 * No @supports fallback, on purpose: this module already needs `:has()`
	 * for its container release, and `:has()` and `svh` shipped in the same
	 * browser generation — there is no browser that gets one and not the
	 * other.
	 *
	 * It is a MINIMUM, so long copy grows the section rather than being cut
	 * off. At the design's own 1728 x 1117 it comes out at exactly 1117 and
	 * every drawn number below still lands.
	 */
	--unec_hh_min_h: 100svh;

	/*
	 * The vertical rhythm is height-driven too, and for the same reason. The
	 * floor is the fixed header plus a little air: no amount of shrinking may
	 * slide the headline under the navigation.
	 */
	--unec_hh_pad_floor: calc(var(--unec_nav_h, 161px) + 24px);
	--unec_hh_pad_v: clamp(var(--unec_hh_pad_floor), calc(26.7681svh * var(--unec_hh_pad_scale)), 299px);
	--unec_hh_pad_b: 64px;
	--unec_hh_pad_scale: 1;
	--unec_hh_copy_w: 746px;
	/* headline -> lead */
	--unec_hh_copy_gap: clamp(20px, min(2.7778vw, 4.2972svh), 48px);
	/* the least the cards may come to the copy */
	--unec_hh_gap: clamp(32px, min(5.5556vw, 8.5949svh), 96px);

	/* The overlays the design draws ON the Color Section's photograph. */
	--unec_hh_scrim_a: 1;
	--unec_hh_scrim_top: 0.62;
	--unec_hh_scrim_mid: 0.14;
	--unec_hh_scrim_bot: 0.34;
	--unec_hh_wash: var(--unec_hh_brand);
	--unec_hh_wash_a: 0;
	--unec_hh_wash_blend: multiply;

	/* The line motif: 1450 x 753 of a 1728 frame, pinned bottom right. */
	--unec_hh_art_w: 83.912%;           /* (1728 - 278) / 1728           */
	--unec_hh_art_fill_a: 0.02;
	--unec_hh_art_line_a: 0.24;

	/* Cards */
	--unec_hh_card_w: 300px;
	--unec_hh_card_h: 180px;
	--unec_hh_card_gap: 8px;
	--unec_hh_card_pad: 28px;
	--unec_hh_card_stack: 10px;         /* title -> number               */
	--unec_hh_strip: 57px;              /* how much photograph shows at rest */
	--unec_hh_media_h: var(--unec_hh_strip);
	--unec_hh_media_pos: center;
	--unec_hh_card_bg: var(--unec_hh_paper);
	--unec_hh_card_ink: var(--unec_hh_ink);
	--unec_hh_veil_a: 0.2;

	/* Badge */
	--unec_hh_badge: 34px;
	--unec_hh_badge_glyph: 18px;
	--unec_hh_badge_inset: 40px;
	--unec_hh_badge_bg: var(--unec_hh_ink);
	--unec_hh_badge_ink: var(--unec_hh_paper);
	--unec_hh_badge_edge: var(--unec_hh_paper);
	--unec_hh_badge_border: 2px;
	--unec_hh_ico_stroke: 2.5;          /* a 24 grid drawn at 18px       */

	--unec_hh_focus: var(--unec_hh_paper);
	--unec_hh_motion: 0.4s;
}

/* The two overlay choices only re-point tokens. */

#top .unec_hh_ov_brand {
	--unec_hh_wash_a: 1;
}

#top .unec_hh_ov_none {
	--unec_hh_scrim_a: 0;
	--unec_hh_wash_a: 0;
}

/* ------------------------------------------------------------------ *
 * 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_hh_host .container,
#top .unec_svc_host .container,
#top .container_wrap:has(> .container .unec_hh_sec:not(.unec_hh_sec_contained)) > .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#top .unec_hh_host .content,
#top .unec_hh_host .flex_column,
#top .unec_hh_host .entry-content-wrapper,
#top .container_wrap:has(> .container .unec_hh_sec:not(.unec_hh_sec_contained)) .content,
#top .container_wrap:has(> .container .unec_hh_sec:not(.unec_hh_sec_contained)) .flex_column,
#top .container_wrap:has(> .container .unec_hh_sec:not(.unec_hh_sec_contained)) .entry-content-wrapper {
	float: none;
}

/* ------------------------------------------------------------------ *
 * 3. Section shell
 *
 * NO background of its own: the photograph is the Color Section's, and a
 * background here would cover it.
 * ------------------------------------------------------------------ */

#top .unec_hh_sec {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: var(--unec_hh_min_h);
	/* The scale is already inside --unec_hh_pad_v, under the clamp, so that
	 * shrinking can never take the top padding below the header's floor. */
	padding-top: var(--unec_hh_pt, var(--unec_hh_pad_v));
	padding-bottom: calc(var(--unec_hh_pb, var(--unec_hh_pad_b)) * var(--unec_hh_pad_scale));
	color: var(--unec_hh_paper);
}

/* 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_hh_sec * {
	font-family: var(--unec_hh_font);
}

/* The SECTION is in this list, not just its descendants. Left on
 * content-box it adds its 299 + 64 padding to the min-height and the hero
 * comes out 363px taller than the drawing — with every inner box still
 * measuring correctly. */
#top .unec_hh_sec,
#top .unec_hh_sec *,
#top .unec_hh_sec *::before,
#top .unec_hh_sec *::after {
	box-sizing: border-box;
}

#top .unec_hh_inner {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--unec_hh_gap);
	width: 100%;
	padding-left: var(--unec_hh_gutter);
	padding-right: var(--unec_hh_gutter);
}

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

/* ------------------------------------------------------------------ *
 * 4. The overlays
 *
 * Two layers, both drawn on the Color Section's photograph:
 *
 *  scrim  a plain dark gradient for legibility. No blend mode, so it works
 *         wherever the element is dropped.
 *  wash   the brand gold the design puts over the whole frame. This one IS a
 *         blend mode, and a blend mode needs the photograph to be in the same
 *         stacking context — so it ships OFF, and the field turns it on.
 * ------------------------------------------------------------------ */

#top .unec_hh_sec .unec_hh_scrim,
#top .unec_hh_sec .unec_hh_wash {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

#top .unec_hh_sec .unec_hh_scrim {
	background-image: linear-gradient(
		180deg,
		rgb(var(--unec_hh_ink_rgb) / var(--unec_hh_scrim_top)) 0%,
		rgb(var(--unec_hh_ink_rgb) / var(--unec_hh_scrim_mid)) 44%,
		rgb(var(--unec_hh_ink_rgb) / var(--unec_hh_scrim_bot)) 100%
	);
	opacity: var(--unec_hh_scrim_a);
}

#top .unec_hh_sec .unec_hh_wash {
	background-color: var(--unec_hh_wash);
	opacity: var(--unec_hh_wash_a);
	mix-blend-mode: var(--unec_hh_wash_blend);
}

/* ------------------------------------------------------------------ *
 * 5. The line motif
 *
 * The viewBox is the VISIBLE WINDOW, not the drawing — the artwork carries
 * on past x = 1450 and is clipped. Pinned bottom right, sized as a share of
 * the section, so it keeps its place at every width.
 * ------------------------------------------------------------------ */

#top .unec_hh_sec .unec_hh_art {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: var(--unec_hh_art_w);
	aspect-ratio: 1450 / 753;
	color: var(--unec_hh_paper);
	pointer-events: none;
}

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

/* The source arrived with white baked into every path. The wrapper owns the
 * paint here, the same rule every icon in this project follows. */
#top .unec_hh_sec .unec_hh_art_fill {
	fill: currentColor;
	fill-opacity: var(--unec_hh_art_fill_a);
	stroke: none;
}

#top .unec_hh_sec .unec_hh_art_line {
	fill: none;
	stroke: currentColor;
	stroke-opacity: var(--unec_hh_art_line_a);
	stroke-width: 1;
}

/* ------------------------------------------------------------------ *
 * 6. Cap-height trim
 * ------------------------------------------------------------------ */

#top .unec_hh_sec .u_hh_trim {
	display: block;
	font-size: var(--u_hh_fs);
	line-height: var(--u_hh_lh);
	letter-spacing: var(--u_hh_ls, 0);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not (text-box-edge: cap alphabetic) {
	#top .unec_hh_sec .u_hh_trim {
		margin-top: calc(-1 * ((var(--u_hh_lh) - var(--unec_hh_em_h) * var(--u_hh_fs)) / 2 + var(--unec_hh_asc_cap) * var(--u_hh_fs)));
		margin-bottom: calc(-1 * ((var(--u_hh_lh) - var(--unec_hh_em_h) * var(--u_hh_fs)) / 2 + var(--unec_hh_desc) * var(--u_hh_fs)));
	}
}

#top .unec_hh_sec .u_hh_title {
	--u_hh_fs: var(--unec_hh_title_fs);
	--u_hh_lh: var(--unec_hh_title_lh);
	--u_hh_ls: var(--unec_hh_title_ls);
}

#top .unec_hh_sec .u_hh_lead {
	--u_hh_fs: var(--unec_hh_lead_fs);
	--u_hh_lh: var(--unec_hh_lead_lh);
	--u_hh_ls: var(--unec_hh_lead_ls);
}

#top .unec_hh_sec .u_hh_card {
	--u_hh_fs: var(--unec_hh_card_fs);
	--u_hh_lh: var(--unec_hh_card_lh);
	--u_hh_ls: var(--unec_hh_card_ls);
}

/*
 * `display: flow-root` on every wrapper around a trim span. 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 by ~11px about
 * everything above it. See claude/home-split-panels.md.
 */
#top .unec_hh_sec .unec_hh_title,
#top .unec_hh_sec .unec_hh_lead,
#top .unec_hh_sec .unec_hh_card_title,
#top .unec_hh_sec .unec_hh_card_num {
	display: flow-root;
	margin: 0;
	padding: 0;
	text-transform: none;
}

/* ------------------------------------------------------------------ *
 * 7. The copy
 * ------------------------------------------------------------------ */

#top .unec_hh_copy {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: var(--unec_hh_copy_gap);
	width: 100%;
	max-width: var(--unec_hh_copy_w);
}

#top .unec_hh_sec .unec_hh_title {
	color: var(--unec_hh_paper);
	font-weight: 600;
}

#top .unec_hh_sec .unec_hh_lead {
	color: var(--unec_hh_paper);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * 8. The cards
 * ------------------------------------------------------------------ */

#top ul.unec_hh_cards {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: var(--unec_hh_card_gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The type selector in a reset out-ranks a class in the rule meant to
 * override it, so the item rule is written at (1,2,1) to match. */
#top ul.unec_hh_cards li.unec_hh_card {
	position: relative;
	display: block;
	flex: 0 0 var(--unec_hh_card_w);
	width: var(--unec_hh_card_w);
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top ul.unec_hh_cards li.unec_hh_card::marker {
	content: '';
}

#top .unec_hh_sec .unec_hh_face {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: var(--unec_hh_card_h);
	padding: var(--unec_hh_card_pad);
	background-color: var(--unec_hh_card_bg);
	color: var(--unec_hh_card_ink);
	text-decoration: none;
	isolation: isolate;
}

/*
 * The photograph is always the whole card and never moves; what changes is
 * how much of it is UNCOVERED. At rest that is the bottom 57px, exactly as
 * the design draws it; on hover the window opens to the full card.
 *
 * Growing a window beats swapping two crops: it is one image, one upload and
 * one transition, and nothing jumps at the moment the state changes.
 */
#top .unec_hh_sec .unec_hh_media {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	display: block;
	overflow: hidden;
	height: var(--unec_hh_media_h);
	transition: height var(--unec_hh_motion) ease;
}

#top .unec_hh_sec .unec_hh_media img {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: var(--unec_hh_card_h);
	object-fit: cover;
	object-position: var(--unec_hh_media_pos);
}

/* Figma's own diagonal, kept because it is what holds white type off a bright
 * photograph in the hover state. */
#top .unec_hh_sec .unec_hh_veil {
	position: absolute;
	inset: 0;
	display: block;
	background-image: linear-gradient(121deg, rgb(0 0 0 / var(--unec_hh_veil_a)) 0%, rgb(0 0 0 / 0) 100%);
	pointer-events: none;
}

#top .unec_hh_sec .unec_hh_card_text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--unec_hh_card_stack);
}

#top .unec_hh_sec .unec_hh_card_title,
#top .unec_hh_sec .unec_hh_card_num {
	color: var(--unec_hh_card_ink);
	font-weight: 500;
	transition: color var(--unec_hh_motion) ease;
}

#top .unec_hh_sec .unec_hh_card_num {
	opacity: var(--unec_hh_num_a);
}

/* ------------------------------------------------------------------ *
 * 9. The badge
 *
 * The border stays in the box at both states and only changes COLOUR, so the
 * circle never resizes by 4px at the moment the pointer arrives. Figma draws
 * the stroke inside the 34, so box-sizing does the same.
 * ------------------------------------------------------------------ */

#top .unec_hh_sec .unec_hh_badge {
	position: absolute;
	right: var(--unec_hh_badge_inset);
	bottom: var(--unec_hh_badge_inset);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--unec_hh_badge);
	height: var(--unec_hh_badge);
	border: var(--unec_hh_badge_border) solid var(--unec_hh_badge_edge);
	border-radius: 999px;
	background-color: var(--unec_hh_badge_bg);
	color: var(--unec_hh_badge_ink);
	transition: background-color var(--unec_hh_motion) ease, border-color var(--unec_hh_motion) ease, color var(--unec_hh_motion) ease;
}

#top .unec_hh_sec .unec_hh_badge .unec_hh_ico {
	display: block;
	width: var(--unec_hh_badge_glyph);
	height: var(--unec_hh_badge_glyph);
}

/* The glyph is a 24 grid drawn at 18px, so Lucide's own 2px stroke would
 * render 1.5px and read thin inside the circle. */
#top .unec_hh_sec .unec_hh_badge svg[viewBox='0 0 24 24'] {
	stroke-width: var(--unec_hh_ico_stroke);
}

/* ------------------------------------------------------------------ *
 * 10. The states
 *
 * Rest is the design's "Products" card; hover is its "Services" card.
 * `:active` is in the list so a touch press gets the same feedback — there
 * is no hover on a phone, and a card that never acknowledges a tap reads as
 * broken.
 *
 * The rule only RE-POINTS TOKENS and sets no properties directly, so it needs
 * no extra specificity over the base rules (claude/contact-pages.md trap 3).
 * ------------------------------------------------------------------ */

#top .unec_hh_sec a.unec_hh_face:hover,
#top .unec_hh_sec a.unec_hh_face:focus-visible,
#top .unec_hh_sec a.unec_hh_face:active {
	--unec_hh_media_h: var(--unec_hh_card_h);
	--unec_hh_card_ink: var(--unec_hh_paper);
	--unec_hh_badge_bg: var(--unec_hh_brand);
	--unec_hh_badge_ink: var(--unec_hh_ink);
	--unec_hh_badge_edge: transparent;
}

#top .unec_hh_sec a.unec_hh_face:focus-visible {
	outline: 2px solid var(--unec_hh_focus);
	outline-offset: 3px;
}

/* A card with no link is not a control and must not offer the affordance. */
#top .unec_hh_sec .unec_hh_static .unec_hh_face {
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_hh_sec .unec_hh_media,
	#top .unec_hh_sec .unec_hh_badge,
	#top .unec_hh_sec .unec_hh_card_title,
	#top .unec_hh_sec .unec_hh_card_num {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * 11. Responsive — custom properties only, never a re-declaration of a
 * property PHP can write inline (--unec_hh_min_h / --unec_hh_pt /
 * --unec_hh_pb).
 *
 * The TYPE is not here any more: it is sized off min(vw, svh) up in the
 * token block, so it answers to the screen's height as well as its width.
 * What is left is the layout — the gutter, the measure, and how the cards
 * behave when two of them no longer fit a row.
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_hh_sec {
		--unec_hh_pad_scale: 0.9;
		--unec_hh_copy_w: 660px;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_hh_sec {
		--unec_hh_pad_scale: 0.82;
		--unec_hh_copy_w: 580px;
		--unec_hh_art_w: 92%;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_hh_sec {
		--unec_hh_pad_scale: 0.74;
		--unec_hh_gutter: 40px;
		--unec_hh_copy_w: 100%;
		--unec_hh_card_pad: 22px;
		--unec_hh_badge_inset: 22px;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_hh_sec {
		--unec_hh_pad_scale: 0.62;
		--unec_hh_gutter: 24px;
		--unec_hh_art_w: 130%;
		/* A phone's header is not the desktop's, so neither is the floor the
		 * top padding may not go below. Move this if the mobile header is
		 * taller than Enfold's default. */
		--unec_hh_pad_floor: 104px;
		--unec_hh_pad_b: 40px;
	}

	/* Two 300px cards and a gutter do not fit a phone, so they share the row
	 * instead of holding their drawn width.
	 *
	 * Written at the same specificity as the rule it overrides — a responsive
	 * override shorter than its base rule loses, silently.
	 * claude/news-archive-page.md. */
	#top ul.unec_hh_cards li.unec_hh_card {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

@media only screen and (max-width: 560px) {
	#top .unec_hh_sec {
		--unec_hh_pad_scale: 0.52;
		--unec_hh_card_gap: 12px;
		/* Two stacked cards at the drawn 180 would push the hero past the
		 * screen it is supposed to fit. */
		--unec_hh_card_h: 148px;
		--unec_hh_strip: 46px;
		--unec_hh_card_pad: 18px;
		--unec_hh_badge_inset: 16px;
	}

	/* Below this the two cards would be 150px wide and the drawn title no
	 * longer fits one, so they stack. */
	#top ul.unec_hh_cards li.unec_hh_card {
		flex: 0 0 100%;
		width: 100%;
	}
}

/* There is no hover on a touch screen, so the rest state is all a visitor
 * ever sees there. The photograph strip stays; the tap feedback stays. */
@media (hover: none) {
	#top .unec_hh_sec {
		--unec_hh_motion: 0.25s;
	}
}