/* ═══════════════════════════════════════════════════════════
   form.css — /contact-us/, /get-a-quote/ and the two
   confirmation pages. Extends site.css.

   The form is the page, so it gets the measure and the
   header gets out of its way. Fields are filled, rounded wells
   — white on a paper card, paper on white.
   ═══════════════════════════════════════════════════════════ */

/* ─── Document header ─────────────────────────────────────
   .dochead in site.css carries it; the measure and the solo
   variant are ours. */
.fm-head h1{max-width:18ch}
.fm-head .lede{max-width:58ch}
/* A confirmation page is only this block, so it carries the whole viewport. */
.fm-head--solo{min-height:min(62vh,540px);display:flex;align-items:center}
/* .wrap is a flex item here, so it shrinks to its content and loses its own
   centring unless told to take the line. */
.fm-head--solo>.wrap{width:100%}
.fm-head--solo .lede{max-width:52ch}

/* ─── The form ──────────────────────────────────────────── */
.fm-sect{position:relative;overflow:hidden}
.fm-sect__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0;
}
/* The photo stays in the half the form does not occupy — hairline fields need a quiet
   ground. ::after, not ::before: a generated box before the <img> paints underneath it. */
.fm-sect--pic::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,#fff 46%,rgba(255,255,255,.8) 66%,rgba(255,255,255,.35) 100%);
}
.fm-sect>.wrap{position:relative;z-index:2}
/* Over a photograph the paper wells wash out against the white-to-sky fade, so the
   form gets its own white card: the wells read against solid white, the photo
   still frames it. */
.fm-sect--pic .fm{
  background:#fff;border-radius:var(--r-xl);padding:clamp(20px,3vw,40px);
  box-shadow:0 40px 80px -40px rgba(11,30,45,.45);
}

.fm{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  max-width:820px;
}
.fm__f{display:flex;flex-direction:column;gap:6px}
.fm__f--wide,.fm__go{grid-column:1/-1}
/* The honeypot (see the form macro): off-screen rather than display:none, which the
   simpler bots read as "skip this one". Out of the grid too, so it takes no cell. */
.fm__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fm label{font-size:.875rem;font-weight:600;color:var(--ink)}
.fm label span{color:#B3261E;margin-left:3px}

.fm input,.fm select,.fm textarea{
  width:100%;background:var(--paper);border:1.5px solid transparent;border-radius:14px;
  padding:14px 16px;font-size:1rem;color:var(--ink);
  transition:border-color .18s ease,background-color .18s ease;
}
/* On a paper card the wells turn white. */
.hm-contact__card .fm input,.hm-contact__card .fm select,.hm-contact__card .fm textarea{background:#fff}
.fm textarea{resize:vertical;line-height:1.6}
.fm select{
  appearance:none;cursor:pointer;
  /* the caret, as a data URI — nothing in dist/ may fetch from another host */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23566B7C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:40px;
}
.fm input::placeholder,.fm textarea::placeholder{color:#9BAAB6}
.fm input:focus,.fm select:focus,.fm textarea:focus{
  outline:none;border-color:var(--navy);background:#fff;
}
.fm__go{margin-top:8px}
.fm__go .btn{width:100%;min-height:58px}

/* ─── The two offices ───────────────────────────────────── */
.fm-off{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.fm-off__card{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:var(--r-md);padding:clamp(24px,3vw,38px)}
.fm-off__card h3{color:#fff;font-size:1.25rem;letter-spacing:-.02em}
.fm-off__card .accent{color:var(--brass)}
.fm-off__lines{margin-top:20px;border-top:1px solid var(--line-dk)}
.fm-off__lines li{
  font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;color:#fff;
  padding:12px 0;border-bottom:1px solid var(--line-dk);
}
.fm-off__card address{
  font-style:normal;margin-top:18px;font-size:.9375rem;line-height:1.7;color:#A8BDCC;
}

/* ─── Map ───────────────────────────────────────────────── */
.fm-map{line-height:0;background:var(--paper);margin:var(--inset);border-radius:var(--r-xl);overflow:hidden}
.fm-map iframe{width:100%;height:clamp(300px,38vw,460px);border:0;display:block}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width:700px){
  .fm{grid-template-columns:1fr}
  .fm-off{grid-template-columns:1fr}
  .fm-head--solo{min-height:0;display:block}
}