/* 42 enquiry form — append to the site's style.css, or link it separately.
   Uses the brand tokens (--black, --red, --text, --navy, --white,
   --font-ui, --font-display). Falls back sensibly if they are absent. */

.enquiry {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--black, #000);
}

.enquiry-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .enquiry-inner { grid-template-columns: 22rem minmax(0, 1fr); }
}

.enquiry-intro h2 {
  margin: 0 0 .8rem;
  color: var(--white, #fff);
  font: 400 clamp(1.75rem, 3.2vw, 3.125rem)/1.3 var(--font-ui, sans-serif);
}

.enquiry-intro p {
  margin: 0 0 1.2rem;
  color: var(--text, #7a7a7a);
  font: 300 1.0625rem/1.9 var(--font-display, sans-serif);
}

.enquiry-direct a {
  color: var(--white, #fff);
  font: 600 1.125rem/1.9 var(--font-ui, sans-serif);
  text-decoration: none;
}
.enquiry-direct a:hover,
.enquiry-direct a:focus-visible { color: var(--red, #b01818); }

/* the panel */
.enquiry-form {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: var(--navy, #0e172d);
}

.enquiry-row {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) {
  .enquiry-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.enquiry-form .field { margin: 0 0 1.25rem; }

.enquiry-form label {
  display: block;
  margin-bottom: .45rem;
  color: var(--white, #fff);
  font: 600 .875rem/1.4 var(--font-ui, sans-serif);
  letter-spacing: .02em;
}

.enquiry-form .req { color: var(--red, #b01818); }

.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  width: 100%;
  box-sizing: border-box;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  color: var(--white, #fff);
  font: 400 1rem/1.6 var(--font-ui, sans-serif);
}

.enquiry-form textarea { resize: vertical; min-height: 9rem; }

/* The native arrow is invisible on a dark control in some browsers, so draw
   our own and keep the height identical to the text inputs. */
.enquiry-form select {
  appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #8b93a7 50%),
    linear-gradient(135deg, #8b93a7 50%, transparent 50%);
  background-position: right 1.25rem center, right 1rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.enquiry-form select option { background: #0e172d; color: #fff; }

.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder { color: #6b7286; }

.enquiry-form input:focus-visible,
.enquiry-form textarea:focus-visible {
  outline: 3px solid #d92a2a;
  outline-offset: 2px;
  border-color: transparent;
}

.enquiry-form [aria-invalid="true"] { border-color: #d92a2a; }

.enquiry-form .err {
  display: block;
  margin-top: .4rem;
  color: #ff8a8a;          /* lighter than the brand red so it passes on navy */
  font: 400 .875rem/1.5 var(--font-ui, sans-serif);
}

.enquiry-actions { margin: 1.75rem 0 0; }

.enquiry-form .btn {
  display: inline-block;
  padding: 1.1rem 2.5rem;
  border: 1px solid var(--black, #000);
  border-radius: 30px;
  background: var(--red, #b01818);
  color: #fff;
  font: 600 1rem/1 var(--font-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.enquiry-form .btn:hover,
.enquiry-form .btn:focus-visible { background: #d92a2a; }
.enquiry-form .btn:focus-visible { outline: 3px solid #d92a2a; outline-offset: 3px; }
.enquiry-form .btn[disabled] { opacity: .6; cursor: progress; }

.enquiry-status {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: 8px;
  font: 400 1rem/1.6 var(--font-ui, sans-serif);
}
.enquiry-status[data-state="ok"]   { background: rgba(255, 255, 255, .08); color: #fff; }
.enquiry-status[data-state="fail"] { background: rgba(217, 42, 42, .18);  color: #ffc9c9; }

.enquiry-small {
  margin: 1.5rem 0 0;
  color: var(--text, #7a7a7a);
  font: 300 .8125rem/1.7 var(--font-display, sans-serif);
}
.enquiry-small a { color: var(--text, #7a7a7a); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.enquiry-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}