/*!
 * unec-service v1.0.10 — reusable service-page sections for Enfold
 *
 * Every selector is scoped under #top (Enfold's body id) so module CSS wins
 * specificity over the theme without !important. Three rules are exceptions —
 * the container release, and two phone overrides added on the live site — and
 * each is commented where it appears.
 *
 * Breakpoints 1400 / 1180 / 1024 / 768 / 480 change custom properties only —
 * no rule is duplicated.
 *
 *  1. Tokens
 *  2. Shared shell: section, gutter ladder, cap-height trim
 *  3. Service intro
 *  4. Gallery
 *  5. Quality manners
 *  6. Next page
 *  7. Responsive ladder
 *  8. Sticky rescue
 *  9. Reduced motion
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */
#top .unec_svc_sec {
	/* Palette */
	--unec_svc_dark: #231f20;
	--unec_svc_yellow: #ffc20e;
	--unec_svc_white: #ffffff;
	/* Grid — 1920→256, 1728→160, 1608→100, 1508→50, then 50 / 40 / 24 */
	--unec_svc_max: 1408px;
	--unec_svc_gutter: 50px;
	/* Type scale, straight off the Figma text styles */
	--unec_svc_h1_fs: 92px;
	--unec_svc_h1_lh: 88px;
	--unec_svc_h2_fs: 72px;
	--unec_svc_h2_lh: 68px;
	--unec_svc_h3_fs: 56px;
	--unec_svc_h3_lh: 52px;
	--unec_svc_h5_fs: 28px;
	--unec_svc_h5_lh: 34px;
	--unec_svc_h6_fs: 20px;
	--unec_svc_h6_lh: 30px;
	--unec_svc_body_fs: 17px;
	--unec_svc_body_lh: 26px;
	--unec_svc_track_display: -0.04em;
	--unec_svc_track_h5: -0.02em;
	--unec_svc_track_h6: -0.01em;
	--unec_svc_font: "Pretendard", "Pretendard Variable", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--unec_svc_weight_semibold: 600;
	--unec_svc_weight_medium: 500;
	--unec_svc_weight_regular: 400;
	/* Rules and muted copy */
	--unec_svc_rule_opacity: 0.2;
	--unec_svc_muted: 0.64;
	/* Section rhythm. Figma draws 160; this site runs 100. Sections whose
	   padding field is left on "Section default" read this, so the whole
	   rhythm is one declaration — a section with a number typed into its
	   shortcode writes that inline instead and cannot be reached from here. */
	--unec_svc_pad_v: 100px;
	/* Motion */
	--unec_svc_ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--unec_svc_speed: 0.4s;
}
/* =========================================================================
 * 2. Shared shell
 * ====================================================================== */
#top .unec_svc_sec {
	position: relative;
	box-sizing: border-box;
	display: block;
	float: none;
	clear: both;
	width: 100%;
	margin: 0;
	/* The element writes --unec_svc_pt / _pb as an INLINE custom property, and
	   an inline declaration beats any stylesheet rule — a media query that
	   re-declared them would silently never apply. The breakpoints therefore
	   move a scale factor, which keeps the ladder monotonic by construction.
	   Same class of bug as the padding step in claude/contact-pages.md. */
	padding-top: calc(var(--unec_svc_pt, var(--unec_svc_pad_v, 100px)) * var(--unec_svc_pad_scale, 1));
	padding-bottom: calc(var(--unec_svc_pb, var(--unec_svc_pad_v, 100px)) * var(--unec_svc_pad_scale, 1));
	font-family: var(--unec_svc_font);
	color: var(--unec_svc_dark);
}
/* font-family is restated on every descendant because Enfold styles the bare
   element (#top div, 1-0-1) and that beats inheritance from .unec_svc_sec —
   the same trap documented in claude/main-navigation.md. Without this, any
   text inside a <div> silently falls back to the theme face and the
   cap-height trim is computed against the wrong metrics. */
#top .unec_svc_sec * {
	box-sizing: border-box;
	font-family: var(--unec_svc_font);
}
/* Avia floats the column, the content wrapper and its text sections. A
   floated sibling drops a following flex box out of flow, which silently eats
   the design's gaps — see claude/subhero.md. */
#top .unec_svc_host .content,
#top .unec_svc_host .flex_column,
#top .unec_svc_host .entry-content-wrapper,
#top .unec_svc_host .av_textblock_section,
#top .container:has(.unec_svc_bleed) > .content,
#top .container:has(.unec_svc_bleed) .flex_column,
#top .container:has(.unec_svc_bleed) .entry-content-wrapper {
	float: none;
}
#top .unec_svc_bg_white {
	background-color: var(--unec_svc_white);
}
#top .unec_svc_bg_dark {
	background-color: var(--unec_svc_dark);
	color: var(--unec_svc_white);
}
#top .unec_svc_bg_yellow {
	background-color: var(--unec_svc_yellow);
}
#top .unec_svc_bg_custom {
	background-color: var(--unec_svc_bg);
}
/* The gutter ladder. max() gives 256 at 1920, 160 at 1728, 100 at 1608 and
   50 from 1508 down — no 100vw anywhere, so a scrollbar cannot shift it. */
#top .unec_svc_wrap {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding-left: max(var(--unec_svc_gutter), calc((100% - var(--unec_svc_max)) / 2));
	padding-right: max(var(--unec_svc_gutter), calc((100% - var(--unec_svc_max)) / 2));
}
/* A full-bleed element rendered from a shortcode cannot reset its own
   ancestor container with a class on itself, so the Color Section carries
   unec_svc_host. The :has() rules are a belt-and-braces fallback for pages
   where that class was not added. */
#top .unec_svc_host .container,
#top .container.unec_svc_host,
#top .container:has(> * > .entry-content-wrapper > .unec_svc_bleed),
#top .container:has(> * > .entry-content-wrapper > * > .unec_svc_bleed) {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* --- Cap-height trim ---------------------------------------------------
 * Pretendard sets USE_TYPO_METRICS, so the browser reads the typo values:
 * upm 2048, sTypoAscender 1949, sTypoDescender 494, sCapHeight 1448.
 * Elements set only --u_svc_fs / --u_svc_lh; the maths lives here once.
 *   half-leading = (lh - fs * (1949 + 494) / 2048) / 2
 *   top    trim  = half-leading + fs * (1949 - 1448) / 2048
 *   bottom trim  = half-leading + fs * 494 / 2048
 */
#top .unec_svc_trim,
#top .unec_svc_trim_kids {
	font-size: var(--u_svc_fs);
	line-height: var(--u_svc_lh);
}
/* The class is doubled so the trim outranks an element's own child reset
   (e.g. the intro body's `> * { margin: 0 }`), which would otherwise tie on
   specificity and win on order. */
#top .unec_svc_trim.unec_svc_trim,
#top .unec_svc_trim_kids.unec_svc_trim_kids > :first-child {
	margin-top: calc(
		-1 * ((var(--u_svc_lh) - var(--u_svc_fs) * 2443 / 2048) / 2 + var(--u_svc_fs) * 501 / 2048)
	);
}
#top .unec_svc_trim.unec_svc_trim,
#top .unec_svc_trim_kids.unec_svc_trim_kids > :last-child {
	margin-bottom: calc(
		-1 * ((var(--u_svc_lh) - var(--u_svc_fs) * 2443 / 2048) / 2 + var(--u_svc_fs) * 494 / 2048)
	);
}
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
	#top .unec_svc_trim.unec_svc_trim {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
		margin-top: 0;
		margin-bottom: 0;
	}
	#top .unec_svc_trim_kids.unec_svc_trim_kids > :first-child {
		text-box-trim: trim-start;
		text-box-edge: cap alphabetic;
		margin-top: 0;
	}
	#top .unec_svc_trim_kids.unec_svc_trim_kids > :last-child {
		text-box-trim: trim-end;
		text-box-edge: cap alphabetic;
		margin-bottom: 0;
	}
	#top .unec_svc_trim_kids.unec_svc_trim_kids > :first-child:last-child {
		text-box-trim: trim-both;
	}
}
/* =========================================================================
 * 3. Service intro
 * ====================================================================== */
#top .unec_intro .unec_intro_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}
#top .unec_intro .unec_intro_head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
#top .unec_intro .unec_intro_label {
	--u_svc_fs: var(--unec_svc_body_fs);
	--u_svc_lh: var(--unec_svc_body_lh);
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-weight: var(--unec_svc_weight_medium);
	letter-spacing: 0;
	color: inherit;
}
#top .unec_intro .unec_intro_rule {
	display: block;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	opacity: var(--unec_svc_rule_opacity);
}
#top .unec_intro .unec_intro_body {
	--u_svc_fs: var(--unec_svc_h5_fs);
	--u_svc_lh: var(--unec_svc_h5_lh);
	display: flow-root;
	width: 100%;
	max-width: var(--unec_intro_measure, 934px);
	font-weight: var(--unec_svc_weight_medium);
	letter-spacing: var(--unec_svc_track_h5);
	color: inherit;
}
#top .unec_intro .unec_intro_body > * {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}
/* Figma leaves one blank line between paragraphs — that is exactly one line
   box, so the paragraph gap is the line height, not an arbitrary margin. */
#top .unec_intro .unec_intro_body > * + * {
	margin-top: var(--u_svc_lh);
}
/* =========================================================================
 * 4. Gallery
 * ====================================================================== */
#top .unec_gal .unec_gal_inner {
	position: relative;
	width: 100%;
}
/* Splide hides its root until it mounts. Keep the first slide visible so a
   JavaScript failure leaves a clean static image rather than a blank hole. */
#top .unec_gal .splide {
	visibility: visible;
}
/* The no-JavaScript fallback below is gated on `.unec_gal_ready`, a class the
   script adds immediately BEFORE it constructs Splide — deliberately not on
   Splide's own `.is-initialized`.

   Splide adds `.is-initialized` in the very last statement of mount(), long
   after Layout, Clones and Move have measured the slides. Gated on that class
   the fallback was still live while those measurements ran, so every slide but
   the first reported a width of 0 and the opening offset was computed from
   nothing: the track opened part-way through a slide (1112px of a 1408px slide,
   then the gap, then the next one) and stayed that way until the first autoplay
   move recomputed it from the real sizes.

   The class is added and Splide is constructed in the same synchronous task, so
   the browser never paints the un-gated state. If the constructor throws, the
   script takes the class back off and the static fallback returns. */
#top .unec_gal .unec_gal_inner:not(.unec_gal_ready) .splide__list {
	display: block;
}
#top .unec_gal .unec_gal_inner:not(.unec_gal_ready) .splide__slide + .splide__slide {
	display: none;
}
#top .unec_gal .unec_gal_track {
	border-radius: var(--unec_gal_radius, 0px);
}
/* Enfold gives #top li a bottom margin; left alone it makes the track 10px
   taller than the slide and knocks the vertically centred arrows off. */
#top .unec_gal ul.unec_gal_list,
#top .unec_gal li.unec_gal_slide {
	margin: 0;
	padding: 0;
	list-style: none;
}
#top .unec_gal li.unec_gal_slide {
	overflow: hidden;
	border-radius: var(--unec_gal_radius, 0px);
}
#top .unec_gal .unec_gal_figure {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: var(--unec_gal_ratio, 1408 / 700);
	background-color: rgba(35, 31, 32, 0.06);
}
#top .unec_gal img.unec_gal_img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}
#top .unec_gal .unec_gal_caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 24px 96px;
	background-image: linear-gradient(to top, rgba(35, 31, 32, 0.72), rgba(35, 31, 32, 0));
	font-size: var(--unec_svc_body_fs);
	line-height: var(--unec_svc_body_lh);
	font-weight: var(--unec_svc_weight_medium);
	color: var(--unec_svc_white);
}
/* --- Arrows ------------------------------------------------------------
 * 56 x 56 (16px padding around a 24px glyph), inset 20px from each edge and
 * vertically centred. Colours are custom properties the base rule reads but
 * never sets, so :hover / :focus-visible can re-point them without a
 * specificity fight — see claude/contact-pages.md, trap 3.
 */
#top .unec_gal .unec_gal_arrows {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
#top .unec_gal button.unec_gal_arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 16px;
	margin: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 999px;
	background-color: var(--unec_gal_arrow_bg);
	color: var(--unec_gal_arrow_ink);
	cursor: pointer;
	opacity: 1;
	pointer-events: auto;
	transition: background-color var(--unec_svc_speed) var(--unec_svc_ease),
		color var(--unec_svc_speed) var(--unec_svc_ease),
		transform var(--unec_svc_speed) var(--unec_svc_ease);
}
#top .unec_gal button.unec_gal_arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}
/* Both arrows share one scheme: dark at rest, brand yellow on hover and on
   keyboard focus. Figma draws the next arrow yellow at rest and swaps the two
   schemes on hover; the client asked for the prev arrow's behaviour on both,
   so the resting yellow is a token away rather than a rule away — see the
   Figma variant below. */
#top .unec_gal button.unec_gal_arrow {
	--unec_gal_arrow_bg: var(--unec_gal_arrow_rest_bg, var(--unec_svc_dark));
	--unec_gal_arrow_ink: var(--unec_gal_arrow_rest_ink, var(--unec_svc_white));
}
#top .unec_gal button.unec_gal_arrow:hover,
#top .unec_gal button.unec_gal_arrow:focus-visible {
	--unec_gal_arrow_bg: var(--unec_gal_arrow_hover_bg, var(--unec_svc_yellow));
	--unec_gal_arrow_ink: var(--unec_gal_arrow_hover_ink, var(--unec_svc_dark));
}
#top .unec_gal button.unec_gal_arrow_prev {
	left: 20px;
}
/* The design rotates the same chevron rather than shipping a second glyph. */
#top .unec_gal button.unec_gal_arrow_prev svg {
	transform: rotate(180deg);
}
#top .unec_gal button.unec_gal_arrow_next {
	right: 20px;
}
/* Figma variant — put the next arrow back to yellow at rest, swapping into the
   dark scheme on hover, with two declarations in Quick CSS:
   #top .unec_gal button.unec_gal_arrow_next {
       --unec_gal_arrow_rest_bg: var(--unec_svc_yellow);
       --unec_gal_arrow_rest_ink: var(--unec_svc_dark);
       --unec_gal_arrow_hover_bg: var(--unec_svc_dark);
       --unec_gal_arrow_hover_ink: var(--unec_svc_white);
   }
*/
#top .unec_gal button.unec_gal_arrow:focus-visible {
	outline: 2px solid var(--unec_svc_yellow);
	outline-offset: 3px;
}
#top .unec_gal button.unec_gal_arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}
#top .unec_gal .splide__pagination {
	position: static;
	gap: 8px;
	margin-top: 24px;
	padding: 0;
}
#top .unec_gal .splide__pagination button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: currentColor;
	opacity: 0.24;
	cursor: pointer;
	transition: opacity var(--unec_svc_speed) var(--unec_svc_ease);
}
#top .unec_gal .splide__pagination button.is-active {
	opacity: 1;
	background-color: var(--unec_svc_yellow);
}
/* =========================================================================
 * 5. Quality manners
 * ====================================================================== */
#top .unec_qm .unec_qm_grid {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 64px;
}
#top .unec_qm .unec_qm_left {
	flex: 0 0 var(--unec_qm_left_w, 580px);
	width: var(--unec_qm_left_w, 580px);
	max-width: var(--unec_qm_left_w, 580px);
	align-self: stretch;
}
#top .unec_qm_is_sticky .unec_qm_left {
	position: sticky;
	top: var(--unec_qm_top, calc(var(--unec_nav_h, 0px) + 80px));
	align-self: flex-start;
}
/* The design column is 1392 tall, which is taller than most viewports. The
   sticky box keeps the arrangement — heading top, artwork below it, counter
   pinned to the bottom — inside whatever height is actually available. */
/* min-height existed only to give `margin-top: auto` on the counter something
   to push against. With the counter now sitting directly under the artwork it
   would just add dead space below — and a min-height ALWAYS beats a
   max-height, so leaving it in made the max-height a no-op (590 vs 538 at a
   911px viewport). Both are tokens now: the Figma-fidelity suite pins them
   back to the design while it measures. */
#top .unec_qm .unec_qm_sticky {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: var(--unec_qm_sticky_min, 0px);
}
#top .unec_qm_is_sticky .unec_qm_sticky {
	max-height: var(
		--unec_qm_sticky_max,
		calc(100vh - var(--unec_qm_top, calc(var(--unec_nav_h, 0px) + 80px)) - 132px)
	);
}
#top .unec_qm h2.unec_qm_title {
	--u_svc_fs: var(--unec_svc_h2_fs);
	--u_svc_lh: var(--unec_svc_h2_lh);
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-family: var(--unec_svc_font);
	font-weight: var(--unec_svc_weight_semibold);
	letter-spacing: var(--unec_svc_track_display);
	color: inherit;
	text-transform: none;
}
#top .unec_qm .unec_qm_visual {
	position: relative;
	width: 100%;
	height: var(--unec_qm_visual_h, 280px);
	margin-top: var(--unec_qm_visual_gap, 18px);
	line-height: 0;
}
/* object-fit matters even though paint mode hides the <img>: with a fixed
   height and the default `fill`, a 580x349 export renders 580x280 and is
   squashed 20% — invisible while the mask is painting it, plainly wrong the
   moment someone sets paint="no". `contain` keeps the aspect in both modes and
   matches what mask-size: contain does to the painted version. */
#top .unec_qm img.unec_qm_visual_img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: left center;
	border-radius: 0;
	box-shadow: none;
}
/* Paint mode: the artwork is used as an alpha mask over a flat colour, so any
   line drawing the client uploads lands on-brand with no image editing —
   the same idea as the subhero's luminosity tint. */
#top .unec_qm .unec_qm_visual_paint {
	background-color: var(--unec_qm_paint, var(--unec_svc_white));
	opacity: var(--unec_qm_visual_opacity, 0.64);
	-webkit-mask-image: var(--unec_qm_art);
	mask-image: var(--unec_qm_art);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
#top .unec_qm .unec_qm_visual_paint img.unec_qm_visual_img {
	opacity: 0;
}
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	#top .unec_qm .unec_qm_visual_paint {
		background-color: transparent;
	}
	#top .unec_qm .unec_qm_visual_paint img.unec_qm_visual_img {
		opacity: 1;
	}
}
/* --- Counter ---------------------------------------------------------- */
/* One gap token, not a margin plus a padding whose value the ring's `top` has
   to be kept equal to — that pairing is two numbers to change for one visual
   move. Set --unec_qm_counter_gap to `auto` to push the counter to the bottom
   of the sticky column, which is what the design does. */
#top .unec_qm .unec_qm_counter {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	margin-top: var(--unec_qm_counter_gap, 38px);
}
#top .unec_qm .unec_qm_ring {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 80px;
	height: 80px;
	transform: rotate(-90deg);
	overflow: visible;
}
#top .unec_qm .unec_qm_ring_track {
	stroke: currentColor;
	stroke-width: var(--unec_qm_ring_w, 1px);
	opacity: var(--unec_svc_rule_opacity);
}
#top .unec_qm .unec_qm_ring_bar {
	stroke: var(--unec_svc_yellow);
	stroke-width: var(--unec_qm_ring_w, 1px);
	stroke-linecap: butt;
	stroke-dasharray: 100;
	stroke-dashoffset: var(--unec_qm_ring_offset, 100);
	transition: stroke-dashoffset var(--unec_svc_speed) var(--unec_svc_ease);
}
#top .unec_qm .unec_qm_counter_label {
	--u_svc_fs: var(--unec_svc_body_fs);
	--u_svc_lh: var(--unec_svc_body_lh);
	position: relative;
	z-index: 1;
	font-size: var(--u_svc_fs);
	line-height: var(--u_svc_lh);
	font-weight: var(--unec_svc_weight_medium);
	font-variant-numeric: tabular-nums;
	color: inherit;
}
/* --- List ------------------------------------------------------------- */
#top .unec_qm ol.unec_qm_list {
	display: flex;
	flex-direction: column;
	gap: 56px;
	flex: 0 0 var(--unec_qm_right_w, 431px);
	width: var(--unec_qm_right_w, 431px);
	max-width: var(--unec_qm_right_w, 431px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
#top .unec_qm ol.unec_qm_list > li.unec_qm_item {
	display: flex;
	align-items: flex-start;
	gap: var(--unec_qm_icon_gap, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* gap 56 + padding 56 puts the hairline exactly 56 below the item above and
   56 above the item below, which is how Figma spaces them. */
#top .unec_qm ol.unec_qm_list > li.unec_qm_item + li.unec_qm_item {
	padding-top: 56px;
	border-top: 1px solid currentColor;
	border-image: none;
}
#top .unec_qm ol.unec_qm_list > li.unec_qm_item + li.unec_qm_item {
	border-top-color: rgba(255, 255, 255, var(--unec_svc_rule_opacity));
}
#top .unec_svc_bg_white.unec_qm ol.unec_qm_list > li.unec_qm_item + li.unec_qm_item,
#top .unec_svc_bg_yellow.unec_qm ol.unec_qm_list > li.unec_qm_item + li.unec_qm_item {
	border-top-color: rgba(35, 31, 32, var(--unec_svc_rule_opacity));
}
#top .unec_qm .unec_qm_icon {
	flex: 0 0 48px;
	display: block;
	width: 48px;
	height: 48px;
	color: var(--unec_svc_yellow);
}
#top .unec_qm .unec_qm_icon svg,
#top .unec_qm .unec_qm_icon img {
	display: block;
	width: 48px;
	height: 48px;
	max-width: none;
	border-radius: 0;
	box-shadow: none;
}
#top .unec_qm .unec_qm_body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;
	min-width: 0;
}
#top .unec_qm p.unec_qm_num {
	--u_svc_fs: var(--unec_svc_h3_fs);
	--u_svc_lh: var(--unec_svc_h3_lh);
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-weight: var(--unec_svc_weight_semibold);
	letter-spacing: var(--unec_svc_track_display);
	font-variant-numeric: tabular-nums;
	color: inherit;
}
#top .unec_qm .unec_qm_copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#top .unec_qm h3.unec_qm_head {
	--u_svc_fs: var(--unec_svc_h6_fs);
	--u_svc_lh: var(--unec_svc_h6_lh);
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-family: var(--unec_svc_font);
	font-weight: var(--unec_svc_weight_medium);
	letter-spacing: var(--unec_svc_track_h6);
	color: inherit;
	text-transform: none;
}
#top .unec_qm p.unec_qm_text {
	--u_svc_fs: var(--unec_svc_body_fs);
	--u_svc_lh: var(--unec_svc_body_lh);
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	font-weight: var(--unec_svc_weight_regular);
	letter-spacing: 0;
	color: inherit;
	opacity: var(--unec_svc_muted);
}
/* =========================================================================
 * 6. Next page
 * ====================================================================== */
#top a.unec_np {
	position: relative;
	display: block;
	width: 100%;
	/* Scaled, not re-declared — see the note on --unec_svc_pt above. */
	height: calc(var(--unec_np_h, 800px) * var(--unec_np_h_scale, 1));
	overflow: hidden;
	text-decoration: none;
	background-color: var(--unec_svc_dark);
	color: var(--unec_svc_dark);
}
#top a.unec_np:hover,
#top a.unec_np:focus {
	text-decoration: none;
}
#top a.unec_np:focus-visible {
	outline: 3px solid var(--unec_svc_dark);
	outline-offset: -3px;
}
#top .unec_np .unec_np_media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}
#top .unec_np img.unec_np_img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transform: scale(1);
	transition: transform 0.7s var(--unec_svc_ease);
}
#top a.unec_np:hover img.unec_np_img,
#top a.unec_np:focus-visible img.unec_np_img {
	transform: scale(1.04);
}
#top .unec_np .unec_np_panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	display: block;
	width: max(var(--unec_np_panel, 50%), var(--unec_np_panel_min, 0%));
	background-color: var(--unec_svc_yellow);
	opacity: var(--unec_np_opacity, 0.92);
}
#top .unec_np .unec_np_inner {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: block;
	transform: translateY(-50%);
	padding-left: max(var(--unec_svc_gutter), calc((100% - var(--unec_svc_max)) / 2));
	padding-right: max(var(--unec_svc_gutter), calc((100% - var(--unec_svc_max)) / 2));
}
#top .unec_np .unec_np_title {
	--u_svc_fs: var(--unec_svc_h1_fs);
	--u_svc_lh: var(--unec_svc_h1_lh);
	display: block;
	max-width: var(--unec_np_measure, 544px);
	font-weight: var(--unec_svc_weight_semibold);
	letter-spacing: var(--unec_svc_track_display);
	color: var(--unec_svc_dark);
}
#top .unec_np .unec_np_btn {
	position: absolute;
	top: 50%;
	left: max(var(--unec_np_panel, 50%), var(--unec_np_panel_min, 0%));
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--unec_np_btn_size, 152px);
	height: var(--unec_np_btn_size, 152px);
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background-color: var(--unec_np_btn_bg, var(--unec_svc_dark));
	color: var(--unec_np_btn_ink, var(--unec_svc_yellow));
	transition: background-color var(--unec_svc_speed) var(--unec_svc_ease),
		color var(--unec_svc_speed) var(--unec_svc_ease);
}
#top .unec_np .unec_np_btn svg {
	display: block;
	width: var(--unec_np_btn_icon, 40px);
	height: var(--unec_np_btn_icon, 40px);
}
#top a.unec_np:hover .unec_np_btn,
#top a.unec_np:focus-visible .unec_np_btn {
	--unec_np_btn_bg: var(--unec_svc_yellow);
	--unec_np_btn_ink: var(--unec_svc_dark);
}
/* =========================================================================
 * 7. Responsive ladder — custom properties only
 * ====================================================================== */
@media only screen and (max-width: 1400px) {
	#top .unec_svc_sec {
		--unec_svc_h1_fs: 72px;
		--unec_svc_h1_lh: 69px;
		--unec_svc_h2_fs: 60px;
		--unec_svc_h2_lh: 57px;
		--unec_svc_h3_fs: 48px;
		--unec_svc_h3_lh: 45px;
		--unec_svc_h5_fs: 24px;
		--unec_svc_h5_lh: 30px;
		--unec_svc_pad_scale: 0.8;
	}
	#top .unec_qm .unec_qm_grid {
		gap: 48px;
	}
	#top .unec_qm .unec_qm_left {
		flex-basis: 46%;
		width: 46%;
		max-width: 46%;
	}
	#top .unec_qm ol.unec_qm_list {
		flex-basis: 400px;
		width: 400px;
		max-width: 400px;
	}
	#top .unec_np .unec_np_btn {
		--unec_np_btn_size: 120px;
		--unec_np_btn_icon: 32px;
	}
}
@media only screen and (max-width: 1180px) {
	#top .unec_svc_sec {
		--unec_svc_h1_fs: 60px;
		--unec_svc_h1_lh: 58px;
		--unec_svc_h2_fs: 50px;
		--unec_svc_h2_lh: 48px;
		--unec_svc_h3_fs: 44px;
		--unec_svc_h3_lh: 42px;
		--unec_svc_pad_scale: 0.7;
	}
	#top .unec_qm ol.unec_qm_list {
		flex-basis: 360px;
		width: 360px;
		max-width: 360px;
	}
}
@media only screen and (max-width: 1024px) {
	#top .unec_svc_sec {
		--unec_svc_gutter: 40px;
		--unec_svc_h1_fs: 48px;
		--unec_svc_h1_lh: 46px;
		--unec_svc_h2_fs: 42px;
		--unec_svc_h2_lh: 41px;
		--unec_svc_h3_fs: 40px;
		--unec_svc_h3_lh: 38px;
		--unec_svc_h5_fs: 22px;
		--unec_svc_h5_lh: 30px;
		--unec_svc_pad_scale: 0.6;
	}
	/* Below the two-column breakpoint the sticky column has nothing to stick
	   past, so it becomes an ordinary block and the counter moves inline. */
	#top .unec_qm .unec_qm_grid,
	#top .unec_qm_is_sticky .unec_qm_grid {
		display: block;
	}
	#top .unec_qm .unec_qm_left,
	#top .unec_qm_is_sticky .unec_qm_left {
		position: static;
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
		margin-bottom: 72px;
	}
	#top .unec_qm .unec_qm_sticky,
	#top .unec_qm_is_sticky .unec_qm_sticky {
		--unec_qm_sticky_min: 0px;
		--unec_qm_sticky_max: none;
	}
	#top .unec_qm .unec_qm_visual {
		max-width: 580px;
	}
	#top .unec_qm ol.unec_qm_list {
		flex-basis: auto;
		width: 100%;
		max-width: 620px;
	}
	#top .unec_gal button.unec_gal_arrow {
		width: 34px;
		height: 48px;
		padding: 12px;
	}
	#top .unec_np {
		--unec_np_h_scale: 0.7;
		--unec_np_panel_min: 62%;
	}
	#top .unec_np .unec_np_btn {
		--unec_np_btn_size: 104px;
		--unec_np_btn_icon: 28px;
	}
}
@media only screen and (max-width: 768px) {
	#top .unec_svc_sec {
		--unec_svc_gutter: 24px;
		--unec_svc_h1_fs: 40px;
		--unec_svc_h1_lh: 38px;
		--unec_svc_h2_fs: 36px;
		--unec_svc_h2_lh: 35px;
		--unec_svc_h3_fs: 36px;
		--unec_svc_h3_lh: 34px;
		--unec_svc_h5_fs: 20px;
		--unec_svc_h5_lh: 28px;
		--unec_svc_h6_fs: 18px;
		--unec_svc_h6_lh: 27px;
		--unec_svc_body_fs: 16px;
		--unec_svc_body_lh: 25px;
		--unec_svc_pad_scale: 0.45;
	}
	#top .unec_intro .unec_intro_inner {
		gap: 28px;
	}

	#top .unec_qm_counter {
		display: none !important;
	}
	
	#top .unec_np .unec_np_btn {
		width: 60px;
		height: 60px;
	}
	
	#top .unec_svc_wrap {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#top .unec_qm .unec_qm_visual {
		height: 172px;
	}

	#top .unec_qm .unec_qm_left, #top .unec_qm_is_sticky .unec_qm_left {
        margin-bottom: 32px;
    }

	#top .unec_qm ol.unec_qm_list > li.unec_qm_item {
		flex-direction: column;
		gap: 24px;
	}
	#top .unec_qm ol.unec_qm_list {
		gap: 40px;
	}
	#top .unec_qm ol.unec_qm_list > li.unec_qm_item + li.unec_qm_item {
		padding-top: 30px;
	}

	#top .unec_svc_host .content, #top .unec_svc_host .flex_column, #top .unec_svc_host .entry-content-wrapper, #top .unec_svc_host .av_textblock_section, #top .container:has(.unec_svc_bleed) > .content, #top .flex_column, #top .container:has(.unec_svc_bleed) .entry-content-wrapper {
		margin-bottom: 0px !important;
	}
	#top .unec_gal button.unec_gal_arrow {
		left: 12px;
		width: 44px;
		height: 44px;
		padding: 10px;
	}
	#top .unec_gal button.unec_gal_arrow_next {
		left: auto;
		right: 12px;
	}
	#top .unec_gal .unec_gal_caption {
		padding: 16px 68px;
	}
	/* --- Next page on a phone ------------------------------------------
	 * The panel is full width, so there is no seam for the button to sit on
	 * and no reason for the section to keep the design's fixed height. The
	 * copy block leaves absolute positioning and returns to normal flow, the
	 * button follows the title as an ordinary block, and the section takes its
	 * height from that content.
	 *
	 * Four things this depends on:
	 *
	 *  - .unec_np_media and .unec_np_panel stay absolutely positioned, so they
	 *    paint after their static siblings. The copy block AND the button both
	 *    need position: relative with a z-index, or the panel covers them.
	 *  - `height: auto`, not `max-content`: the link is a block in normal flow
	 *    and max-content would shrink-wrap it sideways as well as vertically.
	 *  - The button is a SIBLING of the copy block, not a child of it, so the
	 *    copy block's gutter padding never reaches it. The vertical padding
	 *    therefore moves onto the link itself and the button takes the same
	 *    gutter as a margin — that is what lines it up with the title. An
	 *    absolutely positioned child is laid out against the link's PADDING
	 *    box, so the artwork and panel still cover the whole section.
	 *  - --unec_np_h_scale is deliberately NOT set here. It only scales the
	 *    fixed height, which no longer applies, so setting it would be a dead
	 *    declaration — the token audit in the test suite flags those.
	 * ---------------------------------------------------------------- */
	#top .unec_np {
		--unec_np_panel_min: 100%;
	}
	#top a.unec_np {
		height: auto;
		padding-top: var(--unec_np_pad_v, 72px);
		padding-bottom: var(--unec_np_pad_v, 72px);
	}
	#top .unec_np .unec_np_inner {
		position: relative;
		z-index: 1;
		top: auto;
		transform: none;
	}
	#top .unec_np .unec_np_btn {
		--unec_np_btn_size: 88px;
		--unec_np_btn_icon: 24px;
		position: relative;
		z-index: 1;
		top: auto;
		bottom: auto;
		left: auto;
		transform: none;
		margin-top: var(--unec_np_btn_gap, 40px);
		/* Same gutter as the copy block, so the button lines up with the
		   title's first letter. Set margin-left to auto as well to centre it. */
		margin-left: max(var(--unec_svc_gutter), calc((100% - var(--unec_svc_max)) / 2));
		margin-right: auto;
	}
	#top .unec_np .unec_np_btn svg {
		transform: rotate(90deg);
	}

	#top .unec_intro .unec_intro_body > * {
		font-size: 16px;
		line-height: 22px;
	}
}
@media only screen and (max-width: 480px) {
	#top .unec_svc_sec {
		--unec_svc_h1_fs: 34px;
		--unec_svc_h1_lh: 33px;
		--unec_svc_h2_fs: 30px;
		--unec_svc_h2_lh: 30px;
		--unec_svc_h3_fs: 32px;
		--unec_svc_h3_lh: 31px;
		--unec_svc_pad_scale: 0.35;
	}
	/* The teaser is content-height below 768, so the small-phone step is the
	   breathing room around the copy, not a height multiplier. */
	#top .unec_np {
		--unec_np_pad_v: 56px;
		--unec_np_btn_gap: 32px;
	}
}
/* =========================================================================
 * 8. Sticky rescue
 *
 * js/unec-service.js tags every ancestor that was making itself a scroll
 * container and so breaking `position: sticky` — on Enfold that is `html`,
 * `body#top` and `div#wrap_all`. The replacement values are written as inline
 * custom properties per element, because each ancestor needs a different pair
 * (see the comment in the JS).
 *
 * `overflow: clip` clips exactly like `hidden` without creating a scroll
 * container. It does not establish a block formatting context though, so an
 * element that was containing floats through `overflow: hidden` is given
 * `display: flow-root` to keep that.
 *
 * These three selectors are the only ones in the file not scoped under #top,
 * because `html` and `body` cannot be — the same exception the footer module
 * documents for its `scroll-behavior` rule.
 * ====================================================================== */
@supports (overflow-x: clip) {
	/* Specificity matters here: Enfold sets the body rule through the #top ID
	   (1-0-0), so `body.unec_svc_unclip` (0-1-1) loses. `#top.unec_svc_unclip`
	   (1-1-0) beats both `#top` and `body#top`; the doubled classes cover
	   themes that use neither. */
	html.unec_svc_unclip.unec_svc_unclip,
	body.unec_svc_unclip.unec_svc_unclip,
	#top.unec_svc_unclip,
	#top .unec_svc_unclip.unec_svc_unclip {
		overflow-x: var(--unec_svc_ovx, clip);
		overflow-y: var(--unec_svc_ovy, visible);
	}
	body.unec_svc_flowroot.unec_svc_flowroot,
	#top.unec_svc_flowroot,
	#top .unec_svc_flowroot.unec_svc_flowroot {
		display: flow-root;
	}
}
/* =========================================================================
 * 9. Reduced motion
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	#top .unec_svc_sec *,
	#top a.unec_np * {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}
	#top a.unec_np:hover img.unec_np_img,
	#top a.unec_np:focus-visible img.unec_np_img {
		transform: none;
	}
}