/*
 * "Ask Kevin to Reach Out" form, in the site's house style: square corners,
 * navy and gold, Belleza headings over Work Sans. Loaded only on a page whose
 * content holds <div id="gre-reach">, by mu-plugins/gre-reach-out.php.
 *
 * Every rule starts at #gre-reach so it outranks Astra's global button and
 * input styles without !important.
 */
#gre-reach {
	--navy: #002d5b;
	--navy-deep: #00152f;
	--gold: #f4b400;
	--ink: #1b2433;
	--muted: #5a6573;
	--line: #e3e7ec;
	--edge: #b8c4d3;
	--wash: #f4f7f9;
	--err: #b3261e;
	max-width: 760px;
	margin: 40px auto 80px;
	padding: 0 16px;
	font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}
#gre-reach * { box-sizing: border-box; }
#gre-reach a:focus-visible, #gre-reach button:focus-visible, #gre-reach input:focus-visible, #gre-reach textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

#gre-reach .gre-head { background: var(--navy-deep); border-bottom: 4px solid var(--gold); padding: 32px 24px 28px; text-align: center; }
#gre-reach .gre-photo { width: 84px; height: 84px; object-fit: cover; object-position: top; border: 2px solid var(--gold); margin: 0 auto 14px; display: block; }
#gre-reach .gre-monogram { display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--gold); font-family: 'Belleza', sans-serif; font-size: 30px; letter-spacing: 2px; line-height: 1; }
#gre-reach h1 { font-family: 'Belleza', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: clamp(24px, 4vw, 32px); font-weight: 400; line-height: 1.2; color: #fff; margin: 0; }
#gre-reach .gre-head p { margin: 10px 0 0; color: #fff; opacity: .85; font-size: 16px; }

#gre-reach .gre-body { border: 1px solid var(--line); border-top: 0; padding: 8px 40px 36px; background: #fff; }
#gre-reach .step { padding-top: 28px; }
#gre-reach .step + .step { margin-top: 28px; border-top: 1px solid var(--line); }
.js #gre-reach .step { display: none; }
.js #gre-reach .step.on { display: block; }
.js #gre-reach .step + .step { margin-top: 0; border-top: 0; }
#gre-reach h2 { font-family: 'Belleza', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 22px; font-weight: 400; color: var(--navy); margin: 0 0 4px; line-height: 1.3; }
#gre-reach h2:focus { outline: none; }
#gre-reach .hint { color: var(--muted); font-size: 15px; margin: 0 0 18px; }

#gre-reach .field { margin-top: 20px; }
#gre-reach .field > label, #gre-reach .field > .label { display: block; font-weight: 600; font-size: 15px; color: var(--navy); margin-bottom: 8px; }
#gre-reach .opt { font-weight: 400; color: var(--muted); }
#gre-reach input[type=text], #gre-reach input[type=tel], #gre-reach input[type=email], #gre-reach textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); padding: 12px 14px; border: 1px solid var(--edge); border-radius: 0; background: #fff; box-shadow: none; }
#gre-reach input[type=text]:focus, #gre-reach input[type=tel]:focus, #gre-reach input[type=email]:focus, #gre-reach textarea:focus { border-color: var(--navy); }
#gre-reach textarea { min-height: 110px; resize: vertical; }

#gre-reach .chips { display: flex; flex-wrap: wrap; gap: 8px; }
#gre-reach .chip { position: relative; cursor: pointer; margin: 0; }
#gre-reach .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#gre-reach .chip span { display: inline-block; padding: 9px 16px; border: 1px solid var(--edge); font-size: 15px; font-weight: 500; color: var(--navy); background: #fff; transition: background-color .15s, border-color .15s, color .15s; }
#gre-reach .chip:hover span { background: var(--wash); border-color: var(--navy); }
#gre-reach .chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
#gre-reach .chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
#gre-reach .chips.big .chip span { padding: 12px 22px; font-size: 16px; }

#gre-reach .err { color: var(--err); font-size: 15px; margin: 14px 0 0; }
#gre-reach .err:empty { display: none; }

#gre-reach .nav { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; }
.js #gre-reach .nav { display: flex; }
#gre-reach .nav .solo { margin-left: auto; }
#gre-reach .back { background: none; border: 0; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; padding: 8px 4px; box-shadow: none; }
#gre-reach .back:hover, #gre-reach .back:focus { background: none; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
#gre-reach .go { padding: 13px 30px; border: 0; border-radius: 0; font: inherit; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; background: var(--gold); color: var(--navy); cursor: pointer; transition: background-color .2s; }
#gre-reach .go:hover, #gre-reach .go:focus { background: #ffc61a; color: var(--navy); }
#gre-reach .go:disabled { opacity: .6; cursor: default; }
#gre-reach .exit { display: none; margin: 18px auto 0; padding: 10px 22px; border: 1px solid var(--edge); border-radius: 0; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--navy); cursor: pointer; transition: background-color .2s, border-color .2s; }
.js #gre-reach .exit { display: block; }
#gre-reach .exit:hover, #gre-reach .exit:focus { background: var(--wash); border-color: var(--navy); color: var(--navy); }
#gre-reach .sent-note { display: none; margin: 0 0 18px; padding: 10px 14px; border-left: 4px solid #2e7d32; background: #e9f4ec; color: #1e5b2e; font-size: 15px; font-weight: 500; }
.js #gre-reach .sent-note { display: block; }
#gre-reach .nojs-send { margin-top: 28px; }

#gre-reach .consent { margin: 24px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

#gre-reach .thanks { display: none; text-align: center; padding: 28px 0 4px; }
#gre-reach .thanks h2 { font-size: 26px; margin: 0 0 10px; }
#gre-reach .thanks p { margin: 0 0 28px; }
#gre-reach .home-link { color: var(--navy); font-weight: 500; text-underline-offset: 4px; }

#gre-reach .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
	#gre-reach { margin-top: 24px; }
	#gre-reach .gre-body { padding: 4px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) { #gre-reach * { transition: none !important; } }

/* "Working With Real Estate Agents": linked before the optional questions and in the foot. */
#gre-reach .disclose { font-size: 14px; color: var(--muted); margin: -8px 0 18px; }
#gre-reach .disclose a, #gre-reach .gre-foot a { color: var(--navy); text-underline-offset: 3px; }
#gre-reach .gre-foot { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--muted); }