/* The request card and the two-column hero it sits in. Shared by the homepage, the
   /mold-inspection-{city}/ pages and the /mold-remediation-{city}/ pages.
   Markup: scripts/quote-card.mjs. Behaviour: quote-form.js.

   The homepage does not load geo.css, so the card sets its own type, colour and box model
   rather than inheriting them. The dashed green seam across its top edge is the
   containment line from the remediation plate (design/laminar-calm.md); monospace labels
   index the fields, they never explain. */

/* ---------- hero: copy left, card right ---------- */
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:64px;align-items:center;width:100%;padding-top:6px;padding-bottom:64px}
.hero-grid .hero-copy{padding:0;width:auto;max-width:none}
.hero-grid .hero-copy h1{font-size:clamp(34px,4.3vw,52px);max-width:13.5em}

/* ---------- the card ---------- */
.quote-card{
  --ink:#0b110d; --green:#4dc45e; --green-deep:#2c8348; --muted:#5c6159;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Manrope',sans-serif;
  --seam:repeating-linear-gradient(90deg,var(--green) 0 13px,transparent 13px 20px);
  position:relative;background:#fff;border-radius:16px;padding:28px 28px 20px;box-shadow:0 36px 80px -26px rgba(2,6,4,.75);
  font-family:'Public Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;color:#3c4039;text-align:left;
  scroll-margin-top:24px;
}
.quote-card,.quote-card *,.quote-card ::before,.quote-card ::after{box-sizing:border-box}
.quote-card::before{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;background:var(--seam)}
.quote-card noscript .q-status{margin-top:14px}
.q-eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);margin:0 0 10px}
.q-title{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin:0 0 8px;text-wrap:balance}
.q-sub{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0}

.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;margin:18px 0 0}
.q-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.q-field.full{grid-column:1 / -1}
.q-field label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.q-field label i{font-style:normal;letter-spacing:.04em;color:#8a9087}
.q-field input,.q-field select,.q-field textarea{font:inherit;font-size:16px;line-height:1.3;color:var(--ink);background:#fafbfa;border:1.5px solid #d3d9d2;border-radius:9px;padding:11px 12px;margin:0;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,background-color .15s}
.q-field textarea{resize:vertical;min-height:60px;line-height:1.45}
.q-field select{appearance:none;-webkit-appearance:none;padding-right:38px;background-repeat:no-repeat;background-position:right 13px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232c8348' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.q-field select:invalid{color:#7a8078}
.q-field ::placeholder{color:#9aa198}
.q-field input:focus,.q-field select:focus,.q-field textarea:focus{outline:none;border-color:var(--green-deep);box-shadow:0 0 0 3px rgba(77,196,94,.32);background:#fff}
.q-field.bad input,.q-field.bad select{border-color:#b4412f}
.q-err{font-size:12.5px;line-height:1.35;color:#a3381f}
.q-err:empty{display:none}
.q-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.q-send{grid-column:1 / -1;appearance:none;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:17px;color:var(--ink);background:var(--green);border-radius:10px;padding:15px 18px;margin:2px 0 0;transition:background-color .15s,transform .05s}
.q-send:hover{background:#3cb04d}
.q-send:active{transform:translateY(1px)}
.q-send:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.q-send[disabled]{opacity:.7;cursor:progress}
.q-status{grid-column:1 / -1;font-size:14px;line-height:1.45;margin:0}
.q-status:empty{display:none}
.q-status.bad{color:#a3381f;font-weight:600}
.q-fine{font-size:12px;line-height:1.5;color:#7a8078;margin:12px 0 0}
.q-fine a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}

.q-done{padding:6px 0 4px;outline:none}
.q-done .tick{width:46px;height:46px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin-bottom:18px}
.q-done .tick::after{content:"";width:17px;height:9px;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateY(-2px) rotate(-45deg)}
.q-done p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:0 0 10px}
.q-done p b{color:var(--ink)}
.q-done a{font-weight:700}

/* ---------- closing band: the call button plus a way back up to the card ---------- */
/* .cta-actions itself lives in geo.css: the blog's call band uses it without this file */
.btn-ghost{display:inline-block;white-space:nowrap;border:2px solid #0b110d;border-radius:10px;color:#0b110d;font-weight:800;font-size:19px;padding:14px 28px}
.btn-ghost:hover{background:#0b110d;color:#fff}

@media (prefers-reduced-motion:no-preference){ html:has(.quote-card){scroll-behavior:smooth} }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:26px;padding-bottom:56px}
  .quote-card{max-width:520px}
}
@media (max-width:640px){
  .quote-card{padding:28px 20px 20px}
  .quote-card::before{left:20px;right:20px}
  .q-title{font-size:23px}
}