/* UNEC Subhero — Enfold drop-in
 * Every selector is scoped under #top (Enfold's body id) so these rules win
 * against Avia without !important. See README.md before editing the numbers:
 * the container maths and the cap-height trim are derived, not chosen.
 */

#top .unec_sub {
	/* Brand + tint. The tint is normally set in the Enfold section's
	 * "Custom Background Color" field (inline style, so it wins over this
	 * fallback). --unec_sub_blend controls how the photo meets it. */
	--unec_sub_tint: #FFC20E;
	/* Client override: tint off, photos show as uploaded. `unset` on a custom
	 * property resolves to the guaranteed-invalid value, which makes
	 * background-blend-mode fall back to `normal` — same result as writing
	 * `normal`, by a longer road. The !important also means Quick CSS can no
	 * longer switch a single page back on without repeating !important. */
	--unec_sub_blend: unset !important;
	--unec_sub_ink: #FFFFFF;
	--unec_sub_muted: 0.64;

	/* Container — 1508 - (2 x 50) = 1408 content, 160px gutter at 1728 */
	--unec_sub_max: 1508px;
	--unec_sub_gutter: 50px;

	/* Vertical rhythm */
	--unec_sub_min: 572px;
	--unec_sub_top: 226px;
	--unec_sub_bottom: 64px;
	--unec_sub_gap: 36px;

	/* Type */
	--unec_sub_font: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--unec_sub_title_fs: 92px;
	--unec_sub_title_lh: 88px;
	--unec_sub_crumb_fs: 20px;
	--unec_sub_crumb_lh: 30px;
	--unec_sub_crumb_gap: 16px;
	--unec_sub_chevron: 20px;

	/* Pretendard metrics: unitsPerEm 2048, asc 1950, desc 494, cap 1448 */
	--unec_sub_asc: 0.952148;
	--unec_sub_desc: 0.241211;
	--unec_sub_cap: 0.707031;

	/* Decorative diagonals */
	--unec_sub_lines: url("data:image/svg+xml,%3Csvg width='1450' height='273' viewBox='0 0 1450 273' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1415.58 0.162659L1484.17 414.368L1692.34 0.162659H1923.27L1541.29 751.87L1310.37 753L1246.3 334.273L1030.22 753H802.68L1182.23 0.162659H1415.58Z' fill='white' fill-opacity='0.02'/%3E%3Cpath d='M1415.16 0.662659L1483.67 414.45L1483.92 415.964L1484.61 414.593L1692.65 0.662659H1922.45L1540.98 751.371L1310.79 752.497L1246.79 334.197L1246.56 332.675L1245.86 334.044L1029.91 752.5H803.492L1182.54 0.662659H1415.16Z' stroke='white' stroke-opacity='0.24'/%3E%3Cpath d='M585.468 0.161487C516.561 142.752 439.747 281.628 369.387 423.41C362.125 438.105 354.057 452.8 347.279 467.657C335.821 493.171 314.681 535.642 354.541 548.237C378.908 555.989 494.13 553.728 525.114 551.629C556.098 549.529 580.304 537.095 600.476 514.972C675.838 379.325 745.068 239.319 815.428 100.766C832.372 67.5002 849.316 34.0731 864.486 0H1095.41L739.904 700.355C720.862 734.428 681.325 749.931 643.886 752.999H42.2802C22.4311 751.707 7.26187 747.993 0 727.807V704.877L354.541 0.161487H585.468Z' fill='white' fill-opacity='0.02'/%3E%3Cpath d='M1094.6 0.5L739.459 700.125C720.534 733.973 681.216 749.433 643.868 752.499H42.2988C32.389 751.853 23.7262 750.605 16.6445 747.042C9.60618 743.501 4.09212 737.652 0.5 727.717V704.994L354.849 0.661133H584.671C550.323 71.7033 514.018 141.828 477.529 211.857C442.062 279.925 406.421 347.906 372.242 416.544L368.939 423.188C361.693 437.853 353.604 452.587 346.824 467.449L346.823 467.452C341.109 480.177 332.915 497.258 331.169 512.735C330.295 520.486 331.03 527.89 334.543 534.165C338.062 540.45 344.332 545.534 354.39 548.713V548.714C360.551 550.674 372.384 551.987 387.087 552.832C401.812 553.678 419.478 554.056 437.345 554.127C473.075 554.268 509.639 553.178 525.147 552.127C556.266 550.019 580.591 537.523 600.846 515.309L600.885 515.266L600.913 515.215C676.281 379.558 745.516 239.538 815.872 100.992L815.873 100.993C832.768 67.8252 849.668 34.484 864.81 0.5H1094.6Z' stroke='white' stroke-opacity='0.24'/%3E%3C/svg%3E");
	--unec_sub_lines_opacity: 1;
	--unec_sub_lines_left: 16.09%;
	--unec_sub_lines_height: 47.73%;
	/* The artwork is used as a MASK, so its own colours are irrelevant — only
	 * the designer's 2% fill / 24% stroke alphas survive, and the ink follows
	 * the text. That is the whole colour variant. */
	--unec_sub_lines_ink: var(--unec_sub_ink);

	/* Legibility scrim, off by default. Raise for busy / light photos. */
	--unec_sub_scrim: 0;

	position: relative;
	min-height: var(--unec_sub_min);
	background-color: var(--unec_sub_tint);
	background-blend-mode: var(--unec_sub_blend);
}

#top .unec_sub::before,
#top .unec_sub::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

/* Scrim */
#top .unec_sub::after {
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, var(--unec_sub_scrim)), rgba(0, 0, 0, 0) 70%);
}

/* Diagonals — Figma group at x278 y299, cropped to the section box */
#top .unec_sub::before {
	left: var(--unec_sub_lines_left);
	right: 0;
	bottom: 0;
	height: var(--unec_sub_lines_height);
	z-index: 1;
	opacity: var(--unec_sub_lines_opacity);
	background-color: var(--unec_sub_lines_ink);
	-webkit-mask-image: var(--unec_sub_lines);
	mask-image: var(--unec_sub_lines);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: right bottom;
	mask-position: right bottom;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* --- Colour variant ---------------------------------------------------
 * Flat brand yellow, dark ink. One property: the diagonals and the focus
 * ring already follow --unec_sub_ink. Add `unec_sub_dark` next to
 * `unec_sub` in the Color Section's custom class field and leave the
 * background image empty.
 */

#top .unec_sub_dark {
	--unec_sub_ink: #231F20;
}

/* --- Enfold chrome removal ------------------------------------------- */

#top .unec_sub .container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--unec_sub_max);
	margin: 0 auto;
	padding-right: var(--unec_sub_gutter);
	padding-left: var(--unec_sub_gutter);
	padding-top: calc(var(--unec_nav_h, 161px) + var(--unec_sub_top));
	padding-bottom: var(--unec_sub_bottom);
}

#top .unec_sub .template-page,
#top .unec_sub .content,
#top .unec_sub .entry-content-wrapper,
#top .unec_sub .flex_column,
#top .unec_sub .post-entry {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#top .unec_sub .flex_column {
	min-height: 0;
}

/* Avia floats the column, the content wrapper and the heading tag. A float
 * takes the heading out of flow, and the breadcrumb list (a flex box, so a
 * new block formatting context) then drops past it instead of honouring its
 * own 36px top margin. Everything in this section is normal flow.
 */
#top .unec_sub .content,
#top .unec_sub .flex_column,
#top .unec_sub .unec_sub_title,
#top .unec_sub .unec_sub_title .av-special-heading-tag,
#top .unec_sub .unec_sub_crumbs {
	float: none;
	clear: none;
}

/* --- Title ------------------------------------------------------------ */

#top .unec_sub .unec_sub_title {
	margin: 0;
	padding: 0;
}

#top .unec_sub .unec_sub_title .av-special-heading-tag {
	--u_sub_fs: var(--unec_sub_title_fs);
	--u_sub_lh: var(--unec_sub_title_lh);
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--unec_sub_ink);
	font-family: var(--unec_sub_font);
	font-size: var(--u_sub_fs);
	font-weight: 600;
	font-style: normal;
	line-height: var(--u_sub_lh);
	letter-spacing: -0.04em;
	text-transform: none;
	overflow-wrap: break-word;
}

#top .unec_sub .unec_sub_title .special-heading-border,
#top .unec_sub .unec_sub_title .av-subheading {
	display: none;
}

/* --- Breadcrumbs ------------------------------------------------------ */

#top .unec_sub .unec_sub_crumbs {
	margin: var(--unec_sub_gap) 0 0;
	padding: 0;
}

#top .unec_sub .unec_sub_crumbs p {
	margin: 0;
	padding: 0;
}

#top .unec_sub .unec_sub_crumbs p:empty {
	display: none;
}

#top .unec_sub .unec_sub_crumbs_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--unec_sub_crumb_gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sub .unec_sub_crumbs_list li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_sub .unec_sub_crumbs_list li::before,
#top .unec_sub .unec_sub_crumbs_list li::after {
	content: none;
}

#top .unec_sub .unec_sub_crumb_label,
#top .unec_sub a.unec_sub_crumb_link {
	--u_sub_fs: var(--unec_sub_crumb_fs);
	--u_sub_lh: var(--unec_sub_crumb_lh);
	display: block;
	color: var(--unec_sub_ink);
	font-family: var(--unec_sub_font);
	font-size: var(--u_sub_fs);
	font-weight: 500;
	line-height: var(--u_sub_lh);
	letter-spacing: -0.01em;
	text-decoration: none;
	border: 0;
}

#top .unec_sub a.unec_sub_crumb_link {
	transition: opacity 0.2s ease;
}

#top .unec_sub a.unec_sub_crumb_link:hover,
#top .unec_sub a.unec_sub_crumb_link:focus-visible {
	color: var(--unec_sub_ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

#top .unec_sub a.unec_sub_crumb_link:focus-visible {
	outline: 3px solid var(--unec_sub_ink);
	outline-offset: 4px;
	text-decoration: none;
}

#top .unec_sub .unec_sub_crumb_current .unec_sub_crumb_label {
	font-weight: 400;
	opacity: var(--unec_sub_muted);
}

#top .unec_sub .unec_sub_crumb_sep {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--unec_sub_chevron);
	height: var(--unec_sub_chevron);
	color: var(--unec_sub_ink);
	opacity: var(--unec_sub_muted);
}

#top .unec_sub .unec_sub_crumb_sep svg {
	display: block;
	width: var(--unec_sub_chevron);
	height: var(--unec_sub_chevron);
}

/* --- Standalone render (unec_subhero(), no page builder) -------------- */

#top .unec_sub_standalone .unec_sub_inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--unec_sub_max);
	margin: 0 auto;
	padding-right: var(--unec_sub_gutter);
	padding-left: var(--unec_sub_gutter);
	padding-top: calc(var(--unec_nav_h, 161px) + var(--unec_sub_top));
	padding-bottom: var(--unec_sub_bottom);
}

#top .unec_sub_standalone .unec_sub_title_el {
	--u_sub_fs: var(--unec_sub_title_fs);
	--u_sub_lh: var(--unec_sub_title_lh);
	display: block;
	margin: 0;
	padding: 0;
	color: var(--unec_sub_ink);
	font-family: var(--unec_sub_font);
	font-size: var(--u_sub_fs);
	font-weight: 600;
	line-height: var(--u_sub_lh);
	letter-spacing: -0.04em;
	text-transform: none;
	overflow-wrap: break-word;
}

#top .unec_sub_standalone .unec_sub_crumbs {
	margin-top: var(--unec_sub_gap);
}

/* --- Breakpoints ------------------------------------------------------ */

@media only screen and (max-width: 1400px) {
	#top .unec_sub {
		--unec_sub_min: 520px;
		--unec_sub_top: 184px;
	}
}

@media only screen and (max-width: 1024px) {
	#top .unec_sub {
		--unec_sub_min: 440px;
		--unec_sub_top: 140px;
		--unec_sub_bottom: 56px;
		--unec_sub_gutter: 40px;
		--unec_sub_gap: 28px;
		--unec_sub_title_fs: 64px;
		--unec_sub_title_lh: 61px;
	}
}

@media only screen and (max-width: 768px) {
	#top .unec_sub {
		--unec_sub_min: 380px;
		--unec_sub_top: 110px;
		--unec_sub_bottom: 48px;
		--unec_sub_gutter: 24px;
		--unec_sub_gap: 24px;
		--unec_sub_title_fs: 48px;
		--unec_sub_title_lh: 46px;
		--unec_sub_crumb_fs: 16px;
		--unec_sub_crumb_lh: 24px;
		--unec_sub_crumb_gap: 12px;
		--unec_sub_chevron: 16px;
	}

	/* Client override: fixed 250px band on mobile with a flat 120px top
	 * padding instead of the measured nav offset.
	 *
	 * Consequences, so nobody rediscovers them: below 768px the section no
	 * longer tracks the real header height, and --unec_sub_min / --unec_sub_top
	 * (here and in the 480 block) are inert — editing them changes nothing.
	 * --unec_sub_bottom, the gap and the type scale still apply.
	 *
	 * `height` rather than `min-height` also fixes the band: a headline that
	 * wraps to a second line has 82px of content box to live in (250 - 120 -
	 * 48) and needs 74px at one line, so a two-line title spills past the
	 * section instead of growing it. Swap both !important rules for
	 *     min-height: 250px;
	 * on the container and drop the section rule if that ever shows up.
	 */
	#top .unec_sub .container {
		padding-top: 120px;
		height: 250px !important;
	}

	#top .unec_sub {
		height: max-content !important;
		min-height: unset !important;
	}
}

@media only screen and (max-width: 480px) {
	#top .unec_sub {
		--unec_sub_min: 320px;
		--unec_sub_top: 88px;
		--unec_sub_bottom: 40px;
		--unec_sub_gap: 20px;
		--unec_sub_title_fs: 36px;
		--unec_sub_title_lh: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_sub a.unec_sub_crumb_link {
		transition: none;
	}
}

/* --- Cap-height trim --------------------------------------------------
 * Last in the file, and the class is doubled, so these block margins beat
 * both Avia's heading rules and the element rules above. Figma trims text
 * boxes to the cap line and the alphabetic baseline — that is why the
 * design reads 65 and 14, not 88 and 30.
 */

#top .unec_sub .unec_sub_trim.unec_sub_trim {
	font-size: var(--u_sub_fs);
	line-height: var(--u_sub_lh);
	margin-block: 0;
}

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

@supports not (text-box: trim-both cap alphabetic) {
	#top .unec_sub .unec_sub_trim.unec_sub_trim {
		margin-block:
			calc(0px - ((var(--u_sub_lh) - (var(--unec_sub_asc) + var(--unec_sub_desc)) * var(--u_sub_fs)) / 2 + (var(--unec_sub_asc) - var(--unec_sub_cap)) * var(--u_sub_fs)))
			calc(0px - ((var(--u_sub_lh) - (var(--unec_sub_asc) + var(--unec_sub_desc)) * var(--u_sub_fs)) / 2 + var(--unec_sub_desc) * var(--u_sub_fs)));
	}
}