/* ============================================================
   /quote-start/ -- Lead-gate landing page in front of /quote/
   Not custom-quote/style.css's dedicated ad-funnel PAGE theme (navy/crimson
   hero, topbar carousel, etc.) -- this page uses the normal site header/footer
   (layout-header.php/layout-footer.php) and the sitewide box1/box8/sitewidth/
   .buttons conventions (see prices.php, warranty.php, financing.php). The FORM
   CARD itself, though, deliberately mirrors custom-quote/style.css's numbered-
   section design (.lp-form-section/.lp-form-step/.lp-helper there) -- same
   navy step badges + uppercase section headers + green zip helper text, just
   under qs- prefixed classes since this is its own owned stylesheet, not an
   include of custom-quote's.
   ============================================================ */

/* css/layout.css's HTML5-reset rule (`article, aside, details, div, ... { display: block; }`)
   is a bare-tag selector with the same specificity as the browser's own `[hidden] { display:
   none }` UA rule -- author styles beat UA styles regardless, so it silently wins and every
   [hidden] element on this page (qs-zip-error, qs-form-error) renders visible-but-empty instead
   of actually hiding. custom-quote/style.css hit this exact issue and fixed it the same way
   (see its own "Defensive override" comment) -- this page needs its own copy since it doesn't
   share that stylesheet. */
[hidden] { display: none !important; }

/* css/layout.css never resets box-sizing sitewide (still the browser default `content-box`).
   Every `.qs-field input/select` below is `width: 100%` PLUS its own padding/border, so without
   this they render ~26px wider than their container (12px+12px padding + 1px+1px border) --
   eating into the card's right-hand padding and, worse, crowding the gap between side-by-side
   fields (Email/Phone, Zip/Location) since each one overflows past its grid column. custom-quote/
   style.css avoids this the same way via its own `.lp-body * { box-sizing: border-box; }`. */
* { box-sizing: border-box; }

/* #box1/#box1sub/#box1content are the sitewide hero shell (see prices.php, warranty.php,
   financing.php, etc.) -- but their actual look (background image/color, height, heading style)
   is NOT sitewide. Each of those pages supplies it via its own dedicated stylesheet
   (css/warranty.css, css/prices.css, ...); css/layout.css itself only ever contributes one
   rule, `body.has-breadcrumb #box1sub { padding-top: 136px; }`, to clear the fixed header. This
   page never had that per-page styling, so #box1 rendered with zero background and just that
   136px of unstyled space above a small dark-on-white heading -- on a short mobile viewport that
   reads as a big broken gap since there's nothing visually filling it. This is what actually
   supplies the missing design, the same way every other page's own CSS does.

   That 136px rule ONLY exists inside layout.css's own `@media screen and (max-width: 1012px)`
   block, though -- above 1013px wide, nav.bc-nav (the breadcrumb) switches to a fixed ribbon
   instead (its own `@media (min-width: 1013px)` block, same file) and every OTHER page supplies
   its own desktop clearance via that same page-specific stylesheet. This page didn't have one
   for that width range either, so h1/.qs-hero-sub (both in normal document flow, unlike the
   breadcrumb) rendered starting at y=0 -- directly underneath the fixed header + breadcrumb,
   completely hidden behind them. Measured: nav.bc-nav's own bottom edge sits at 175px at 1440px
   wide, hence 180px cleares it here with a little room to spare. */
#box1 {
	background: linear-gradient(135deg, #123258 0%, #1D5C96 100%);
	padding-bottom: 48px;
}

@media (min-width: 1013px) {
	#box1sub { padding-top: 180px; }
}

#box1content h1 {
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
}

.qs-hero-sub {
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	text-align: center;
	max-width: 640px;
	margin: 10px auto 0;
	padding: 0 20px 0;
}

@media (max-width: 640px) {
	#box1 { padding-bottom: 32px; }
	#box1content h1 { font-size: 26px; }
	.qs-hero-sub { font-size: 16px; }
}

/* NOT `.box8` -- that class (used for this same vertical-padding purpose on prices.php/
   warranty.php/etc.) is actually defined per-page, in each of THEIR OWN dedicated stylesheets
   (css/warranty.css, css/locations.css, ...), not sitewide in css/layout.css. This page never
   loads any of those, so a `.box8` class here would carry zero padding -- which is exactly why
   the form used to sit flush against the breadcrumb bar above and the page bottom below. #qs-form
   gets its own padding directly instead. */
#qs-form {
	padding: 56px 20px 72px;
	background: url(../images/pattern1.png); /* Same sitewide subtle-texture convention as
	                                             warranty.css/prices.css/financing.css's #box5, etc. */
}

.qs-form-wrap {
	display: flex;
	justify-content: center;
}

.qs-form-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	padding: 32px;
	width: 100%;
	max-width: 640px;
}

.qs-form-section { margin-bottom: 22px; }

.qs-form-section h2 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #1D5C96;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid #E7EAEE;
}

.qs-form-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	background: #1D5C96;
	color: #fff;
	font-size: 12px;
}

.qs-helper {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #1E9E5A;
	font-weight: 700;
}

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

.qs-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.qs-field label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #1A1F2B;
	margin-bottom: 6px;
}

.qs-field input,
.qs-field select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #CBD2DB;
	border-radius: 6px;
	font-size: 15px;
	font-family: inherit;
	color: #1A1F2B;
	background: #fff;
	line-height: normal; /* Overrides css/layout.css's blanket 30px line-height on bare input/select tags. */
}

.qs-field input:focus,
.qs-field select:focus {
	outline: none;
	border-color: #d9272e;
	box-shadow: 0 0 0 3px rgba(217, 39, 46, 0.12);
}

.qs-field input.qs-input-invalid,
.qs-field select.qs-input-invalid {
	border-color: #d9272e;
	box-shadow: 0 0 0 3px rgba(217, 39, 46, 0.12);
}

.qs-location-box {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 45px;
	padding: 0 12px;
	border: 1px solid #CBD2DB;
	border-radius: 6px;
	background: #F8F8F8;
	font-size: 14px;
	color: #5B6472;
}
.qs-location-box.is-located { color: #1E9E5A; font-weight: 700; }
.qs-location-pin { font-style: normal; }

.qs-zip-error {
	margin: -8px 0 14px;
	font-size: 13px;
	font-weight: 700;
	color: #A20D26;
}
.qs-zip-error strong { font-weight: 700; }

.qs-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
}

.qs-form-error {
	background: #FDECEC;
	border: 1px solid #F3B4BC;
	color: #A20D26;
	font-size: 13px;
	font-weight: 700;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 16px;
}

.qs-submit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: none;
	font-size: 17px;
}
.qs-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; }

@media (max-width: 640px) {
	.qs-form-row { grid-template-columns: 1fr; }
	.qs-form-card { padding: 22px; }
}