/* ------------------------------------------------------------------
   Loan Consolidation — only what a widget setting cannot express:
   shape, position and the layered gradients. Every size, weight and
   colour comes from Elementor Site Settings.
   ------------------------------------------------------------------ */

/* Hero backdrop: two soft radial washes over white. */
.lc-hero {
	background:
		radial-gradient(900px 460px at 88% -10%, rgba(244, 80, 44, .08), transparent 60%),
		radial-gradient(700px 400px at -10% 110%, rgba(17, 29, 74, .05), transparent 55%),
		#ffffff;
	overflow: hidden;
}

.lc-accent { color: var(--lc-orange-500); }

/* A label above a heading, set in the copy rather than boxed in a pill. */
.elementor-widget.lc-eyebrow .elementor-heading-title {
	display: block;
	color: var(--lc-orange-600);
	text-transform: uppercase;
}

/* The hero badge keeps its pill. An FCA authorisation is a claim that earns a
   badge, and it is the only one on the site. */
.elementor-widget.lc-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	background: var(--lc-orange-100);
	color: var(--lc-orange-600);
	border: 1px solid #f9cdbc;
	padding: 7px 16px;
}

.lc-hero-sub p { max-width: 520px; }

/* Representative-example card. */
.elementor-widget.lc-card-title .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.lc-card-title i { color: var(--lc-orange-500); }
.elementor-widget.lc-fig-label .elementor-heading-title { text-transform: uppercase; }

/* How-it-works cards. */
.lc-step-card { position: relative; transition: transform .2s ease, box-shadow .2s ease; }

/* The illustration sits on a soft tint so a white-background PNG still reads as
   a deliberate block rather than as a gap in the card. */
.lc-step-art img {
	width: 100%;
	border-radius: 12px;
	background: var(--lc-bg);
	display: block;
}
.lc-step-card:hover { transform: translateY(-6px); box-shadow: var(--lc-shadow-lg); }
.lc-step-num {
	position: absolute;
	top: 18px;
	right: 24px;
	pointer-events: none;
	width: auto !important;
	z-index: 1;
}
.lc-step-box .elementor-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--lc-orange-100);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Why-choose-us cards. */
.lc-feature-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lc-feature-card:hover {
	transform: translateY(-4px);
	border-color: var(--lc-orange-500);
}

/* The mission label sits on its own, so it needs the spacing a heading would
   otherwise give it. */
.lc-quote { margin-top: 4px; }
.lc-feature-box .elementor-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--lc-navy-900);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Key-terms disclosure: a tinted block, with the brand carried by the list
   markers rather than by an accent rule down one edge. */
.lc-disclosure strong { color: var(--lc-navy-900); }

.lc-disclosure ul {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.lc-disclosure li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 20px;
}

.lc-disclosure li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lc-orange-500);
}

/* CTA band: the navy gradient with an orange bloom top-right. */
.lc-cta-band {
	background-image:
		radial-gradient(700px 320px at 90% 0%, rgba(244, 80, 44, .25), transparent 60%),
		linear-gradient(135deg, var(--lc-navy-900), var(--lc-navy-800)) !important;
}
.lc-cta-sub p { max-width: 520px; margin-inline: auto; }

/* ---------- Inner pages ---------- */

.lc-page-hero {
	background:
		radial-gradient(800px 380px at 85% -20%, rgba(244, 80, 44, .08), transparent 60%),
		#ffffff;
}

.lc-breadcrumb p { margin: 0; }
.lc-breadcrumb a { color: var(--lc-slate-600); }
.lc-breadcrumb span { color: var(--lc-slate-400); }

/* Long-form legal copy. */
.elementor-widget.lc-prose h2,
.lc-prose .elementor-widget-container h2 { font-size: 1.35rem; margin: 34px 0 10px; }
.elementor-widget.lc-prose h3,
.lc-prose .elementor-widget-container h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.lc-prose p { margin-bottom: 14px; }
.lc-prose ul,
.lc-prose ol { margin: 0 0 16px 20px; }
.lc-prose li { margin-bottom: 6px; }
.lc-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 20px;
	font-size: .9rem;
}
.lc-prose th,
.lc-prose td {
	border: 1px solid var(--lc-line);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}
.lc-prose th { background: var(--lc-bg); color: var(--lc-navy-900); }

/* Mission pull-quote on About: opens with a quotation mark, the way the design
   marks a quote, rather than with a coloured rule down the left edge. */
.lc-quote { position: relative; }

.lc-quote::before {
	content: "\201C";
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.2rem;
	line-height: .8;
	color: var(--lc-orange-500);
	margin-bottom: 6px;
}

.lc-quote p:last-child { margin-bottom: 0; }

/* ---------- Site header ---------- */

.lc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--lc-line);
}

/* The admin bar occupies the top 32px, so a sticky header has to sit under it. */
.admin-bar .lc-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .lc-header { top: 46px; }
}

.lc-logo { text-decoration: none; cursor: pointer; }
.lc-logo:hover { text-decoration: none; }

/* The supplied LC monogram, transparent, so it sits on white and on navy. */
.lc-logo-mark img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	display: block;
}

/* Kept for the text fallback if the image is ever missing. */
.elementor-widget.lc-logo-mark .elementor-heading-title {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--lc-navy-900);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .5px;
}

.elementor-widget.lc-logo-name .elementor-heading-title { color: var(--lc-navy-900); }
.elementor-widget.lc-logo-sub .elementor-heading-title {
	color: var(--lc-slate-400);
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Footer variant: the navy monogram needs a white ground to read on navy. */
.lc-logo-invert .lc-logo-mark img {
	background: #ffffff;
	border-radius: 10px;
	padding: 4px;
}

.lc-logo-invert .lc-logo-mark .elementor-heading-title {
	background: #ffffff;
	color: var(--lc-navy-900);
}
.lc-logo-invert .lc-logo-name .elementor-heading-title { color: #ffffff; }
.lc-logo-invert .lc-logo-sub .elementor-heading-title { color: #99a2c9; }

.lc-header-phone .elementor-icon-list-item a:hover { text-decoration: none; }

/* ---------- Site footer ---------- */

.lc-footer-links .elementor-icon-list-item a,
.lc-footer-policy .elementor-icon-list-item a { text-decoration: none; }
.lc-footer-legal p { line-height: 1.7; }
.lc-footer-legal p:last-child { margin-bottom: 0; }

/* ---------- Thumb-reach CTA (phone only) ---------- */

.lc-sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 99;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--lc-line);
}

/* The bar is a frame around the button, not a section of its own. */
.lc-sticky-cta > .e-con-inner { padding-top: 0; padding-bottom: 0; }
.lc-sticky-cta .elementor-button { width: 100%; }
.lc-sticky-cta .elementor-widget-button { width: 100%; }

/* On the application page the form already is the call to action, and a fixed
   bar there just covers the fields. */
.lc-page-apply .lc-sticky-cta { display: none; }

/* Keep the last section clear of the bar. */
@media (max-width: 767px) {
	body { padding-bottom: 64px; }
	body.lc-page-apply { padding-bottom: 0; }
}

/* ---------- Header on small screens ---------- */

@media (max-width: 767px) {
	/* Logo left, burger right. The phone number and the header button drop out:
	   the thumb-reach bar already carries the call to action, and the phone
	   number is one tap away inside the menu. */
	/* Hide the whole actions group, not just its contents: an empty flex child
	   still counts for space-between and would strand the burger mid-row. */
	.lc-header-actions { display: none; }

	/* The header must stay one line: logo left, burger right. */
	.lc-header .e-con,
	.lc-header .e-con-inner { flex-wrap: nowrap; }

	.lc-logo { flex: 0 1 auto; min-width: 0; }
	.elementor-widget.lc-logo-name .elementor-heading-title,
	.elementor-widget.lc-logo-sub .elementor-heading-title { white-space: nowrap; }

	.elementor-widget.lc-logo-name .elementor-heading-title { font-size: .88rem; }
	.elementor-widget.lc-logo-sub .elementor-heading-title { font-size: .58rem; }

	.lc-logo { overflow: hidden; }

	.elementor-widget.lc-logo-mark .elementor-heading-title {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		font-size: .9rem;
	}
}

/* Elementor styles the mobile dropdown's hover state through `.highlighted`
   only, which leaves the text colour on the default. Pin both to the brand. */
.lc-nav .elementor-nav-menu--dropdown a:hover,
.lc-nav .elementor-nav-menu--dropdown a:focus,
.lc-nav .elementor-nav-menu--dropdown a.highlighted {
	background-color: var(--lc-orange-100);
	color: var(--lc-orange-600);
}

/* ---------- Scroll motion ---------- */

/*
 * Only hide things once the motion script has confirmed it is running, so the
 * page is fully readable if the JS fails or never loads.
 */
.lc-motion .lc-step-card,
.lc-motion .lc-feature-card,
.lc-motion .lc-disclosure,
.lc-motion .lc-cta-band,
.lc-motion .lc-quote,
.lc-motion .lc-reveal,
.lc-motion .lc-page-hero > .e-con-inner { opacity: 0; }

/* Nothing is ever hidden while the page is being edited. */
body.elementor-editor-active .lc-step-card,
body.elementor-editor-active .lc-feature-card,
body.elementor-editor-active .lc-disclosure,
body.elementor-editor-active .lc-cta-band,
body.elementor-editor-active .lc-quote,
body.elementor-editor-active .lc-reveal,
body.elementor-editor-active .lc-page-hero > .e-con-inner { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
	.lc-motion .lc-step-card,
	.lc-motion .lc-feature-card,
	.lc-motion .lc-disclosure,
	.lc-motion .lc-cta-band,
	.lc-motion .lc-quote,
	.lc-motion .lc-reveal,
	.lc-motion .lc-page-hero > .e-con-inner { opacity: 1; }
}

/* ---------- Page frame ---------- */

/*
 * Short pages (thank you, declined, the result pages before a lender answers)
 * left the footer floating halfway up the screen. The page is a column that
 * fills the viewport, with the content area taking up whatever is left over.
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

body > main,
body > .site-main {
	flex: 1 0 auto;
}

body > footer.elementor-location-footer {
	flex-shrink: 0;
}

/* ---------- Result pages ---------- */

/*
 * The plugin puts lf-has-result / lf-no-result on the body, so the empty state
 * is decided server-side and never flashes before being hidden.
 */
body.lf-has-result .lc-result-empty { display: none; }

.lc-empty-art img { max-width: 300px; margin-inline: auto; }

/* Keep the explanation to a readable measure rather than the full column. */
.lc-result-empty .elementor-widget-text-editor { max-width: 520px; }

/* The lender's own HTML is not ours to design, so give it the page's type and
   spacing and otherwise leave it alone. */
.lf-lender-html { width: 100%; }
.lf-lender-html h1,
.lf-lender-html h2,
.lf-lender-html h3 { color: var(--lc-navy-900); }
.lf-lender-html table { width: 100%; border-collapse: collapse; }
.lf-lender-html td,
.lf-lender-html th { border: 1px solid var(--lc-line); padding: 10px 12px; }

/* A completed step reads green rather than brand orange. */
.lc-eyebrow.lc-step-done .elementor-heading-title { color: #16a34a; }

/* ---------- Reading measure ---------- */

/*
 * Applied by lc_container() wherever a max width was asked for. A long line of
 * legal or explanatory copy running the full 1140px column is unreadable.
 */
.lc-measure {
	margin-inline: auto;
	width: 100%;
}

.lc-measure-520 { max-width: 520px; }
.lc-measure-640 { max-width: 640px; }
.lc-measure-720 { max-width: 720px; }
.lc-measure-820 { max-width: 820px; }
.lc-measure-860 { max-width: 860px; }

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

/*
 * The three columns are 30 / 20 / 42 per cent with a 44px gap between them,
 * which needs a container of about 1100px to fit. Between the tablet
 * breakpoint and that width the legal column wrapped, stranding the right half
 * of the row. Above tablet the row simply does not wrap, and the legal column
 * takes whatever is left.
 */
@media (min-width: 1025px) {
	.lc-footer .lc-footer-cols { flex-wrap: nowrap; }

	.lc-footer .lc-footer-legal-col {
		flex: 1 1 0;
		width: auto !important;
		min-width: 0;
	}
}

/* ---------- Mobile menu panel ---------- */

/*
 * Elementor positions the dropdown against the nearest positioned ancestor,
 * which is the header's inner row — a boxed, gutter-inset element centred in
 * the header. So the panel opened part-way up the header and stopped at the
 * gutters. Taking the positioning off that row hands the job to the header
 * itself, which is sticky and therefore positioned, and full width. The panel
 * then sits on the header's bottom edge at any header height.
 */
@media (max-width: 1024px) {
	.lc-header .lc-header-row,
	.lc-header .lc-nav { position: static; }

	/* Elementor writes top, left and width inline from JS, measured against the
	   widget, so these have to outrank the element's own style attribute. */
	.lc-header .lc-nav .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100% !important;
		left: 0 !important;
		right: 0;
		width: 100% !important;
		/* Elementor's own 10px offset from the menu, which left a strip of page
		   showing between the header and the panel. */
		margin-top: 0;
	}
}

/* ---------- Screen-reader-only text ---------- */

/*
 * Present for search engines and assistive technology, painted nowhere. Used
 * for the application page's H1, which would otherwise be missing entirely.
 */
.lc-sr-only,
.lc-page-title-only {
	position: absolute;
	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;
}