/* ===================================================================
   Know Your Price form.
   Deliberately motionless, and deliberately free of viewport-relative
   units. A clamp() sized in vw creates a feedback loop: the scrollbar
   appears, the viewport narrows, every font shrinks, the content gets
   shorter, the scrollbar leaves, and the page pulses at frame rate.
   Fixed sizes with one breakpoint.

   MOTION RULE: opacity and transform only, and never on anything that
   contains text. Scaling text either stutters or blurs; see the masthead
   sheen at the foot of this file.
   Neither property affects layout, so neither can feed a resize loop.
   Width, height, padding, margin and font-size never animate here.

   CLASS PREFIX IS p1eq-, NOT p1e-, AND MUST STAY THAT WAY.
   The site's header template part already owns .p1e-kyp (the red
   "Know Your Price!" link, which carries a 2.2s scale animation and
   display:inline-block) and .p1e-nav (a two-column grid). When the form
   used the p1e- prefix it inherited both: the form pulsed, and it would
   not centre. Anything added here uses p1eq-.
   =================================================================== */

.p1eq-kyp{
	--p1blue:#1f3b7a; --p1red:#8e1f16; --p1gold:#b58a2a; --p1green:#1b5e20;
	--p1ink:#2b1d0e; --p1cream:#fffdf6;
	--p1cur:'Segoe Script','Snell Roundhand','Lucida Handwriting','Brush Script MT',cursive;
	position:relative;
	width:100%; max-width:720px; margin:0 auto; padding:0 0 26px;
	background:var(--p1cream); border:2px solid var(--p1blue); border-radius:10px;
	box-shadow:0 4px 14px rgba(30,45,90,.14);
	font-family:Georgia,'Times New Roman',serif; color:var(--p1ink);
	contain:layout;
}
.p1eq-kyp *{ box-sizing:border-box; }

/* masthead: this is a Priority 1 Electric form, not an ad unit */
.p1eq-mast{ background:var(--p1blue); padding:16px 20px 14px; text-align:center;
	border-bottom:4px solid var(--p1gold); border-radius:8px 8px 0 0; }
.p1eq-mastrule{ display:block; font:700 12px/1.5 Georgia,serif; letter-spacing:.24em;
	text-transform:uppercase; color:#b9cbe8; }
.p1eq-masttitle{ display:block; font-family:var(--p1cur); font-size:34px; line-height:1.2; color:#fff; margin-top:2px; }
.p1eq-intro{ font:400 19px/1.5 Georgia,serif; color:#4a5a6a; text-align:center; margin:16px 20px 18px; }
.p1eq-why{ font:400 19px/1.5 Georgia,serif; color:#4a5a6a; margin:-4px 0 4px; }

.p1eq-progress{ height:6px; background:#e4e8ee; overflow:hidden; margin:0 0 22px; }
.p1eq-bar{ display:block; height:100%; background:var(--p1gold); transition:width .28s ease; }

.p1eq-screen{ display:none; padding:0 20px; }
.p1eq-screen.is-active{ display:block; animation:p1eqIn .16s ease-out both; }
@keyframes p1eqIn{ from{ opacity:0; } to{ opacity:1; } }

.p1eq-q{ font:700 22px/1.3 Georgia,serif; color:var(--p1blue); margin:24px 0 12px; }
.p1eq-screen.is-active > .p1eq-q:first-of-type{ margin-top:0; }
.p1eq-hint{ display:block; font:400 17px/1.4 Georgia,serif; color:#6b7684; margin-top:3px; }

/* option buttons */
.p1eq-opts{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:8px; }
.p1eq-opt{
	display:block; width:100%; min-height:58px; padding:14px 18px;
	font:400 20px/1.3 Georgia,serif; text-align:left; color:var(--p1ink);
	background:#fff; border:2px solid #c3d0e0; border-radius:9px; cursor:pointer;
}
.p1eq-opt{ transition:background-color .12s linear, border-color .12s linear, color .12s linear,
	transform .1s ease, box-shadow .12s ease; }
.p1eq-opt:hover{ border-color:var(--p1blue); background:#f4f8fd;
	transform:translateY(-1px); box-shadow:0 2px 5px rgba(30,45,90,.10); }
.p1eq-opt:active{ transform:translateY(1px); box-shadow:none; }
.p1eq-opt.is-on{ background:var(--p1blue); border-color:var(--p1blue); color:#fff; font-weight:700;
	animation:p1eqPick .18s ease-out; }
@keyframes p1eqPick{ from{ transform:scale(.985); } to{ transform:scale(1); } }
.p1eq-opt:focus-visible{ outline:3px solid var(--p1gold); outline-offset:2px; }

.p1eq-opts.p1eq-cities{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.p1eq-cities .p1eq-opt{ min-height:50px; padding:12px 12px; font-size:18px; text-align:center; }

/* conditional blocks: only the terminal stop messages */
.p1eq-stop{ display:none; }
.p1eq-stop.is-on{
	display:block; margin-top:22px; padding:18px 20px;
	background:#fff; border-left:6px solid var(--p1red); border-radius:0 9px 9px 0;
}
.p1eq-stop p{ font:400 20px/1.55 Georgia,serif; margin:0 0 14px; }
.p1eq-callbtn{
	display:inline-block; padding:14px 28px; background:var(--p1green); color:#fff;
	font:700 22px/1.2 Georgia,serif; text-decoration:none; border-radius:9px;
}
.p1eq-callbtn{ transition:background-color .12s linear, transform .1s ease; }
.p1eq-callbtn:hover{ transform:translateY(-1px); }
.p1eq-callbtn:active{ transform:translateY(1px); }
.p1eq-callbtn:hover,.p1eq-callbtn:focus{ background:#124116; color:#fff; }
.p1eq-alt{ margin:14px 0 0 !important; }
.p1eq-link{
	background:none; border:none; padding:0; cursor:pointer;
	font:400 18px/1.4 Georgia,serif; color:var(--p1blue); text-decoration:underline;
}

/* nav */
.p1eq-nav{ display:flex; gap:12px; margin-top:26px; }
.p1eq-nav button{ padding:14px 28px; border-radius:9px; cursor:pointer; font:700 20px/1.2 Georgia,serif; }
.p1eq-back{ background:#fff; border:2px solid #c3d0e0; color:#4a5a6a; }
.p1eq-next,.p1eq-send{ background:var(--p1blue); border:2px solid #14295a; color:#fff; margin-left:auto; }
.p1eq-nav button{ transition:background-color .12s linear, color .12s linear,
	transform .1s ease, box-shadow .12s ease; }
.p1eq-nav button:hover{ transform:translateY(-1px); box-shadow:0 3px 7px rgba(30,45,90,.16); }
.p1eq-nav button:active{ transform:translateY(1px); box-shadow:none; }
.p1eq-next:hover,.p1eq-send:hover{ background:#14295a; }
.p1eq-primary{ background:var(--p1red) !important; border-color:#6d150f !important; }
.p1eq-primary:hover{ background:#6d150f !important; }
.p1eq-send[disabled]{ opacity:.6; cursor:default; }

/* the button declines rather than moving anything */
.p1eq-waiting{ position:relative; }
.p1eq-waiting::after{ content:"Please answer everything above first"; position:absolute; left:50%; bottom:calc(100% + 9px);
	transform:translateX(-50%); white-space:nowrap; padding:7px 13px; border-radius:7px;
	background:#2b1d0e; color:#fff; font:400 15px/1.2 Georgia,serif; }
.p1eq-declined::after{ content:"Give us a call instead \2014 the number is just above"; background:var(--p1red); }

/* contact fields */
.p1eq-lab{ display:block; font:700 19px/1.4 Georgia,serif; color:var(--p1ink); margin:20px 0 7px; }
.p1eq-req{ font-weight:400; font-size:.82em; color:var(--p1red); }
.p1eq-opt-lab{ font-weight:400; font-size:.82em; color:#6b7684; }
.p1eq-kyp input[type=text],
.p1eq-kyp input[type=tel],
.p1eq-kyp input[type=email],
.p1eq-kyp textarea{
	width:100%; padding:13px 15px; background:#fff;
	font:400 19px/1.4 Georgia,serif; color:var(--p1ink);
	border:2px solid #c3d0e0; border-radius:9px;
}
.p1eq-kyp input:focus,.p1eq-kyp textarea:focus{ outline:none; border-color:var(--p1blue); }
.p1eq-other .p1eq-hint{ margin-top:7px; }
.p1eq-hp{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.p1eq-err{
	margin:18px 0 0; padding:14px 16px; background:#fdecea; border-left:5px solid var(--p1red);
	border-radius:0 7px 7px 0; font:400 19px/1.5 Georgia,serif; color:#7a1a12;
}
.p1eq-or{ text-align:center; font:400 19px/1.5 Georgia,serif; color:#4a5a6a; margin:16px 0 0; }
.p1eq-or a{ color:var(--p1green); font-weight:700; text-decoration:none; white-space:nowrap; }

/* the range, revealed on the thank-you page */
.p1eq-result{ max-width:640px; margin:0 auto 26px; font-family:Georgia,'Times New Roman',serif; }
.p1eq-tape{
	max-width:340px; margin:0 auto 18px; padding:18px 16px 14px; text-align:center;
	background:#fdfaf0; border-left:2px solid #cfc7ac; border-right:2px solid #cfc7ac;
	box-shadow:0 3px 10px rgba(0,0,0,.10);
	background-image:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 21px, rgba(31,59,122,.05) 21px 22px);
}
.p1eq-tapehead,.p1eq-tapesub,.p1eq-tapefoot{
	display:block; font:700 12px/1.8 'Courier New',Courier,monospace; letter-spacing:.05em; color:#2b2b52;
}
.p1eq-tapesub{ color:#6b7684; }
.p1eq-tapefoot{ color:#8a8a8a; margin-top:10px; border-top:1px dashed #b9b9b9; padding-top:8px; }
.p1eq-range{ display:block; margin:14px 0 4px; font:700 34px/1.2 Georgia,serif; color:#8e1f16; }
.p1eq-fine{ max-width:600px; margin:0 auto; font:400 18px/1.55 Georgia,serif; color:#4a5a6a; text-align:center; }

/* one breakpoint, and it only widens things */
@media (min-width:560px){
	.p1eq-opts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.p1eq-opts[data-field="bedrooms"],
	.p1eq-opts[data-field="preferred_contact"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.p1eq-opts.p1eq-cities{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.p1eq-masttitle{ font-size:40px; }
	.p1eq-q{ font-size:25px; }
	.p1eq-opt{ font-size:21px; }
	.p1eq-range{ font-size:40px; }
}

/* Someone who has asked their device for less motion gets none of it. */
@media (prefers-reduced-motion:reduce){
	.p1eq-screen.is-active,
	.p1eq-opt.is-on{ animation:none; }
	.p1eq-bar,
	.p1eq-opt,
	.p1eq-nav button,
	.p1eq-callbtn{ transition:none; }
	.p1eq-opt:hover,.p1eq-opt:active,
	.p1eq-nav button:hover,.p1eq-nav button:active,
	.p1eq-callbtn:hover,.p1eq-callbtn:active{ transform:none; }
}

/* ===================================================================
   THE MASTHEAD SHEEN
   The form itself never moves. Scaling a container that holds text means
   either sub-pixel glyph snapping (stuttering) or GPU compositing that
   rasterises once and stretches (blurring). There is no third option, and
   a loop that halts on hover halts mid-swing, which looks broken. So the
   attention-getter lives on the masthead instead.

   A band of light crosses the blue bar once every eighteen seconds, the
   same raking-light idea as the gilt frame around the warranty photo in
   the site header. The sweep itself takes about two and a half seconds;
   the rest of the cycle is stillness. That ratio is the point: often
   enough to catch someone scrolling past, rare enough that a person part
   way through the questions is not being flashed at while they read.

   It is a transform on an empty pseudo-element sitting behind the
   lettering: no text is scaled, so nothing can blur, nothing can snap to
   the pixel grid, and it never has to stop.
   =================================================================== */
.p1eq-mast{ position:relative; overflow:hidden; }
.p1eq-mast::after{
	content:"\200B"; position:absolute; top:-60%; left:0;
	width:34%; height:220%; font-size:0; line-height:0;
	pointer-events:none; z-index:0;
	background:linear-gradient(90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,246,214,.26) 50%,
		rgba(255,255,255,0) 100%);
	transform:translateX(-170%) rotate(16deg);
	animation:p1eqSheen 18s linear infinite;
}
@keyframes p1eqSheen{
	0%,86%  { transform:translateX(-170%) rotate(16deg); }
	100%    { transform:translateX(330%)  rotate(16deg); }
}
.p1eq-mastrule,.p1eq-masttitle{ position:relative; z-index:1; }

@media (prefers-reduced-motion:reduce){
	.p1eq-mast::after{ animation:none; opacity:0; }
}