/* ═══════════════════════════════════════════════════════════
   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 ink
   header gets out of its way. Fields are hairline-ruled rather
   than boxed, which is the same device the rest of the system
   uses for tables, FAQs and the location directory.
   ═══════════════════════════════════════════════════════════ */

/* ─── Document header ───────────────────────────────────── */
.fm-head{
  background:var(--ink);color:#fff;
  padding-block:clamp(38px,5vw,60px) clamp(44px,5.5vw,74px);
}
.fm-head h1{margin-top:26px;max-width:18ch}
.fm-head .lede{margin-top:20px;max-width:58ch}
.fm-head .acts{margin-top:30px}
/* 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 40%,rgba(255,255,255,.86) 60%,rgba(255,255,255,.55) 100%);
}
.fm-sect>.wrap{position:relative;z-index:2}

.fm{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px) clamp(20px,3vw,40px);
  max-width:820px;
}
.fm__f{display:flex;flex-direction:column;gap:8px}
.fm__f--wide,.fm__go{grid-column:1/-1}

.fm label{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);
}
.fm label span{color:var(--brass-lo);margin-left:4px}

.fm input,.fm select,.fm textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 2px;font-size:1rem;color:var(--ink);border-radius:0;
  transition:border-color .18s ease;
}
.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 2px center;padding-right:22px;
}
.fm input::placeholder,.fm textarea::placeholder{color:#9BAAB6}
.fm input:focus,.fm select:focus,.fm textarea:focus{
  outline:none;border-bottom-color:var(--brass);
}
.fm__go{margin-top:8px}

/* ─── The two offices ───────────────────────────────────── */
.fm-off{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line-dk);border:1px solid var(--line-dk)}
.fm-off__card{background:var(--ink);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-family:var(--mono);font-size:.8125rem;letter-spacing:-.01em;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)}
.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}
}