/* ==========================================================================
   UNEC Starkgen — Contact / Become a Dealer
   Figma 142:4985 (Become a Dealer), 142:5685 (Contact) — Q5ckGwby9XewAE51OXln5p

   Every selector is scoped under #top (Enfold's body id) so this file wins
   against Avia without !important. Where Enfold styles a bare element the
   selector names the element too, e.g. `#top .unec_gf input[type="text"]`
   (1,2,1) beats `#top input[type="text"]` (1,1,1).

   Read unec-contact/README.md before editing the derived numbers — the field
   paddings, the container maths and the cap-height trim are calculated, not
   chosen.
   ========================================================================== */

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

#top {
	/* Palette */
	--unec_ct_dark: #231f20;
	--unec_ct_yellow: #ffc20e;
	--unec_ct_white: #ffffff;
	--unec_ct_below: #ffffff;              /* page behind the lower half of the band */
	--unec_ct_line: rgba(255, 255, 255, 0.2);
	--unec_ct_field_line: rgba(255, 255, 255, 0.12);
	--unec_ct_muted: rgba(255, 255, 255, 0.64);
	--unec_ct_placeholder: 0.4;
	--unec_ct_error: #ff5a4e;

	/* Container — 1508 max with a 50px inset gives 1408 of content and lands
	   the gutter on Figma's 160 at 1728. Same model as unec-404 / unec-footer. */
	--unec_ct_content: 1408px;
	--unec_ct_inset: 50px;
	--unec_ct_gutter: max(var(--unec_ct_inset), calc((100% - var(--unec_ct_content)) / 2));

	/* Section rhythm */
	--unec_ct_pad_top: 100px;              /* client value, was Figma's 160 */
	--unec_ct_pad_bottom: 100px;
	--unec_ct_head_gap: 96px;              /* tab block -> form block */
	--unec_ct_rule_gap: 32px;              /* tabs -> hairline */
	--unec_ct_body_w: 698px;
	--unec_ct_body_gap: 80px;              /* intro -> form */
	--unec_ct_group_gap: 48px;             /* fields -> consent -> button */
	--unec_ct_row_gap: 32px;               /* between field rows */

	/* Fields */
	--unec_ct_ctl_fs: 20px;                /* every form control, one place */
	--unec_ct_ctl_lh: 30px;
	--unec_ct_fpad: 24px;                  /* outer edge -> cap line */
	--unec_ct_fbw: 1px;
	--unec_ct_fbw_focus: 2px;
	--unec_ct_textarea_h: 158px;

	/* Details band */
	--unec_ct_overlap: 287px;              /* band height that sits on the dark section */
	--unec_ct_panel_w: 704px;
	--unec_ct_panel_pad_y: 120px;
	--unec_ct_panel_pad_r: 120px;
	--unec_ct_panel_pad_l: 160px;
	--unec_ct_panel_gap: 64px;
	--unec_ct_label_gap: 14px;
	--unec_ct_map_h: 574px;

	/* Pretendard metrics — unitsPerEm 2048, ascender 1950, descender 494,
	   sCapHeight 1448. These reproduce Figma's cap-trimmed text boxes
	   (17 -> 12, 20 -> 14, 28 -> 20 / 88). Documented in claude/404-page.md. */
	--unec_ct_lh_ratio: 1.193359;          /* (asc + desc) / upm */
	--unec_ct_over: 0.245117;              /* (asc - cap) / upm  */
	--unec_ct_under: 0.241211;             /* desc / upm         */
}

/* --------------------------------------------------------------------------
   2. Cap-height trim
   Elements set only --u_ct_fs and --u_ct_lh; size, leading and trim follow.
   -------------------------------------------------------------------------- */

#top .unec_ct_trim {
	--u_ct_half: calc((var(--u_ct_lh) - var(--u_ct_fs) * var(--unec_ct_lh_ratio)) / 2);
	--u_ct_top: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_over));
	--u_ct_bot: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_under));

	font-size: var(--u_ct_fs);
	line-height: var(--u_ct_lh);
}

@supports not (text-box: trim-both cap alphabetic) {
	#top .unec_ct_trim {
		margin-block-start: calc(-1 * var(--u_ct_top));
		margin-block-end: calc(-1 * var(--u_ct_bot));
	}
}

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

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

#top .unec_ct {
	background-color: var(--unec_ct_dark);
	color: var(--unec_ct_white);
	padding: var(--unec_ct_pad_top) var(--unec_ct_gutter) var(--unec_ct_pad_bottom);
	font-family: "Pretendard", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
}

#top .unec_ct * {
	/* #top div would otherwise beat inheritance from .unec_ct — same fix as
	   the navigation module. */
	font-family: inherit;
}

/* Enfold puts the section content in .container (1310px) and floats the
   column, the content wrapper and .av-special-heading-tag. Re-point the
   container to the house model and stop the floats — a floated element ahead
   of a flex box silently eats the flex box's top margin. */
#top .unec_ct .container,
#top .unec_ct_band_section .container {
	max-width: none !important;
	width: 100% !important;
	padding: 0;
	margin: 0;
}

/* The details band has to reach the right edge of the page, but it renders
   *inside* Enfold's .container — several wrappers deep — so the class on the
   Color Section is not enough on its own. :has() walks back up from our own
   element and unwinds every Avia wrapper between it and the section, whatever
   the client called them. The explicit .unec_ct_band_section rules above and
   below are the fallback for browsers without :has(). */
#top .container:has(.unec_ct_band_wrap) {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

#top .unec_ct_band_section .container,
#top .unec_ct_band_section .content,
#top .unec_ct_band_section .template-page,
#top .unec_ct_band_section .entry-content-wrapper,
#top .unec_ct_band_section .flex_column,
#top .unec_ct_band_section .av_textblock_section,
#top .unec_ct_band_section .avia_textblock,
#top .content:has(.unec_ct_band_wrap),
#top .template-page:has(.unec_ct_band_wrap),
#top .post-entry:has(.unec_ct_band_wrap),
#top .entry-content-wrapper:has(.unec_ct_band_wrap),
#top .flex_column:has(.unec_ct_band_wrap),
#top .av_textblock_section:has(.unec_ct_band_wrap),
#top .avia_textblock:has(.unec_ct_band_wrap),
#top p:has(> .unec_ct_band_wrap) {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

#top .unec_ct .content,
#top .unec_ct .flex_column,
#top .unec_ct_band_wrap .content,
#top .unec_ct_band_wrap .flex_column {
	float: none;
	margin: 0;
	padding: 0;
}

/* Width is deliberately not reset above: .unec_ct_body may itself be the
   Enfold column, and it has to keep its 698px. */
#top .unec_ct .content,
#top .unec_ct_band_wrap .content {
	width: 100%;
}

/* Avia floats the Text Block section and the Gravity Forms element too. A
   column whose only children are floats collapses to zero height, which is
   exactly how the 96px under the hairline disappeared in the first build —
   the same trap claude/subhero.md documents for the headline. */
#top .unec_ct .av_textblock_section,
#top .unec_ct .avia_gravity_form,
#top .unec_ct .unec_ct_head_col,
#top .unec_ct_band_wrap .av_textblock_section {
	float: none;
	width: 100%;
}

/* Enfold gives every Text Block a 20px bottom margin. The intro is exempt —
   its bottom margin is the cap trim. */
#top .unec_ct .av_textblock_section:not(.unec_ct_intro),
#top .unec_ct .av_textblock_section:not(.unec_ct_intro) .avia_textblock {
	margin-bottom: 0;
}

/* .unec_ct_inner is optional — it exists so a 1/1 Enfold column can carry a
   class without adding layout of its own. The head/body rhythm is margin
   based, not gap based, because in the builder those two are separate
   elements wrapped in Avia markup. */
#top .unec_ct_inner {
	display: block;
	width: 100%;
}

/* Children of the body are spaced by the flex gap, so Avia's own wrapper
   margins have to go — except the intro, whose block margins are the trim. */
#top .unec_ct_body > *,
#top .unec_ct .unec_ct_body > * {
	float: none;
	width: 100%;
	max-width: 100%;
}

#top .unec_ct_body > *:not(.unec_ct_intro),
#top .unec_ct .unec_ct_body > *:not(.unec_ct_intro) {
	margin: 0;
}

/* The form sits in a Text Block (see shortcodes.txt). wpautop can leave an
   empty <p> beside the shortcode's output, which would otherwise donate its
   20px bottom margin to the layout. */
#top .unec_ct_body .avia_textblock > p:empty {
	display: none;
	margin: 0;
}

#top .unec_ct_body .avia_textblock > .unec_gf {
	margin: 0;
}

/* --------------------------------------------------------------------------
   4. Tab switcher + hairline
   -------------------------------------------------------------------------- */

#top .unec_ct_head {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ct_rule_gap);
	align-self: stretch;
	width: 100%;
}

#top .unec_ct_tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

#top .unec_ct_tabs li::before,
#top .unec_ct_tabs li::marker {
	content: none;
}

/* The plate is 52px: 20 + the 12px cap-trimmed label + 20. The trim therefore
   has to sit on an inner span — putting it on the padded box would shrink the
   plate instead of the text. */
#top .unec_ct_tab,
#top a.unec_ct_tab {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 32px;
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--unec_ct_white);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-radius: 0;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#top a.unec_ct_tab:hover,
#top a.unec_ct_tab:focus-visible {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--unec_ct_white);
	text-decoration: none;
}

#top .unec_ct_tab_active,
#top a.unec_ct_tab_active,
#top a.unec_ct_tab_active:hover,
#top a.unec_ct_tab_active:focus-visible {
	background-color: var(--unec_ct_yellow);
	color: var(--unec_ct_dark);
}

#top .unec_ct_tab_label {
	--u_ct_fs: 17px;
	--u_ct_lh: 26px;

	display: block;
	font-weight: 500;
}

#top .unec_ct_rule {
	height: 1px;
	width: 100%;
	background-color: var(--unec_ct_line);
}

/* --------------------------------------------------------------------------
   5. Form column
   -------------------------------------------------------------------------- */

/* display:flex both spaces the children and opens a block formatting context,
   so the intro's negative trim margin cannot collapse out through the top. */
#top .unec_ct_body,
#top .unec_ct .unec_ct_body {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ct_body_gap);
	width: var(--unec_ct_body_w);
	max-width: 100%;
	margin: var(--unec_ct_head_gap) auto 0;
	padding: 0;
	float: none;
}

/* The intro is an Enfold Text Block, so the trim goes on the wrapper as plain
   negative margins — its inner <p> keeps a normal 34px line box. That makes
   the wrapper's margin box equal Figma's trimmed text box, which is what the
   80px gap below is measured from. */
#top .unec_ct_intro {
	--u_ct_fs: 28px;
	--u_ct_lh: 34px;
	--u_ct_half: calc((var(--u_ct_lh) - var(--u_ct_fs) * var(--unec_ct_lh_ratio)) / 2);
	--u_ct_top: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_over));
	--u_ct_bot: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_under));

	margin-block: calc(-1 * var(--u_ct_top)) calc(-1 * var(--u_ct_bot));
}

#top .unec_ct_intro,
#top .unec_ct_intro .avia_textblock,
#top .unec_ct_intro p {
	color: var(--unec_ct_white);
	font-size: var(--u_ct_fs);
	font-weight: 500;
	line-height: var(--u_ct_lh);
	letter-spacing: -0.02em;
}

#top .unec_ct_intro .avia_textblock,
#top .unec_ct_intro p {
	margin: 0;
	padding: 0;
}

#top .unec_ct_intro p + p {
	margin-top: var(--u_ct_lh);
}

/* --------------------------------------------------------------------------
   6. Gravity Forms skin
   Markup: .unec_gf > .gform_wrapper > form > .gform-body > .gform_fields
   -------------------------------------------------------------------------- */

#top .unec_gf .gform_wrapper,
#top .unec_gf .gform_wrapper.gravity-theme {
	margin: 0;
	padding: 0;
	max-width: none;
}

#top .unec_gf form {
	margin: 0;
}

#top .unec_gf .gform-body,
#top .unec_gf .gform_body {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* 12 columns with a 32px gap over 698 gives a half at exactly 333px:
   ((698 - 11 * 32) / 12) * 6 + 5 * 32 = 333. */
#top .unec_gf .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--unec_ct_row_gap);
	row-gap: var(--unec_ct_row_gap);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#top .unec_gf .gfield {
	grid-column: span 12;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .unec_gf .gfield::before,
#top .unec_gf .gfield::marker {
	content: none;
}

#top .unec_gf .gfield--width-half {
	grid-column: span 6;
}

#top .unec_gf .gfield--width-third {
	grid-column: span 4;
}

#top .unec_gf .gfield--width-two-thirds {
	grid-column: span 8;
}

#top .unec_gf .gfield--width-quarter {
	grid-column: span 3;
}

#top .unec_gf .gfield--width-three-quarter {
	grid-column: span 9;
}

/* The design is placeholder-only. Keep the labels in the DOM for screen
   readers instead of removing them — this also overrides Gravity's own
   display:none when "Field Label Visibility" is set to Hidden. */
#top .unec_gf .gfield_label,
#top .unec_gf .gfield_label.gform-field-label,
#top .unec_gf .gfield_consent_label + label,
#top .unec_gf .ginput_complex label,
#top .unec_gf .gform_fileupload_rules,
#top .unec_gf .screen-reader-text {
	position: absolute;
	display: block;
	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;
}

#top .unec_gf .gform_required_legend {
	display: none;
}

/* .gfield_description is NOT hidden: Gravity's validation message carries that
   class too (class="gfield_description validation_message
   gfield_validation_message"), so hiding it hides every error message. Client
   caught this. A real field description is styled instead of hidden, so one
   added later still looks intentional. */
#top .unec_gf .gfield_description:not(.validation_message):not(.gfield_validation_message) {
	margin: 8px 0 0;
	padding: 0;
	color: var(--unec_ct_muted);
	font-size: 17px;
	line-height: 26px;
}

#top .unec_gf .ginput_container {
	margin: 0;
}

/* --- the control itself -------------------------------------------------- */

#top .unec_gf input[type="text"],
#top .unec_gf input[type="email"],
#top .unec_gf input[type="tel"],
#top .unec_gf input[type="url"],
#top .unec_gf input[type="number"],
#top .unec_gf input[type="password"],
#top .unec_gf input[type="date"],
#top .unec_gf input[type="time"],
#top .unec_gf select,
#top .unec_gf textarea {
	--u_ct_fs: var(--unec_ct_ctl_fs);
	--u_ct_lh: var(--unec_ct_ctl_lh);
	--u_ct_half: calc((var(--u_ct_lh) - var(--u_ct_fs) * var(--unec_ct_lh_ratio)) / 2);
	--u_ct_top: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_over));
	--u_ct_bot: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_under));

	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	background-color: var(--unec_ct_dark);
	background-image: none;
	border: var(--unec_ct_fbw) solid var(--unec_ct_field_line);
	border-radius: 0;
	box-shadow: none;
	color: var(--unec_ct_white);
	font-family: inherit;
	font-size: var(--u_ct_fs);
	font-weight: 400;
	line-height: var(--u_ct_lh);
	letter-spacing: -0.01em;

	/* 24px from the outer edge to the cap line, both ends. The border is part
	   of that 24, so it comes out of the padding — which is why the box is
	   still 62px tall when focus thickens the border to 2px. */
	padding-block: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) - var(--u_ct_top))
		calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) - var(--u_ct_bot));
	padding-inline: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw));
	transition: border-color 0.2s ease;
}

#top .unec_gf input::placeholder,
#top .unec_gf textarea::placeholder {
	color: var(--unec_ct_white);
	opacity: var(--unec_ct_placeholder);
}

#top .unec_gf input[type="text"]:focus,
#top .unec_gf input[type="email"]:focus,
#top .unec_gf input[type="tel"]:focus,
#top .unec_gf input[type="url"]:focus,
#top .unec_gf input[type="number"]:focus,
#top .unec_gf input[type="password"]:focus,
#top .unec_gf input[type="date"]:focus,
#top .unec_gf input[type="time"]:focus,
#top .unec_gf select:focus,
#top .unec_gf textarea:focus {
	--unec_ct_fbw: var(--unec_ct_fbw_focus);
	border-color: var(--unec_ct_yellow);
	color: var(--unec_ct_white);
	outline: none;
}

/* Autofill would otherwise repaint the field white. */
#top .unec_gf input:-webkit-autofill,
#top .unec_gf input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--unec_ct_white);
	box-shadow: inset 0 0 0 1000px var(--unec_ct_dark);
}

#top .unec_gf textarea {
	height: var(--unec_ct_textarea_h);
	min-height: var(--unec_ct_textarea_h);
	resize: vertical;
	overflow: auto;
}

/* --- select and the date / time fields ----------------------------------- */

/* The icon URLs are custom properties emitted by PHP (unec_ct_icon_vars) —
   a <select> can only take a background image, and a data: URI cannot read a
   variable, so the colour is baked in at generation time and the whole URL is
   handed over as one property. Filter: unec_ct_control_icon_colors. */
#top .unec_gf select {
	appearance: none;
	-webkit-appearance: none;
	background-repeat: no-repeat;
	background-position: right var(--unec_ct_fpad) center;
	background-size: 20px 20px;
	background-image: var(--unec_ct_select_icon);
	padding-right: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) + 32px);
	text-overflow: ellipsis;
}

#top .unec_gf select option {
	background-color: var(--unec_ct_dark);
	color: var(--unec_ct_white);
}

#top .unec_gf .ginput_container_date input[type="text"],
#top .unec_gf input[type="date"],
#top .unec_gf .unec_ct_date input[type="text"] {
	background-repeat: no-repeat;
	background-position: right var(--unec_ct_fpad) center;
	background-size: 20px 20px;
	background-image: var(--unec_ct_date_icon);
	padding-right: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) + 32px);
}

#top .unec_gf .unec_ct_time input[type="text"],
#top .unec_gf .unec_ct_time select,
#top .unec_gf input[type="time"] {
	background-repeat: no-repeat;
	background-position: right var(--unec_ct_fpad) center;
	background-size: 20px 20px;
	background-image: var(--unec_ct_time_icon);
	padding-right: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) + 32px);
}

#top .unec_gf input[type="date"]::-webkit-calendar-picker-indicator,
#top .unec_gf input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	cursor: pointer;
}

/* --- Gravity's real Time field ------------------------------------------
   It renders a <fieldset> containing two number inputs and a literal colon,
   not one control:

     fieldset.gfield--type-time
       legend.gfield_label
       div.ginput_complex.gform-grid-row
         div.gfield_time_hour   > input[type=number] + sub-label
         div.hour_minute_colon  > ":"
         div.gfield_time_minute > input[type=number] + sub-label

   So the *wrapper* becomes the 62px box and the inputs are stripped bare.
   The clock sits on the wrapper's ::after, at the same 24px inset as every
   other control icon, which is what tells the user the field takes a time. */

#top .unec_gf .gfield--type-time {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

#top .unec_gf .gfield--type-time .ginput_complex,
#top .unec_gf .gfield--type-time .ginput_container_time.gform-grid-row {
	--u_ct_fs: var(--unec_ct_ctl_fs);
	--u_ct_lh: var(--unec_ct_ctl_lh);
	--u_ct_half: calc((var(--u_ct_lh) - var(--u_ct_fs) * var(--unec_ct_lh_ratio)) / 2);
	--u_ct_top: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_over));
	--u_ct_bot: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_under));

	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0;
	background-color: var(--unec_ct_dark);
	border: var(--unec_ct_fbw) solid var(--unec_ct_field_line);
	border-radius: 0;
	padding-block: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) - var(--u_ct_top))
		calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) - var(--u_ct_bot));
	padding-inline: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw))
		calc(var(--unec_ct_fpad) - var(--unec_ct_fbw) + 32px);
	transition: border-color 0.2s ease;
}

#top .unec_gf .gfield--type-time .ginput_complex::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--unec_ct_fpad) - var(--unec_ct_fbw));
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	background-image: var(--unec_ct_time_icon);
	pointer-events: none;
}

#top .unec_gf .gfield--type-time .ginput_complex:focus-within {
	--unec_ct_fbw: var(--unec_ct_fbw_focus);

	border-color: var(--unec_ct_yellow);
}

#top .unec_gf .gfield--type-time .gform-grid-col,
#top .unec_gf .gfield--type-time .gfield_time_hour,
#top .unec_gf .gfield--type-time .gfield_time_minute {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The wrapper is the box now, so the inputs keep only their type. */
#top .unec_gf .gfield--type-time input[type="number"],
#top .unec_gf .gfield--type-time input[type="text"] {
	box-sizing: border-box;
	/* 1.9em holds the widest placeholder ("MM", 34.1px at 20px Pretendard)
	   without reflowing when a two-digit value replaces it. */
	width: 1.9em;
	height: var(--unec_ct_ctl_lh);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--unec_ct_white);
	font-family: inherit;
	font-size: var(--unec_ct_ctl_fs);
	font-weight: 400;
	line-height: var(--unec_ct_ctl_lh);
	letter-spacing: -0.01em;
	text-align: left;
	appearance: textfield;
	-moz-appearance: textfield;
}

#top .unec_gf .gfield--type-time input[type="number"]:focus {
	border: 0;
	font-weight: 400;
	outline: none;
}

#top .unec_gf .gfield--type-time input[type="number"]::-webkit-outer-spin-button,
#top .unec_gf .gfield--type-time input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* Each input is sized to its own widest placeholder — "HH" is 28.24px and
   "MM" 34.1px at 20px Pretendard — so the colon sits evenly between them and
   nothing reflows when a two-digit value replaces the placeholder. */
#top .unec_gf .gfield--type-time .gfield_time_hour input {
	width: 1.55em;
}

#top .unec_gf .gfield--type-time .gfield_time_minute input {
	width: 1.9em;
}

#top .unec_gf .gfield--type-time .hour_minute_colon {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--unec_ct_white);
	font-size: var(--unec_ct_ctl_fs);
	line-height: var(--unec_ct_ctl_lh);
	opacity: var(--unec_ct_placeholder);
}

#top .unec_gf .gfield--type-time.gfield_error .ginput_complex {
	border-color: var(--unec_ct_error);
}

/* A time field left at half width alongside the date field keeps the design's
   two-up row; on its own it still fills the 698. */
#top .unec_gf .gfield--type-time .ginput_complex > .gform-grid-col:last-of-type {
	margin-right: auto;
}

/* --- consent row --------------------------------------------------------- */

#top .unec_gf .gfield--type-consent {
	/* rows sit 32 apart; the design wants 48 above the consent row */
	margin-top: calc(var(--unec_ct_group_gap) - var(--unec_ct_row_gap));
}

#top .unec_gf .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 12px;
}

#top .unec_gf input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

#top .unec_gf input[type="checkbox"]:hover {
	border-color: var(--unec_ct_yellow);
}

#top .unec_gf input[type="checkbox"]:checked {
	background-color: var(--unec_ct_yellow);
	border-color: var(--unec_ct_yellow);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23231F20%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
}

#top .unec_gf input[type="checkbox"]:focus-visible {
	outline: 3px solid var(--unec_ct_yellow);
	outline-offset: 2px;
}

/* Gravity renders this label itself, so it cannot carry .unec_ct_trim — the
   same trim is written out longhand. Without it the row is 26px tall and the
   button below lands 4px low. */
#top .unec_gf .gfield_consent_label,
#top .unec_gf .gfield--type-consent .gfield_label + .ginput_container label,
#top .unec_gf .gfield_consent_label * {
	--u_ct_fs: 17px;
	--u_ct_lh: 26px;
	--u_ct_half: calc((var(--u_ct_lh) - var(--u_ct_fs) * var(--unec_ct_lh_ratio)) / 2);
	--u_ct_top: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_over));
	--u_ct_bot: calc(var(--u_ct_half) + var(--u_ct_fs) * var(--unec_ct_under));

	position: static;
	width: auto;
	height: auto;
	margin-block: calc(-1 * var(--u_ct_top)) calc(-1 * var(--u_ct_bot));
	margin-inline: 0;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	color: var(--unec_ct_muted);
	font-size: var(--u_ct_fs);
	font-weight: 400;
	line-height: var(--u_ct_lh);
	cursor: pointer;
}

#top .unec_gf .gfield_consent_label a {
	color: var(--unec_ct_white);
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}

#top .unec_gf .gfield_consent_label a:hover,
#top .unec_gf .gfield_consent_label a:focus-visible {
	color: var(--unec_ct_yellow);
}

/* --- submit -------------------------------------------------------------- */

#top .unec_gf .gform_footer {
	display: flex;
	margin: var(--unec_ct_group_gap) 0 0;
	padding: 0;
	clear: none;
}

/* Colours come through custom properties, not straight declarations. The base
   selector has to be specific enough to beat Gravity's own footer button rules
   (1,3,1), which would then outrank any :hover selector written for the plain
   class — so hover re-points the properties instead of restating the
   properties themselves. Specificity cannot break a custom property the base
   rule never sets. */
#top .unec_ct_btn,
#top button.unec_ct_btn,
#top .unec_gf .gform_footer button.unec_ct_btn {
	display: inline-flex;
	align-items: center;
	gap: 64px;
	box-sizing: border-box;
	margin: 0;
	padding: 20px 32px;
	background-color: var(--unec_ct_btn_bg, var(--unec_ct_yellow));
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--unec_ct_btn_ink, var(--unec_ct_dark));
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* The pill is the client's own 24px export: a 4x8 arrow on a 24 grid at
   stroke 1.4. The arrow is painted from --unec_ct_pill_ink rather than
   currentColor — on the live site something in the Gravity/Avia stack was
   winning `color` on this span and the stroke came out invisible. A custom
   property inherits down regardless of what happens to `color`. */
#top .unec_ct_btn_pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	background-color: var(--unec_ct_pill_bg, var(--unec_ct_dark));
	border-radius: 999px;
	color: var(--unec_ct_pill_ink, var(--unec_ct_yellow));
	transition: background-color 0.2s ease;
}

#top .unec_ct_btn_pill svg,
#top .unec_gf .unec_ct_btn_pill svg {
	display: block;
	width: 24px;
	height: 24px;
	overflow: visible;
}

#top .unec_ct_btn_pill svg path,
#top .unec_gf .unec_ct_btn_pill svg path {
	fill: none;
	stroke: var(--unec_ct_pill_ink, var(--unec_ct_yellow));
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.2s ease;
}

/* Gravity's theme-framework reset sets `d: none` on descendants, which nulls
   the geometry of an inline SVG — the arrow keeps its stroke and its 24px box
   and draws nothing at all. The gform-theme__no-reset--* classes on the button
   are Gravity's supported opt-out and are the real fix; this restates the
   geometry as a second line of defence, in case those class names change.
   It is scoped to .unec_ct_icon_pill so swapping the glyph through the
   unec_ct_submit_button filter is not overridden. */
#top .unec_ct_btn_pill svg.unec_ct_icon_pill path {
	d: path("M10.6641 16L14.6641 12L10.6641 8");
}

#top .unec_ct_btn_label {
	--u_ct_fs: 17px;
	--u_ct_lh: 26px;

	font-weight: 500;
	white-space: nowrap;
}

#top .unec_ct_btn:hover,
#top .unec_ct_btn:focus-visible {
	--unec_ct_btn_bg: var(--unec_ct_dark);
	--unec_ct_btn_ink: var(--unec_ct_yellow);
	--unec_ct_pill_bg: var(--unec_ct_yellow);
	--unec_ct_pill_ink: var(--unec_ct_dark);
}

#top .unec_ct_btn:focus-visible,
#top button.unec_ct_btn:focus-visible {
	outline: 3px solid var(--unec_ct_yellow);
	outline-offset: 3px;
}

/* --- validation / confirmation ------------------------------------------- */

#top .unec_gf .gfield_error input[type="text"],
#top .unec_gf .gfield_error input[type="email"],
#top .unec_gf .gfield_error input[type="tel"],
#top .unec_gf .gfield_error select,
#top .unec_gf .gfield_error textarea {
	border-color: var(--unec_ct_error);
}

#top .unec_gf .gfield_validation_message,
#top .unec_gf .validation_message {
	--u_ct_fs: 17px;
	--u_ct_lh: 26px;

	margin: 8px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--unec_ct_error);
	font-size: var(--u_ct_fs);
	line-height: var(--u_ct_lh);
}

#top .unec_gf .gform_validation_errors,
#top .unec_gf .gform_submission_error {
	margin: 0 0 var(--unec_ct_row_gap);
	padding: 20px 24px;
	background-color: rgba(255, 90, 78, 0.12);
	border: 1px solid var(--unec_ct_error);
	border-radius: 0;
	box-shadow: none;
	color: var(--unec_ct_white);
	font-size: 17px;
	line-height: 26px;
}

#top .unec_gf .gform_confirmation_message,
#top .unec_ct_body .gform_confirmation_message {
	margin: 0;
	padding: 32px;
	background-color: rgba(255, 194, 14, 0.12);
	border-left: 2px solid var(--unec_ct_yellow);
	color: var(--unec_ct_white);
	font-size: 20px;
	line-height: 30px;
}

/* --------------------------------------------------------------------------
   7. Details band (yellow panel + map)
   The band overlaps the dark section above it by --unec_ct_overlap; the wrap
   paints that overlap itself, so no negative margins are involved.
   -------------------------------------------------------------------------- */

#top .unec_ct_band_wrap {
	padding-left: var(--unec_ct_gutter);
	background-image: linear-gradient(
		to bottom,
		var(--unec_ct_dark) 0,
		var(--unec_ct_dark) var(--unec_ct_overlap),
		var(--unec_ct_below) var(--unec_ct_overlap),
		var(--unec_ct_below) 100%
	);
	font-family: "Pretendard", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
}

#top .unec_ct_band_wrap * {
	font-family: inherit;
}

#top .unec_ct_band {
	display: flex;
	align-items: stretch;
	width: 100%;
}

#top .unec_ct_details {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--unec_ct_panel_gap);
	flex: 0 0 var(--unec_ct_panel_w);
	width: var(--unec_ct_panel_w);
	padding: var(--unec_ct_panel_pad_y) var(--unec_ct_panel_pad_r) var(--unec_ct_panel_pad_y) var(--unec_ct_panel_pad_l);
	background-color: var(--unec_ct_yellow);
	color: var(--unec_ct_dark);
}

#top .unec_ct_group {
	display: flex;
	flex-direction: column;
	gap: var(--unec_ct_label_gap);
}

#top .unec_ct_group_label {
	--u_ct_fs: 17px;
	--u_ct_lh: 26px;

	margin: 0;
	font-weight: 400;
	opacity: 0.64;
}

#top .unec_ct_group_value,
#top .unec_ct_group_value a {
	--u_ct_fs: 28px;
	--u_ct_lh: 34px;

	margin: 0;
	color: var(--unec_ct_dark);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	word-break: break-word;
}

#top .unec_ct_group_value a:hover,
#top .unec_ct_group_value a:focus-visible {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* --- map ----------------------------------------------------------------- */

#top .unec_ct_map {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--unec_ct_map_h);
	background-color: #e9e9e9;
	overflow: hidden;
}

#top .unec_ct_map_canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

#top .unec_ct_map_canvas .leaflet-tile-pane {
	filter: var(--unec_ct_map_filter, grayscale(1) contrast(1.04));
}

#top .unec_ct_map_canvas .leaflet-control-zoom,
#top .unec_ct_map_canvas .leaflet-control-attribution {
	display: none;
}

#top .unec_ct_map_static {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--unec_ct_map_filter, grayscale(1) contrast(1.04));
}

#top .unec_ct_map_marker svg {
	display: block;
	width: 64px;
	height: 80px;
}

#top .unec_ct_map_zoom {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 500;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#top .unec_ct_map_btn,
#top button.unec_ct_map_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 8px;
	background-color: var(--unec_ct_dark);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--unec_ct_white);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

#top .unec_ct_map_btn svg {
	display: block;
	width: 24px;
	height: 24px;
}

#top .unec_ct_map_btn_out,
#top button.unec_ct_map_btn_out {
	background-color: var(--unec_ct_white);
	color: var(--unec_ct_dark);
}

#top .unec_ct_map_btn:hover,
#top button.unec_ct_map_btn:hover,
#top .unec_ct_map_btn:focus-visible,
#top button.unec_ct_map_btn:focus-visible {
	background-color: var(--unec_ct_yellow);
	color: var(--unec_ct_dark);
}

#top .unec_ct_map_btn:focus-visible,
#top button.unec_ct_map_btn:focus-visible {
	outline: 3px solid var(--unec_ct_yellow);
	outline-offset: 2px;
}

/* Sits where Figma's Google "Map / Satellite" chip sits. OpenStreetMap's
   licence requires the credit, so the slot is used rather than removed. */
#top .unec_ct_map_credit {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 500;
	padding: 6px 10px;
	background-color: rgba(255, 255, 255, 0.88);
	color: #3a3a3a;
	font-size: 11px;
	line-height: 18px;
}

#top .unec_ct_map_credit a {
	color: #3a3a3a;
	text-decoration: underline;
}

#top .unec_ct_map_link {
	position: absolute;
	inset: 0;
	z-index: 400;
}

/* --------------------------------------------------------------------------
   8. Breakpoints — these change custom properties, not rules.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1400px) {
	#top {
		--unec_ct_pad_top: 96px;
		--unec_ct_pad_bottom: 96px;
		--unec_ct_head_gap: 72px;
		--unec_ct_body_gap: 64px;
		--unec_ct_panel_pad_l: 96px;
		--unec_ct_panel_pad_r: 80px;
		--unec_ct_panel_pad_y: 96px;
		--unec_ct_panel_w: 604px;
		--unec_ct_overlap: 220px;
	}
}

@media only screen and (max-width: 1180px) {
	#top {
		--unec_ct_panel_w: 480px;
		--unec_ct_panel_pad_l: 64px;
		--unec_ct_panel_pad_r: 48px;
		--unec_ct_panel_gap: 48px;
	}

	#top .unec_ct_group_value,
	#top .unec_ct_group_value a {
		--u_ct_fs: 24px;
		--u_ct_lh: 30px;
	}
}

@media only screen and (max-width: 1024px) {
	#top {
		--unec_ct_inset: 40px;
		--unec_ct_pad_top: 80px;
		--unec_ct_pad_bottom: 80px;
		--unec_ct_head_gap: 56px;
		--unec_ct_body_gap: 48px;
		--unec_ct_overlap: 160px;
		--unec_ct_map_h: 460px;
		--unec_ct_panel_pad_y: 72px;
	}

	/* The band stacks: the yellow panel keeps the page inset, the map goes
	   full-bleed to the right edge under it. */
	#top .unec_ct_band {
		flex-direction: column;
	}

	#top .unec_ct_details {
		flex: 0 0 auto;
		width: 100%;
		padding-left: var(--unec_ct_panel_pad_l);
	}

	#top .unec_ct_map {
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	#top {
		--unec_ct_inset: 24px;
		--unec_ct_pad_top: 72px;
		--unec_ct_pad_bottom: 72px;
		--unec_ct_head_gap: 40px;
		--unec_ct_rule_gap: 24px;
		--unec_ct_body_gap: 40px;
		--unec_ct_group_gap: 32px;
		--unec_ct_row_gap: 20px;
		--unec_ct_ctl_fs: 17px;
		--unec_ct_ctl_lh: 26px;
		--unec_ct_fpad: 20px;
		--unec_ct_textarea_h: 148px;
		--unec_ct_overlap: 96px;
		--unec_ct_map_h: 380px;
		--unec_ct_panel_pad_l: 40px;
		--unec_ct_panel_pad_r: 40px;
		--unec_ct_panel_pad_y: 56px;
		--unec_ct_panel_gap: 40px;
	}

	#top .unec_ct_intro,
	#top .unec_ct_intro p {
		--u_ct_fs: 22px;
		--u_ct_lh: 30px;
	}

	#top .unec_gf .gfield--width-half,
	#top .unec_gf .gfield--width-third,
	#top .unec_gf .gfield--width-two-thirds,
	#top .unec_gf .gfield--width-quarter,
	#top .unec_gf .gfield--width-three-quarter {
		grid-column: span 12;
	}

	#top .unec_ct_btn, #top button.unec_ct_btn {
        gap: 26px !important;
        width: max-content;
        justify-content: flex-start;
    }
	
	#top .unec_gf .gfield--type-time .gfield_time_hour input {
		width: 2.55em !important;
	}
	
	#top .unec_gf .gfield_validation_message, #top .unec_gf .validation_message, #top .unec_gf .gfield_consent_label, #top .unec_gf .gfield--type-consent .gfield_label + .ginput_container label, #top .unec_gf .gfield_consent_label * {
		--u_ct_fs: 14px !important;
		--u_ct_lh: 20px !important;
	}
	
	#top .unec_gf .gfield--type-time .gform-grid-col, #top .unec_gf .gfield--type-time .gfield_time_hour, #top .unec_gf .gfield--type-time .gfield_time_minute {
		width: 44px;
	}
}

@media only screen and (max-width: 480px) {
	#top {
		--unec_ct_pad_top: 56px;
		--unec_ct_pad_bottom: 56px;
		--unec_ct_panel_pad_l: 24px;
		--unec_ct_panel_pad_r: 24px;
		--unec_ct_panel_pad_y: 48px;
		--unec_ct_map_h: 320px;
		--unec_ct_overlap: 64px;
	}

	#top .unec_ct_tab,
	#top a.unec_ct_tab {
		padding: 14px 20px;
	}

	#top .unec_ct_btn,
	#top button.unec_ct_btn {
		padding: 12px 18px !important;
		gap: 20px;
	}

	#top .unec_ct_group_value, #top .unec_ct_group_value a {
        --u_ct_fs: 18px;
        --u_ct_lh: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
	#top .unec_ct_tab,
	#top .unec_ct_btn,
	#top .unec_ct_btn_pill,
	#top .unec_ct_map_btn,
	#top .unec_gf input,
	#top .unec_gf select,
	#top .unec_gf textarea {
		transition: none;
	}
}