/*
 * UNEC – Services Carousel  v1.0.0
 * Figma 88:1074 ("Services_carousel") — file Q5ckGwby9XewAE51OXln5p
 *
 * Every selector is scoped under #top. The only !important declarations are
 * the four of the container release (load-bearing: Enfold writes the
 * container width into a generated post-<id>.css enqueued after this file)
 * and the two that undo Splide's own !important on the list.
 *
 * No -webkit-line-clamp anywhere.
 */

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

#top .unec_sc_sec {
	/* Palette */
	--unec_sc_ink: #231f20;
	--unec_sc_brand: #ffc20e;
	--unec_sc_alt: #ffffff;
	--unec_sc_paper: #ffffff;
	--unec_sc_rule_a: 0.2;
	--unec_sc_count_a: 0.64;

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

	--unec_sc_meta_fs: 17px;
	--unec_sc_meta_lh: 26px;
	--unec_sc_body_fs: 20px;
	--unec_sc_body_lh: 30px;
	--unec_sc_body_ls: -0.01em;
	--unec_sc_title_fs: 92px;
	--unec_sc_title_lh: 88px;
	--unec_sc_title_ls: -0.04em;

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

	/* Layout */
	--unec_sc_max: 1408px;
	--unec_sc_gutter: max(50px, (100% - var(--unec_sc_max)) / 2);
	--unec_sc_pad_v: 160px;             /* panel geometry, not the house 100 */
	--unec_sc_pad_scale: 1;
	--unec_sc_h: 1117px;

	/* The header row's own height: a 12.02px cap-trimmed line + 24 + the
	 * 1px hairline. The slide reserves it so its headline lands on the same
	 * y as the chrome's arrows. The suite asserts the resulting gap is 64,
	 * so a drift here fails loudly rather than nudging the design. */
	--unec_sc_head_h: 37px;
	--unec_sc_head_gap: 24px;
	--unec_sc_head_to_band: 64px;
	--unec_sc_band_top: calc(
		var(--unec_sc_pt, var(--unec_sc_pad_v)) * var(--unec_sc_pad_scale)
		+ var(--unec_sc_head_h) + var(--unec_sc_head_to_band)
	);

	/* The seam. `--unec_sc_seam` is where the photograph starts;
	 * `--unec_sc_split` is where the INK changes. They are the same line by
	 * default and must stay separate tokens: split='no' turns off the
	 * two-tone treatment, and if it moved the seam it would delete the
	 * photograph instead. */
	--unec_sc_seam: 50%;
	--unec_sc_split: 50%;

	/* Media */
	--unec_sc_scrim_ink: 35 31 32;
	--unec_sc_scrim_a: 0.56;
	--unec_sc_media_h: 320px;           /* stacked layouts only */

	/* Arrows. Both rest outlined — brand plate, dark ring, dark glyph — and
	 * both fill dark with a brand glyph on hover and keyboard focus (the
	 * client's instruction).
	 *
	 * Figma draws the two arrows in the two different schemes at rest. To go
	 * back to that, give .unec_sc_next the hover values at rest:
	 *   #top .unec_sc_sec button.unec_sc_next {
	 *       --unec_sc_arrow_bg: var(--unec_sc_ink);
	 *       --unec_sc_arrow_ink: var(--unec_sc_brand);
	 *   }
	 * The ring stays the ink colour in the filled scheme rather than going
	 * transparent, so the 56px outer size never changes between states. */
	--unec_sc_arrow: 56px;
	--unec_sc_arrow_glyph: 24px;
	--unec_sc_arrow_gap: 12px;
	--unec_sc_arrow_bg: var(--unec_sc_brand);
	--unec_sc_arrow_ink: var(--unec_sc_ink);
	--unec_sc_arrow_border: var(--unec_sc_ink);

	/* Body column and the Learn More plate */
	--unec_sc_body_w: 544px;
	--unec_sc_btn_pad_y: 20px;
	--unec_sc_btn_pad_x: 32px;
	--unec_sc_btn_gap: 64px;
	--unec_sc_btn_bg: var(--unec_sc_paper);
	--unec_sc_btn_ink: var(--unec_sc_ink);
	--unec_sc_badge: 24px;
	--unec_sc_badge_glyph: 16px;
	--unec_sc_badge_bg: var(--unec_sc_ink);
	--unec_sc_badge_ink: var(--unec_sc_alt);

	--unec_sc_focus: var(--unec_sc_ink);
	--unec_sc_motion: 0.25s;

	/* Interactive colours are properties the base rules READ but never SET,
	 * so state selectors re-point them without out-specifying anything. */
	--unec_sc_count_ink: var(--unec_sc_alt);
}

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

#top .unec_sc_host .content,
#top .unec_sc_host .flex_column,
#top .unec_sc_host .entry-content-wrapper,
#top .container_wrap:has(> .container .unec_sc_sec:not(.unec_sc_sec_contained)) .content,
#top .container_wrap:has(> .container .unec_sc_sec:not(.unec_sc_sec_contained)) .flex_column,
#top .container_wrap:has(> .container .unec_sc_sec:not(.unec_sc_sec_contained)) .entry-content-wrapper {
	float: none;
}

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

#top .unec_sc_sec {
	position: relative;
	display: block;
	width: 100%;
	background-color: var(--unec_sc_brand);
	color: var(--unec_sc_ink);
	overflow: hidden;
}

/* 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. */
#top .unec_sc_sec * {
	font-family: var(--unec_sc_font);
}

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

#top .unec_sc_stage {
	position: relative;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * 4. Cap-height trim
 * ------------------------------------------------------------------ */

#top .unec_sc_sec .u_sc_trim {
	display: block;
	font-size: var(--u_sc_fs);
	line-height: var(--u_sc_lh);
	letter-spacing: var(--u_sc_ls, 0);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@supports not (text-box-edge: cap alphabetic) {
	#top .unec_sc_sec .u_sc_trim {
		margin-top: calc(-1 * ((var(--u_sc_lh) - var(--unec_sc_em_h) * var(--u_sc_fs)) / 2 + var(--unec_sc_asc_cap) * var(--u_sc_fs)));
		margin-bottom: calc(-1 * ((var(--u_sc_lh) - var(--unec_sc_em_h) * var(--u_sc_fs)) / 2 + var(--unec_sc_desc) * var(--u_sc_fs)));
	}
}

#top .unec_sc_sec .u_sc_meta {
	--u_sc_fs: var(--unec_sc_meta_fs);
	--u_sc_lh: var(--unec_sc_meta_lh);
}

#top .unec_sc_sec .u_sc_body {
	--u_sc_fs: var(--unec_sc_body_fs);
	--u_sc_lh: var(--unec_sc_body_lh);
	--u_sc_ls: var(--unec_sc_body_ls);
}

#top .unec_sc_sec .u_sc_title {
	--u_sc_fs: var(--unec_sc_title_fs);
	--u_sc_lh: var(--unec_sc_title_lh);
	--u_sc_ls: var(--unec_sc_title_ls);
}

/* ------------------------------------------------------------------ *
 * 5. Splide
 *
 * Splide hides its own root until it mounts. Un-hide it here and hide the
 * extra slides instead, so a script failure degrades to one static panel
 * rather than a blank hole.
 *
 * THE FALLBACK IS GATED ON A CLASS THE SCRIPT OWNS, never on Splide's
 * `.is-initialized` — Splide adds that in the LAST statement of mount(),
 * long after Layout and Move have measured the slides, so a fallback keyed
 * on it is still in force while Splide is measuring.
 * See claude/services-page.md trap 6.
 * ------------------------------------------------------------------ */

#top .unec_sc_sec .splide {
	visibility: visible;
}

#top .unec_sc_stage:not(.unec_sc_ready) .splide__list {
	display: block;
}

#top .unec_sc_stage:not(.unec_sc_ready) .splide__slide + .splide__slide {
	display: none;
}

#top .unec_sc_stage:not(.unec_sc_ready) .unec_sc_nav,
#top .unec_sc_stage:not(.unec_sc_ready) .unec_sc_count {
	display: none;
}

#top .unec_sc_sec .splide__track {
	overflow: hidden;
}

#top .unec_sc_sec .splide__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

#top .unec_sc_sec .splide__track--fade > .splide__list > .splide__slide {
	pointer-events: none;
}

#top .unec_sc_sec .splide__track--fade > .splide__list > .splide__slide.is-active {
	pointer-events: auto;
}

/* Splide's fade sets opacity with its own transition; honour reduced motion
 * by making the swap instant rather than by disabling it. */
@media (prefers-reduced-motion: reduce) {
	#top .unec_sc_sec .splide__slide {
		transition-duration: 1ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * 6. The slide
 * ------------------------------------------------------------------ */

#top .unec_sc_sec li.unec_sc_slide {
	position: relative;
	display: block;
	width: 100%;
	min-height: var(--unec_sc_h);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sc_sec .unec_sc_media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--unec_sc_seam);
	display: block;
	overflow: hidden;
	background-color: var(--unec_sc_ink);
}

#top .unec_sc_sec .unec_sc_media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#top .unec_sc_sec .unec_sc_scrim {
	position: absolute;
	inset: 0;
	display: block;
	background-image: linear-gradient(
		to bottom,
		rgb(var(--unec_sc_scrim_ink) / var(--unec_sc_scrim_a)) 0%,
		rgb(var(--unec_sc_scrim_ink) / 0) 100%
	);
	pointer-events: none;
}

#top .unec_sc_sec .unec_sc_slide_inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: var(--unec_sc_h);
	padding:
		var(--unec_sc_band_top)
		var(--unec_sc_gutter)
		calc(var(--unec_sc_pb, var(--unec_sc_pad_v)) * var(--unec_sc_pad_scale));
}

#top .unec_sc_sec_contained .unec_sc_slide_inner,
#top .unec_sc_sec_contained .unec_sc_chrome_inner {
	padding-left: 0;
	padding-right: 0;
}

/* ------------------------------------------------------------------ *
 * 7. The headline — one text, two inks, split on the seam
 *
 * The block is centred on the panel's midpoint, so 50% of its OWN box is
 * the seam. That is the whole trick: the white copy is the same glyphs at
 * the same origin, clipped to the right half of the box, and it needs no
 * knowledge of where the block happens to sit.
 * ------------------------------------------------------------------ */

#top .unec_sc_sec .unec_sc_band {
	position: relative;
	display: block;
	width: 100%;
}

#top .unec_sc_sec .unec_sc_title {
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	font-weight: 600;
	color: var(--unec_sc_ink);
	text-transform: none;
}

/*
 * The two copies are stacked with GRID, both in normal flow. Not
 * position:absolute — an absolutely positioned copy inside the trimmed box
 * lines up perfectly under the negative-margin fallback and sits 11.6px low
 * under native text-box-trim, because the trim shrinks the parent's border
 * box while an untrimmed child at top:0 still lays out its own line box with
 * half-leading. Two grid items in one cell take the same trim, so they agree
 * in both paths by construction rather than by arithmetic.
 */
#top .unec_sc_sec .unec_sc_title_box {
	display: grid;
}

#top .unec_sc_sec .unec_sc_title_box > * {
	grid-area: 1 / 1;
}

#top .unec_sc_sec .unec_sc_title_alt {
	color: var(--unec_sc_alt);
	/* Negative vertical insets so ascenders and descenders are not clipped
	 * by the cap-trimmed box. */
	clip-path: inset(-0.4em 0 -0.4em var(--unec_sc_split));
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 8. The bottom row
 * ------------------------------------------------------------------ */

#top .unec_sc_sec .unec_sc_foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-top: auto;
	width: 100%;
}

#top .unec_sc_sec p.unec_sc_body {
	width: var(--unec_sc_body_w);
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--unec_sc_ink);
}

#top .unec_sc_sec a.unec_sc_more {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--unec_sc_btn_gap);
	padding: var(--unec_sc_btn_pad_y) var(--unec_sc_btn_pad_x);
	border: 0;
	border-radius: 0;
	background-color: var(--unec_sc_btn_bg);
	color: var(--unec_sc_btn_ink);
	font-size: var(--unec_sc_meta_fs);
	font-weight: 500;
	line-height: var(--unec_sc_badge);
	text-decoration: none;
	transition: background-color var(--unec_sc_motion) ease, color var(--unec_sc_motion) ease;
}

#top .unec_sc_sec .unec_sc_more_label {
	display: block;
	white-space: nowrap;
	color: inherit;
}

#top .unec_sc_sec .unec_sc_badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_sc_badge);
	height: var(--unec_sc_badge);
	border-radius: 999px;
	background-color: var(--unec_sc_badge_bg);
	color: var(--unec_sc_badge_ink);
	transition: background-color var(--unec_sc_motion) ease, color var(--unec_sc_motion) ease;
}

#top .unec_sc_sec .unec_sc_badge .unec_sc_ico {
	width: var(--unec_sc_badge_glyph);
	height: var(--unec_sc_badge_glyph);
}

#top .unec_sc_sec a.unec_sc_more:hover,
#top .unec_sc_sec a.unec_sc_more:focus-visible {
	--unec_sc_btn_bg: var(--unec_sc_ink);
	--unec_sc_btn_ink: var(--unec_sc_brand);
	--unec_sc_badge_bg: var(--unec_sc_brand);
	--unec_sc_badge_ink: var(--unec_sc_ink);
}

#top .unec_sc_sec a.unec_sc_more:focus-visible {
	outline: 2px solid var(--unec_sc_alt);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 9. Chrome — the header row and the arrows do not move with the slides
 * ------------------------------------------------------------------ */

#top .unec_sc_sec .unec_sc_chrome {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
}

/* A flex column with a gap, not margins: a margin on the hairline or on the
 * arrow row would sit outside their border boxes, and every landmark here is
 * measured as a margin box because of the trim fallback. Gaps keep the two
 * readings the same thing. */
#top .unec_sc_sec .unec_sc_chrome_inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--unec_sc_head_to_band);
	padding: calc(var(--unec_sc_pt, var(--unec_sc_pad_v)) * var(--unec_sc_pad_scale)) var(--unec_sc_gutter) 0;
}

#top .unec_sc_sec .unec_sc_head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 40px;
	row-gap: var(--unec_sc_head_gap);
	width: 100%;
}

#top .unec_sc_sec p.unec_sc_label,
#top .unec_sc_sec p.unec_sc_count {
	margin: 0;
	padding: 0;
	font-weight: 500;
}

#top .unec_sc_sec p.unec_sc_label {
	color: var(--unec_sc_ink);
}

/* The counter sits entirely on the photograph half, where dark ink at 64%
 * is invisible. It takes the alternate ink for the same reason the headline
 * does. `--unec_sc_count_ink` restores the drawn colour in one line. */
#top .unec_sc_sec p.unec_sc_count {
	color: var(--unec_sc_count_ink);
	opacity: var(--unec_sc_count_a);
	text-align: right;
}

#top .unec_sc_nosplit {
	--unec_sc_count_ink: var(--unec_sc_ink);
	--unec_sc_split: 100%;
}

/* The hairline crosses the seam, so it changes ink there too. */
#top .unec_sc_sec .unec_sc_rule {
	display: block;
	width: 100%;
	height: 1px;
	background-image: linear-gradient(
		to right,
		var(--unec_sc_ink) 0 var(--unec_sc_split),
		var(--unec_sc_alt) var(--unec_sc_split) 100%
	);
	opacity: var(--unec_sc_rule_a);
}

#top .unec_sc_sec .unec_sc_nav {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--unec_sc_arrow_gap);
	pointer-events: auto;
}

#top .unec_sc_sec button.unec_sc_arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_sc_arrow);
	height: var(--unec_sc_arrow);
	margin: 0;
	padding: 0;
	border: 2px solid var(--unec_sc_arrow_border);
	border-radius: 999px;
	background-color: var(--unec_sc_arrow_bg);
	color: var(--unec_sc_arrow_ink);
	cursor: pointer;
	transition: background-color var(--unec_sc_motion) ease, color var(--unec_sc_motion) ease, border-color var(--unec_sc_motion) ease;
}

#top .unec_sc_sec button.unec_sc_arrow .unec_sc_ico {
	width: var(--unec_sc_arrow_glyph);
	height: var(--unec_sc_arrow_glyph);
}

/* One scheme for both arrows, in both directions: outlined at rest, filled
 * on hover and on keyboard focus. The colours are properties the base rule
 * READS but never SETS, so this re-points them without out-specifying
 * anything. */
#top .unec_sc_sec button.unec_sc_arrow:hover,
#top .unec_sc_sec button.unec_sc_arrow:focus-visible {
	--unec_sc_arrow_bg: var(--unec_sc_ink);
	--unec_sc_arrow_ink: var(--unec_sc_brand);
	--unec_sc_arrow_border: var(--unec_sc_ink);
}

#top .unec_sc_sec button.unec_sc_arrow:focus-visible {
	outline: 2px solid var(--unec_sc_focus);
	outline-offset: 3px;
}

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

/* ------------------------------------------------------------------ *
 * 10. Responsive — custom properties only, never a re-declaration of a
 * property PHP can write inline (--unec_sc_pt / --unec_sc_pb /
 * --unec_sc_h / --unec_sc_scrim_a).
 * ------------------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_sc_sec {
		--unec_sc_pad_scale: 0.8;
		--unec_sc_title_fs: 76px;
		--unec_sc_title_lh: 74px;
		--unec_sc_body_w: 480px;
	}
}

@media only screen and (max-width: 1180px) {
	#top .unec_sc_sec {
		--unec_sc_pad_scale: 0.7;
		--unec_sc_title_fs: 64px;
		--unec_sc_title_lh: 62px;
		--unec_sc_body_fs: 18px;
		--unec_sc_body_lh: 28px;
		--unec_sc_body_w: 420px;
		--unec_sc_arrow: 48px;
		--unec_sc_arrow_glyph: 20px;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_sc_sec {
		--unec_sc_pad_scale: 0.6;
		--unec_sc_gutter: 40px;
		--unec_sc_title_fs: 56px;
		--unec_sc_title_lh: 54px;
		--unec_sc_body_fs: 17px;
		--unec_sc_body_lh: 26px;
		--unec_sc_body_w: 100%;
		--unec_sc_media_h: 380px;
		/* No seam below this width: the panel stacks, so the whole headline
		 * is dark and the hairline is one ink. */
		--unec_sc_split: 100%;
		--unec_sc_count_ink: var(--unec_sc_ink);
	}

	/* Written at the same specificity as the rule it overrides. A responsive
	 * override shorter than its base rule loses, silently. */
	#top .unec_sc_sec li.unec_sc_slide {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	#top .unec_sc_sec .unec_sc_media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		order: 2;
		width: 100%;
		height: var(--unec_sc_media_h);
	}

	#top .unec_sc_sec .unec_sc_slide_inner {
		order: 1;
		min-height: 0;
		padding-top: 30px !important;
	}

	#top .unec_sc_sec .unec_sc_title {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	
	#top .unec_sc_sec .unec_sc_chrome {
		position: relative !important;
	}

	#top .unec_sc_sec .unec_sc_chrome_inner {
		gap: 20px !important;
	}
	
	#top .unec_sc_sec .unec_sc_foot {
        margin-top: 30px !important;
    }
	
	#top .unec_sc_sec .unec_sc_foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		margin-top: 64px;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_sc_sec {
		--unec_sc_pad_scale: 0.45;
		--unec_sc_gutter: 24px;
		--unec_sc_title_fs: 44px;
		--unec_sc_title_lh: 44px;
		--unec_sc_media_h: 300px;
		--unec_sc_arrow: 44px;
		--unec_sc_arrow_glyph: 18px;
		--unec_sc_btn_gap: 32px;
		--unec_sc_head_to_band: 40px;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_sc_sec {
		--unec_sc_pad_scale: 0.35;
		--unec_sc_title_fs: 34px;
		--unec_sc_title_lh: 36px;
		--unec_sc_media_h: 240px;
		--unec_sc_btn_gap: 24px;
		--unec_sc_btn_pad_x: 24px;
	}
}