/*
	Theme Name: LiveBuyers Lender 1
	Theme URI: https://www.livebuyers.net/
	Description: LiveBuyers mortgage lender design 1. Child of Hello Elementor. A tokenised design system for loan officer, branch and company sites: every colour, size and rhythm value is a custom property, so a new site is a values swap rather than a new stylesheet.
	Author: LiveBuyers
	Author URI: https://www.livebuyers.net/
	Template: hello-elementor
	Version: 1.0.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: lb-lender-1
*/

/* ==========================================================================
   CONTENTS

   1. Tokens              the design system as custom properties
   2. Elementor globals   binds the tokens to Site Settings > Global Colors
   3. Foundations         type scale, measure, base elements
   4. Elementor structure containers, widget bindings, the bare-button reset
   5. Layout              container, section rhythm
   6. Components          hero, figures, steps, panels, cards, forms, footer
   7. Motion
   8. Accessibility

   Sections 4 is not optional boilerplate. Hello Elementor and Elementor each
   impose styling that silently overrides an ordinary child theme; every rule
   there exists because of a specific, reproducible override. Read the comments
   before removing anything.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* --- Colour ---------------------------------------------------------
	   Cool neutrals, because this is a document rather than a brochure. The
	   ink is a navy so dark it reads as black, deliberately not the mid-blue
	   every other mortgage site uses. */

	--lb-paper:        #F7F8FA;  /* page ground, like form stock */
	--lb-surface:      #FFFFFF;  /* panels, cards, table rows */
	--lb-mist:         #EDF0F5;  /* alternating sections */
	--lb-rule:         #DDE2EA;  /* hairlines, borders, dividers */
	--lb-ash:          #5B6779;  /* secondary text. 6.2:1 on paper */
	--lb-ink:          #24303F;  /* body copy */
	--lb-ink-deep:     #0F1B2D;  /* headings, footer ground */

	/* The one hue a site changes. Brass: keys, approval stamps, hardware.
	   Warm against the navy and specifically not the sector's default blue. */
	--lb-accent:       #A9752E;
	--lb-accent-hover: #8A5E22;
	--lb-accent-tint:  #F6F0E5;
	--lb-on-accent:    #FFFFFF;
	/* The accent as TEXT on paper. The same colour unless a site picks a
	   brand light enough to fail 4.5:1, when LiveBuyers Core darkens it. */
	--lb-accent-text:  var(--lb-accent);

	/* Semantic, kept separate from the accent so "approved" never competes
	   with branding. Used for status only, never decoration. */
	--lb-positive:     #1F7A55;
	--lb-caution:      #9A6212;

	/* --- Type -----------------------------------------------------------
	   Newsreader carries authority in the headings; Public Sans is the US
	   federal design system face, which is the right register for a product
	   whose every page carries a disclosure. Its tabular figures do the real
	   work on rates and payments. */

	--lb-font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
	--lb-font-text:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--lb-text-2xs:  0.75rem;    /* 12px  disclosures, NMLS lines */
	--lb-text-xs:   0.8125rem;  /* 13px  labels, meta */
	--lb-text-sm:   0.9375rem;  /* 15px  captions, form labels */
	--lb-text-base: 1.0625rem;  /* 17px  body */
	--lb-text-lg:   1.1875rem;  /* 19px  lead paragraphs */
	--lb-text-xl:   1.375rem;   /* 22px  card headings */

	--lb-display-sm: clamp(1.625rem, 1.1rem + 2.1vw, 2.25rem);
	--lb-display-md: clamp(2rem, 1.3rem + 3.1vw, 3.25rem);
	--lb-display-lg: clamp(2.5rem, 1.4rem + 5.2vw, 4.75rem);

	/* Figures get their own scale: on a lending site the number IS the
	   content, so it is sized as a display element, not as large body text. */
	--lb-figure-lg: clamp(2.25rem, 1.4rem + 3.8vw, 3.75rem);
	--lb-figure-md: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);

	--lb-leading-tight: 1.08;
	--lb-leading-snug:  1.3;
	--lb-leading-body:  1.6;

	--lb-tracking-display: -0.018em;
	--lb-tracking-label:    0.06em;

	--lb-weight-regular:  400;
	--lb-weight-medium:   500;
	--lb-weight-semibold: 600;
	--lb-weight-bold:     700;

	/* --- Measure & rhythm ----------------------------------------------- */
	--lb-measure:      68ch;
	--lb-measure-lead: 52ch;

	--lb-space-3xs: 0.25rem;
	--lb-space-2xs: 0.5rem;
	--lb-space-xs:  0.75rem;
	--lb-space-sm:  1rem;
	--lb-space-md:  1.5rem;
	--lb-space-lg:  2.25rem;
	--lb-space-xl:  3.5rem;
	--lb-space-2xl: 5rem;

	--lb-section-y: clamp(3.5rem, 7vw, 7rem);
	--lb-gutter:    clamp(1.25rem, 4vw, 3rem);
	--lb-container: 76rem;
	--lb-container-narrow: 44rem;

	/* --- Surface --------------------------------------------------------
	   A small radius on panels only. Photography and video stay square, so
	   the radius reads as "this is a document element" rather than decoration. */
	--lb-radius:      4px;
	--lb-radius-pill: 999px;

	--lb-shadow-panel: 0 1px 2px rgba(15, 27, 45, 0.04),
	                   0 6px 20px rgba(15, 27, 45, 0.06);

	--lb-hairline: 1px solid var(--lb-rule);

	--lb-ease: cubic-bezier(0.2, 0.6, 0.25, 1);
	--lb-duration: 220ms;

	/* Height of the hero. Kept as a token so a company site can run a
	   shallower hero than a loan officer site without touching templates. */
	--lb-hero-min: clamp(30rem, 62vh, 44rem);
}


/* ==========================================================================
   2. ELEMENTOR GLOBALS BRIDGE

   Elementor's Site Settings > Global Colors compile to --e-global-color-*.
   Binding our tokens to those makes the Elementor colour picker the control
   surface for a site's brand, with no CSS to write per site.

   Custom properties resolve at use time, so this works regardless of whether
   the kit stylesheet loads before or after this file. The fallbacks keep the
   theme correct on a site with no kit configured.

     Primary   -> brand colour        (buttons, links, accents)
     Secondary -> deep ink            (headings, footer ground)
     Text      -> body copy
     Accent    -> brand hover/pressed
   ========================================================================== */

:root,
body {
	--lb-accent:       var(--e-global-color-primary,   #A9752E);
	--lb-accent-hover: var(--e-global-color-accent,    #8A5E22);
	--lb-ink:          var(--e-global-color-text,      #24303F);
	--lb-ink-deep:     var(--e-global-color-secondary, #0F1B2D);
	--lb-accent-text:  var(--lb-accent);
}


/* ==========================================================================
   3. FOUNDATIONS
   ========================================================================== */

body {
	background-color: var(--lb-paper);
	color: var(--lb-ink);
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	line-height: var(--lb-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--lb-font-display);
	font-weight: var(--lb-weight-regular);
	line-height: var(--lb-leading-tight);
	letter-spacing: var(--lb-tracking-display);
	color: var(--lb-ink-deep);
	text-wrap: balance;
}

/* Newsreader's optical size axis: larger settings open the counters and cut
   the contrast, which is what stops display type reading as inflated body. */
h1 { font-size: var(--lb-display-lg); font-variation-settings: 'opsz' 60; }
h2 { font-size: var(--lb-display-md); font-variation-settings: 'opsz' 40; }
h3 { font-size: var(--lb-display-sm); font-variation-settings: 'opsz' 24; }
h4 {
	font-size: var(--lb-text-xl);
	line-height: var(--lb-leading-snug);
	font-variation-settings: 'opsz' 16;
}

p { max-width: var(--lb-measure); }

a {
	color: var(--lb-accent-text);
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color var(--lb-duration) var(--lb-ease),
	            color var(--lb-duration) var(--lb-ease);
}

a:hover { text-decoration-color: currentColor; }

img { max-width: 100%; height: auto; }

/* Every figure on this site is a number in a column of numbers. */
.lb-nums,
.lb-figure,
table td,
table th {
	font-variant-numeric: tabular-nums lining-nums;
}


/* ==========================================================================
   4. ELEMENTOR & PARENT-THEME STRUCTURE

   Three separate mechanisms fight an ordinary child theme here. All three are
   documented because all three fail SILENTLY - valid CSS, correct classes,
   wrong result.
   ========================================================================== */

/* --- 4a. Containers take layout from custom properties -------------------
   `.e-con` applies display:var(--display), flex-direction:var(--flex-direction),
   width:var(--width), padding-inline:var(--padding-left/right) and so on, and
   reinforces several at two-class specificity:

     .e-con.e-flex{--flex-direction:column}
     .e-con-full.e-flex{flex-direction:var(--flex-direction)}

   A single-class rule loses and the container becomes a full-width vertical
   stack. So container layout is expressed by setting those variables at
   `.e-con.<class>` specificity, AND restated as plain properties, because the
   variable chain has several links and any one of them breaking collapses the
   layout. Belt and braces on purpose. */

/* --- 4b. Widgets bind to the Kit's globals -------------------------------
   Elementor emits, per document:

     .elementor-widget-heading .elementor-heading-title {
         font-size: var(--e-global-typography-primary-font-size);
         color:     var(--e-global-color-primary);
     }

   which makes every heading one size in the brand colour, the nav display-sized,
   and text widgets take the global text colour regardless of their surface.
   The theme owns type and colour; the Kit owns the brand hue that section 2
   reads. So the scale is restated one notch more specific here. */

.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
	font-family: var(--lb-font-display);
	font-weight: var(--lb-weight-regular);
	line-height: var(--lb-leading-tight);
	letter-spacing: var(--lb-tracking-display);
	color: var(--lb-ink-deep);
}

.elementor-widget-heading h1.elementor-heading-title { font-size: var(--lb-display-lg); font-variation-settings: 'opsz' 60; }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--lb-display-md); font-variation-settings: 'opsz' 40; }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--lb-display-sm); font-variation-settings: 'opsz' 24; }
.elementor-widget-heading h4.elementor-heading-title {
	font-size: var(--lb-text-xl);
	line-height: var(--lb-leading-snug);
	font-variation-settings: 'opsz' 16;
}

/* Text widgets take their colour from the surface they sit on, not the global.
   Without this, copy on the dark footer renders in the dark body colour. */
.elementor-widget-text-editor { color: inherit; }

/* A wrapper class can set type and hand it down: Elementor puts the widget's
   CSS Classes on the OUTER wrapper, never on the heading inside it. */
.lb-figure.elementor-widget-heading .elementor-heading-title,
.lb-label.elementor-widget-heading .elementor-heading-title,
.lb-brand__name.elementor-widget-heading .elementor-heading-title,
.lb-foot__title.elementor-widget-heading .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	font-variation-settings: inherit;
	margin: 0;
}

/* --- 4c. Hello Elementor's bare-button reset -----------------------------
   reset.css styles every unclassed <button>:

     [type=button],button          { border:1px solid #c36; color:#c36 }
     [type=button]:hover,:focus,
     button:hover, button:focus    { background-color:#c36; color:#fff }

   Both properties, on both states. Overriding only the background leaves white
   text on a near-white ground - invisible rather than merely wrong. And :focus
   is NOT covered by a :focus-visible rule: returning focus programmatically
   after a mouse interaction fires :focus while browsers withhold
   :focus-visible, which is exactly when a control seems to disappear.

   Any bare <button> added to this theme needs the same treatment. */

.lb-btn-plain,
.lb-btn-plain:hover,
.lb-btn-plain:focus,
.lb-btn-plain:focus-visible,
.lb-btn-plain:active {
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.e-con.lb-container {
	--width: 100%;
	--margin-left: auto;
	--margin-right: auto;
	--padding-left: var(--lb-gutter);
	--padding-right: var(--lb-gutter);
	max-width: var(--lb-container);
	margin-inline: auto;
	padding-inline: var(--lb-gutter);
}

.e-con.lb-container--narrow {
	max-width: calc(var(--lb-container-narrow) + var(--lb-gutter) * 2);
}

.e-con.lb-section {
	--padding-top: var(--lb-section-y);
	--padding-bottom: var(--lb-section-y);
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: 0px;
	padding-block: var(--lb-section-y);
	padding-inline: 0;
}

.lb-section--mist    { background-color: var(--lb-mist); }
.lb-section--ink     { background-color: var(--lb-ink-deep); color: var(--lb-paper); }
.lb-section--tint    { background-color: var(--lb-accent-tint); }

.lb-section--ink h1,
.lb-section--ink h2,
.lb-section--ink h3,
.lb-section--ink h4,
.lb-section--ink .elementor-heading-title { color: var(--lb-paper); }

/* Grids. Plain elements inside HTML widgets, so ordinary CSS applies. */
.lb-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--lb-space-xl); }
.lb-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--lb-space-lg); }
.lb-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--lb-space-lg); }

.e-con.lb-row {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-items: center;
	--column-gap: var(--lb-space-sm);
	--row-gap: var(--lb-space-sm);
	--width: auto;
	--padding-left: 0px;
	--padding-right: 0px;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-sm);
	width: auto;
	padding-inline: 0;
}

.e-con.lb-heading {
	--flex-direction: column;
	--row-gap: var(--lb-space-sm);
	--padding-left: 0px;
	--padding-right: 0px;
	--padding-top: 0px;
	--padding-bottom: var(--lb-space-md);
	--margin-bottom: var(--lb-space-xl);
	flex-direction: column;
	gap: var(--lb-space-sm);
	padding: 0 0 var(--lb-space-md);
	margin-bottom: var(--lb-space-xl);
	border-bottom: var(--lb-hairline);
}

@media (min-width: 900px) {
	.e-con.lb-heading--split {
		--flex-direction: row;
		--align-items: baseline;
		--justify-content: space-between;
		--column-gap: var(--lb-space-xl);
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--lb-space-xl);
	}
}

.lb-lead,
.elementor-widget-text-editor.lb-lead {
	font-size: var(--lb-text-lg);
	line-height: 1.5;
	max-width: var(--lb-measure-lead);
	color: var(--lb-ash);
}


/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* --- Label ---------------------------------------------------------------
   The one place tracked-out small caps earn their keep: these mark regulated
   or structural information (NMLS, disclosure headings, step numbers), where
   the convention is the point. Not used as decorative eyebrows above headings. */

.lb-label {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-ash);
	line-height: 1.2;
}

/* --- Buttons -------------------------------------------------------------
   Elementor prints button styling inline, so these target the inner
   .elementor-button and win on specificity. */

.lb-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lb-space-2xs);
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 1.05em 1.9em;
	border: 1px solid var(--lb-accent);
	border-radius: var(--lb-radius);
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
	text-decoration: none;
	transition: background-color var(--lb-duration) var(--lb-ease),
	            border-color var(--lb-duration) var(--lb-ease),
	            color var(--lb-duration) var(--lb-ease);
}

.lb-btn .elementor-button:hover,
.lb-btn .elementor-button:focus-visible {
	background-color: var(--lb-accent-hover);
	border-color: var(--lb-accent-hover);
	color: var(--lb-on-accent);
}

.lb-btn--quiet .elementor-button {
	background-color: transparent;
	border-color: var(--lb-ink-deep);
	color: var(--lb-ink-deep);
}

.lb-btn--quiet .elementor-button:hover,
.lb-btn--quiet .elementor-button:focus-visible {
	background-color: var(--lb-ink-deep);
	border-color: var(--lb-ink-deep);
	color: var(--lb-paper);
}

/* Over the hero video. */
.lb-btn--inverse .elementor-button {
	background-color: var(--lb-surface);
	border-color: var(--lb-surface);
	color: var(--lb-ink-deep);
}

.lb-btn--inverse .elementor-button:hover,
.lb-btn--inverse .elementor-button:focus-visible {
	background-color: transparent;
	border-color: var(--lb-surface);
	color: var(--lb-surface);
}

/* --- Hero ----------------------------------------------------------------
   Markup comes from lb_lender_hero() in functions.php. The poster is a real
   <img> so it can be the LCP element; the Vimeo iframe is layered over it and
   faded in once playing, and is never loaded at all under reduced motion or
   when the browser reports a metered or slow connection. */

.lb-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--lb-hero-min);
	overflow: hidden;
	background-color: var(--lb-ink-deep);
	isolation: isolate;
}

.lb-hero__media,
.lb-hero__poster,
.lb-hero__frame {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.lb-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lb-hero__frame {
	z-index: -1;
	opacity: 0;
	transition: opacity 900ms var(--lb-ease);
	pointer-events: none;
	border: 0;
}

.lb-hero.is-playing .lb-hero__frame { opacity: 1; }

/* Cover an arbitrary hero box with a 16:9 player. */
.lb-hero__frame iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;          /* 16:9 of viewport width */
	min-height: 100%;
	min-width: 177.78vh;      /* 16:9 of hero height */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* Scrim. Strong enough for AA on white display type without flattening the
   footage: darkest at the bottom where the copy sits. */
.lb-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(15, 27, 45, 0.55) 0%,
		rgba(15, 27, 45, 0.42) 45%,
		rgba(15, 27, 45, 0.68) 100%
	);
	pointer-events: none;
}

.lb-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--lb-container);
	margin-inline: auto;
	padding: var(--lb-space-2xl) var(--lb-gutter);
	color: var(--lb-surface);
}

.lb-hero__eyebrow {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--lb-space-sm);
}

.lb-hero__heading {
	font-family: var(--lb-font-display);
	font-size: var(--lb-display-lg);
	font-variation-settings: 'opsz' 72;
	line-height: 1.02;
	letter-spacing: var(--lb-tracking-display);
	color: var(--lb-surface);
	margin: 0;
	max-width: 18ch;
	text-wrap: balance;
}

.lb-hero__sub {
	margin-top: var(--lb-space-md);
	font-size: var(--lb-text-lg);
	color: rgba(255, 255, 255, 0.88);
	max-width: 46ch;
}

.lb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-sm);
	margin-top: var(--lb-space-lg);
}

/* --- Site header ---------------------------------------------------------
   Containers, so layout is set through Elementor's custom properties AND
   restated as plain properties. See section 4a. */

.e-con.lb-head {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	background-color: var(--lb-surface);
	border-bottom: var(--lb-hairline);
	padding: 0;
}

.e-con.lb-head__bar {
	--flex-direction: row;
	--align-items: center;
	--justify-content: space-between;
	--flex-wrap: nowrap;
	--column-gap: var(--lb-space-lg);
	--padding-top: var(--lb-space-sm);
	--padding-bottom: var(--lb-space-sm);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: var(--lb-space-lg);
	padding-block: var(--lb-space-sm);
}

.e-con.lb-brand {
	--flex-direction: column;
	--row-gap: 0px;
	--width: auto;
	--align-items: flex-start;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: auto;
	padding: 0;
}

.lb-brand__name {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 18;
	line-height: 1.15;
	letter-spacing: var(--lb-tracking-display);
	color: var(--lb-ink-deep);
}

/* The wordmark links home. Two things make it behave like a logo rather than
   a linked word:

   1. A hover state, so it reads as interactive at all.
   2. A stretched hit area. The anchor sits on the name only, but the company
      line beneath it is visually part of the same mark - people click it and
      nothing happens. The pseudo-element expands the anchor over the whole
      brand block, so the entire lockup is one target. */

.e-con.lb-brand { position: relative; }

.lb-brand__name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--lb-duration) var(--lb-ease);
}

.lb-brand__name a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lb-brand__name a:hover,
.lb-brand__name a:focus-visible {
	color: var(--lb-accent-text);
}

/* Focus lands on the small anchor, so put the ring around the whole lockup. */
.e-con.lb-brand:focus-within {
	outline: 2px solid var(--lb-accent);
	outline-offset: 6px;
	border-radius: 2px;
}

.lb-brand__name a:focus-visible { outline: none; }

.lb-brand__meta {
	font-size: var(--lb-text-xs);
	line-height: 1.3;
	color: var(--lb-ash);
}

/* A company logo replaces the wordmark when one is uploaded. Height-capped so
   any aspect ratio - a wide lockup or a near-square badge - sits on the same
   baseline as the nav beside it. */
.lb-brand__logo {
	display: block;
	position: relative;
	z-index: 1;
}

.lb-brand__logo img {
	display: block;
	width: auto;
	height: auto;
	max-height: 2.75rem;
	max-width: 13rem;
}

.lb-brand__logo--tall img {
	max-height: 3.5rem;
	max-width: 10rem;
}

@media (max-width: 600px) {
	.lb-brand__logo img {
		max-height: 2.25rem;
		max-width: 9.5rem;
	}

	.lb-brand__logo--tall img {
		max-height: 2.75rem;
		max-width: 7.5rem;
	}
}

.e-con.lb-head__actions {
	--flex-direction: row;
	--align-items: center;
	--flex-wrap: nowrap;
	--column-gap: var(--lb-space-md);
	--width: auto;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--lb-space-md);
	width: auto;
	padding: 0;
}

.lb-head__phone {
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-medium);
	color: var(--lb-ink-deep);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Elementor's nav widget binds its type to the Kit's primary global, which
   would set the menu in display-sized serif. Restated at matching specificity
   so file order decides, and its pointer pseudo-elements are turned off since
   we draw our own underline. */
.lb-nav { width: auto; }

.lb-nav .elementor-nav-menu .elementor-item {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-medium);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--lb-ink-deep);
	padding: var(--lb-space-2xs) var(--lb-space-xs);
	background-color: transparent;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: var(--lb-space-xs) calc(100% - 0.3em);
	background-size: 0% 1px;
	transition: background-size 300ms var(--lb-ease), color 180ms var(--lb-ease);
}

.lb-nav .elementor-nav-menu .elementor-item:hover,
.lb-nav .elementor-nav-menu .elementor-item:focus-visible,
.lb-nav .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--lb-accent-text);
	background-size: calc(100% - var(--lb-space-xs) * 2) 1px;
}

.lb-nav .elementor-nav-menu .elementor-item::before,
.lb-nav .elementor-nav-menu .elementor-item::after {
	display: none !important;
}

/* --- Dropdowns -----------------------------------------------------------
   CAREFUL: Elementor puts `elementor-nav-menu--dropdown` on TWO different
   things - the mobile <nav> container, and every desktop <ul class="sub-menu">.
   Hiding the class outright hides every dropdown, which makes the child pages
   unreachable and leaves SmartMenus fighting to open a menu it cannot show.
   Target the mobile container by its second class instead. */

/* Elementor switches between the inline list and the burger at its own
   breakpoint (the widget carries `--dropdown-tablet`). Do NOT hide the toggle
   or the dropdown container here: doing so leaves phones with no navigation at
   all, because the inline list is hidden at that width too. Style them instead
   and let Elementor own the switching. */

.lb-nav .elementor-menu-toggle {
	background-color: transparent;
	border: 1px solid var(--lb-rule);
	border-radius: var(--lb-radius);
	color: var(--lb-ink-deep);
	padding: 0.55em;
	cursor: pointer;
}

.lb-nav .elementor-menu-toggle:hover,
.lb-nav .elementor-menu-toggle:focus,
.lb-nav .elementor-menu-toggle:focus-visible {
	background-color: var(--lb-mist);
	border-color: var(--lb-ink-deep);
	color: var(--lb-ink-deep);
}

.lb-nav .elementor-menu-toggle svg {
	width: 1.35em;
	height: 1.35em;
	fill: currentColor;
}

/* The mobile panel. Full width under the header rather than a floating card,
   which is what people expect on a phone and gives the tap targets room. */
.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	background-color: var(--lb-surface);
	border-top: var(--lb-hairline);
	box-shadow: var(--lb-shadow-panel);
}

.lb-nav .elementor-nav-menu--dropdown a.elementor-item,
.lb-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
	padding: 0.95em var(--lb-gutter);
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-medium);
	color: var(--lb-ink-deep);
	border-bottom: var(--lb-hairline);
	background-color: transparent;
	background-image: none;
	white-space: normal;
}

.lb-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
	padding-inline-start: calc(var(--lb-gutter) + var(--lb-space-md));
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-regular);
	color: var(--lb-ash);
}

.lb-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.lb-nav .elementor-nav-menu--dropdown a.elementor-item:focus,
.lb-nav .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.lb-nav .elementor-nav-menu--dropdown a.elementor-sub-item:focus {
	background-color: var(--lb-mist);
	color: var(--lb-accent-text);
}

/* Position and appearance only. SmartMenus toggles display inline, so setting
   display here would fight it. */
.lb-nav .elementor-nav-menu--main li { position: relative; }

.lb-nav .elementor-nav-menu--main .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15rem;
	padding: var(--lb-space-2xs) 0;
	margin: 0;
	list-style: none;
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-radius: var(--lb-radius);
	box-shadow: var(--lb-shadow-panel);
	z-index: 60;
}

.lb-nav .elementor-nav-menu--main .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.lb-nav .elementor-sub-item {
	display: block;
	padding: 0.5em var(--lb-space-md);
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-regular);
	line-height: 1.35;
	color: var(--lb-ink);
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	transition: color var(--lb-duration) var(--lb-ease),
	            background-color var(--lb-duration) var(--lb-ease);
}

.lb-nav .elementor-sub-item:hover,
.lb-nav .elementor-sub-item:focus,
.lb-nav .elementor-sub-item:focus-visible,
.lb-nav .elementor-sub-item.elementor-item-active {
	color: var(--lb-accent-text);
	background-color: var(--lb-mist);
}

/* A dropdown cannot escape a clipped ancestor. */
.lb-nav,
.e-con.lb-head,
.e-con.lb-head__bar,
header.elementor-location-header {
	overflow: visible;
}

/* --- Keeping the top row from reflowing ----------------------------------
   Three separate things can change a first-level item's width, and all of
   them present as the same symptom: the row jumps as the pointer moves.

   1. SmartMenus injects <span class="sub-arrow"> into every parent anchor
      after load. That markup does not exist server-side, so the items are
      one width on paint and another once the script runs. The arrow is given
      fixed dimensions here so its arrival cannot resize anything.

   2. Long child labels with white-space:nowrap made the dropdown wider than
      the space to the right of it, pushing past the viewport edge, adding a
      horizontal scrollbar and shifting the entire page. Child labels now wrap
      and the panel is capped.

   3. Flex items grow to fill by default. The top-level items are pinned so
      they cannot.
   -------------------------------------------------------------------------- */

.lb-nav .elementor-nav-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-nav .elementor-nav-menu > li {
	flex: 0 0 auto;
	position: relative;
}

.lb-nav .elementor-nav-menu .elementor-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-weight: var(--lb-weight-medium);
	letter-spacing: 0;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* THE ARROW MUST NOT BE IN THE FLOW.
   Elementor Pro initialises SmartMenus lazily, and SmartMenus injects
   <span class="sub-arrow"> into each parent anchor at that moment - which is
   the first hover, not page load. An in-flow arrow therefore appears mid
   interaction and widens the item under the pointer, and the rest of the row
   shifts with it. Measured: +15.75px on a 15px item, exactly the arrow plus
   its gap.

   Reserving the space with padding and positioning the arrow into it makes
   the item's width identical whether the arrow exists or not, so nothing can
   move when it arrives. */

/* SmartMenus' arrow is removed from the page entirely rather than styled.

   Anything the script inserts into the anchor participates in layout the
   moment it appears, and it appears after first paint. Sizing it, or taking it
   out of flow, still leaves the browser reflowing that item when the node
   arrives. The only way to guarantee the width never moves is for the injected
   node to occupy no space at all. */
.lb-nav .elementor-item .sub-arrow {
	display: none !important;
}

.lb-nav .elementor-nav-menu--main .sub-menu {
	position: absolute !important;
}

/* ==========================================================================
   THE PADDING JUMP

   Elementor Pro ships this, in one rule:

     .elementor-nav-menu--main .elementor-nav-menu a,
     .elementor-nav-menu--main .elementor-nav-menu a.highlighted,
     .elementor-nav-menu--main .elementor-nav-menu a:focus,
     .elementor-nav-menu--main .elementor-nav-menu a:hover { padding: 13px 20px }

   The selectors in that list carry DIFFERENT specificities, so which one wins
   changes with the element's state:

     at rest   `... a`        is (0,2,1) - loses to our (0,3,0), padding 12px
     on hover  `... a:hover`  is (0,3,1) - BEATS our (0,3,0), padding 20px

   The item therefore grows the moment the pointer touches it and the whole row
   reflows. Nothing appears wrong in either state on its own, which is why
   grepping for "hover rules that change width" found nothing: the hover rule
   does not change the padding, it changes which rule applies.

   The fix is specificity, not a different property. Matching Elementor's
   `a.elementor-item` shape and adding our own class puts these at (0,4,1),
   which outranks the hover variant, and every state is declared so none can
   fall through to it.
   ========================================================================== */

.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus-visible,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active {
	padding-block: var(--lb-space-2xs);
	padding-inline-start: var(--lb-space-xs);
	padding-inline-end: var(--lb-space-xs);
	line-height: 1.2;
}

/* Parent items keep the room reserved for the chevron, in every state. */
.lb-nav .elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children > a.elementor-item,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children > a.elementor-item:hover,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children > a.elementor-item:focus,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu li.menu-item-has-children > a.elementor-item.highlighted {
	padding-inline-end: 1.65em;
}

/* Dropdown items are governed by the same Elementor rule, so they get the
   same treatment rather than shifting when you move down the list. */
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:hover,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:focus,
.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item.highlighted {
	padding-block: 0.5em;
	padding-inline: var(--lb-space-md);
}

/* The dropdown indicator is therefore a BACKGROUND IMAGE, not an element.
   Backgrounds are painted, never laid out, so this cannot change the item's
   width under any circumstances. It is present from first paint, so there is
   no before/after state to shift between.

   Elementor's pointer effects own ::before and ::after on these anchors, which
   is why this is a background rather than a pseudo-element - the underline in
   the rule above is a second background layer on the same element. */
.lb-nav .elementor-nav-menu > li.menu-item-has-children > .elementor-item {
	padding-inline-end: 1.65em;
	background-image:
		linear-gradient(currentColor, currentColor),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B6779' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: var(--lb-space-xs) calc(100% - 0.3em), right 0.55em center;
	background-size: 0% 1px, 0.55em 0.34em;
}

.lb-nav .elementor-nav-menu > li.menu-item-has-children > .elementor-item:hover,
.lb-nav .elementor-nav-menu > li.menu-item-has-children > .elementor-item:focus-visible,
.lb-nav .elementor-nav-menu > li.menu-item-has-children > .elementor-item.elementor-item-active {
	background-size: calc(100% - var(--lb-space-xs) - 1.65em) 1px, 0.55em 0.34em;
}

/* The panel may not be wider than the room available to its right. */
.lb-nav .elementor-nav-menu--main .sub-menu {
	max-width: min(20rem, calc(100vw - 2rem));
	box-sizing: border-box;
}

.lb-nav .elementor-sub-item {
	white-space: normal;
	overflow-wrap: break-word;
}

/* The rightmost items open leftwards, so a dropdown near the end of the row
   cannot run off the edge of the page. */
.lb-nav .elementor-nav-menu > li:nth-last-child(-n+2) > .sub-menu {
	left: auto;
	right: 0;
}

.lb-nav .elementor-nav-menu > li:nth-last-child(-n+2) > .sub-menu .sub-menu {
	left: auto;
	right: 100%;
}

@media (max-width: 979px) {
	/* Only the phone number comes out of the bar - the number is repeated in
	   the action bar at the bottom of the screen. Navigation is NOT hidden
	   here; Elementor swaps the inline list for the burger by itself. */
	.lb-head__phone { display: none; }
}

/* ==========================================================================
   MOBILE

   The template was built desktop-first and these are the places that needed
   adjusting for a phone. Each is a specific measurement, not a blanket
   scale-down.
   ========================================================================== */

@media (max-width: 767px) {
	/* A 480px hero is most of a phone screen before any content appears. */
	:root { --lb-hero-min: clamp(22rem, 56vh, 30rem); }

	.lb-hero__heading { max-width: none; }

	.lb-hero__actions { gap: var(--lb-space-2xs); }

	.lb-hero__actions .lb-btn-inline,
	.lb-hero__cta {
		flex: 1 1 100%;
		justify-content: center;
	}

	/* Two 20rem columns cannot both fit; one 320px column plus gutters already
	   exceeds a 360px screen. */
	.lb-grid-2 { grid-template-columns: 1fr; gap: var(--lb-space-lg); }

	/* The results panel is sticky on desktop; on a phone it simply follows the
	   inputs, and stickiness would eat the viewport. */
	.lb-calc__results { position: static; }

	.lb-calc__inputs { grid-template-columns: 1fr 1fr; gap: var(--lb-space-sm); }

	.lb-calc__figure { font-size: var(--lb-figure-md); }

	/* Figures four-across become two-across rather than shrinking to nothing. */
	.lb-figures { grid-template-columns: repeat(2, 1fr); }

	.lb-officer { gap: var(--lb-space-lg); }

	.lb-panel { padding: var(--lb-space-md); }

	/* Buttons in a row become full-width stacked targets. */
	.e-con.lb-row { width: 100%; }

	.e-con.lb-row .elementor-widget-button,
	.e-con.lb-row .lb-btn { width: 100%; }

	.lb-btn .elementor-button { width: 100%; }
}

@media (max-width: 479px) {
	.lb-calc__inputs { grid-template-columns: 1fr; }
	.lb-figures { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBILE ACTION BAR

   Mortgage traffic is majority mobile and mortgage buyers call. A persistent
   Call / Text / Apply bar is the highest-value fixed element on a phone.

   Text is included deliberately: loan officers close a large share of business
   over SMS, and a tel: link is useless to someone who would rather type.
   ========================================================================== */

.lb-actionbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	background-color: var(--lb-ink-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	/* Clears the iOS home indicator. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -2px 16px rgba(15, 27, 45, 0.18);
}

.lb-actionbar__inner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.lb-actionbar__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	/* Comfortably above the 44px minimum touch target. */
	min-height: 3.6rem;
	padding: 0.5rem 0.25rem;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	line-height: 1;
	color: var(--lb-surface);
	text-decoration: none;
	background-color: transparent;
	border: 0;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

.lb-actionbar__link:first-child { border-inline-start: 0; }

.lb-actionbar__link:hover,
.lb-actionbar__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--lb-surface);
}

.lb-actionbar__link--apply {
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
}

.lb-actionbar__link--apply:hover,
.lb-actionbar__link--apply:focus-visible {
	background-color: var(--lb-accent-hover);
	color: var(--lb-on-accent);
}

.lb-actionbar__icon {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 979px) {
	.lb-actionbar { display: block; }

	/* Stop the bar covering the end of the page, including the disclosure -
	   which must stay readable. */
	body.lb-has-actionbar {
		padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px));
	}
}

@media print {
	.lb-actionbar { display: none; }
}

/* --- Hero wrapper and inline CTAs ----------------------------------------
   The hero is theme-rendered, so its buttons are plain anchors rather than
   Elementor button widgets and need their own styling. */

.e-con.lb-hero-wrap {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	padding: 0;
}

.lb-btn-inline,
.lb-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	line-height: 1;
	padding: 1.05em 1.9em;
	border: 1px solid var(--lb-surface);
	border-radius: var(--lb-radius);
	background-color: var(--lb-surface);
	color: var(--lb-ink-deep);
	text-decoration: none;
	transition: background-color var(--lb-duration) var(--lb-ease),
	            color var(--lb-duration) var(--lb-ease);
}

.lb-btn-inline:hover,
.lb-btn-inline:focus-visible {
	background-color: var(--lb-accent);
	border-color: var(--lb-accent);
	color: var(--lb-on-accent);
}

.lb-btn-inline--ghost {
	background-color: transparent;
	color: var(--lb-surface);
}

.lb-btn-inline--ghost:hover,
.lb-btn-inline--ghost:focus-visible {
	background-color: var(--lb-surface);
	border-color: var(--lb-surface);
	color: var(--lb-ink-deep);
}

/* --- Services ------------------------------------------------------------ */

.lb-service {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-2xs);
	padding-top: var(--lb-space-sm);
	border-top: 2px solid var(--lb-ink-deep);
}

.lb-service__title {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 16;
	line-height: 1.2;
	color: var(--lb-ink-deep);
	margin: 0 0 var(--lb-space-2xs);
}

.lb-service__text {
	font-size: var(--lb-text-sm);
	line-height: 1.6;
	color: var(--lb-ash);
	margin: 0;
	max-width: 42ch;
}

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

.e-con.lb-foot {
	--padding-top: var(--lb-space-2xl);
	--padding-bottom: var(--lb-space-xl);
	--padding-left: 0px;
	--padding-right: 0px;
	--row-gap: var(--lb-space-xl);
	padding-block: var(--lb-space-2xl) var(--lb-space-xl);
	padding-inline: 0;
}

.e-con.lb-foot__grid {
	--display: grid;
	--row-gap: var(--lb-space-xl);
	--column-gap: var(--lb-space-xl);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--lb-space-xl);
}

.e-con.lb-foot__col {
	--flex-direction: column;
	--row-gap: var(--lb-space-3xs);
	--width: 100%;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	flex-direction: column;
	gap: var(--lb-space-3xs);
	padding: 0;
}

.lb-foot__name {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 18;
	line-height: 1.2;
	color: var(--lb-surface);
}

/* No reading measure here: the global `p` max-width is sized for body copy and
   at this font size it wraps the legal links and Portal onto a second line. */
.lb-foot__copy {
	max-width: none;
	margin-top: var(--lb-space-md);
	font-size: var(--lb-text-2xs);
	color: rgba(255, 255, 255, 0.55);
}

/* Site credit [lb_site_credit], under the copyright: the quietest line on
   the page. The underline draws in on hover and keyboard focus. */
.lb-credit { max-width: none; margin-top: 0.35rem; font-size: var(--lb-text-2xs); letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.45); }
.lb-credit a { position: relative; color: rgba(255, 255, 255, 0.72); font-weight: var(--lb-weight-semibold); text-decoration: none; }
.lb-credit a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--lb-ease);
}
.lb-credit a:is(:hover, :focus-visible) { color: #FFFFFF; }
.lb-credit a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .lb-credit a::after { transition: none; } }

/* Portal: this site's login, set apart from the legal links as a small pill. */
.lb-foot__copy a.lb-foot__portal {
	display: inline-flex;
	align-items: center;
	margin-left: var(--lb-space-2xs);
	padding: 0.3em 0.9em;
	vertical-align: middle;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--lb-radius-pill);
	color: #FFFFFF;
	font-weight: var(--lb-weight-bold);
	text-decoration: none;
	transition: background-color var(--lb-duration) var(--lb-ease),
	            border-color var(--lb-duration) var(--lb-ease);
}

.lb-foot__copy a.lb-foot__portal:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.55);
}

/* --- Regulatory marks ----------------------------------------------------
   The Equal Housing mark is drawn as inline SVG rather than loaded as an
   image so it inherits currentColor and stays crisp; the licence numbers sit
   beside it because that is how the disclosure is normally read. */

.lb-mark {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-space-2xs);
	font-size: var(--lb-text-2xs);
	color: rgba(255, 255, 255, 0.72);
	font-variant-numeric: tabular-nums;
}

.lb-mark--ehl svg {
	width: 1.9rem;
	height: 1.9rem;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.82);
}

.lb-mark__text { white-space: nowrap; }

.lb-mark--nmls { white-space: nowrap; }

/* --- Figures -------------------------------------------------------------
   The number is the content, so it gets display sizing and the label stays
   small. Rules above rather than boxes around: a table of figures, not cards. */

.lb-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--lb-space-lg) var(--lb-space-md);
}

.lb-figure {
	padding-top: var(--lb-space-sm);
	border-top: 2px solid var(--lb-ink-deep);
}

.lb-figure__value {
	display: block;
	font-family: var(--lb-font-text);
	font-size: var(--lb-figure-md);
	font-weight: var(--lb-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--lb-ink-deep);
	font-variant-numeric: tabular-nums lining-nums;
}

.lb-figure__label {
	display: block;
	margin-top: var(--lb-space-2xs);
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
	max-width: 24ch;
}

.lb-section--ink .lb-figure { border-top-color: var(--lb-accent); }
.lb-section--ink .lb-figure__value { color: var(--lb-surface); }
.lb-section--ink .lb-figure__label { color: rgba(255, 255, 255, 0.72); }

/* --- Pathways ------------------------------------------------------------
   Purchase / Refinance / Loan Programs. The three doors into the site. */

.lb-path {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-xs);
	padding: var(--lb-space-lg);
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-radius: var(--lb-radius);
	border-top: 3px solid var(--lb-accent);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--lb-duration) var(--lb-ease),
	            transform var(--lb-duration) var(--lb-ease);
}

.lb-path:hover,
.lb-path:focus-visible {
	box-shadow: var(--lb-shadow-panel);
	transform: translateY(-2px);
}

.lb-path__title {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 16;
	line-height: 1.2;
	color: var(--lb-ink-deep);
}

.lb-path__text {
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
	margin: 0;
}

.lb-path__more {
	margin-top: auto;
	padding-top: var(--lb-space-sm);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-accent-text);
}

/* --- Steps ---------------------------------------------------------------
   A real sequence, so numbering is information rather than decoration. The
   rule under each step is a progress measure, not a divider. */

.lb-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--lb-space-lg) var(--lb-space-md);
	counter-reset: lb-step;
}

.lb-step { counter-increment: lb-step; }

.lb-step__num {
	display: block;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-xl);
	font-weight: var(--lb-weight-bold);
	font-variant-numeric: tabular-nums;
	color: var(--lb-ink-deep);
	line-height: 1;
}

.lb-step__num::before { content: '0' counter(lb-step); }

.lb-step__name {
	display: block;
	margin-top: var(--lb-space-2xs);
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
}

.lb-step__bar {
	display: block;
	height: 3px;
	margin-top: var(--lb-space-sm);
	background-color: var(--lb-rule);
	border-radius: 2px;
	overflow: hidden;
}

.lb-step__bar::before {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	background-color: var(--lb-accent);
	transform-origin: left;
	transform: scaleX(var(--lb-step-fill, 1));
}

/* --- Panel ---------------------------------------------------------------
   A bordered surface for content that behaves like a form or a statement:
   calculators, rate tables, disclosures. */

.lb-panel {
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-radius: var(--lb-radius);
	padding: var(--lb-space-lg);
}

.lb-panel--flush { padding: 0; overflow: hidden; }

/* --- Officer -------------------------------------------------------------
   Headshot plus biography. Square rather than the circular crop the previous
   generation used: a circle crops the shoulders and reads as an avatar; a
   portrait frame reads as a professional photograph. */

/* A container, so the grid has to be declared through Elementor's variables
   as well as directly - see section 4a. */
.e-con.lb-officer {
	--display: grid;
	--row-gap: var(--lb-space-xl);
	--column-gap: var(--lb-space-xl);
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var(--lb-space-xl);
}

@media (min-width: 900px) {
	.e-con.lb-officer { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); }
}

.e-con.lb-officer__photo-wrap,
.e-con.lb-officer__body {
	--flex-direction: column;
	--row-gap: var(--lb-space-md);
	--width: 100%;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	flex-direction: column;
	gap: var(--lb-space-md);
	padding: 0;
}

.e-con.lb-officer__photo-wrap { --row-gap: var(--lb-space-sm); gap: var(--lb-space-sm); }

/* The image widget wraps the img; both need to fill the frame or the
   photograph sits in the corner of it. */
.lb-officer__photo .elementor-widget-container,
.lb-officer__photo figure,
.lb-officer__photo img {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
}

.lb-officer__photo img { object-fit: cover; }

.lb-officer__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--lb-radius);
	background-color: var(--lb-mist);
}

.lb-officer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lb-officer__nmls {
	margin-top: var(--lb-space-sm);
	font-size: var(--lb-text-xs);
	color: var(--lb-ash);
	font-variant-numeric: tabular-nums;
}

.lb-officer__body > * + * { margin-top: var(--lb-space-md); }

/* --- Page head -----------------------------------------------------------
   Interior pages open with a title rather than a hero. Tighter than a normal
   section so the content starts high on the page. */

.e-con.lb-page-head {
	--padding-top: var(--lb-space-xl);
	--padding-bottom: 0px;
	padding-block: var(--lb-space-xl) 0;
	border-bottom: 0;
}

/* --- Prose ---------------------------------------------------------------
   Ported editorial content. The source is ordinary HTML from the old site, so
   this styles element selectors rather than classes - there is nothing to hook
   onto inside it. */

.lb-prose { color: var(--lb-ink); }

.lb-prose > * + * { margin-top: var(--lb-space-md); }

.lb-prose h2 {
	font-size: var(--lb-display-sm);
	font-variation-settings: 'opsz' 24;
	margin-top: var(--lb-space-xl);
	margin-bottom: var(--lb-space-2xs);
}

.lb-prose h3 {
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 16;
	margin-top: var(--lb-space-lg);
	margin-bottom: var(--lb-space-2xs);
}

.lb-prose h4 {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
	margin-top: var(--lb-space-md);
}

.lb-prose p { margin: 0 0 var(--lb-space-md); }

.lb-prose ul,
.lb-prose ol {
	margin: 0 0 var(--lb-space-md);
	padding-left: 1.35em;
}

.lb-prose li { margin-bottom: var(--lb-space-2xs); }

.lb-prose li::marker { color: var(--lb-accent-text); }

.lb-prose strong { font-weight: var(--lb-weight-semibold); color: var(--lb-ink-deep); }

.lb-prose img { border-radius: var(--lb-radius); }

.lb-prose blockquote {
	margin: var(--lb-space-lg) 0;
	padding-left: var(--lb-space-md);
	border-left: 3px solid var(--lb-accent);
	color: var(--lb-ash);
}

/* Tables of rates or comparisons scroll rather than forcing the page sideways. */
.lb-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lb-text-sm);
	margin-bottom: var(--lb-space-md);
}

.lb-prose th,
.lb-prose td {
	text-align: left;
	padding: var(--lb-space-2xs) var(--lb-space-xs);
	border-bottom: var(--lb-hairline);
}

.lb-prose th { font-weight: var(--lb-weight-semibold); color: var(--lb-ink-deep); }

/* Statutory text: smaller, tighter, and explicitly readable. A privacy policy
   set at 12px grey-on-grey is a compliance problem, not a design decision. */
.lb-prose--legal {
	font-size: var(--lb-text-sm);
	line-height: 1.65;
	color: var(--lb-ink);
}

.lb-prose--legal h2 { font-size: var(--lb-text-xl); margin-top: var(--lb-space-lg); }
.lb-prose--legal h3 { font-size: var(--lb-text-base); }

/* --- Loan programmes -----------------------------------------------------
   Three views of one dataset: a filter, cards, and a side-by-side table. The
   visitor's question is "which of these is me?", so the filter is phrased as
   their situation rather than as product names. */

.lb-loans { display: block; }

.lb-loan__head { display: block; }

.lb-loans__filter {
	padding-bottom: var(--lb-space-md);
	border-bottom: var(--lb-hairline);
	margin-bottom: var(--lb-space-xl);
}

.lb-loans__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2xs);
	margin-top: var(--lb-space-2xs);
}

/* A bare <button>, so Hello Elementor's #c36 reset applies to it - every state
   has to be declared. See section 4c. */
.lb-chip,
.lb-chip:hover,
.lb-chip:focus,
.lb-chip:focus-visible,
.lb-chip:active {
	background-image: none;
	box-shadow: none;
	text-decoration: none;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-medium);
	line-height: 1;
	padding: 0.62em 1em;
	border: 1px solid var(--lb-rule);
	border-radius: var(--lb-radius-pill);
	background-color: var(--lb-surface);
	color: var(--lb-ink);
	cursor: pointer;
	transition: background-color var(--lb-duration) var(--lb-ease),
	            border-color var(--lb-duration) var(--lb-ease),
	            color var(--lb-duration) var(--lb-ease);
}

.lb-chip:hover,
.lb-chip:focus-visible {
	border-color: var(--lb-accent);
	color: var(--lb-accent-text);
}

.lb-chip.is-on,
.lb-chip.is-on:hover,
.lb-chip.is-on:focus,
.lb-chip.is-on:focus-visible {
	background-color: var(--lb-ink-deep);
	border-color: var(--lb-ink-deep);
	color: var(--lb-surface);
}

.lb-loans__count {
	margin: var(--lb-space-sm) 0 0;
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
}

.lb-loans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--lb-space-lg);
}

.lb-loan {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-sm);
	padding: var(--lb-space-lg);
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-top: 3px solid var(--lb-accent);
	border-radius: var(--lb-radius);
}

.lb-loan[hidden] { display: none; }

.lb-loan__name {
	font-family: var(--lb-font-display);
	font-size: var(--lb-display-sm);
	font-variation-settings: 'opsz' 24;
	line-height: 1.1;
	color: var(--lb-ink-deep);
	margin: 0;
}

.lb-loan__tagline {
	margin: var(--lb-space-3xs) 0 0;
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
}

/* The three facts someone actually compares, pulled out of the prose and set
   as data so they can be scanned across cards without reading. */
.lb-loan__facts {
	margin: 0;
	padding: var(--lb-space-sm) 0;
	border-top: var(--lb-hairline);
	border-bottom: var(--lb-hairline);
}

.lb-loan__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-space-sm);
	padding: 0.22em 0;
}

.lb-loan__facts dt {
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
}

.lb-loan__facts dd {
	margin: 0;
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-bold);
	color: var(--lb-ink-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Mortgage insurance is a phrase, not a figure ("Usually for the life of the
   loan"), and does not fit beside its label in a card: unwrapped it ran out
   of the card, wrapped it stacked three lines deep in a narrow column. It
   goes under its label instead, on every card so the cards stay aligned. */
.lb-loan__facts > .lb-loan__fact--stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
}

.lb-loan__fact--stack dd {
	white-space: normal;
	line-height: 1.35;
}

.lb-loan__summary {
	margin: 0;
	font-size: var(--lb-text-sm);
	line-height: 1.6;
	color: var(--lb-ink);
	max-width: none;
}

.lb-loan__more { margin-top: auto; }

.lb-loan__more summary {
	cursor: pointer;
	padding: var(--lb-space-2xs) 0;
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-accent-text);
	list-style: none;
}

.lb-loan__more summary::-webkit-details-marker { display: none; }
.lb-loan__more summary::marker { content: ''; }
.lb-loan__more summary::after { content: ' \203A'; }
.lb-loan__more[open] summary::after { content: ' \2039'; }

.lb-loan__detail { padding-top: var(--lb-space-2xs); }

.lb-label--good { color: var(--lb-positive); }
.lb-label--warn { color: var(--lb-caution); }

.lb-loan__list {
	margin: var(--lb-space-2xs) 0 var(--lb-space-md);
	padding-left: 1.1em;
	font-size: var(--lb-text-sm);
	color: var(--lb-ink);
}

.lb-loan__list li { margin-bottom: var(--lb-space-3xs); }
.lb-loan__list--pro li::marker { color: var(--lb-positive); }
.lb-loan__list--con li::marker { color: var(--lb-caution); }

.lb-loan__best,
.lb-loan__note {
	font-size: var(--lb-text-sm);
	max-width: none;
}

.lb-loan__note {
	margin-top: var(--lb-space-2xs);
	padding-top: var(--lb-space-2xs);
	border-top: var(--lb-hairline);
	color: var(--lb-ash);
	font-size: var(--lb-text-2xs);
}

.lb-loans__empty {
	margin-top: var(--lb-space-lg);
	padding: var(--lb-space-md);
	border-left: 3px solid var(--lb-accent);
	background-color: var(--lb-accent-tint);
	font-size: var(--lb-text-sm);
	max-width: var(--lb-measure);
}

/* --- Comparison table ---------------------------------------------------- */

.lb-loans__table-wrap { margin-top: var(--lb-space-2xl); }

.lb-loans__table-title {
	font-size: var(--lb-display-sm);
	font-variation-settings: 'opsz' 24;
	margin-bottom: var(--lb-space-md);
}

/* A five-column table will not fit a phone; it scrolls in its own box rather
   than making the whole page scroll sideways. */
.lb-table-scroll {
	overflow-x: auto;
	border: var(--lb-hairline);
	border-radius: var(--lb-radius);
	background-color: var(--lb-surface);
}

.lb-compare {
	width: 100%;
	min-width: 44rem;
	border-collapse: collapse;
	font-size: var(--lb-text-sm);
}

.lb-compare th,
.lb-compare td {
	padding: var(--lb-space-sm) var(--lb-space-md);
	text-align: left;
	border-bottom: var(--lb-hairline);
	vertical-align: top;
}

.lb-compare thead th {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-lg);
	font-variation-settings: 'opsz' 14;
	color: var(--lb-ink-deep);
	background-color: var(--lb-mist);
	white-space: nowrap;
}

/* The row label stays put while the columns scroll under it. */
.lb-compare tbody th {
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ash);
	background-color: var(--lb-surface);
	position: sticky;
	left: 0;
	white-space: nowrap;
}

.lb-compare tbody td {
	color: var(--lb-ink-deep);
	font-weight: var(--lb-weight-medium);
	font-variant-numeric: tabular-nums;
}

.lb-compare tr:last-child th,
.lb-compare tr:last-child td { border-bottom: 0; }

.lb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- FAQ -----------------------------------------------------------------
   Native <details>/<summary> rather than a JavaScript accordion: it is
   keyboard accessible and expandable by default, it survives with JS off, and
   browser find-in-page can open a closed answer. The previous site used an
   Ultimate Addons widget, which is a plugin dependency for something the
   platform does natively. */

.lb-faq {
	border-top: var(--lb-hairline);
}

.lb-faq__item {
	border-bottom: var(--lb-hairline);
}

.lb-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-space-md);
	padding: var(--lb-space-md) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 16;
	line-height: 1.3;
	color: var(--lb-ink-deep);
}

/* Remove the default disclosure triangle in both engines. */
.lb-faq__q::-webkit-details-marker { display: none; }
.lb-faq__q::marker { content: ''; }

/* A plus that becomes a minus. Drawn in CSS so it takes the accent token. */
.lb-faq__q::after {
	content: '';
	flex: 0 0 auto;
	width: 0.85em;
	height: 0.85em;
	margin-top: 0.2em;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 100% 1.5px, 1.5px 100%;
	background-position: center, center;
	background-repeat: no-repeat;
	color: var(--lb-accent-text);
	transition: transform 260ms var(--lb-ease);
}

.lb-faq__item[open] .lb-faq__q::after {
	background-size: 100% 1.5px, 0 100%;
	transform: rotate(180deg);
}

.lb-faq__q:hover { color: var(--lb-accent-text); }

.lb-faq__a {
	padding-bottom: var(--lb-space-md);
	color: var(--lb-ash);
	max-width: var(--lb-measure);
}

.lb-faq__a p { margin: 0; }

/* --- Journey -------------------------------------------------------------
   A real sequence, so it is an <ol> and the numbering carries meaning. The
   rule down the left is the thread through it; the marker sits on that line. */

.lb-journey {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.lb-journey__step {
	position: relative;
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: var(--lb-space-md);
	padding-bottom: var(--lb-space-xl);
}

/* The connector, drawn between markers rather than through them. */
.lb-journey__step::before {
	content: '';
	position: absolute;
	left: 1.55rem;
	top: 3.25rem;
	bottom: 0;
	width: 2px;
	background-color: var(--lb-rule);
}

.lb-journey__step:last-child { padding-bottom: 0; }
.lb-journey__step:last-child::before { display: none; }

.lb-journey__marker {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: var(--lb-ink-deep);
	color: var(--lb-surface);
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-bold);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.lb-journey__body { min-width: 0; }

.lb-journey__title {
	font-family: var(--lb-font-display);
	font-size: var(--lb-display-sm);
	font-variation-settings: 'opsz' 24;
	line-height: 1.15;
	margin: 0.35rem 0 0;
	color: var(--lb-ink-deep);
}

/* Timing and ownership: the two things buyers ask that most lender pages
   never answer. */
.lb-journey__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2xs) var(--lb-space-sm);
	margin: var(--lb-space-2xs) 0 var(--lb-space-sm);
	font-size: var(--lb-text-xs);
	max-width: none;
}

.lb-journey__when,
.lb-journey__who {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 0.7em;
	border-radius: var(--lb-radius-pill);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: 0.01em;
}

.lb-journey__when {
	background-color: var(--lb-mist);
	color: var(--lb-ink-deep);
}

.lb-journey__who {
	background-color: var(--lb-accent-tint);
	color: var(--lb-accent-hover);
}

.lb-journey__text {
	margin: 0;
	color: var(--lb-ink);
}

.lb-journey__tip {
	margin: var(--lb-space-sm) 0 0;
	padding-left: var(--lb-space-md);
	border-left: 2px solid var(--lb-accent);
	font-size: var(--lb-text-sm);
	line-height: 1.6;
	color: var(--lb-ash);
	max-width: var(--lb-measure);
}

.lb-journey__link {
	margin: var(--lb-space-sm) 0 0;
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
}

@media (max-width: 599px) {
	.lb-journey__step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--lb-space-sm); }
	.lb-journey__marker { width: 2.5rem; height: 2.5rem; font-size: var(--lb-text-sm); }
	.lb-journey__step::before { left: 1.2rem; top: 2.5rem; }
}

/* --- Contact methods -----------------------------------------------------
   The number is the content here, so it is set at figure size and the label
   above it stays small. Whole card is the tap target - on a phone these are
   the primary actions on the page. */

.lb-contact {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-3xs);
	padding: var(--lb-space-lg);
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-top: 3px solid var(--lb-accent);
	border-radius: var(--lb-radius);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--lb-duration) var(--lb-ease),
	            transform var(--lb-duration) var(--lb-ease);
}

.lb-contact:hover,
.lb-contact:focus-visible {
	box-shadow: var(--lb-shadow-panel);
	transform: translateY(-2px);
	color: inherit;
}

.lb-contact__icon {
	width: 1.6rem;
	height: 1.6rem;
	margin-bottom: var(--lb-space-2xs);
	fill: none;
	stroke: var(--lb-accent);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lb-contact__label {
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-ash);
}

.lb-contact__value {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-xl);
	font-weight: var(--lb-weight-bold);
	line-height: 1.15;
	color: var(--lb-ink-deep);
	font-variant-numeric: tabular-nums;
	/* An email address must be allowed to break rather than widen the card. */
	overflow-wrap: anywhere;
}

/* Long email addresses shrink to fit the card (about 0.6em per character of
   Public Sans bold) instead of wrapping mid-word. Below the floor they break
   after the @ (a <wbr> in the markup), never inside the domain. */
.lb-contact { container-type: inline-size; }

.lb-contact__value--email {
	font-size: clamp(var(--lb-text-sm), calc(100cqi / (var(--lb-chars) * 0.6)), var(--lb-text-xl));
	font-variant-numeric: normal;
}

.lb-contact__note {
	margin-top: var(--lb-space-2xs);
	font-size: var(--lb-text-sm);
	line-height: 1.5;
	color: var(--lb-ash);
}

.lb-contact__hours {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2xs) var(--lb-space-md);
	margin: var(--lb-space-md) 0 0;
	padding-top: var(--lb-space-md);
	border-top: var(--lb-hairline);
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
	max-width: none;
}

.lb-contact__hours strong { color: var(--lb-ink-deep); }

.lb-contact-methods { display: block; }

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

.lb-faq__group + .lb-faq__group { margin-top: var(--lb-space-xl); }

.lb-faq__group-title {
	font-size: var(--lb-text-xl);
	font-variation-settings: 'opsz' 16;
	color: var(--lb-ink-deep);
	margin: 0 0 var(--lb-space-2xs);
	padding-bottom: var(--lb-space-2xs);
}

.lb-faq-groups { display: block; }

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

.lb-quote {
	margin: 0;
	padding-top: var(--lb-space-sm);
	border-top: 2px solid var(--lb-ink-deep);
}

.lb-quote__text {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-lg);
	font-variation-settings: 'opsz' 16;
	line-height: 1.45;
	color: var(--lb-ink-deep);
	margin: 0;
}

.lb-quote__source {
	margin: var(--lb-space-sm) 0 0;
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
}

/* --- Reviews ------------------------------------------------------------
   [lb_reviews]: a third-party widget, then the quote grid, then the
   profile link. The widget brings its own styling; it only needs room. */

.lb-reviews > * + * { margin-top: var(--lb-space-lg); }

.lb-reviews__embed + * { margin-top: var(--lb-space-xl); }

.lb-reviews__embed { max-width: 100%; overflow-x: auto; }

.lb-reviews__more { margin-bottom: 0; font-size: var(--lb-text-sm); }

/* The section around [lb_reviews] on a site with no reviews yet. */
.lb-reviews-section:has(.lb-reviews-empty) { display: none; }

/* --- Build note ----------------------------------------------------------
   Visible instruction to whoever configures a cloned site. Deliberately
   conspicuous: it should be uncomfortable to leave on a live page. */

.lb-note {
	margin-top: var(--lb-space-lg);
	padding: var(--lb-space-sm) var(--lb-space-md);
	border-left: 3px solid var(--lb-caution);
	background-color: #FDF6E7;
	color: #6B4E12;
	font-size: var(--lb-text-sm);
	max-width: var(--lb-measure);
}

/* --- Calculator embed ----------------------------------------------------
   Third-party markup we do not control, so it is boxed and allowed to size
   itself. overflow-x keeps a wide widget from pushing the page sideways. */

.lb-calc {
	display: grid;
	gap: var(--lb-space-xl);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	/* Inputs left, result right, result sticky so the payment stays on screen
	   while you drag a slider further down the form. */
	.lb-calc { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); }

	.lb-calc__results {
		position: sticky;
		top: calc(var(--lb-space-2xl) + var(--lb-space-md));
	}
}

.lb-calc__inputs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--lb-space-md) var(--lb-space-lg);
}

.lb-calc__field { min-width: 0; }

.lb-calc__label {
	display: block;
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
	margin-bottom: var(--lb-space-3xs);
}

.lb-calc__control {
	display: flex;
	align-items: center;
	gap: 0.15em;
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-radius: var(--lb-radius);
	padding: 0.55em 0.7em;
}

.lb-calc__control:focus-within {
	border-color: var(--lb-accent);
	outline: 2px solid var(--lb-accent);
	outline-offset: 1px;
}

.lb-calc__affix {
	color: var(--lb-ash);
	font-size: var(--lb-text-sm);
	flex: 0 0 auto;
}

.lb-calc__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--lb-ink-deep);
}

.lb-calc__input:focus { outline: none; }

/* The spinners are useless at these step sizes and steal width. */
.lb-calc__input::-webkit-outer-spin-button,
.lb-calc__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.lb-calc__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.lb-calc__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	margin-top: var(--lb-space-2xs);
	background: var(--lb-rule);
	border-radius: 2px;
	cursor: pointer;
}

.lb-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--lb-accent);
	border: 2px solid var(--lb-surface);
	box-shadow: 0 0 0 1px var(--lb-accent);
	cursor: pointer;
}

.lb-calc__range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--lb-accent);
	border: 2px solid var(--lb-surface);
	cursor: pointer;
}

.lb-calc__help {
	margin: var(--lb-space-3xs) 0 0;
	font-size: var(--lb-text-2xs);
	line-height: 1.45;
	color: var(--lb-ash);
	max-width: none;
}

/* --- Results ------------------------------------------------------------- */

.lb-calc__results {
	background-color: var(--lb-ink-deep);
	color: rgba(255, 255, 255, 0.8);
	border-radius: var(--lb-radius);
	padding: var(--lb-space-lg);
}

.lb-calc__headline {
	padding-bottom: var(--lb-space-md);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.lb-calc__figure {
	display: block;
	font-size: var(--lb-figure-lg);
	font-weight: var(--lb-weight-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--lb-surface);
	font-variant-numeric: tabular-nums lining-nums;
}

.lb-calc__figure-label {
	display: block;
	margin-top: var(--lb-space-2xs);
	font-size: var(--lb-text-sm);
	color: rgba(255, 255, 255, 0.66);
}

.lb-calc__breakdown {
	margin: var(--lb-space-md) 0 0;
	font-size: var(--lb-text-sm);
}

.lb-calc__breakdown > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-space-sm);
	padding: 0.42em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lb-calc__breakdown dt { color: rgba(255, 255, 255, 0.68); }

.lb-calc__breakdown dd {
	margin: 0;
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-surface);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lb-calc__breakdown .is-total {
	margin-top: var(--lb-space-2xs);
	border-bottom: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.lb-calc__note {
	margin: var(--lb-space-md) 0 0;
	font-size: var(--lb-text-2xs);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
	max-width: none;
}

.lb-calc__disclaimer {
	margin: var(--lb-space-md) 0 0;
	padding-top: var(--lb-space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--lb-text-2xs);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
	max-width: none;
}

/* --- Capture -------------------------------------------------------------
   Sits under the figures inside the dark results panel. Collapsed by default:
   the numbers are what the visitor came for, and a form competing with them
   before they have finished reading is why most calculator pages convert
   badly. */

.lb-calc__capture {
	margin-top: var(--lb-space-md);
	padding-top: var(--lb-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-2xs);
}

/* A bare <button> inside a dark panel, so every state is declared - Hello
   Elementor's reset would otherwise fill it #c36 on hover and focus. */
.lb-calc__capture-toggle,
.lb-calc__capture-toggle:hover,
.lb-calc__capture-toggle:focus,
.lb-calc__capture-toggle:focus-visible,
.lb-calc__capture-toggle:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lb-space-2xs);
	width: 100%;
	padding: 0.9em 1.2em;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--lb-radius);
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	text-decoration: none;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	line-height: 1;
	color: var(--lb-surface);
	cursor: pointer;
	transition: background-color var(--lb-duration) var(--lb-ease),
	            border-color var(--lb-duration) var(--lb-ease);
}

.lb-calc__capture-toggle:hover,
.lb-calc__capture-toggle:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Chevron drawn in CSS, rotating on open. */
.lb-calc__capture-toggle::after {
	content: '';
	width: 0.5em;
	height: 0.5em;
	flex: 0 0 auto;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--lb-duration) var(--lb-ease);
}

.lb-calc__capture-toggle[aria-expanded="true"]::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.lb-calc__capture-panel {
	padding: var(--lb-space-sm) 0 var(--lb-space-2xs);
}

/* Gravity Forms inside the dark panel. The theme's form styling assumes a
   light surface, so it is restated here rather than inherited. */
.lb-calc__capture-panel .gform_wrapper .gfield_label,
.lb-calc__capture-panel .gform_wrapper legend {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	color: rgba(255, 255, 255, 0.78);
}

.lb-calc__capture-panel .gform_wrapper input[type="text"],
.lb-calc__capture-panel .gform_wrapper input[type="email"],
.lb-calc__capture-panel .gform_wrapper input[type="tel"] {
	width: 100%;
	padding: 0.65em 0.8em;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	color: var(--lb-surface);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--lb-radius);
}

.lb-calc__capture-panel .gform_wrapper input::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

.lb-calc__capture-panel .gform_wrapper input:focus {
	outline: 2px solid var(--lb-accent);
	outline-offset: 1px;
	border-color: var(--lb-accent);
	background-color: rgba(255, 255, 255, 0.12);
}

.lb-calc__capture-panel .gform_wrapper .gfield_consent_label,
.lb-calc__capture-panel .gform_wrapper .gfield_description,
.lb-calc__capture-panel .gform_wrapper .gform_validation_errors {
	font-size: var(--lb-text-2xs);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

.lb-calc__capture-panel .gform_wrapper .gform_footer input[type="submit"] {
	width: 100%;
	margin-top: var(--lb-space-2xs);
	padding: 0.95em 1.4em;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
	border: 1px solid var(--lb-accent);
	border-radius: var(--lb-radius);
	cursor: pointer;
}

.lb-calc__capture-panel .gform_wrapper .gform_footer input[type="submit"]:hover,
.lb-calc__capture-panel .gform_wrapper .gform_footer input[type="submit"]:focus {
	background-color: var(--lb-accent-hover);
	border-color: var(--lb-accent-hover);
	color: var(--lb-on-accent);
}

.lb-calc__capture-panel .gform_confirmation_message {
	font-size: var(--lb-text-sm);
	color: var(--lb-surface);
}

.lb-calc__apply { width: 100%; }

/* --- Chart and schedule -------------------------------------------------- */

.lb-calc__chart {
	margin: var(--lb-space-md) 0 0;
	grid-column: 1 / -1;
}

.lb-calc__chart figcaption {
	font-size: var(--lb-text-2xs);
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--lb-space-2xs);
}

.lb-calc__chart-area svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.lb-calc__line {
	fill: none;
	stroke: var(--lb-accent);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.lb-calc__area { fill: rgba(169, 117, 46, 0.18); stroke: none; }

.lb-calc__ticks text {
	font-family: var(--lb-font-text);
	font-size: 11px;
	fill: rgba(255, 255, 255, 0.45);
}

.lb-calc__schedule {
	grid-column: 1 / -1;
	margin-top: var(--lb-space-md);
	font-size: var(--lb-text-sm);
}

.lb-calc__schedule summary {
	cursor: pointer;
	color: var(--lb-surface);
	font-weight: var(--lb-weight-semibold);
	padding: var(--lb-space-2xs) 0;
}

/* A 30 year schedule is long; scroll it rather than the page. */
.lb-calc__table-wrap {
	max-height: 20rem;
	overflow: auto;
	margin-top: var(--lb-space-2xs);
}

.lb-calc__table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lb-text-2xs);
	font-variant-numeric: tabular-nums;
}

.lb-calc__table-wrap th,
.lb-calc__table-wrap td {
	text-align: right;
	padding: 0.35em 0.5em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.78);
}

.lb-calc__table-wrap th {
	position: sticky;
	top: 0;
	background: var(--lb-ink-deep);
	color: var(--lb-surface);
	font-weight: var(--lb-weight-semibold);
}

.lb-calc__table-wrap th:first-child,
.lb-calc__table-wrap td:first-child { text-align: left; }

.lb-btn-inline--solid {
	background-color: var(--lb-accent);
	border-color: var(--lb-accent);
	color: var(--lb-on-accent);
}

.lb-btn-inline--solid:hover,
.lb-btn-inline--solid:focus-visible {
	background-color: var(--lb-accent-hover);
	border-color: var(--lb-accent-hover);
	color: var(--lb-on-accent);
}

/* --- Forms ---------------------------------------------------------------
   Gravity Forms, restyled to look like the rest of the document. */

.lb-form .gform_wrapper .gfield_label {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
}

.lb-form .gform_wrapper input[type="text"],
.lb-form .gform_wrapper input[type="email"],
.lb-form .gform_wrapper input[type="tel"],
.lb-form .gform_wrapper input[type="number"],
.lb-form .gform_wrapper select,
.lb-form .gform_wrapper textarea {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	color: var(--lb-ink);
	background-color: var(--lb-surface);
	border: var(--lb-hairline);
	border-radius: var(--lb-radius);
	padding: 0.7em 0.9em;
	width: 100%;
}

.lb-form .gform_wrapper input:focus,
.lb-form .gform_wrapper select:focus,
.lb-form .gform_wrapper textarea:focus {
	outline: 2px solid var(--lb-accent);
	outline-offset: 1px;
	border-color: var(--lb-accent);
}

.lb-form .gform_wrapper .gform_footer input[type="submit"] {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
	border: 1px solid var(--lb-accent);
	border-radius: var(--lb-radius);
	padding: 1em 2em;
	cursor: pointer;
	transition: background-color var(--lb-duration) var(--lb-ease);
}

.lb-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.lb-form .gform_wrapper .gform_footer input[type="submit"]:focus {
	background-color: var(--lb-accent-hover);
	border-color: var(--lb-accent-hover);
	color: var(--lb-on-accent);
}

/* --- Footer & compliance -------------------------------------------------
   Mortgage footers carry mandatory disclosure. It is set legibly rather than
   hidden at 10px grey-on-grey: an unreadable disclosure is a compliance risk,
   not a design win. */

.lb-foot {
	background-color: var(--lb-ink-deep);
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--lb-text-sm);
}

.lb-foot a { color: var(--lb-surface); }
.lb-foot a:hover { color: var(--lb-surface); text-decoration-color: currentColor; }

.lb-foot__title {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--lb-space-sm);
}

.lb-foot__nmls {
	font-variant-numeric: tabular-nums;
	color: var(--lb-surface);
}

.lb-disclosure {
	margin-top: var(--lb-space-xl);
	padding-top: var(--lb-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: var(--lb-text-2xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.62);
	max-width: 92ch;
}

.lb-disclosure p + p { margin-top: var(--lb-space-2xs); }

/* Equal Housing and NMLS marks. Kept at a legible size; these are regulatory
   marks, not decorative badges. */
.lb-marks {
	display: flex;
	align-items: center;
	gap: var(--lb-space-md);
	margin-top: var(--lb-space-md);
}

.lb-marks img,
.lb-marks svg { height: 2.75rem; width: auto; opacity: 0.9; }


/* ==========================================================================
   7. MOTION

   One orchestrated moment (the hero video arriving), restrained reveals below
   the fold, and interaction feedback. Hidden states are gated behind `.lb-js`
   so a page with no JavaScript renders complete.
   ========================================================================== */

header.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Suspending stickiness while a scroll lock is applied avoids the engine
   holding a sticky offset computed against a scrolling box that no longer
   exists - which presents as the header vanishing until the next event. */
.lb-scroll-locked header.elementor-location-header { position: static; }

.lb-scroll-locked {
	overflow: hidden;
	padding-right: var(--lb-scrollbar, 0px);
}

.lb-js .lb-reveal {
	opacity: 0;
	transform: translateY(12px);
}

.lb-js .lb-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 560ms var(--lb-ease) var(--lb-delay, 0ms),
	            transform 560ms var(--lb-ease) var(--lb-delay, 0ms);
}

.lb-motion-off .lb-reveal {
	opacity: 1 !important;
	transform: none !important;
}


/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--lb-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.lb-hero :focus-visible,
.lb-foot :focus-visible,
.lb-section--ink :focus-visible {
	outline-color: var(--lb-surface);
}

.lb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--lb-space-xs) var(--lb-space-md);
	background: var(--lb-ink-deep);
	color: var(--lb-surface);
}

.lb-skip:focus { left: var(--lb-space-sm); top: var(--lb-space-sm); }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.lb-reveal { opacity: 1 !important; transform: none !important; }
	.lb-path:hover { transform: none; }
}

/* Wrapper the calculator shortcode widget sits in. No styling of its own; the
   calculator inside owns its layout. Declared so the class audit stays clean. */
.lb-calc-host { display: block; }

/* Container the grid HTML widget sits in; the grid inside owns the layout. */
.e-con.lb-grid-host { --padding-left: 0px; --padding-right: 0px; padding-inline: 0; }

/* --- Form tabs -----------------------------------------------------------
   One form on screen at a time. The tab row is a rule with the active tab
   sitting on it, rather than pills: pills read as buttons, and a visitor who
   thinks the tab submits something will not touch it.

   Everything here is scoped so that with no JavaScript the panels simply stack
   with their own headings - .lb-tabs__panel is visible by default and only
   hidden once script has marked the component up as tabs (.is-enhanced). */

.lb-tabs {
	/* Same measure as .lb-container--narrow, so when the section uses that
	   container the heading above and the form below share one left edge. */
	max-width: var(--lb-container-narrow);
	margin-inline: auto;
}

.lb-tabs__list {
	display: none;
	gap: var(--lb-space-md);
	border-bottom: var(--lb-hairline);
	margin-bottom: var(--lb-space-lg);
}

.lb-tabs.is-enhanced .lb-tabs__list { display: flex; }

.lb-tabs__tab {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-semibold);
	line-height: 1.2;
	color: var(--lb-ash);
	text-decoration: none;
	padding: 0 0 var(--lb-space-xs);
	/* The active state adds a 2px border, so the resting state reserves the
	   same 2px in a transparent one. Otherwise the row shifts on every switch -
	   the same class of bug as the nav hover jump. */
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.lb-tabs__tab:hover,
.lb-tabs__tab:focus-visible { color: var(--lb-ink-deep); }

.lb-tabs__tab.is-active {
	color: var(--lb-ink-deep);
	border-bottom-color: var(--lb-accent);
}

.lb-tabs.is-enhanced .lb-tabs__panel[hidden] { display: none; }
.lb-tabs__panel:focus { outline: none; }

.lb-tabs__panel + .lb-tabs__panel { margin-top: var(--lb-space-xl); }
.lb-tabs.is-enhanced .lb-tabs__panel + .lb-tabs__panel { margin-top: 0; }

/* The panel heading repeats its tab, so it is redundant once tabs are on. It
   stays in the markup for the no-script stack and for screen readers reaching
   the panel directly. */
.lb-tabs.is-enhanced .lb-tabs__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lb-tabs__heading {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-lg);
	font-weight: 500;
	color: var(--lb-ink-deep);
	margin: 0 0 var(--lb-space-xs);
}

.lb-tabs__note {
	font-size: var(--lb-text-sm);
	color: var(--lb-ash);
	margin: 0 0 var(--lb-space-md);
	max-width: 34rem;
}

@media (max-width: 599px) {
	.lb-tabs__list { gap: var(--lb-space-sm); }
	.lb-tabs__tab { font-size: var(--lb-text-sm); }
}


/* ==========================================================================
   Figures strip  [lb_figures]
   The ink band on the home page. Four slots, each either a figure the loan
   officer supplied or a credential they always have (NMLS, licensed states,
   company), plus availability. Ruled columns on a navy ground, serif numerals
   at display size, one brass stroke per column that draws in on reveal.
   ========================================================================== */

.lb-stats {
	--lb-stats-rule: rgba(255, 255, 255, 0.12);
	--lb-stats-soft: rgba(255, 255, 255, 0.72);
	/* Brass lifted toward white so 12px labels clear 4.5:1 on the navy. */
	--lb-stats-brass: color-mix(in srgb, var(--lb-accent) 62%, #FFFFFF);

	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid var(--lb-stats-rule);
}

.lb-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lb-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-stats--1 { grid-template-columns: minmax(0, 1fr); }

.lb-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	--lb-stat-inset: var(--lb-space-lg);
	padding: var(--lb-space-lg) var(--lb-space-md) var(--lb-space-lg) var(--lb-stat-inset);
}

.lb-stat + .lb-stat { border-inline-start: 1px solid var(--lb-stats-rule); }

/* The brass stroke on the top rule of each column. */
.lb-stat::before {
	content: '';
	position: absolute;
	top: -1px;
	inset-inline-start: var(--lb-stat-inset);
	width: 2.5rem;
	height: 2px;
	background: var(--lb-accent);
	transform-origin: left center;
}

.lb-js .lb-stat.lb-reveal::before {
	transform: scaleX(0);
	transition: transform 720ms var(--lb-ease) calc(var(--lb-delay, 0ms) + 180ms);
}

.lb-js .lb-stat.lb-reveal.is-in::before { transform: scaleX(1); }

.lb-stat__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lb-stat__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	fill: none;
	stroke: var(--lb-stats-brass);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lb-stat__eyebrow {
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-2xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lb-stats-brass);
}

.lb-stat__value {
	display: block;
	margin-top: var(--lb-space-xs);
	max-width: 100%;
	font-family: var(--lb-font-display);
	--lb-stat-size: clamp(2rem, 1.45rem + 1.4vw, 2.75rem);
	font-size: var(--lb-stat-size);
	font-weight: var(--lb-weight-regular);
	font-variation-settings: 'opsz' 60;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--lb-surface);
	overflow-wrap: anywhere;
}

/* A company name rather than a number: smaller, and allowed to wrap. */
.lb-stat__value--text {
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	font-variation-settings: 'opsz' 36;
	line-height: 1.15;
	letter-spacing: -0.01em;
	overflow-wrap: normal;
	text-wrap: balance;
	/* Hold the height of a figure and sit on its baseline, so the detail
	   lines stay level across the row. */
	display: flex;
	align-items: flex-end;
	min-height: calc(var(--lb-stat-size) * 1.05);
}

.lb-stat__detail {
	display: block;
	margin-top: var(--lb-space-xs);
	max-width: 24ch;
	font-size: var(--lb-text-sm);
	line-height: var(--lb-leading-snug);
	color: var(--lb-stats-soft);
}

.lb-stat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: var(--lb-space-xs) 0 0;
	padding: 0;
	list-style: none;
}

.lb-stat__chips--link { text-decoration: none; }

.lb-stat__chips--link .lb-stat__chip {
	transition: border-color var(--lb-duration) var(--lb-ease), color var(--lb-duration) var(--lb-ease);
}

.lb-stat__chips--link:hover .lb-stat__chip,
.lb-stat__chips--link:focus-visible .lb-stat__chip {
	border-color: var(--lb-stats-brass);
	color: var(--lb-surface);
}

.lb-stat__chips--link:focus-visible {
	outline: 2px solid var(--lb-stats-brass);
	outline-offset: 4px;
	border-radius: var(--lb-radius);
}

/* Licensed states, under the NMLS link: quiet, one line if it fits. */
.lb-stat__note {
	display: block;
	margin-top: var(--lb-space-2xs);
	max-width: 26ch;
	font-size: var(--lb-text-xs);
	line-height: var(--lb-leading-snug);
	color: var(--lb-stats-soft);
}

.lb-stat__chip {
	padding: 0.2rem 0.6rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--lb-radius-pill);
	font-size: var(--lb-text-2xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
}

.lb-stat__chip--more {
	border-style: dashed;
	color: var(--lb-stats-soft);
}

.lb-stat__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: var(--lb-space-xs);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-medium);
	color: var(--lb-stats-brass);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--lb-duration) var(--lb-ease), color var(--lb-duration) var(--lb-ease);
}

.lb-stat__link:hover,
.lb-stat__link:focus-visible {
	color: var(--lb-surface);
	text-decoration-color: currentColor;
}

.lb-stat__link svg {
	width: 0.9em;
	height: 0.9em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--lb-duration) var(--lb-ease);
}

.lb-stat__link:hover svg { transform: translate(2px, -2px); }

.lb-stat .lb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Two across: rules between columns and between rows. */
@media (max-width: 979px) {
	.lb-stats,
	.lb-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.lb-stat { --lb-stat-inset: var(--lb-space-md); }
	.lb-stat:nth-child(odd) { border-inline-start: 0; }
	.lb-stat:nth-child(n+3) { border-top: 1px solid var(--lb-stats-rule); }

	/* An odd third item takes the full row rather than leaving a hole. */
	.lb-stats--3 .lb-stat:last-child { grid-column: 1 / -1; }
}

/* One column on a phone: stacked rows, figures still the loudest thing. */
@media (max-width: 479px) {
	.lb-stats,
	.lb-stats--3,
	.lb-stats--2 { grid-template-columns: minmax(0, 1fr); }

	.lb-stat { --lb-stat-inset: var(--lb-space-sm); padding-block: var(--lb-space-md); }
	.lb-stat + .lb-stat { border-inline-start: 0; border-top: 1px solid var(--lb-stats-rule); }
}

@media (prefers-reduced-motion: reduce) {
	.lb-js .lb-stat.lb-reveal::before { transform: none; }
}

/* ==========================================================================
   DARK BANDS

   `.elementor-widget-heading h2.elementor-heading-title` (0,2,1) outranks
   `.lb-section--ink .elementor-heading-title` (0,2,0) above, so every heading
   on an ink band rendered navy on navy - invisible - and the lead under it
   stayed the light-page grey. Restated at a specificity that wins.
   ========================================================================== */

.lb-section--ink .elementor-widget-heading .elementor-heading-title { color: var(--lb-paper); }

.lb-section--ink .lb-lead,
.lb-section--ink .elementor-widget-text-editor.lb-lead { color: rgba(255, 255, 255, 0.78); }

/* ==========================================================================
   MOBILE HEADER AND MENU

   Elementor swaps the inline menu for the burger at its tablet breakpoint
   (1024px; the widget carries `--dropdown-tablet`), so everything here uses
   the same width.

   What broke, and why each rule exists:

   1. The desktop row rule `.lb-nav .elementor-nav-menu { display: flex }`
      also matches the <ul> inside the mobile panel, so the panel opened as a
      sideways-scrolling strip. The panel's list is put back to a column.
   2. The panel sat in the flow of the header bar, so opening it made the bar
      taller and pushed the logo down. It is taken out of the flow and hung
      from the whole header, full width.
   3. With three items spaced apart, the burger landed in the middle of the
      bar. It goes to the right edge; the logo keeps the left.
   ========================================================================== */

@media (max-width: 1024px) {
	/* The panel hangs from .lb-head, so nothing between it and the header may
	   be a positioned ancestor. */
	.e-con.lb-head { position: relative; }

	.e-con.lb-head__bar,
	.e-con.lb-head__bar > .e-con-inner,
	.lb-nav,
	.lb-nav > .elementor-widget-container {
		position: static;
	}

	.e-con.lb-head__bar {
		--column-gap: var(--lb-space-sm);
		gap: var(--lb-space-sm);
	}

	.e-con.lb-brand { flex: 1 1 auto; min-width: 0; }

	.e-con.lb-head__actions { order: 2; }

	.lb-nav { order: 3; flex: 0 0 auto; }

	.lb-head__actions .lb-btn .elementor-button { white-space: nowrap; }

	/* The burger: a plain 44px target, no box. */
	.lb-nav .elementor-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		margin: 0 calc(var(--lb-space-2xs) * -1) 0 0;
		border: 0;
		border-radius: var(--lb-radius);
	}

	.lb-nav .elementor-menu-toggle:hover,
	.lb-nav .elementor-menu-toggle:focus { background-color: transparent; }

	.lb-nav .elementor-menu-toggle:focus-visible {
		background-color: var(--lb-mist);
		outline: 2px solid var(--lb-accent);
		outline-offset: 2px;
	}

	.lb-nav .elementor-menu-toggle svg { width: 1.6rem; height: 1.6rem; }

	/* The panel: full width under the header, scrolling on its own if the
	   menu is taller than the space left above the action bar. */
	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		margin: 0;
		z-index: 80;
		max-height: calc(100dvh - 9rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.lb-nav .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
		visibility: hidden;
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container > .elementor-nav-menu {
		display: block;
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container li {
		display: block;
		width: 100%;
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-item,
	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-sub-item {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 3.25rem;
		box-sizing: border-box;
		white-space: normal;
		justify-content: flex-start;
	}

	/* Parents get a separate toggle on the right. It is SmartMenus' own
	   `.sub-arrow`, which the desktop rules hide: SmartMenus treats a tap on
	   it as open/close and never follows the link, whereas a tap on the
	   label opens on the first tap and NAVIGATES on the second. The chevron
	   used to be painted on the label, so "tap the up arrow to close" was a
	   second tap on the link. Out of flow inside the anchor, so it cannot
	   change the row's width. */
	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children > a {
		position: relative;
		padding-inline-end: calc(var(--lb-gutter) * 2 + 1.5rem);
		background-image: none;
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-arrow {
		display: block !important;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: calc(var(--lb-gutter) * 2 + 0.8rem);
		margin: 0;
		padding: 0;
		border-inline-start: var(--lb-hairline);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 0.8rem 0.5rem;
		cursor: pointer;
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-arrow svg { display: none; }

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.highlighted > .sub-arrow {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%230F1B2D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container li.menu-item-has-children > a.highlighted {
		background-color: var(--lb-mist);
	}

	/* Children: an indented list on a tinted band, in the flow. */
	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu {
		position: static !important;
		width: 100% !important;
		max-width: none;
		margin: 0 !important;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-color: var(--lb-mist);
	}

	.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a.elementor-sub-item {
		min-height: 2.9rem;
		color: var(--lb-ink);
	}
}

/* On a phone the action bar already carries Apply, one thumb away, so the
   header drops its copy and the logo gets the room. */
@media (max-width: 979px) {
	.e-con.lb-head__actions { display: none; }
}

@media (max-width: 600px) {
	.e-con.lb-head__bar {
		--padding-top: var(--lb-space-xs);
		--padding-bottom: var(--lb-space-xs);
		padding-block: var(--lb-space-xs);
	}
}

/* ==========================================================================
   MOBILE HERO
   ========================================================================== */

/* Elementor's `.elementor img { height: auto }` outranks `.lb-hero__poster`,
   so the poster kept its 16:9 box and the rest of a portrait hero showed
   bare navy. Restated at a specificity that wins at every width. */
.lb-hero .lb-hero__media .lb-hero__poster {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Cover the hero with a 16:9 player at any aspect, including a tall phone
   hero. Sized against the frame itself (container units), not the viewport:
   the viewport rule below it is the fallback for browsers without them. */
.lb-hero__frame { container-type: size; }

@supports (width: 1cqw) {
	.lb-hero__frame iframe {
		width: max(100cqw, 177.78cqh);
		height: max(100cqh, 56.25cqw);
		min-width: 0;
		min-height: 0;
		/* Hello's `iframe { max-width: 100% }` would clamp the cover width
		   back to the frame's. */
		max-width: none;
	}
}

@media (max-width: 767px) {
	/* Most of the first screen, less the header and the action bar, with the
	   copy sitting low where the thumb and the scrim are. */
	:root { --lb-hero-min: min(calc(100svh - 8.5rem), 40rem); }

	.lb-hero { align-items: flex-end; }

	.lb-hero::after {
		background: linear-gradient(
			to bottom,
			rgba(15, 27, 45, 0.35) 0%,
			rgba(15, 27, 45, 0.45) 40%,
			rgba(15, 27, 45, 0.82) 100%
		);
	}

	.lb-hero__inner { padding-block: var(--lb-space-xl) var(--lb-space-lg); }

	.lb-hero__eyebrow {
		font-size: var(--lb-text-xs);
		letter-spacing: 0.08em;
	}
}

/* ==========================================================================
   MOBILE SPACING
   ========================================================================== */

@media (max-width: 767px) {
	/* A widget in a stacked container has no definite width while Chrome
	   works out its flex size, so an auto-fit grid inside it is measured at
	   one column per row, then laid out at two. The difference stays behind
	   as blank space under the grid: 218px under the five steps on the home
	   page. A definite width makes the two measurements agree. Not the
	   header bar, which is also an .lb-container: its items sit in a row. */
	.e-con.lb-container:not(.lb-head__bar) > .elementor-widget { width: 100%; }
}

@media (max-width: 767px) {
	/* Phone rhythm. Section to section was ~130px and a heading sat 56px
	   above its own content; both read as gaps rather than structure on a
	   390px screen. */
	:root { --lb-section-y: 3rem; }

	.e-con.lb-heading {
		--margin-bottom: var(--lb-space-lg);
		margin-bottom: var(--lb-space-lg);
	}

	.e-con.lb-foot {
		--padding-top: var(--lb-space-xl);
		padding-top: var(--lb-space-xl);
	}

	.e-con.lb-foot__grid {
		--row-gap: var(--lb-space-lg);
		row-gap: var(--lb-space-lg);
	}

	.lb-disclosure { margin-top: var(--lb-space-lg); }

	/* Interior page titles. The title block's bottom margin plus the next
	   section's top padding stacked to ~120px of nothing under every inner
	   page's title; both are cut, and the title starts higher. */
	.e-con.lb-page-head {
		--padding-top: var(--lb-space-lg);
		padding-top: var(--lb-space-lg);
	}

	.e-con.lb-page-head .e-con.lb-heading {
		--margin-bottom: var(--lb-space-md);
		margin-bottom: var(--lb-space-md);
	}

	.e-con.lb-page-head + .e-con.lb-section {
		--padding-top: var(--lb-space-sm);
		padding-top: var(--lb-space-sm);
	}
}

/* ==========================================================================
   DESKTOP DROPDOWNS

   SmartMenus writes `width: auto; min-width: 10em` inline on every open
   panel. Inline beats the min-width above, and an auto width on an absolute
   box shrinks to its parent item, so "Knowledge Center" opened a 170px panel
   with every label wrapped. The panel is sized to its content instead, with
   labels on one line and descriptions (functions.php) wrapping under them.

   Elementor also gives these panels `elementor-nav-menu--dropdown`, the phone
   menu's class, which is where the hairline under each item came from.
   ========================================================================== */

@media (min-width: 1025px) {
	.lb-nav .elementor-nav-menu--main .sub-menu {
		width: max-content !important;
		min-width: 15rem !important;
		max-width: min(24rem, calc(100vw - 2rem)) !important;
		margin-top: 0.4rem !important;
		padding: 0.4rem;
		border: var(--lb-hairline);
		border-top: 2px solid var(--lb-accent);
		border-radius: 0 0 var(--lb-radius) var(--lb-radius);
		box-shadow: 0 12px 32px rgba(15, 27, 45, 0.14), 0 2px 6px rgba(15, 27, 45, 0.06);
	}

	/* Bridges the gap above the panel, so the pointer can travel into it
	   without the menu closing. */
	.lb-nav .elementor-nav-menu--main .sub-menu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: calc(0.4rem + 2px);
	}

	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item,
	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:hover,
	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:focus,
	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item.highlighted {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
		padding: 0.7em 1em;
		border: 0;
		border-radius: calc(var(--lb-radius) - 1px);
		font-size: var(--lb-text-sm);
		font-weight: var(--lb-weight-medium);
		line-height: 1.3;
		white-space: nowrap;
	}

	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item { color: var(--lb-ink-deep); }

	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:hover,
	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:focus-visible,
	.lb-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item.elementor-item-active {
		background-color: var(--lb-mist);
		color: var(--lb-accent-text);
	}

	.lb-nav .lb-sub-desc {
		font-size: var(--lb-text-xs);
		font-weight: var(--lb-weight-regular);
		line-height: 1.4;
		color: var(--lb-ash);
		white-space: normal;
		text-wrap: pretty;
	}
}

/* The phone menu stays a compact list. */
.lb-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .lb-sub-desc { display: none; }



/* ==========================================================================
   HOME SEARCH FUNNEL  [lb_home_search]  (inc/home-search.php)

   A home-search portal sits behind the registration form: toolbar, map with
   pins, and a column of locked listing cards. Illustration only - no address,
   price or count anywhere - so it reads as a portal without claiming listings
   that do not exist. The toolbar and lock echo the search as it is typed
   (assets/js/home-search.js).
   ========================================================================== */

.e-con.lb-hs-wrap {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	padding: 0;
}

.lb-hs {
	--lb-hs-bar: 4.1rem;
	--lb-hs-line: #C9D1DC;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--lb-paper);
	border-bottom: var(--lb-hairline);
}

.lb-hs p { max-width: none; }

/* --- The portal ---------------------------------------------------------- */

.lb-hs__portal {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-rows: var(--lb-hs-bar) minmax(0, 1fr);
	pointer-events: none;
	user-select: none;
}

/* Fades the portal out behind the card so the form always reads first. */
.lb-hs__portal::after {
	content: '';
	position: absolute;
	inset: var(--lb-hs-bar) 0 0 0;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--lb-paper) 94%, transparent) 0%,
		color-mix(in srgb, var(--lb-paper) 72%, transparent) 36%,
		color-mix(in srgb, var(--lb-paper) 0%, transparent) 62%
	);
}

.lb-hs__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-inline: var(--lb-gutter);
	background-color: var(--lb-surface);
	border-bottom: var(--lb-hairline);
	box-shadow: 0 1px 3px rgba(15, 27, 45, 0.05);
	overflow: hidden;
	white-space: nowrap;
}

.lb-hs__search {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 17rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--lb-hs-line);
	border-radius: var(--lb-radius-pill);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
	transition: border-color var(--lb-duration) var(--lb-ease), box-shadow var(--lb-duration) var(--lb-ease);
}

.lb-hs.has-city .lb-hs__search {
	border-color: var(--lb-accent);
	box-shadow: 0 0 0 3px var(--lb-accent-tint);
}

.lb-hs__search svg,
.lb-hs__eyebrow svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.lb-hs__search svg { color: var(--lb-ash); }

.lb-hs__chip {
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--lb-hs-line);
	border-radius: var(--lb-radius-pill);
	background-color: var(--lb-surface);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink);
	transition: background-color var(--lb-duration) var(--lb-ease), border-color var(--lb-duration) var(--lb-ease), color var(--lb-duration) var(--lb-ease);
}

.lb-hs__chip.is-set {
	background-color: var(--lb-accent-tint);
	border-color: var(--lb-accent);
	color: var(--lb-accent-text);
}

.lb-hs__save {
	margin-left: auto;
	padding: 0.55rem 1.1rem;
	border-radius: var(--lb-radius-pill);
	background-color: var(--lb-ink-deep);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-surface);
}

.lb-hs__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(22rem, 31%);
	min-height: 0;
}

.lb-hs__map {
	position: relative;
	overflow: hidden;
}

.lb-hs__streets {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lb-hs__land    { fill: #EDF0EA; }
.lb-hs__park    { fill: #D9E7D1; }
.lb-hs__water   { fill: #CBDFEC; }
.lb-hs__road    { stroke: #FFFFFF; stroke-width: 11; fill: none; }
.lb-hs__lane    { stroke: #FFFFFF; stroke-width: 4; fill: none; opacity: 0.85; }
.lb-hs__highway { stroke: #F2E2B0; stroke-width: 16; fill: none; stroke-linecap: round; }

.lb-hs__pin {
	position: absolute;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border: 2px solid var(--lb-accent);
	border-radius: 50%;
	background-color: var(--lb-surface);
	color: var(--lb-accent);
	box-shadow: 0 4px 10px rgba(15, 27, 45, 0.18);
	transform: translate(-50%, -50%);
}

.lb-hs__pin svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lb-hs__pin--hot {
	width: 2.6rem;
	height: 2.6rem;
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
	z-index: 1;
}

.lb-hs__pin--hot::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--lb-accent);
	opacity: 0;
}

.lb-hs__list {
	position: relative;
	padding: 1rem;
	background-color: var(--lb-mist);
	border-left: var(--lb-hairline);
	overflow: hidden;
}

.lb-hs__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
	filter: blur(2.5px);
	opacity: 0.85;
}

.lb-hs__home {
	display: block;
	padding-bottom: 0.8rem;
	border: var(--lb-hairline);
	border-radius: 6px;
	background-color: var(--lb-surface);
	overflow: hidden;
}

.lb-hs__photo {
	display: block;
	aspect-ratio: 16 / 10;
	background: linear-gradient(180deg, var(--sky) 0%, var(--lb-surface) 100%);
}

.lb-hs__photo svg { display: block; width: 100%; height: 100%; }

.lb-hs__lawn { fill: #CBDABF; }
.lb-hs__wall { fill: var(--wall); }
.lb-hs__roof { fill: var(--roof); }
.lb-hs__trim { fill: rgba(15, 27, 45, 0.22); }

.lb-hs__line {
	display: block;
	width: 72%;
	height: 0.5rem;
	margin: 0.55rem 0.8rem 0;
	border-radius: 3px;
	background-color: var(--lb-rule);
}

.lb-hs__line--price {
	width: 48%;
	height: 0.8rem;
	margin-top: 0.8rem;
	background-color: var(--lb-hs-line);
}

.lb-hs__line--short { width: 38%; }

.lb-hs__lock {
	position: absolute;
	left: 50%;
	top: 44%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	width: min(19rem, 86%);
	padding: 1.4rem 1.4rem 1.5rem;
	border: var(--lb-hairline);
	border-radius: 12px;
	background-color: color-mix(in srgb, var(--lb-surface) 90%, transparent);
	backdrop-filter: blur(8px);
	box-shadow: 0 20px 50px -18px rgba(15, 27, 45, 0.35);
	text-align: center;
	transform: translate(-50%, -50%);
}

.lb-hs__lock-icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.35rem;
	border-radius: 50%;
	background-color: var(--lb-accent-tint);
	color: var(--lb-accent-text);
	transition: background-color var(--lb-duration) var(--lb-ease), color var(--lb-duration) var(--lb-ease);
}

.lb-hs__lock-icon svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lb-hs__lock-title {
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	line-height: 1.2;
	color: var(--lb-ink-deep);
	overflow-wrap: anywhere;
}

.lb-hs__lock-text {
	font-size: var(--lb-text-xs);
	line-height: 1.45;
	color: var(--lb-ash);
}

.lb-hs__lock-open,
.lb-hs__lock-when-done { display: none; }

.lb-hs.is-done .lb-hs__lock-closed,
.lb-hs.is-done .lb-hs__lock-when-locked { display: none; }

.lb-hs.is-done .lb-hs__lock-open { display: block; }
.lb-hs.is-done .lb-hs__lock-when-done { display: inline; }

.lb-hs.is-done .lb-hs__lock-icon {
	background-color: var(--lb-positive);
	color: #FFFFFF;
}

.lb-hs.is-done .lb-hs__cards { filter: blur(1px); opacity: 1; }

/* --- The card ------------------------------------------------------------ */

.lb-hs__stage {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: clamp(40rem, 86vh, 54rem);
	padding-top: calc(var(--lb-hs-bar) + clamp(1.5rem, 4vw, 3.5rem));
	padding-bottom: clamp(2rem, 5vw, 4rem);
}

.lb-hs__wrap {
	width: 100%;
	max-width: var(--lb-container);
	margin-inline: auto;
	padding-inline: var(--lb-gutter);
}

.lb-hs__card {
	width: min(100%, 35rem);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	border-top: 4px solid var(--lb-accent);
	border-radius: 10px;
	background-color: var(--lb-surface);
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06),
	            0 30px 70px -24px rgba(15, 27, 45, 0.38);
}

.lb-hs__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-accent-text);
}

.lb-hs .lb-hs__title {
	margin: 0.6rem 0 0.7rem;
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.45rem);
	line-height: 1.1;
	font-variation-settings: 'opsz' 40;
	color: var(--lb-ink-deep);
}

.lb-hs__lead {
	margin: 0 0 1.3rem;
	font-size: var(--lb-text-base);
	line-height: 1.5;
	color: var(--lb-ash);
}

.lb-hs.is-done .lb-hs__eyebrow,
.lb-hs.is-done .lb-hs__title,
.lb-hs.is-done .lb-hs__lead { display: none; }

/* --- The form -------------------------------------------------------------
   Orbital's per-form <style> sets its colours on #gform_wrapper_N, which
   outranks any class selector, so the custom properties are !important. */

.lb-hs .gform_wrapper.gform-theme {
	--gf-color-primary: var(--lb-accent) !important;
	--gf-color-primary-darker: var(--lb-accent-hover) !important;
	--gf-color-primary-lighter: var(--lb-accent) !important;
	--gf-color-primary-contrast: var(--lb-on-accent) !important;
	--gf-color-in-ctrl-primary: var(--lb-accent) !important;
	--gf-color-in-ctrl-primary-darker: var(--lb-accent-hover) !important;
	--gf-color-in-ctrl-primary-contrast: var(--lb-on-accent) !important;
	--gf-ctrl-border-color: var(--lb-hs-line) !important;
	--gf-ctrl-label-color-primary: var(--lb-ink-deep) !important;
	--gf-ctrl-label-color-secondary: var(--lb-ash) !important;
	--gf-radius: 6px !important;
	--gf-form-gap-y: 1.15rem !important;
	margin: 0;
}

.lb-hs .gform_required_legend,
.lb-hs .gform_heading { display: none; }

.lb-hs .gf_progressbar_wrapper { margin-bottom: 1.1rem; }

.lb-hs .gf_progressbar_title {
	margin: 0 0 0.45rem;
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-ash);
}

.lb-hs .gf_progressbar_title .gf_step_page_name { color: var(--lb-ink-deep); }

.lb-hs .gform_wrapper .gf_progressbar {
	height: 5px;
	padding: 0;
	border-radius: 3px;
	background-color: var(--lb-mist);
	overflow: hidden;
}

.lb-hs .gform_wrapper .gf_progressbar_percentage {
	height: 5px;
	border-radius: 3px;
	background: var(--lb-accent) !important;
	transition: width 400ms var(--lb-ease);
}

.lb-hs .gform_wrapper .gf_progressbar_percentage span { display: none; }

.lb-hs .gform_wrapper .gfield_label,
.lb-hs .gform_wrapper legend.gfield_label {
	margin-bottom: 0.45rem;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme input[type="text"],
.lb-hs .lb-hs__form .gform_wrapper.gform-theme input[type="email"],
.lb-hs .lb-hs__form .gform_wrapper.gform-theme input[type="tel"] {
	min-height: 3.05rem;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--lb-hs-line);
	border-radius: 6px;
	background-color: var(--lb-surface);
	box-shadow: none;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	color: var(--lb-ink-deep);
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme input:focus {
	outline: none;
	border-color: var(--lb-accent);
	box-shadow: 0 0 0 3px var(--lb-accent-tint);
}

/* The one field that has to be filled to start: a search box. */
.lb-hs .lb-hs__form .gform_wrapper.gform-theme .lb-hs-field--where input[type="text"] {
	min-height: 3.5rem;
	padding-left: 2.85rem;
	font-size: var(--lb-text-lg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6779' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.95rem 50%;
	background-size: 1.25rem;
}

.lb-hs .gform_wrapper .gfield .gfield_description {
	padding-top: 0.4rem;
	font-size: var(--lb-text-xs);
	color: var(--lb-ash);
}

.lb-hs .gform_wrapper .gform-field-label--type-sub {
	font-size: var(--lb-text-2xs);
	color: var(--lb-ash);
}

/* Choices as tap targets (the select is still what submits). */
.lb-hs .gform_wrapper .gform_fields .gfield.lb-hs-chips { grid-column: 1 / -1 !important; }

.lb-hs .gform_wrapper .ginput_container.lb-hs-select-hidden { display: none !important; }

.lb-hs .gform_wrapper .lb-hs-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem !important;
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme button.lb-hs-opt {
	min-height: 2.6rem;
	min-width: 3.1rem;
	margin: 0 !important;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--lb-hs-line) !important;
	border-radius: var(--lb-radius-pill) !important;
	background-color: var(--lb-surface) !important;
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	line-height: 1;
	color: var(--lb-ink) !important;
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color var(--lb-duration) var(--lb-ease), border-color var(--lb-duration) var(--lb-ease), color var(--lb-duration) var(--lb-ease);
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme button.lb-hs-opt:hover { border-color: var(--lb-accent) !important; color: var(--lb-ink-deep) !important; }

.lb-hs .lb-hs__form .gform_wrapper.gform-theme button.lb-hs-opt[aria-pressed="true"]:hover { color: var(--lb-on-accent) !important; }

.lb-hs .lb-hs__form .gform_wrapper.gform-theme button.lb-hs-opt[aria-pressed="true"] {
	border-color: var(--lb-accent) !important;
	background-color: var(--lb-accent) !important;
	color: var(--lb-on-accent) !important;
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme button.lb-hs-opt:focus-visible {
	outline: 2px solid var(--lb-accent);
	outline-offset: 2px;
}

.lb-hs .gform_wrapper .gform_page_footer,
.lb-hs .gform_wrapper .gform_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.4rem;
	padding: 0;
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme .gform_next_button,
.lb-hs .lb-hs__form .gform_wrapper.gform-theme input[type="submit"] {
	flex: 1 1 12rem;
	min-height: 3.3rem;
	padding: 0.9rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--lb-accent);
	font-family: var(--lb-font-text);
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-bold);
	color: var(--lb-on-accent);
	cursor: pointer;
	transition: background-color var(--lb-duration) var(--lb-ease);
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme .gform_next_button:hover,
.lb-hs .lb-hs__form .gform_wrapper.gform-theme input[type="submit"]:hover {
	background-color: var(--lb-accent-hover);
}

.lb-hs .lb-hs__form .gform_wrapper.gform-theme .gform_previous_button {
	flex: 0 0 auto;
	min-height: 3.3rem;
	padding: 0.9rem 1.2rem;
	border: 1px solid var(--lb-hs-line);
	border-radius: 6px;
	background-color: var(--lb-surface);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink);
}

.lb-hs .gform_wrapper .gfield--type-consent .gfield_consent_label,
.lb-hs .gform_wrapper .gfield--type-html {
	font-size: var(--lb-text-2xs);
	line-height: 1.5;
	color: var(--lb-ash);
}

.lb-hs .gform_wrapper .gfield--type-html a { color: var(--lb-ink); }

/* --- Trust line ---------------------------------------------------------- */

.lb-hs__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: var(--lb-hairline);
}

.lb-hs .lb-hs__face {
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50% !important;
	object-fit: cover;
	flex: none;
}

.lb-hs__who {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	font-size: var(--lb-text-xs);
	color: var(--lb-ash);
}

.lb-hs__who strong {
	font-size: var(--lb-text-sm);
	color: var(--lb-ink-deep);
}

.lb-hs__promises {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink);
}

.lb-hs__promises li::before {
	content: '';
	display: inline-block;
	width: 0.55em;
	height: 0.3em;
	margin: 0 0.4em 0.2em 0;
	border-left: 2px solid var(--lb-positive);
	border-bottom: 2px solid var(--lb-positive);
	transform: rotate(-45deg);
}

/* --- Success ------------------------------------------------------------- */

.lb-hs-done { padding-top: 0.25rem; }

.lb-hs-done__mark {
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background-color: var(--lb-positive);
}

.lb-hs-done__mark svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lb-hs-done__eyebrow {
	margin: 1rem 0 0;
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-positive);
}

.lb-hs .lb-hs-done__title {
	margin: 0.35rem 0 0.6rem;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
	line-height: 1.12;
	color: var(--lb-ink-deep);
}

.lb-hs-done__text {
	margin: 0;
	font-size: var(--lb-text-base);
	line-height: 1.55;
	color: var(--lb-ink);
}

.lb-hs-done__next {
	margin-top: 1.4rem;
	padding: 1.2rem;
	border-radius: 8px;
	background-color: var(--lb-mist);
}

.lb-hs-done__lead {
	margin: 0 0 0.9rem;
	font-size: var(--lb-text-sm);
	color: var(--lb-ink);
}

.lb-hs-done__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.lb-hs-done__alt {
	display: inline-flex;
	align-items: center;
	padding: 1.05em 1.5em;
	border: 1px solid var(--lb-hs-line);
	border-radius: var(--lb-radius);
	background-color: var(--lb-surface);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	line-height: 1;
	color: var(--lb-ink-deep);
	text-decoration: none;
}

.lb-hs-done__alt:hover { border-color: var(--lb-accent); color: var(--lb-ink-deep); }

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

@media (prefers-reduced-motion: no-preference) {
	.lb-hs__pin {
		animation: lb-hs-drop 520ms var(--lb-ease) both;
		animation-delay: calc(var(--i) * 70ms + 250ms);
	}

	.lb-hs__pin--hot::after { animation: lb-hs-ping 2.4s var(--lb-ease) 1.6s infinite; }

	.lb-hs__lock {
		animation: lb-hs-rise 600ms var(--lb-ease) 500ms both;
	}
}

.lb-motion-off .lb-hs__pin,
.lb-motion-off .lb-hs__pin--hot::after,
.lb-motion-off .lb-hs__lock { animation: none; }

@keyframes lb-hs-drop {
	from { opacity: 0; transform: translate(-50%, -110%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes lb-hs-ping {
	0%   { opacity: 0.7; transform: scale(1); }
	70%  { opacity: 0; transform: scale(1.9); }
	100% { opacity: 0; transform: scale(1.9); }
}

@keyframes lb-hs-rise {
	from { opacity: 0; transform: translate(-50%, -42%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* --- Narrower screens ----------------------------------------------------
   Under ~1100px the listing column goes to one card wide; on phones it goes
   altogether and the map shows as a band above the card. */

@media (max-width: 70rem) {
	.lb-hs__body { grid-template-columns: minmax(0, 1fr) minmax(16rem, 34%); }
	.lb-hs__cards { grid-template-columns: minmax(0, 1fr); }
	.lb-hs__chip--price,
	.lb-hs__save { display: none; }
}

@media (max-width: 48rem) {
	.lb-hs { --lb-hs-bar: 3.6rem; }

	.lb-hs__body { grid-template-columns: minmax(0, 1fr); }
	.lb-hs__list,
	.lb-hs__chip { display: none; }

	.lb-hs__search { flex: 1; min-width: 0; }

	.lb-hs__portal::after {
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--lb-paper) 0%, transparent) 0,
			color-mix(in srgb, var(--lb-paper) 0%, transparent) 7rem,
			var(--lb-paper) 13rem
		);
	}

	.lb-hs__stage {
		align-items: flex-start;
		min-height: 0;
		padding-top: calc(var(--lb-hs-bar) + 7.5rem);
	}

	.lb-hs__wrap { padding-inline: 0.75rem; }

	.lb-hs__card { border-radius: 12px; }

	.lb-hs__promises { margin-left: 0; }
}


/* ==========================================================================
   THANK-YOU PAGE  [lb_thank_you]  (inc/thank-you.php)

   Where the home search and refinance forms land; the URL ad campaigns count
   as a conversion. One card: what happens next, then the loan officer one
   tap away, then something useful to do while waiting.
   ========================================================================== */

.e-con.lb-ty-wrap {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	padding: 0;
}

.lb-ty {
	padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
	background:
		radial-gradient(60rem 26rem at 50% -8rem, var(--lb-accent-tint), transparent 70%),
		var(--lb-paper);
}

.lb-ty p { max-width: none; }

.lb-ty__wrap {
	width: 100%;
	max-width: calc(40rem + var(--lb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--lb-gutter);
}

.lb-ty__card {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-top: 4px solid var(--lb-accent);
	border-radius: 12px;
	background-color: var(--lb-surface);
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06),
	            0 30px 70px -28px rgba(15, 27, 45, 0.35);
}

.lb-ty__mark {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background-color: var(--lb-positive);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--lb-positive) 14%, transparent);
}

.lb-ty__mark svg {
	width: 1.7rem;
	height: 1.7rem;
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 24;
}

.lb-ty__eyebrow {
	margin: 1.25rem 0 0;
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-positive);
}

.lb-ty .lb-ty__title {
	margin: 0.4rem 0 0.7rem;
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
	line-height: 1.08;
	color: var(--lb-ink-deep);
}

.lb-ty__lead {
	margin: 0;
	font-size: var(--lb-text-lg);
	line-height: 1.5;
	color: var(--lb-ink);
}

/* What happens next: a short vertical timeline. */
.lb-ty__steps {
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: lb-ty;
}

.lb-ty__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0 0 1.15rem 2.6rem;
	counter-increment: lb-ty;
}

.lb-ty__step::before {
	content: counter(lb-ty);
	position: absolute;
	left: 0;
	top: -0.1rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid var(--lb-rule);
	border-radius: 50%;
	background-color: var(--lb-surface);
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-bold);
	color: var(--lb-ash);
}

.lb-ty__step:not(:last-child)::after {
	content: '';
	position: absolute;
	left: calc(0.875rem - 1px);
	top: 1.75rem;
	bottom: 0.1rem;
	width: 2px;
	background-color: var(--lb-rule);
}

.lb-ty__step.is-current::before {
	border-color: var(--lb-accent);
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
}

.lb-ty__step-title {
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
}

.lb-ty__now {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.15rem 0.5rem;
	border-radius: var(--lb-radius-pill);
	background-color: var(--lb-accent-tint);
	font-size: var(--lb-text-2xs);
	font-weight: var(--lb-weight-bold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-accent-text);
	vertical-align: 0.15em;
}

.lb-ty__step-text {
	font-size: var(--lb-text-sm);
	line-height: 1.5;
	color: var(--lb-ash);
}

/* The loan officer. */
.lb-ty__officer {
	margin-top: 0.75rem;
	padding: 1.25rem;
	border-radius: 10px;
	background-color: var(--lb-mist);
}

.lb-ty__who {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.lb-ty .lb-ty__face {
	width: 3.5rem;
	height: 3.5rem;
	flex: none;
	border: 2px solid var(--lb-surface);
	border-radius: 50% !important;
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(15, 27, 45, 0.15);
}

.lb-ty__name {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: var(--lb-text-xl);
	line-height: 1.2;
	color: var(--lb-ink-deep);
}

.lb-ty__meta {
	margin: 0.1rem 0 0;
	font-size: var(--lb-text-xs);
	color: var(--lb-ash);
}

.lb-ty__heads-up {
	margin: 1rem 0 0;
	font-size: var(--lb-text-sm);
	line-height: 1.5;
	color: var(--lb-ink);
}

.lb-ty__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: 0.5rem;
	margin-top: 1rem;
}

.lb-ty__action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 2.9rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--lb-rule);
	border-radius: 8px;
	background-color: var(--lb-surface);
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
	text-decoration: none;
	transition: border-color var(--lb-duration) var(--lb-ease), background-color var(--lb-duration) var(--lb-ease), color var(--lb-duration) var(--lb-ease);
}

.lb-ty__action:hover,
.lb-ty__action:focus-visible {
	border-color: var(--lb-accent);
	color: var(--lb-ink-deep);
}

.lb-ty__action svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	fill: none;
	stroke: var(--lb-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lb-ty__action--save {
	grid-column: 1 / -1;
	border-color: var(--lb-accent);
	background-color: var(--lb-accent);
	color: var(--lb-on-accent);
}

.lb-ty__action--save svg { stroke: currentColor; }

.lb-ty__action--save:hover,
.lb-ty__action--save:focus-visible {
	background-color: var(--lb-accent-hover);
	border-color: var(--lb-accent-hover);
	color: var(--lb-on-accent);
}

/* While you wait. */
.lb-ty__next { margin-top: 2rem; }

.lb-ty__next-title {
	margin: 0 0 0.75rem;
	font-size: var(--lb-text-xs);
	font-weight: var(--lb-weight-semibold);
	letter-spacing: var(--lb-tracking-label);
	text-transform: uppercase;
	color: var(--lb-ash);
}

.lb-ty__next-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.75rem;
}

.lb-ty__tile {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.1rem 1.2rem;
	border: var(--lb-hairline);
	border-radius: 10px;
	background-color: var(--lb-surface);
	text-decoration: none;
	transition: border-color var(--lb-duration) var(--lb-ease), box-shadow var(--lb-duration) var(--lb-ease), transform var(--lb-duration) var(--lb-ease);
}

.lb-ty__tile:hover,
.lb-ty__tile:focus-visible {
	border-color: var(--lb-accent);
	box-shadow: var(--lb-shadow-panel);
	transform: translateY(-2px);
}

.lb-ty__tile-title {
	font-size: var(--lb-text-base);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
}

.lb-ty__tile-title::after {
	content: ' \2192';
	color: var(--lb-accent-text);
}

.lb-ty__tile-text {
	font-size: var(--lb-text-sm);
	line-height: 1.45;
	color: var(--lb-ash);
}

@media (prefers-reduced-motion: no-preference) {
	.lb-ty__mark { animation: lb-ty-pop 480ms var(--lb-ease) both; }
	.lb-ty__mark svg { animation: lb-ty-tick 420ms var(--lb-ease) 260ms both; }
}

.lb-motion-off .lb-ty__mark,
.lb-motion-off .lb-ty__mark svg { animation: none; }

@keyframes lb-ty-pop {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes lb-ty-tick {
	from { stroke-dashoffset: 24; }
	to   { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------------
   Leave a review - lb-core's [lb_review_form], shown by [lb_reviews] on the
   Reviews page (same markup as the agent design; lender tokens).
   ------------------------------------------------------------------------ */
.lb-rv-host { width: 100%; max-width: 40rem; margin-inline: auto; }
.lb-reviews > .lb-rv-host { margin-top: var(--lb-space-xl); }
.lb-rv-host__title {
	margin: 0 0 var(--lb-space-sm);
	font-family: var(--lb-font-display);
	font-size: var(--lb-display-sm);
	font-weight: var(--lb-weight-regular);
	letter-spacing: var(--lb-tracking-display);
	line-height: var(--lb-leading-tight);
	color: var(--lb-ink-deep);
}

.lb-rv {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border: 1px solid var(--lb-rule);
	border-top: 3px solid var(--lb-accent);
	border-radius: var(--lb-radius);
	background: var(--lb-surface);
	box-shadow: var(--lb-shadow-panel);
	text-align: left;
}
.lb-rv p { max-width: none; margin: 0; }
.lb-rv__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--lb-text-sm);
	font-weight: var(--lb-weight-semibold);
	color: var(--lb-ink-deep);
}
.lb-rv__opt { font-weight: var(--lb-weight-regular); color: var(--lb-ash); }
.lb-rv__hint { display: block; margin-top: 0.35rem; font-size: var(--lb-text-xs); color: var(--lb-ash); }

.lb-rv :is(input[type="text"], textarea, select) {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--lb-rule);
	border-radius: var(--lb-radius);
	background: var(--lb-paper);
	font: inherit;
	font-size: var(--lb-text-base);
	color: var(--lb-ink);
}
.lb-rv :is(input[type="text"], select) { height: 3rem; }
.lb-rv textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.lb-rv :is(input[type="text"], textarea, select):focus {
	outline: none;
	border-color: var(--lb-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lb-accent) 18%, transparent);
	background: var(--lb-surface);
}
.lb-rv__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.1rem; }

/* Stars: five radios drawn right to left, so "this star and the ones before
   it" is a plain sibling selector. */
.lb-rv__stars { margin: 0; padding: 0; border: 0; min-width: 0; }
.lb-rv__star-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.2rem; }
.lb-rv__star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lb-rv__star-row label { cursor: pointer; line-height: 0; }
.lb-rv__star-row svg {
	width: 2.25rem;
	height: 2.25rem;
	fill: transparent;
	stroke: #C3CAD5;
	stroke-width: 1.5;
	stroke-linejoin: round;
	transition: fill 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}
.lb-rv__star-row input:checked ~ label svg,
.lb-rv__star-row label:hover svg,
.lb-rv__star-row label:hover ~ label svg { fill: var(--lb-accent); stroke: var(--lb-accent); }
.lb-rv__star-row label:hover svg { transform: scale(1.08); }
.lb-rv__star-row input:focus-visible + label svg { outline: 2px solid var(--lb-accent); outline-offset: 2px; border-radius: 4px; }

.lb-rv__submit {
	justify-self: start;
	min-height: 3rem;
	padding: 0 1.6rem;
	border: 0;
	border-radius: var(--lb-radius);
	background: var(--lb-accent);
	color: var(--lb-on-accent);
	font: inherit;
	font-weight: var(--lb-weight-bold);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.lb-rv__submit:hover { background: var(--lb-accent-hover); }
.lb-rv__submit:focus-visible { outline: 2px solid var(--lb-ink-deep); outline-offset: 3px; }
.lb-rv__note { font-size: var(--lb-text-xs); color: var(--lb-ash); }
.lb-rv__error {
	padding: 0.7rem 0.9rem;
	border-radius: var(--lb-radius);
	background: #FDECEC;
	color: #9B1C1C;
	font-size: var(--lb-text-sm);
}
.lb-rv__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lb-rv .lb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lb-rv--done { text-align: center; }
.lb-rv__done-title { font-family: var(--lb-font-display); font-size: var(--lb-text-xl); color: var(--lb-ink-deep); }

@media (max-width: 600px) {
	.lb-rv__submit { justify-self: stretch; }
	.lb-rv__star-row svg { width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.lb-rv__star-row svg, .lb-rv__submit { transition: none; }
}