/*!
 * UNEC — Solutions  v1.0.0
 *
 * Figma 184:15320 (collapsed grid) / 447:4708 (all cards expanded)
 * File  Q5ckGwby9XewAE51OXln5p
 *
 * Every selector is scoped under #top (Enfold's body id) so this file wins
 * specificity over the theme without !important. There is no !important in
 * this file at all — the module's only one lives in the <noscript> block that
 * php/render.php emits.
 */

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

#top .unec_sol_sec {
	/* Type */
	--unec_sol_font: "Pretendard", "Pretendard Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Palette — literals, never chained through another token. A custom
	   property is substituted where it is DECLARED, not where it is used, so a
	   token defined as var(other-token) freezes the value it had at that point.
	   See claude/main-navigation.md. */
	--unec_sol_ink: #231f20;
	--unec_sol_accent: #ffc20e;
	--unec_sol_sec_bg: #ffffff;
	--unec_sol_card_bg: #f8f8f9;
	--unec_sol_media_bg: #ffffff;
	--unec_sol_btn_bg: #ffc20e;
	--unec_sol_btn_ink: #231f20;
	--unec_sol_btn_bg_hover: #231f20;
	--unec_sol_btn_ink_hover: #ffc20e;
	--unec_sol_body_alpha: 0.64;
	--unec_sol_rule: rgba(35, 31, 32, 0.16);

	/* Layout */
	--unec_sol_max: 1408px;
	--unec_sol_gutter: max(50px, calc((100% - 1408px) / 2));
	--unec_sol_pad_v: 100px;
	--unec_sol_pad_scale: 1;
	--unec_sol_pad_x: 48px;
	--unec_sol_face_pt: 92px;
	--unec_sol_face_pb: 56px;
	--unec_sol_panel_pv: 56px;
	--unec_sol_title_gap: 72px;
	--unec_sol_stack: 32px;
	--unec_sol_img_scale: 1;
	--unec_sol_btn: 64px;
	--unec_sol_btn_inset: 24px;
	--unec_sol_btn_icon: 24px;
	--unec_sol_head_clear: 88px;
	--unec_sol_card_h: var(--unec_sol_card_h_set, 690px);

	/* Motion */
	--unec_sol_dur: 0.28s;

	/* Cap-height trim. Pretendard typo metrics 2048 / 1949 / 494 / 1448 with
	   USE_TYPO_METRICS set, re-verified with fontTools against the shipped
	   Regular, Medium and SemiBold faces.
	     1.19287109375 = (1949 + 494) / 2048   content area
	     0.24462890625 = (1949 - 1448) / 2048  ascender above the cap
	     0.2412109375  = 494 / 2048            descender below the baseline */
	--unec_sol_area: 1.19287109375;
	--unec_sol_over: 0.24462890625;
	--unec_sol_under: 0.2412109375;
}

/* Enfold styles the bare element (#top div, 1-0-1), which beats inheritance
   from the section. Any text in a <div> would fall back to the theme face —
   and cap-height trim computed from the wrong font shifts the whole rhythm.
   claude/services-page.md trap 1. */
#top .unec_sol_sec,
#top .unec_sol_sec * {
	font-family: var(--unec_sol_font);
}

/* --------------------------------------------------------------------------
 * Cap-height trim
 * ------------------------------------------------------------------------ */

#top .unec_sol_trim {
	--unec_sol_half: calc((var(--u_sol_lh) - var(--u_sol_fs) * var(--unec_sol_area)) / 2);
	font-size: var(--u_sol_fs);
	line-height: var(--u_sol_lh);
}

/* The Capsize pair. display:table so the pseudo composes with the element's
   own margins instead of collapsing through them. */
#top .unec_sol_trim::before,
#top .unec_sol_trim::after {
	content: "";
	display: table;
}

#top .unec_sol_trim::before {
	margin-bottom: calc(-1 * (var(--unec_sol_half) + var(--u_sol_fs) * var(--unec_sol_over)));
}

#top .unec_sol_trim::after {
	margin-top: calc(-1 * (var(--unec_sol_half) + var(--u_sol_fs) * var(--unec_sol_under)));
}

@supports (text-box-edge: cap alphabetic) {
	#top .unec_sol_trim {
		text-box-trim: trim-both;
		text-box-edge: cap alphabetic;
	}

	#top .unec_sol_trim::before,
	#top .unec_sol_trim::after {
		content: none;
	}
}

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

#top .unec_sol_sec {
	box-sizing: border-box;
	display: block;
	background-color: var(--unec_sol_sec_bg);
	color: var(--unec_sol_ink);
	/* An inline custom property beats every stylesheet rule, so a media query
	   that re-declared --unec_sol_pt would never apply. The breakpoints move
	   the scale factor instead, which also makes the ladder monotonic by
	   construction. claude/services-page.md trap 2. */
	padding-block-start: calc(var(--unec_sol_pt, var(--unec_sol_pad_v)) * var(--unec_sol_pad_scale));
	padding-block-end: calc(var(--unec_sol_pb, var(--unec_sol_pad_v)) * var(--unec_sol_pad_scale));
	padding-top: 0px !important;
}

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

#top .unec_sol_bg_light {
	--unec_sol_sec_bg: #f8f8f9;
	--unec_sol_card_bg: #ffffff;
}

#top .unec_sol_bg_dark {
	--unec_sol_sec_bg: #231f20;
	--unec_sol_card_bg: #2c2829;
	--unec_sol_ink: #ffffff;
	--unec_sol_rule: rgba(255, 255, 255, 0.16);
	--unec_sol_btn_bg: #ffc20e;
	--unec_sol_btn_ink: #231f20;
	--unec_sol_btn_bg_hover: #ffffff;
	--unec_sol_btn_ink_hover: #231f20;
}

#top .unec_sol_w_full {
	padding-inline: var(--unec_sol_gutter);
}

#top .unec_sol_w_container {
	padding-inline: 0;
}

#top .unec_sol_inner {
	max-inline-size: var(--unec_sol_max);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
 * Grid — 2 x 698 with a 12px gutter is 1408 exactly
 * ------------------------------------------------------------------------ */

#top .unec_sol_grid {
	display: grid;
	grid-template-columns: repeat(var(--unec_sol_cols, 2), minmax(0, 1fr));
	gap: var(--unec_sol_gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sol_grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* An odd last card is centred on its own row, as the design draws card 5. */
#top .unec_sol_center_last .unec_sol_card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	inline-size: calc((100% - var(--unec_sol_gap, 12px)) / 2);
	margin-inline: auto;
}

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

#top .unec_sol_card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: var(--unec_sol_card_h);
	background-color: var(--unec_sol_card_bg);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Collapsed face
 *
 * 92 top, 450 circle, 72, title cap line at 614, 56 bottom = 690.
 * ------------------------------------------------------------------------ */

#top .unec_sol_face {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
	padding: var(--unec_sol_face_pt) var(--unec_sol_pad_x) var(--unec_sol_face_pb);
	overflow: hidden;
}

/* An author rule outranks the user-agent origin regardless of specificity, so
   the display above beats [hidden] { display: none } and every hidden face
   would render. The rule has to be restated. claude/certificates-page.md. */
#top .unec_sol_face[hidden] {
	display: none;
}

#top .unec_sol_media {
	flex: 0 0 auto;
	inline-size: min(calc(var(--unec_sol_img, 450px) * var(--unec_sol_img_scale)), 100%);
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 50%;
	background-color: var(--unec_sol_media_bg);
	overflow: hidden;
}

/* Keep the box, lose the disc, when a card has no image. */
#top .unec_sol_media:empty {
	visibility: hidden;
}

#top .unec_sol_media .unec_sol_img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	border-radius: 50%;
}

#top .unec_sol_face .unec_sol_title {
	margin-block-start: var(--unec_sol_title_gap);
}

/* --------------------------------------------------------------------------
 * Opened panel
 *
 * 56 top, title cap 56, +32 subtitle cap 108, +32 body cap 154,
 * body 480, 56 bottom = 690.
 * ------------------------------------------------------------------------ */

#top .unec_sol_panel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
	padding: var(--unec_sol_panel_pv) var(--unec_sol_pad_x);
}

#top .unec_sol_panel[hidden] {
	display: none;
}

/* Figma gives the opened title the full 602 measure, which would run under the
   64px control. Reserving the control's column is a deliberate 40px deviation
   on this line only — it changes nothing for the shipped titles, which all sit
   well inside it, and stops a longer one colliding. */
#top .unec_sol_panel .unec_sol_title {
	flex: 0 0 auto;
	padding-inline-end: var(--unec_sol_head_clear);
}

/* Enfold's #top p carries a 1em bottom margin (1-0-1, which beats a class),
   so every margin here is written in full rather than as a single edge. */
#top .unec_sol_sub {
	flex: 0 0 auto;
	margin: var(--unec_sol_stack) 0 0;
	color: var(--unec_sol_ink);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Cap-height trim shortens the text block's BOX, but the last line's
   descender still paints below it — and a scroll container counts that as
   overflow, so a body that fits the design exactly would offer 7px of phantom
   scroll and grow a scrollbar. The tail is added as bottom padding and taken
   straight back off as a negative bottom margin: the padding box absorbs the
   descender, the margin box is unchanged, so the 56px under the block and
   every other measurement stay exactly as drawn. */
#top .unec_sol_body {
	--unec_sol_tail: calc((var(--u_sol_lh) - var(--u_sol_fs) * var(--unec_sol_area)) / 2 + var(--u_sol_fs) * var(--unec_sol_under));
	flex: 1 1 auto;
	min-block-size: 0;
	margin: var(--unec_sol_stack) 0 calc(-1 * var(--unec_sol_tail));
	padding: 0 0 var(--unec_sol_tail);
	font-size: var(--u_sol_fs);
	line-height: var(--u_sol_lh);
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--unec_sol_ink);
	opacity: var(--unec_sol_body_alpha);
	scrollbar-width: thin;
	scrollbar-color: var(--unec_sol_rule) transparent;
}

#top .unec_sol_body:focus-visible {
	outline: 2px solid var(--unec_sol_accent);
	outline-offset: 4px;
}

/* A blank line between paragraphs is one line box, not an arbitrary margin —
   that is what the design draws. Same rule as the service intro. */
#top .unec_sol_body p,
#top .unec_sol_body ul,
#top .unec_sol_body ol {
	margin: 0 0 var(--u_sol_lh);
	padding: 0;
}

#top .unec_sol_body_in {
	margin: 0;
	padding: 0;
}

#top .unec_sol_body_in > :last-child {
	margin-block-end: 0;
}

#top .unec_sol_body ul,
#top .unec_sol_body ol {
	padding-inline-start: 0;
}

#top .unec_sol_body li {
	margin: 0 0 0 25.5px;
	padding: 0;
	list-style-position: outside;
}

#top .unec_sol_body ul li {
	list-style-type: disc;
}

#top .unec_sol_body ol li {
	list-style-type: decimal;
}

#top .unec_sol_body a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------------ */

#top .unec_sol_title {
	--u_sol_fs: 28px;
	--u_sol_lh: 34px;
	margin: 0;
	padding: 0;
	color: var(--unec_sol_ink);
	font-weight: 500;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
	text-transform: none;
}

#top .unec_sol_sub {
	--u_sol_fs: 20px;
	--u_sol_lh: 24px;
	overflow-wrap: break-word;
}

#top .unec_sol_body {
	--u_sol_fs: 17px;
	--u_sol_lh: 26px;
	font-weight: 400;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
 * The control
 * ------------------------------------------------------------------------ */

#top .unec_sol_toggle {
	position: absolute;
	inset-block-start: var(--unec_sol_btn_inset);
	inset-inline-end: var(--unec_sol_btn_inset);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--unec_sol_btn);
	block-size: var(--unec_sol_btn);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	/* The base rule reads these but never sets them, so a state selector can
	   re-point them without duplicating a single layout declaration.
	   claude/contact-pages.md trap 3. */
	background-color: var(--unec_sol_btn_bg_c, var(--unec_sol_btn_bg));
	color: var(--unec_sol_btn_ink_c, var(--unec_sol_btn_ink));
	cursor: pointer;
	transition: background-color var(--unec_sol_dur) ease, color var(--unec_sol_dur) ease;
	-webkit-appearance: none;
	appearance: none;
}

#top .unec_sol_toggle:hover,
#top .unec_sol_toggle:focus-visible {
	--unec_sol_btn_bg_c: var(--unec_sol_btn_bg_hover);
	--unec_sol_btn_ink_c: var(--unec_sol_btn_ink_hover);
}

#top .unec_sol_toggle:focus-visible {
	outline: 2px solid var(--unec_sol_ink);
	outline-offset: 3px;
}

#top .unec_sol_toggle .unec_sol_icon {
	display: block;
	inline-size: var(--unec_sol_btn_icon);
	block-size: var(--unec_sol_btn_icon);
	color: inherit;
	transition: transform var(--unec_sol_dur) ease;
}

/* The plus becomes the close cross by rotating the same glyph. */
#top .unec_sol_card.is-open .unec_sol_toggle .unec_sol_icon {
	transform: rotate(45deg);
}

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

/* --------------------------------------------------------------------------
 * Motion
 * ------------------------------------------------------------------------ */

@keyframes unec_sol_reveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#top .unec_sol_card.is-open .unec_sol_panel {
	animation: unec_sol_reveal var(--unec_sol_dur) ease both;
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_sol_card.is-open .unec_sol_panel {
		animation: none;
	}

	#top .unec_sol_toggle,
	#top .unec_sol_toggle .unec_sol_icon {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Ladder — breakpoints move properties and stylesheet tokens only, never a
 * custom property php/render.php writes inline.
 * ------------------------------------------------------------------------ */

@media (max-width: 1400px) {
	#top .unec_sol_sec {
		--unec_sol_pad_scale: 0.9;
		--unec_sol_title_gap: 60px;
	}
}

@media (max-width: 1180px) {
	#top .unec_sol_sec {
		--unec_sol_pad_scale: 0.8;
		--unec_sol_pad_x: 40px;
	}

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

	#top .unec_sol_center_last .unec_sol_card:last-child:nth-child(odd) {
		grid-column: auto;
		inline-size: auto;
		margin-inline: 0;
	}
}

@media (max-width: 1024px) {
	#top .unec_sol_sec {
		--unec_sol_pad_scale: 0.72;
		--unec_sol_face_pt: 72px;
		--unec_sol_face_pb: 48px;
		--unec_sol_panel_pv: 48px;
		--unec_sol_title_gap: 48px;
		--unec_sol_img_scale: 0.86;
	}
}

@media (max-width: 767px) {
	#top .unec_sol_sec {
		--unec_sol_gutter: 40px;
		--unec_sol_pad_scale: 0.6;
		--unec_sol_pad_x: 32px;
		--unec_sol_face_pt: 56px;
		--unec_sol_face_pb: 40px;
		--unec_sol_panel_pv: 40px;
		--unec_sol_title_gap: 40px;
		--unec_sol_stack: 24px;
		--unec_sol_img_scale: 0.74;
		--unec_sol_btn: 56px;
		--unec_sol_btn_inset: 20px;
		--unec_sol_head_clear: 76px;
	}

	/* Below the tablet step the card is content height. A fixed 690 with a
	   narrow measure would put most of the copy behind a scrollbar. */
	#top .unec_sol_card {
		block-size: auto;
		min-block-size: 0;
	}

	#top .unec_sol_body {
		overflow-y: visible;
	}
}

@media (max-width: 479px) {
	#top .unec_sol_sec {
		--unec_sol_gutter: 24px;
		--unec_sol_pad_scale: 0.5;
		--unec_sol_pad_x: 24px;
		--unec_sol_face_pt: 48px;
		--unec_sol_title_gap: 32px;
		--unec_sol_img_scale: 0.64;
		--unec_sol_btn: 48px;
		--unec_sol_btn_inset: 16px;
		--unec_sol_btn_icon: 20px;
		--unec_sol_head_clear: 64px;
	}

	#top .unec_sol_title {
		--u_sol_fs: 24px;
		--u_sol_lh: 30px;
	}

	#top .unec_sol_sub {
		--u_sol_fs: 18px;
		--u_sol_lh: 24px;
	}

	#top .unec_sol_body {
		--u_sol_fs: 16px;
		--u_sol_lh: 24px;
	}
}