/* The enquiry page.
   Its own stylesheet, and its own page, because the landing page is a strict
   one-screen layout measured at 360x740 and 390x844 - a form folded into it
   would have broken the fit it is built around. This page scrolls, which a form
   is allowed to do. */

/* THIS PAGE SCROLLS, and these four lines are the whole reason it can.
   styles.css pins html and body to height:100% with overflow:hidden, because
   the landing page is a strict one-screen layout where nothing may scroll. A
   form is not that page: on a short phone the Send button sat below the fold
   with no way to reach it. contact.css loads after styles.css, so a bare html
   selector here is enough to undo it, and it only ever applies on this page.
   (The two legal documents avoid the problem the other way, by not loading
   styles.css at all - see site/legal.css.) */
html {
  height: auto;
  overflow: visible;
}
body.contact-body {
  height: auto;
  overflow: visible;
  min-height: 100svh;
}

.contact-screen {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  padding: clamp(20px, 4vh, 48px) 16px clamp(32px, 6vh, 72px);
}

/* A panel, not bare text on a photograph.
   The landing page can sit directly on the picture because it is a headline and
   three buttons; a form cannot - a truck showing through an input is the
   difference between looking designed and looking unfinished, and it is a real
   legibility problem, not only a visual one. */
.contact-rail {
  width: 100%;
  max-width: 620px;
  background: rgba(8, 11, 12, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: clamp(22px, 3.4vw, 36px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 30px);
}

/* The landing page's mobile breakpoint gives .topbar order:1 so the lockup
   sits after the phone mockup in its rail. This rail is a different rail: its
   own children have no order and so default to 0, which pushed the DelPod
   lockup and the Login link BELOW the form and the footer. Pinning it first
   here is enough, and it is scoped to this rail so the landing page keeps the
   ordering it wants. */
.contact-rail > .topbar { order: -1; }

.wordmark-link { text-decoration: none; color: inherit; display: inline-block; }

.contact-head { display: flex; flex-direction: column; gap: 8px; }
.contact-title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5.2vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.contact-sub {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}

.contact-form { display: flex; flex-direction: column; gap: 14px; }

/* Two per row where there is room, one where there is not. Each field owns its
   label, so nothing depends on source order to stay associated. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 11px 13px;
  width: 100%;
  /* iOS zooms a focused input under 16px; the 15px above is for the label
     rhythm, so the input itself holds 16 on small screens. */
}
@media (max-width: 560px) { .field input, .field select, .field textarea { font-size: 16px; } }
.field textarea { resize: vertical; min-height: 104px; }
.field select { appearance: none; }
.field select option { color: #111; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid #5ED6D1;
  outline-offset: 1px;
  border-color: transparent;
}

/* The honeypot: out of sight, out of the tab order, out of the a11y tree. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-send { align-self: flex-start; margin-top: 4px; }
.contact-send[disabled] { opacity: 0.6; cursor: progress; }

.contact-status { margin: 0; font-size: 14px; min-height: 1.2em; color: rgba(255, 255, 255, 0.72); }
.contact-status.is-ok { color: #7DD3CE; }
.contact-status.is-err { color: #FCA5A5; }

.contact-foot { margin: 0; font-size: 14px; }
.contact-foot a { color: rgba(255, 255, 255, 0.72); }
.contact-foot a:hover { color: #fff; }