/* ==========================================================================
   Inquiry — Start a project

   Same page architecture as About: full-bleed grid + ambient field, an
   eyebrow / rule header, then a two-column split on wide screens with the
   title on the left and the form on the right.
   ========================================================================== */

.inquiry {
  position: relative;
  /* Fills the viewport so the footer stays below the fold — the page should
     open as the form and nothing else — with the form centred in what is
     left, so the space reads as balanced rather than as a gap underneath.

     `safe center` matters: where the form is taller than the screen (a
     phone), plain centring would overflow in BOTH directions and push the
     first question up behind the nav. `safe` centres only while it fits and
     falls back to the start edge otherwise. The flex-start line before it is
     the fallback for browsers that do not know the keyword. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  justify-content: safe center;
  /* Spacing is measured in vh, not rem, so the page tightens on a short
     window instead of pushing the last question past the fold. */
  padding-top: calc(var(--nav-h) + clamp(0.5rem, 2vh, 2rem));
  padding-bottom: clamp(2rem, 6vh, 5rem);
  overflow: hidden;
}

.inquiry::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: clamp(4rem, 12vw, 9rem) clamp(4rem, 12vw, 9rem);
  /* Biased to the top and faded out early. On the other pages the grid sits
     behind prose, but here it would run behind five input fields and make a
     form that needs to feel calm look busy. */
  mask-image: radial-gradient(
    ellipse 80% 45% at 30% 12%,
    #000 5%,
    transparent 72%
  );
  opacity: calc(var(--grid-opacity) * 0.75);
  z-index: 1;
}

/* Ambient field — soft-stopped gradients moved by transform only. */
.inquiry__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.inquiry__field span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.inquiry__field span:nth-child(1) {
  width: 48vmax;
  height: 48vmax;
  top: -20%;
  left: -16%;
  background: radial-gradient(
    circle closest-side,
    var(--field-a) 0%,
    var(--field-a-mid) 45%,
    transparent 72%
  );
  animation: ss-drift 26s var(--ease-in-out-quart) infinite;
}

.inquiry__field span:nth-child(2) {
  width: 36vmax;
  height: 36vmax;
  right: -12%;
  bottom: -14%;
  background: radial-gradient(
    circle closest-side,
    var(--field-b) 0%,
    var(--field-b-mid) 48%,
    transparent 74%
  );
  animation: ss-drift 34s var(--ease-in-out-quart) infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  .inquiry__field span {
    animation: none !important;
    will-change: auto;
  }
}

.inquiry__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
}

.inquiry__rule {
  display: block;
  height: var(--border-w);
  background: var(--rule);
  margin-block: clamp(0.75rem, 2.4vh, 2.5rem);
  transform-origin: left;
}

.inquiry__title {
  font-family: var(--font-display);
  /* Sized to its COLUMN, not to the viewport — this title sits in the narrow
     left track, so --t-3xl (which assumes full width) broke "SOMETHING."
     mid-word. Longest word measured at 5.51em including tracking; a 6.4vw
     ramp keeps it inside the column from the 60rem breakpoint upward, and
     inside the full width below it. */
  /* Capped by height as well as width: on a short window the title was
     eating the space the form needed. */
  font-size: clamp(2rem, min(6.4vw, 11vh), 6rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}

.inquiry__lead {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  font-weight: 300;
  color: var(--fg-muted);
  max-width: 34ch;
  margin-top: clamp(0.75rem, 2vh, 1.5rem);
}

/* ==========================================================================
   Form
   ========================================================================== */
.form {
  margin-top: clamp(0.75rem, 3vh, 3rem);
  display: grid;
  gap: clamp(0.875rem, 2.2vh, 1.75rem);
  max-width: 44rem;
}

.form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(0.875rem, 2.2vh, 1.75rem);
}

.form__legend {
  /* The legend is for screen readers; the page heading carries it visually. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Field --------------------------------------------------------------
   Underline inputs rather than boxes: closer to the site's hairline
   language, and far less visual noise than five outlined rectangles.
   ------------------------------------------------------------------------ */
.field {
  display: grid;
  gap: var(--s-2);
}

.field__label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  transition: color var(--d-fast) var(--ease-out-quart);
}

.field__optional {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: var(--track-normal);
  text-transform: none;
  color: var(--fg-faint);
}

/* One height for every field, inputs and textareas alike, so the column
   reads as five identical rules rather than a ragged stack. Set explicitly
   because otherwise three different things decide it: line-height for
   inputs, the `rows` attribute for textareas, and padding for both. */
.field {
  --field-h: 3.25rem;
}

.field__input {
  width: 100%;
  height: var(--field-h);
  background: transparent;
  border: 0;
  border-bottom: var(--border-w) solid var(--rule-interactive);
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--t-md);
  font-weight: 300;
  color: var(--fg);
  border-radius: 0;
  transition:
    border-color var(--d-base) var(--ease-out-quart),
    background-color var(--d-base) var(--ease-out-quart);
}

textarea.field__input {
  resize: vertical;
  min-height: var(--field-h);
  /* A textarea puts its text at the top rather than centring it, so it needs
     padding where the input needs none. 1.35 keeps a single line inside the
     shared height; dragging the corner still opens it up. */
  padding-block: 0.55rem;
  line-height: 1.35;
}

.field__input::placeholder {
  color: var(--fg-faint);
  opacity: 1;
}

.field__input:hover {
  border-bottom-color: var(--fg-faint);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  /* A faint wash so focus is not carried by the hairline alone. */
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.field:focus-within .field__label {
  color: var(--fg);
}

/* Keyboard focus still gets the global ring, drawn inside the field box. */
.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Error state --------------------------------------------------------
   Signalled three ways: the message text, a glyph, and aria-invalid. Colour
   is never the only carrier (WCAG 1.4.1).
   ------------------------------------------------------------------------ */
.field[data-invalid] .field__input {
  border-bottom-color: var(--c-error);
}

.field[data-invalid] .field__label {
  color: var(--c-error);
}

.field__error {
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--c-error);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 0;
}

.field__error:empty {
  display: none;
}

.field__error::before {
  content: '!';
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15em;
  display: grid;
  place-items: center;
  border: var(--border-w) solid currentColor;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* --- Honeypot ------------------------------------------------------------
   Off-screen rather than display:none — some bots skip hidden inputs.
   ------------------------------------------------------------------------ */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Actions ------------------------------------------------------------ */
.form__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: 0;
}

.form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Three dots that pulse while the request is in flight. */
.form__spinner {
  display: none;
  gap: 0.25rem;
  align-items: center;
}

.form[data-busy] .form__spinner {
  display: inline-flex;
}

.form__spinner span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  animation: ss-pulse 1s var(--ease-in-out-quart) infinite;
}

.form__spinner span:nth-child(2) {
  animation-delay: 0.15s;
}

.form__spinner span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ss-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .form__spinner span {
    animation: none !important;
    opacity: 0.7;
  }
}

/* --- Outcome panel ------------------------------------------------------ */
.outcome {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border: var(--border-w) solid var(--rule);
  border-left-width: 2px;
  max-width: 40rem;
  display: grid;
  gap: var(--s-3);
}

.outcome:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.outcome[data-state='success'] {
  border-left-color: var(--c-success);
}

.outcome[data-state='handoff'] {
  border-left-color: var(--accent);
}

.outcome[data-state='error'] {
  border-left-color: var(--c-error);
}

.outcome__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  text-transform: uppercase;
  color: var(--fg);
}

.outcome__body {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  font-weight: 300;
  color: var(--fg-muted);
  max-width: 46ch;
}

.outcome__action {
  justify-self: start;
  margin-top: var(--s-2);
}

/* ==========================================================================
   Wide layout
   ========================================================================== */
/* Pair the short answers as soon as there is room for two columns — well
   before the page itself splits at 60rem. Five stacked rows ran past the
   fold on any normal laptop; three rows fit with space to spare, and each
   field is still wider than the answer it holds. */
@media (min-width: 40rem) {
  .form__fieldset {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(var(--s-4), 2.5vw, var(--s-6));
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

/* The page splits earlier than the rest of the site (56rem rather than
   60rem) because moving the title beside the form takes it out of the
   vertical stack entirely — worth ~150px, which is the difference between
   the submit button being on screen or not on a short laptop window. */
@media (min-width: 56rem) {
  .inquiry__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(var(--s-8), 7vw, var(--s-10));
    align-items: start;
  }

  .inquiry__inner > .label,
  .inquiry__rule {
    grid-column: 1 / -1;
  }

  .inquiry__head {
    grid-column: 1;
  }

  .inquiry__panel {
    grid-column: 2;
    padding-top: 0.2em;
  }

  .form {
    margin-top: 0;
  }
}

/* ==========================================================================
   Narrow screens

   Single column, so the header block is what decides whether the submit
   button clears the fold — it was 12px short. These trims buy it back
   without touching the field heights.
   ========================================================================== */
@media (max-width: 40rem) {
  .inquiry__rule {
    margin-block: var(--s-4);
  }

  .inquiry__lead {
    font-size: var(--t-sm);
    margin-top: var(--s-3);
  }
}