/* =============================================================
   YL Carpentry & Custom Designs
   Design tokens mirror the Figma file (page "00 Brand").
   Mobile-first. Breakpoints: 640, 900, 1100.
   ============================================================= */

:root {
	/* Color */
	--yl-ink-900: #0b0b0c;
	--yl-ink-800: #141416;
	--yl-ink-700: #1c1c1f;
	--yl-ink-600: #2a2a2e;
	--yl-gold-400: #d8b489;
	--yl-gold-500: #bf925e;
	--yl-gold-600: #8c6a42;
	--yl-steel-300: #c9cdd3;
	--yl-steel-500: #8a9099;
	--yl-paper: #f6f5f2;
	--yl-wood: #8a5a2b;
	--yl-white: #fff;

	/* Type */
	--yl-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--yl-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Elevation — steel halo, reads as a lift on the dark ground */
	--yl-shadow-card: 0 6px 18px 3px rgba(138, 144, 153, 0.15);
	--yl-shadow-card-hover: 0 10px 26px 3px rgba(138, 144, 153, 0.25);

	/* Space */
	--yl-wrap: 1200px;
	--yl-gutter: 20px;
	--yl-section-y: 56px;
	--yl-radius: 4px;
}

@media (min-width: 900px) {
	:root {
		--yl-gutter: 48px;
		--yl-section-y: 96px;
	}
}

@media (min-width: 1300px) {
	:root {
		--yl-gutter: 120px;
	}
}

/* ---------- Reset-ish ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--yl-ink-900);
	color: var(--yl-steel-300);
	font-family: var(--yl-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--yl-gold-400); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

:focus-visible {
	outline: 2px solid var(--yl-gold-400);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.yl-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--yl-gold-400);
	color: var(--yl-ink-900);
	padding: 12px 20px;
	font-weight: 600;
}
.yl-skip:focus { left: 0; }

/* ---------- Layout ---------- */

.yl-wrap {
	width: 100%;
	max-width: calc(var(--yl-wrap) + (var(--yl-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--yl-gutter);
}

.yl-section { padding-block: var(--yl-section-y); }
.yl-section--dark { background: var(--yl-ink-900); }
.yl-section--mid { background: var(--yl-ink-800); }

.yl-section__head { margin-bottom: 36px; }
.yl-section__head--row {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}
.yl-section__intro {
	max-width: 62ch;
	color: var(--yl-steel-500);
	font-size: 1.0625rem;
}

@media (min-width: 900px) {
	.yl-section__head { margin-bottom: 44px; }
	.yl-section__head--row {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.yl-section__intro { font-size: 1.125rem; }
}

.yl-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.yl-grid--3, .yl-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.yl-grid { gap: 24px; }
	.yl-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.yl-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

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

.yl-h1, .yl-h2, .yl-h3, .yl-h4 {
	font-family: var(--yl-display);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--yl-white);
	letter-spacing: 0.01em;
	margin: 0 0 0.4em;
	line-height: 0.98;
}

.yl-h1 { font-size: clamp(2.75rem, 9vw, 5.125rem); }
.yl-h2 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1; }
.yl-h3 { font-size: clamp(1.5rem, 3.5vw, 1.875rem); line-height: 1.1; }
.yl-h4 { font-size: 1.375rem; font-weight: 700; line-height: 1.15; }

.yl-eyebrow {
	font-family: var(--yl-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--yl-gold-500);
	margin: 0 0 12px;
}
.yl-eyebrow a { color: inherit; }

.yl-lead {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--yl-steel-300);
	max-width: 62ch;
}

@media (min-width: 900px) {
	.yl-lead { font-size: 1.125rem; }
}

.yl-note {
	font-size: 0.875rem;
	color: var(--yl-steel-500);
	border: 1px dashed var(--yl-ink-600);
	border-radius: var(--yl-radius);
	padding: 14px 16px;
}

/* ---------- Buttons ---------- */

.yl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 15px 28px;
	border-radius: var(--yl-radius);
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.yl-btn:hover, .yl-btn:focus-visible { text-decoration: none; }

.yl-btn--primary {
	background: var(--yl-gold-400);
	color: var(--yl-ink-900);
	border-color: var(--yl-gold-400);
}
.yl-btn--primary:hover, .yl-btn--primary:focus-visible { background: var(--yl-gold-500); border-color: var(--yl-gold-500); }

.yl-btn--secondary {
	background: transparent;
	color: var(--yl-gold-400);
	border-color: var(--yl-gold-500);
}
.yl-btn--secondary:hover, .yl-btn--secondary:focus-visible { background: rgba(191,146,94,.15); }

.yl-btn--light { background: var(--yl-white); color: var(--yl-ink-800); border-color: var(--yl-white); }

/* ---------- Image placeholders ---------- */

.yl-img { width: 100%; height: 100%; object-fit: cover; }

.yl-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	background: #17181b;
	border: 1px dashed #3b3226;
	color: #7c6a52;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px;
}

/* ---------- Utility bar ---------- */

.yl-utility {
	background: #101012;
	border-bottom: 1px solid var(--yl-ink-600);
	font-size: 0.75rem;
}
.yl-utility__inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	padding-block: 9px;
}
.yl-utility__badge {
	margin: 0;
	color: var(--yl-gold-500);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.yl-utility__contacts { display: none; }
.yl-utility__who { color: var(--yl-steel-500); margin-right: 6px; }

@media (min-width: 900px) {
	.yl-utility__inner { flex-direction: row; justify-content: space-between; align-items: center; }
	.yl-utility__contacts { display: flex; gap: 26px; }
	.yl-utility__contacts a { color: var(--yl-steel-300); text-decoration: none; }
	.yl-utility__contacts a:hover { color: var(--yl-white); }
}

/* ---------- Header ---------- */

.yl-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--yl-ink-900);
	border-bottom: 1px solid var(--yl-ink-600);
}
.yl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 12px;
}

.yl-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.yl-brand__mark {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: 0 0 46px;
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	overflow: hidden;
}
.yl-brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.yl-brand__placeholder {
	font-family: var(--yl-display);
	font-weight: 800;
	color: var(--yl-gold-500);
	font-size: 1.25rem;
}
.yl-brand__words { display: flex; flex-direction: column; line-height: 1; }
.yl-brand__name {
	font-family: var(--yl-display);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--yl-white);
	font-size: 1.3125rem;
}
.yl-brand__sub {
	font-family: var(--yl-display);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--yl-gold-500);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	margin-top: 2px;
}

.yl-burger {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
}
.yl-burger__bars { display: grid; gap: 5px; }
.yl-burger__bars span {
	display: block;
	width: 24px; height: 2px;
	background: var(--yl-white);
	border-radius: 2px;
}

.yl-nav {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--yl-ink-800);
	border-bottom: 1px solid var(--yl-ink-600);
	padding: 16px var(--yl-gutter) 24px;
}
.yl-nav.is-open { display: block; }
.yl-nav__list { display: flex; flex-direction: column; }
.yl-nav__list li { border-bottom: 1px solid var(--yl-ink-600); }
.yl-nav__list a {
	display: block;
	padding: 14px 0;
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--yl-steel-300);
	text-decoration: none;
}
.yl-nav__list .current-menu-item > a,
.yl-nav__list a:hover { color: var(--yl-gold-500); }
.yl-nav__cta { margin-top: 18px; }
.yl-nav__cta .yl-btn { width: 100%; }

@media (min-width: 1100px) {
	.yl-burger { display: none; }
	.yl-nav {
		display: flex;
		position: static;
		align-items: center;
		gap: 34px;
		background: none;
		border: 0;
		padding: 0;
	}
	.yl-nav__list { flex-direction: row; gap: 30px; }
	.yl-nav__list li { border: 0; }
	.yl-nav__list a { padding: 0; font-size: 1.1875rem; }
	.yl-nav__cta { margin: 0; }
	.yl-nav__cta .yl-btn { width: auto; padding: 13px 24px; font-size: 1rem; }
}

/* ---------- Hero ---------- */

.yl-hero { position: relative; isolation: isolate; overflow: hidden; }
.yl-hero__media { position: absolute; inset: 0; z-index: -2; }
.yl-hero__media .yl-img { width: 100%; height: 100%; object-fit: cover; }
.yl-hero__media .yl-img--empty { height: 100%; }
.yl-hero__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(5,5,8,.75) 0%, rgba(5,5,8,.94) 85%);
}
.yl-hero__inner { padding-block: 72px 64px; }
.yl-hero__text { max-width: 46ch; font-size: 1.0625rem; color: var(--yl-steel-300); }
.yl-hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.yl-hero__actions .yl-btn { width: 100%; }

@media (min-width: 640px) {
	.yl-hero__actions { flex-direction: row; }
	.yl-hero__actions .yl-btn { width: auto; }
}
@media (min-width: 900px) {
	.yl-hero__inner { padding-block: 120px 110px; max-width: 900px; }
	.yl-hero__scrim { background: linear-gradient(90deg, rgba(5,5,8,.95) 0%, rgba(5,5,8,.78) 55%, rgba(5,5,8,.55) 100%); }
	.yl-hero__text { font-size: 1.1875rem; }
}

/* ---------- Ribbon ---------- */

.yl-ribbon {
	background: linear-gradient(90deg, var(--yl-gold-600) 0%, var(--yl-gold-400) 50%, var(--yl-gold-600) 100%);
	text-align: center;
	padding-block: 14px;
}
.yl-ribbon p {
	margin: 0;
	font-family: var(--yl-display);
	font-weight: 800;
	text-transform: uppercase;
	color: #171310;
	font-size: clamp(0.9375rem, 2.5vw, 1.5rem);
	letter-spacing: 0.2em;
}

/* ---------- Trust bar ---------- */

.yl-trust { background: var(--yl-ink-800); padding-block: 36px; }
.yl-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.yl-trust__value {
	font-family: var(--yl-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	line-height: 1;
	color: var(--yl-gold-500);
	margin: 0 0 6px;
}
.yl-trust__label { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--yl-steel-300); }

@media (min-width: 900px) {
	.yl-trust { padding-block: 44px; }
	.yl-trust__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

/* ---------- Cards ---------- */

.yl-card,
.yl-tile,
.yl-ba__card {
	display: flex;
	flex-direction: column;
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--yl-shadow-card);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.yl-card:hover, a.yl-tile:hover, a.yl-ba__card:hover {
	border-color: var(--yl-gold-600);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--yl-shadow-card-hover);
}

.yl-card__media, .yl-tile__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #17181b;
}
.yl-card__media .yl-img, .yl-tile__media .yl-img { width: 100%; height: 100%; object-fit: cover; }

.yl-card__body, .yl-tile__body, .yl-ba__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 24px;
	flex: 1 1 auto;
}

.yl-card__title, .yl-tile__title {
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.12;
	text-transform: uppercase;
	color: var(--yl-white);
}
.yl-card__text { font-size: 0.875rem; line-height: 1.6; color: var(--yl-steel-500); }
.yl-tile__meta {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--yl-gold-500);
}

/* ---------- Before / after ---------- */

.yl-ba__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--yl-ink-600); }
.yl-ba__panel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: block; }
.yl-ba__panel .yl-img { width: 100%; height: 100%; object-fit: cover; }
.yl-ba__panel .yl-img--empty { height: 100%; min-height: 0; }

.yl-tag {
	position: absolute;
	top: 10px; left: 10px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
}
.yl-tag--before { background: #3a3a40; color: var(--yl-white); }
.yl-tag--after { background: var(--yl-gold-500); color: var(--yl-ink-800); }

/* ---------- About split ---------- */

.yl-about__inner { display: grid; gap: 36px; }
.yl-about__media { position: relative; }
.yl-about__img--back { aspect-ratio: 4 / 5; max-width: 400px; overflow: hidden; border-radius: var(--yl-radius); }
.yl-about__img--front {
	display: none;
	position: absolute;
	right: 0; bottom: -24px;
	width: 55%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 8px solid var(--yl-ink-800);
	border-radius: var(--yl-radius);
}
.yl-about__img .yl-img { width: 100%; height: 100%; object-fit: cover; }
.yl-about__img .yl-img--empty { height: 100%; }

.yl-ticks { display: grid; gap: 12px; margin: 0 0 28px; }
.yl-ticks li { position: relative; padding-left: 20px; font-size: 0.9375rem; line-height: 1.55; }
.yl-ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.55em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--yl-gold-500);
}

@media (min-width: 900px) {
	.yl-about__inner { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
	.yl-about__img--front { display: block; }
	.yl-about__media { padding-bottom: 40px; }
}

/* ---------- Quotes ---------- */

.yl-quote {
	margin: 0;
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	padding: 28px 30px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: var(--yl-shadow-card);
}
.yl-quote__stars { margin: 0; color: var(--yl-gold-500); letter-spacing: 0.15em; }
.yl-quote__text { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--yl-steel-300); }
.yl-quote__who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.yl-quote__name {
	font-family: var(--yl-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.125rem;
	color: var(--yl-white);
}
.yl-quote__place { font-size: 0.8125rem; color: var(--yl-steel-500); }

/* ---------- CTA band ---------- */

.yl-cta { position: relative; isolation: isolate; overflow: hidden; }
.yl-cta__media { position: absolute; inset: 0; z-index: -2; }
.yl-cta__media .yl-img { width: 100%; height: 100%; object-fit: cover; }
.yl-cta__media .yl-img--empty { height: 100%; }
.yl-cta__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(5,5,8,.93); }
.yl-cta__inner { display: grid; gap: 36px; padding-block: var(--yl-section-y); }
.yl-cta__phones { display: grid; gap: 8px; margin-top: 20px; }
.yl-cta__phones a {
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--yl-gold-400);
	text-decoration: none;
}
.yl-cta__form {
	background: #141417;
	border: 1px solid var(--yl-ink-600);
	border-radius: 5px;
	padding: 28px 24px 30px;
}
.yl-cta__reassure { margin: 14px 0 0; font-size: 0.75rem; color: var(--yl-steel-500); text-align: center; }

@media (min-width: 900px) {
	.yl-cta__inner { grid-template-columns: 1fr 520px; gap: 64px; align-items: center; }
	.yl-cta__form { padding: 36px; }
	.yl-cta__phones a { font-size: 1.625rem; }
}

/* ---------- Page hero ---------- */

.yl-pagehero { position: relative; isolation: isolate; overflow: hidden; background: var(--yl-ink-800); }
.yl-pagehero__media { position: absolute; inset: 0; z-index: -2; }
.yl-pagehero__media .yl-img { width: 100%; height: 100%; object-fit: cover; }
/* Lightened from .86/.94, which was opaque enough that a featured image read
 * as "no image set" — the first thing anyone assumed when a hero looked blank.
 *
 * These two numbers are a contrast floor, not a taste choice. Measured against
 * the worst case, a blown-out sky or white siding filling the frame:
 *
 *   .55 top    → 4.57:1 for the small breadcrumb link (AA needs 4.5:1)
 *   .78 bottom → 11.0:1 for the h1
 *
 * .48 at the top was tried first and measured 3.59:1, which fails the
 * breadcrumb. Lighten further only after re-running the numbers. */
.yl-pagehero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,8,.55), rgba(5,5,8,.78)); }
.yl-pagehero__inner { padding-block: 56px; }

@media (min-width: 900px) {
	.yl-pagehero__inner { padding-block: 96px; }
}

/* ---------- Prose ---------- */

.yl-prose { max-width: 72ch; }
.yl-prose h2, .yl-prose h3 { font-family: var(--yl-display); text-transform: uppercase; color: var(--yl-white); }
.yl-prose a { text-decoration: underline; }

/* Gold lead-ins: bold that opens a paragraph is a label introducing what
 * follows ("Written, itemized estimates." / "Thinking about a project?"), so it
 * gets the accent colour and acts as a scan anchor down the page.
 *
 * Scoped to :first-child on purpose. Bold used mid-sentence is emphasis, not a
 * label, and colouring that too would make the page look randomly speckled.
 *
 * gold-500 measures 7.02:1 on ink-900 and 6.56:1 on ink-800 — comfortably past
 * the 4.5:1 floor. */
.yl-prose p > strong:first-child { color: var(--yl-gold-500); }

/* Pull quotes. Italic was the ask; the rest is the minimum needed to stop a
 * browser-default blockquote looking like an accident on a dark background —
 * default UA styling is a 40px indent and nothing else.
 *
 * The gold rule and the size bump are two lines; delete them and the italic
 * still works. */
.yl-prose blockquote {
	margin: 1.75em 0;
	padding-left: 22px;
	border-left: 2px solid var(--yl-gold-600);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--yl-white);
}
.yl-prose blockquote p:last-child { margin-bottom: 0; }
.yl-prose blockquote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yl-steel-500);
}

/* ---------- Footer ---------- */

.yl-footer { background: #08080a; padding-block: 48px 32px; }
.yl-footer__cols { display: grid; gap: 32px; }
.yl-footer__blurb { font-size: 0.875rem; line-height: 1.7; color: var(--yl-steel-500); margin-top: 16px; }
.yl-footer__title {
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--yl-gold-500);
	margin: 0 0 14px;
}
.yl-footer__list { display: grid; gap: 10px; }
.yl-footer__list a { color: var(--yl-steel-300); font-size: 0.875rem; text-decoration: none; }
.yl-footer__list a:hover { color: var(--yl-white); }
.yl-footer__list--contact li { font-size: 0.875rem; color: var(--yl-steel-300); }

.yl-footer__base {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--yl-ink-600);
}
.yl-footer__copy { margin: 0; font-size: 0.8125rem; color: var(--yl-steel-500); }
.yl-footer__ribbon {
	margin: 0;
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--yl-gold-600);
}

@media (min-width: 640px) {
	.yl-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.yl-footer { padding-block: 72px 40px; }
	.yl-footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; }
	.yl-footer__base { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Footer trust badges ---------- */

.yl-badges {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--yl-ink-600);
}

.yl-badges__claims {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yl-badge--text {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yl-steel-300);
}
.yl-badge__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(191, 146, 94, .18);
	color: var(--yl-gold-400);
	font-size: 0.6875rem;
	line-height: 1;
}

.yl-badges__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/*
 * Third-party badge artwork is almost always dark ink on white, drawn to sit
 * on a light page. A white plate is the only treatment that works across all
 * of them without touching the marks themselves — which trademark terms
 * generally forbid anyway.
 */
.yl-badge--logo,
.yl-badge--seal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--yl-white);
	border-radius: var(--yl-radius);
	padding: 10px 14px;
	min-height: 64px;
	transition: transform .15s ease, box-shadow .15s ease;
}
a.yl-badge--logo:hover {
	transform: translateY(-2px);
	box-shadow: var(--yl-shadow-card);
}
.yl-badge__img,
.yl-badge--seal img {
	display: block;
	width: auto;
	height: auto;
	max-height: 56px;
	max-width: 150px;
	object-fit: contain;
}
.yl-badge--seal { padding: 8px 12px; }

/*
 * The veteran badge is ours, drawn for the dark footer, so it skips the white
 * plate the third-party marks need. Sized by height like the others, with the
 * SVG's own 188:56 ratio setting the width.
 */
.yl-badge--brand {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
}
.yl-vetbadge {
	display: block;
	height: 56px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 639px) {
	.yl-vetbadge { height: 48px; }
}

@media (min-width: 900px) {
	.yl-badges {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}
	.yl-badges__claims { gap: 14px 32px; }
}

/* ---------- Mobile sticky call bar ---------- */

.yl-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	gap: 10px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: #101014;
	border-top: 1px solid var(--yl-ink-600);
}
.yl-sticky .yl-btn { flex: 1 1 50%; padding: 13px 8px; font-size: 1rem; }

body { padding-bottom: 76px; }

@media (min-width: 900px) {
	.yl-sticky { display: none; }
	body { padding-bottom: 0; }
}

/* ---------- Pagination ---------- */

.yl-pagelinks, .pagination { margin-top: 36px; }
.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin-right: 6px;
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	color: var(--yl-steel-300);
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--yl-gold-500); color: var(--yl-ink-900); border-color: var(--yl-gold-500); }

/* ---------- Gallery filter chips ---------- */

.yl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}
.yl-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--yl-ink-600);
	border-radius: 999px;
	background: var(--yl-ink-700);
	color: var(--yl-steel-300);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.yl-filter:hover, .yl-filter:focus-visible {
	border-color: var(--yl-gold-600);
	color: var(--yl-white);
	text-decoration: none;
}
.yl-filter.is-active {
	background: var(--yl-gold-400);
	border-color: var(--yl-gold-400);
	color: var(--yl-ink-900);
}
.yl-filter__count {
	font-size: 0.6875rem;
	opacity: .7;
}

.yl-empty {
	display: grid;
	gap: 16px;
	justify-items: start;
	border: 1px dashed var(--yl-ink-600);
	border-radius: var(--yl-radius);
	padding: 40px;
}

/* ---------- Project detail ---------- */

.yl-factbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.yl-factbar li { display: grid; gap: 4px; }
.yl-factbar span {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yl-gold-500);
}
.yl-factbar strong {
	font-family: var(--yl-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--yl-white);
}

.yl-bapair { display: grid; gap: 16px; }
.yl-bapair__panel {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	aspect-ratio: 4 / 3;
}
.yl-bapair__panel .yl-img { width: 100%; height: 100%; object-fit: cover; }
.yl-bapair__panel .yl-img--empty { height: 100%; min-height: 0; }
.yl-bapair__panel figcaption { position: absolute; top: 12px; left: 12px; }

@media (min-width: 900px) {
	.yl-bapair { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- Services page rows ---------- */

.yl-srow__inner { display: grid; gap: 28px; align-items: center; }
.yl-srow__media {
	overflow: hidden;
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	aspect-ratio: 3 / 2;
	box-shadow: var(--yl-shadow-card);
}
.yl-srow__media .yl-img { width: 100%; height: 100%; object-fit: cover; }
.yl-srow__media .yl-img--empty { height: 100%; min-height: 0; }
.yl-srow__copy .yl-lead { margin-bottom: 24px; }
.yl-srow__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 900px) {
	.yl-srow__inner { grid-template-columns: 1fr 1fr; gap: 56px; }
	.yl-srow--flip .yl-srow__media { order: 2; }
}

/* ---------- Process steps ---------- */

.yl-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.yl-step {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 26px 24px 28px;
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
}
.yl-step__num {
	font-family: var(--yl-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--yl-gold-500);
}
.yl-step__title {
	font-family: var(--yl-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--yl-white);
	line-height: 1.1;
}
.yl-step__text { font-size: 0.875rem; line-height: 1.6; color: var(--yl-steel-500); }

/* ---------- Two-column body + aside ---------- */

.yl-split2 { display: grid; gap: 36px; align-items: start; }
.yl-aside {
	display: grid;
	gap: 14px;
	padding: 28px 26px 32px;
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
}
.yl-aside .yl-h4 { margin: 0; }
.yl-aside .yl-ticks { margin-bottom: 8px; }
.yl-aside__contacts { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.yl-aside__contacts a { color: var(--yl-steel-300); font-size: 0.9375rem; text-decoration: none; }
.yl-aside__contacts a:hover { color: var(--yl-gold-400); }

@media (min-width: 900px) {
	.yl-split2 { grid-template-columns: 1.6fr 1fr; gap: 56px; }
}

/* ---------- Contact page ---------- */

.yl-contact__inner { display: grid; gap: 36px; align-items: start; }
.yl-contact__form {
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	padding: 28px 24px 32px;
}
.yl-contact__intro { margin-top: 24px; }
.yl-contact__panel {
	display: grid;
	gap: 20px;
	align-content: start;
	padding: 28px 26px 32px;
	background: var(--yl-ink-800);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
}
.yl-contact__panel .yl-h4 { margin: 0; }
.yl-contact__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.yl-contact__who {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yl-steel-500);
	margin-bottom: 4px;
}
.yl-contact__big {
	font-family: var(--yl-display);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--yl-gold-400);
	text-decoration: none;
}
.yl-contact__big:hover { color: var(--yl-white); }

.yl-contact__meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.yl-contact__meta dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yl-steel-500);
	padding-top: 2px;
}
.yl-contact__meta dd { margin: 0; font-size: 0.9375rem; color: var(--yl-steel-300); }
.yl-contact__meta dd a { color: var(--yl-steel-300); text-decoration: none; }
.yl-contact__meta dd a:hover { color: var(--yl-gold-400); }

.yl-contact__badge {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--yl-ink-600);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--yl-gold-500);
}

@media (min-width: 900px) {
	.yl-contact__inner { grid-template-columns: 1.5fr 1fr; gap: 48px; }
	.yl-contact__form { padding: 40px 36px 44px; }
}

/* ---------- Service area ---------- */

.yl-areas__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yl-areas__list li {
	position: relative;
	padding-left: 18px;
	font-size: 0.9375rem;
	color: var(--yl-steel-300);
}
.yl-areas__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.6em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--yl-gold-500);
}

@media (min-width: 640px) { .yl-areas__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .yl-areas__list { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ ---------- */

.yl-faq__list { display: grid; gap: 12px; max-width: 860px; }
.yl-faq__item {
	background: var(--yl-ink-700);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	padding: 18px 22px;
}
.yl-faq__item summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--yl-display);
	font-size: 1.1875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--yl-white);
	position: relative;
	padding-right: 32px;
}
.yl-faq__item summary::-webkit-details-marker { display: none; }
.yl-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0; top: -2px;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--yl-gold-500);
}
.yl-faq__item[open] summary::after { content: "\2013"; }
.yl-faq__item p { margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--yl-steel-300); }

/* ---------- Forminator, dressed for a dark page ----------
 *
 * Forminator ships a light theme and enqueues a per-form stylesheet
 * (style-<id>.css) after the theme's, so these rules carry an extra class
 * of specificity to win. Scoped to the two places a form appears.
 * --------------------------------------------------------- */

.yl-cta__form .forminator-ui.forminator-custom-form,
.yl-contact__form .forminator-ui.forminator-custom-form { color: var(--yl-steel-300); }

.yl-cta__form .forminator-ui.forminator-custom-form .forminator-row,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-row { margin-bottom: 18px; }

.yl-cta__form .forminator-ui.forminator-custom-form .forminator-label,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-label {
	font-family: var(--yl-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yl-steel-500);
	margin-bottom: 6px;
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-required,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-required { color: var(--yl-gold-500); }

.yl-cta__form .forminator-ui.forminator-custom-form .forminator-description,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-description {
	color: var(--yl-steel-500);
	font-size: 0.8125rem;
	margin-top: 6px;
}

/* Text, email, phone, textarea */
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-input,
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-textarea,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-input,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-textarea {
	background: var(--yl-ink-900);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	color: var(--yl-white);
	font-family: var(--yl-body);
	font-size: 1rem;
	line-height: 1.5;
	padding: 12px 14px;
	height: auto;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-input::placeholder,
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-textarea::placeholder,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-input::placeholder,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-textarea::placeholder { color: #5c6068; }

.yl-cta__form .forminator-ui.forminator-custom-form .forminator-input:focus,
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-textarea:focus,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-input:focus,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-textarea:focus {
	outline: none;
	border-color: var(--yl-gold-500);
	box-shadow: 0 0 0 3px rgba(191, 146, 94, .22);
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-textarea,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-textarea { min-height: 130px; resize: vertical; }

/* Select2-powered dropdowns */
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-select .select2-selection,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-select .select2-selection {
	background: var(--yl-ink-900);
	border: 1px solid var(--yl-ink-600);
	border-radius: var(--yl-radius);
	height: auto;
	padding: 11px 14px;
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-select .select2-selection__rendered,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-select .select2-selection__rendered {
	color: var(--yl-white);
	font-family: var(--yl-body);
	font-size: 1rem;
	line-height: 1.5;
	padding: 0;
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-select .select2-selection__placeholder,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-select .select2-selection__placeholder { color: #5c6068; }
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-select .forminator-icon-chevron-down,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-select .forminator-icon-chevron-down { color: var(--yl-gold-500); }

/*
 * The open dropdown is portalled to <body>, so it cannot be scoped to the
 * form wrapper. forminator-dropdown is Forminator's own class, so this
 * still only touches its menus.
 */
body .forminator-select-dropdown,
body .forminator-select-dropdown.select2-dropdown {
	background: var(--yl-ink-800) !important;
	border: 1px solid var(--yl-ink-600) !important;
	border-radius: var(--yl-radius);
}
body .forminator-select-dropdown .select2-results__option {
	background: var(--yl-ink-800) !important;
	color: var(--yl-steel-300) !important;
	font-family: var(--yl-body);
	font-size: 0.9375rem;
	padding: 10px 14px;
}
body .forminator-select-dropdown .select2-results__option--highlighted,
body .forminator-select-dropdown .select2-results__option--selected {
	background: var(--yl-gold-500) !important;
	color: var(--yl-ink-900) !important;
}
body .forminator-select-dropdown .select2-search__field {
	background: var(--yl-ink-900) !important;
	border: 1px solid var(--yl-ink-600) !important;
	color: var(--yl-white) !important;
}

/* Phone field's country selector */
.yl-cta__form .forminator-ui.forminator-custom-form .iti__country-list,
.yl-contact__form .forminator-ui.forminator-custom-form .iti__country-list { background: var(--yl-ink-800); color: var(--yl-steel-300); }

/* Multi-file upload dropzone */
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-multi-upload,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-multi-upload {
	background: var(--yl-ink-900);
	border: 1px dashed var(--yl-ink-600);
	border-radius: var(--yl-radius);
	padding: 26px 20px;
	transition: border-color .15s ease, background-color .15s ease;
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-multi-upload:hover,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-multi-upload:hover { border-color: var(--yl-gold-600); }
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-multi-upload-message p,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-multi-upload-message p { color: var(--yl-steel-500); font-size: 0.875rem; }
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-multi-upload-message a,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-multi-upload-message a { color: var(--yl-gold-400); text-decoration: underline; }
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-icon-upload,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-icon-upload { color: var(--yl-gold-500); }
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-uploaded-files,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-uploaded-files { color: var(--yl-steel-300); font-size: 0.875rem; }

/* Submit */
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-button-submit,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-button-submit {
	font-family: var(--yl-display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 15px 28px;
	border-radius: var(--yl-radius);
	border: 1.5px solid var(--yl-gold-400);
	background: var(--yl-gold-400);
	color: var(--yl-ink-900);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
	background: var(--yl-gold-500);
	border-color: var(--yl-gold-500);
	color: var(--yl-ink-900);
}

/* Validation and response messages */
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-error-message,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-error-message { color: #e08a7c; font-size: 0.8125rem; }
.yl-cta__form .forminator-ui.forminator-custom-form .forminator-input.forminator-has_error,
.yl-contact__form .forminator-ui.forminator-custom-form .forminator-input.forminator-has_error { border-color: #d16a5a; }

.yl-cta__form .forminator-response-message,
.yl-contact__form .forminator-response-message {
	background: rgba(191, 146, 94, .12);
	border: 1px solid var(--yl-gold-600);
	border-radius: var(--yl-radius);
	color: var(--yl-steel-300);
	padding: 20px 22px;
	margin-bottom: 18px;
}

/*
 * The name field's own two-column split is Forminator's job — it emits
 * .forminator-col-md-6 for first and last name. Overriding it here fought the
 * plugin's grid for no gain.
 */

/*
 * Hard overrides.
 *
 * Forminator writes a per-form stylesheet (style-<id>.css) from the form's own
 * appearance settings and enqueues it after the theme's. A few of its
 * declarations sit at a specificity we cannot outrank without hard-coding the
 * form id into the selector — which would break the moment the form is
 * rebuilt with a new id. !important is the lesser evil here, and it is
 * confined to these five properties.
 *
 * Symptom if these are removed: selected dropdown text renders black on the
 * near-black input, i.e. invisible.
 */
.yl-cta__form .forminator-ui .select2-selection__rendered,
.yl-contact__form .forminator-ui .select2-selection__rendered { color: var(--yl-white) !important; }

.yl-cta__form .forminator-ui .forminator-select .select2-selection,
.yl-contact__form .forminator-ui .forminator-select .select2-selection {
	border-color: var(--yl-ink-600) !important;
	padding: 11px 14px !important;
}

.yl-cta__form .forminator-ui .forminator-input,
.yl-cta__form .forminator-ui .forminator-textarea,
.yl-contact__form .forminator-ui .forminator-input,
.yl-contact__form .forminator-ui .forminator-textarea { padding: 12px 14px !important; }

.yl-cta__form .forminator-ui .forminator-button-submit,
.yl-contact__form .forminator-ui .forminator-button-submit {
	font-family: var(--yl-display) !important;
	font-size: 1.0625rem !important;
	letter-spacing: 0.07em !important;
}

/*
 * select2 writes an inline pixel width onto its container, measured when it
 * initialises — which happens before the dark-theme CSS has settled the field
 * widths, so it lands on something like 197px inside a 599px field. The
 * visible box is fine, but the dropdown menu inherits the container width and
 * opens narrower than the field, clipping the option text.
 */
.yl-cta__form .forminator-ui .forminator-select,
.yl-contact__form .forminator-ui .forminator-select { width: 100% !important; }

/*
 * Label spacing and select height both lose to Forminator's per-form
 * stylesheet: labels come back with margin-bottom 0 (cramped against the
 * input) and the select2 box renders 62px tall next to 47px inputs, so the
 * fields step up and down the form.
 */
.yl-cta__form .forminator-ui .forminator-label,
.yl-contact__form .forminator-ui .forminator-label { margin-bottom: 8px !important; }

.yl-cta__form .forminator-ui .forminator-select .select2-selection,
.yl-contact__form .forminator-ui .forminator-select .select2-selection {
	height: auto !important;
	min-height: 47px;
	display: flex !important;
	align-items: center;
}
.yl-cta__form .forminator-ui .forminator-select .select2-selection__rendered,
.yl-contact__form .forminator-ui .forminator-select .select2-selection__rendered {
	line-height: 1.3 !important;
	padding: 0 !important;
}
.yl-cta__form .forminator-ui .forminator-select .select2-selection__arrow,
.yl-contact__form .forminator-ui .forminator-select .select2-selection__arrow { height: 100% !important; }

.yl-cta__form .forminator-ui .forminator-button-submit,
.yl-contact__form .forminator-ui .forminator-button-submit { border-color: var(--yl-gold-400) !important; }
.yl-cta__form .forminator-ui .forminator-button-submit:hover,
.yl-contact__form .forminator-ui .forminator-button-submit:hover { border-color: var(--yl-gold-500) !important; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}