/* ============================================================================
   Legacy Quote - the landing page
   ----------------------------------------------------------------------------
   Everything is scoped under .lq or body.lq-landing. Nothing here sets a colour
   on a shared selector, because a global colour rule is what made the dark
   green sections of this site unreadable once before.

   The palette is lifted from rental-analysis-brand.css so that this page and
   /rental-analysis/ look like the same hand. The hero gradient is the same
   135deg green ramp; the only difference is that here it is translucent and
   there is drone footage behind it.

   Selectors for the Bridge furniture were read off the live page on
   22 September 2026: header.page_header > .header_bottom > .header_inner,
   nav.main_menu, .mobile_menu_button, .side_menu_button, .logo_wrapper, and
   the content wrapper .content .container_inner.page_container_inner.
   ========================================================================= */

.lq {
	--lq-green: #1D7A3F;
	--lq-deep: #162D1A;
	--lq-accent: #7DC483;
	--lq-cream: #F8F6F1;
	--lq-paper: #FFFFFF;
	--lq-text: #1A1A1A;
	--lq-muted: #6A6A6A;
	--lq-border: #D8D3C8;
	--lq-radius: 2px;

	font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
	color: var(--lq-text);
}

/* --- 1. Strip the page back to a landing page --------------------------- *
 * The nav goes, the logo stays. The page this was modelled from kept its
 * full menu, which offers a visitor twenty ways to leave before they have
 * answered the one question being asked.                                   */

body.lq-stripped nav.main_menu,
body.lq-stripped .mobile_menu_button,
body.lq-stripped .side_menu_button {
	display: none !important;
}

/* The one thing that goes back INTO the header once the nav is gone.
 *
 * Stripping the navigation leaves a wide empty bar with a logo stranded in it,
 * and it takes away the only way off the page for someone who would rather
 * talk to a person than fill in a form. A phone button is the right CTA here:
 * the page itself is already the "request a quote" destination, so a button
 * saying that would point at itself.
 *
 * Scoped to body.lq-landing, so no other page's header is touched. Colours are
 * literal rather than var(), because this element sits outside .lq where the
 * custom properties are declared. */

body.lq-stripped .lq-header-cta {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	margin: 29px 0 0 18px;
	padding: 0 20px;
	box-sizing: border-box;
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #FAF8F3 !important;
	background: #1D7A3F;
	border-radius: 2px;
	text-decoration: none;
	white-space: nowrap;
}

body.lq-stripped .lq-header-cta:hover {
	background: #145C2E;
	color: #FAF8F3 !important;
}

body.lq-stripped .lq-header-cta svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

@media (max-width: 767px) {

	body.lq-stripped .lq-header-cta {
		height: 38px;
		margin-top: 31px;
		padding: 0 14px;
		font-size: 14px;
	}

	body.lq-stripped .lq-header-cta .lq-cta-number {
		display: none;
	}
}

/* The hero provides its own top edge, so the theme's page padding goes. */
body.lq-landing .content .container_inner.page_container_inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --- 2. Full bleed ------------------------------------------------------ *
 * The theme wraps content in a centred container, 1100px on this site. 100vw
 * with a negative half-viewport margin breaks out of it.
 *
 * .lq deliberately does NOT clip its overflow. It did in the first build, to
 * stop a horizontal scrollbar, and that was the bug: .lq is itself inside the
 * 1100px container, so clipping at its own edges cut the full-bleed sections
 * straight back down to 1100px and sliced the left of the headline off. The
 * theme already sets overflow: hidden on both body and .wrapper_inner, which
 * is where that job belongs and where the ~15px of scrollbar overshoot from
 * 100vw is absorbed.                                                        */

.lq-hero,
.lq-creds,
.lq-what,
.lq-proof {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* --- 3. The hero -------------------------------------------------------- */

.lq-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 640px;
	padding: 72px 0;
	overflow: hidden;
	background-color: var(--lq-deep);
	background-size: cover;
	background-position: 50% 55%;
}

.lq-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* The same ramp as the rental analysis hero, opened up towards the right so
   the footage reads behind the form card. Measured against white text at the
   left edge, where the headline sits: well past 4.5 to 1. */
.lq-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(22, 45, 26, 0.93) 0%, rgba(29, 122, 63, 0.72) 52%, rgba(22, 45, 26, 0.48) 100%);
}

/* Three ways to treat the footage, set with data-scrim on .lq-hero.
 *
 * Default (no attribute) is the green above, which matches the flat hero on
 * /rental-analysis/ exactly.
 *
 * "neutral" drops the green and darkens instead, so the footage keeps its own
 * colour: the sky stays blue, the trees stay green, the skyline stays grey.
 *
 * "none" removes the overlay altogether. White type cannot sit on a bright
 * midday sky unaided, so the copy takes a panel of its own instead. This is
 * the honest version of "no scrim": the footage is untouched everywhere the
 * text is not. */

.lq-hero[data-scrim="neutral"] .lq-scrim {
	background: linear-gradient(100deg, rgba(10, 12, 10, 0.88) 0%, rgba(10, 12, 10, 0.58) 52%, rgba(10, 12, 10, 0.26) 100%);
}

.lq-hero[data-scrim="none"] .lq-scrim {
	display: none;
}

.lq-hero[data-scrim="none"] .lq-hero-copy {
	padding: 32px 34px;
	background: rgba(12, 24, 15, 0.80);
	border-radius: var(--lq-radius);
}

.lq-hero-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 56px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: border-box;
}

.lq-hero-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.lq-eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lq-accent);
}

.lq-hero-title {
	margin: 0;
	font-family: "Zilla Slab", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 52px;
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: #FFFFFF;
}

.lq-hero-title em,
.lq-hero-title span {
	display: block;
}

.lq-hero-title em {
	font-style: italic;
	font-weight: 400;
}

.lq-hero-sub {
	margin: 22px 0 18px;
	max-width: 460px;
	font-size: 17px;
	line-height: 1.68;
	color: #E8EFE8;
}

.lq-hero-by {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #B9D6C0;
}

/* --- 4. The card -------------------------------------------------------- */

.lq-card {
	flex: 0 0 452px;
	box-sizing: border-box;
	padding: 30px;
	background: var(--lq-cream);
	border-radius: var(--lq-radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.lq-step-count {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lq-muted);
}

.lq-card-title {
	margin: 0 0 18px;
	font-family: "Zilla Slab", Georgia, "Times New Roman", serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--lq-text);
}

.lq-field {
	margin-bottom: 16px;
}

.lq-field label,
.lq-field .lq-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #3A3A34;
}

.lq-field input[type="text"],
.lq-field input[type="email"],
.lq-field input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	font-family: inherit;
	font-size: 16px;
	color: var(--lq-text);
	background: var(--lq-paper);
	border: 1px solid var(--lq-border);
	border-radius: var(--lq-radius);
}

.lq-field input:focus {
	outline: none;
	border-color: var(--lq-green);
	box-shadow: 0 0 0 3px rgba(29, 122, 63, 0.12);
}

.lq-field input.lq-invalid {
	border-color: #B3261E;
}

.lq-row2,
.lq-row3 {
	display: grid;
	gap: 12px;
}

.lq-row2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lq-row3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Pills, matching the ones already on the rental analysis form. */
.lq-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lq-pill {
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--lq-text);
	background: var(--lq-paper);
	border: 1px solid var(--lq-border);
	border-radius: var(--lq-radius);
	cursor: pointer;
}

.lq-pill:hover {
	border-color: var(--lq-green);
}

.lq-pill.active {
	color: #FFFFFF;
	background: var(--lq-green);
	border-color: var(--lq-green);
}

.lq-consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lq-muted);
}

.lq-consent input {
	margin-top: 2px;
	flex: 0 0 auto;
}

.lq-submit {
	width: 100%;
	padding: 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--lq-cream);
	background: var(--lq-green);
	border: none;
	border-radius: var(--lq-radius);
	cursor: pointer;
}

.lq-submit:hover {
	background: #0B1109;
}

.lq-submit[disabled] {
	opacity: 0.7;
	cursor: default;
}

.lq-back {
	width: 100%;
	margin-top: 10px;
	padding: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--lq-muted);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
}

.lq-fine {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lq-muted);
}

.lq-renter {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--lq-border);
	font-size: 14px;
	color: #3A3A34;
}

.lq-renter a {
	font-weight: 600;
	color: var(--lq-green);
}

.lq-err {
	display: none;
	margin: 6px 0 0;
	font-size: 13px;
	color: #B3261E;
}

.lq-err.visible {
	display: block;
}

.lq-form-error {
	margin: 14px 0 0;
	padding: 12px;
	font-size: 14px;
	color: #7F1D1B;
	background: #FBE9E7;
	border-radius: var(--lq-radius);
}

/* The honeypot. Off screen rather than display:none, because some bots skip
   hidden fields and the point is that they fill this one in. */
.lq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The textarea only appears on the thank-you panel, but it should match the
   inputs exactly, so it is declared with them rather than beside them. */

.lq-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--lq-text);
	background: var(--lq-paper);
	border: 1px solid var(--lq-border);
	border-radius: var(--lq-radius);
	resize: vertical;
}

.lq-field textarea:focus {
	outline: none;
	border-color: var(--lq-green);
	box-shadow: 0 0 0 3px rgba(29, 122, 63, 0.12);
}

/* --- 4b. The follow-up, on the thank-you panel -------------------------- */

#lq-more {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--lq-border);
}

.lq-more-lead {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: #3A3A34;
}

#lq-more .lq-pill {
	font-size: 13px;
	padding: 8px 12px;
}

.lq-more-done {
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 14px;
	color: #14532D;
	background: var(--lq-green-light, #DCEBDE);
	border-radius: var(--lq-radius);
}

/* --- 4c. The credentials strip ------------------------------------------ *
 * Carried over from /rental-analysis/, where it sits directly under the hero.
 * Four short claims, each of which resolves against a public record.        */

.lq-creds {
	box-sizing: border-box;
	padding: 18px 32px;
	background: var(--lq-paper);
	border-bottom: 1px solid var(--lq-border);
}

.lq-creds ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	max-width: 1136px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.lq-creds li {
	position: relative;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #3A3A34;
}

.lq-creds li + li::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	background: var(--lq-green);
	border-radius: 50%;
}

/* --- 5. What comes back ------------------------------------------------- */

.lq-what {
	box-sizing: border-box;
	padding: 72px 32px 64px;
	background: var(--lq-cream);
}

.lq-eyebrow-dark {
	color: var(--lq-muted);
	max-width: 1136px;
	margin-left: auto;
	margin-right: auto;
}

.lq-h2 {
	max-width: 1136px;
	margin: 12px auto 30px;
	font-family: "Zilla Slab", Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 38px;
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: var(--lq-text);
}

.lq-h2 em {
	font-style: italic;
	color: var(--lq-green);
}

.lq-h2 span {
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: 34px;
}

.lq-what-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	max-width: 1136px;
	margin: 0 auto;
}

.lq-what-card {
	padding: 22px 20px;
	background: var(--lq-paper);
	border-top: 3px solid var(--lq-green);
	border-radius: var(--lq-radius);
}

.lq-what-card h3 {
	margin: 0 0 8px;
	font-family: "Zilla Slab", Georgia, "Times New Roman", serif;
	font-weight: 600;
	font-size: 19px;
	color: var(--lq-text);
}

.lq-what-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #3A3A34;
}

/* --- 6. The footer strip ------------------------------------------------ */

.lq-proof {
	box-sizing: border-box;
	padding: 28px 32px;
	background: var(--lq-deep);
	text-align: center;
}

.lq-proof p {
	margin: 0 0 4px;
	font-size: 13px;
	color: #B9D6C0;
}

/* --- 7. Smaller screens -------------------------------------------------- *
 * The video is removed below 1024px rather than merely hidden: a phone on
 * cellular should not be asked for 3 MB to decorate a form. The poster,
 * already on .lq-hero as a background image, carries the section.          */

@media (max-width: 1023px) {

	.lq-hero-video {
		display: none;
	}

	.lq-hero {
		min-height: 0;
		padding: 48px 0;
	}

	.lq-hero-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
		padding: 0 20px;
	}

	.lq-hero-title {
		font-size: 34px;
	}

	.lq-hero-sub {
		max-width: none;
		font-size: 16px;
	}

	.lq-card {
		flex-basis: auto;
		padding: 22px;
	}

	.lq-what {
		padding: 48px 20px;
	}

	.lq-what-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lq-h2 {
		font-size: 30px;
	}

	.lq-h2 span {
		font-size: 27px;
	}
}

@media (max-width: 600px) {

	.lq-what-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lq-row3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
}

/* --- 8. Reduced motion --------------------------------------------------- *
 * Someone who has asked their system for less movement should not be given a
 * drone shot that never stops. The script pauses it; this hides it, so the
 * poster shows instead of a frozen frame that may be mid-blur.             */

@media (prefers-reduced-motion: reduce) {

	.lq-hero-video {
		display: none;
	}
}