/* Act 5, contact. Owned by the contact agent.
   The one conversion point, on Chaff. Fields are hairline underlines, not
   boxes; the whole act stays quiet so the button is the loudest thing on it.
   The wrappers are .form__field, never bare .field: that class belongs to
   the hero act and sizes it in viewport heights. */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* The display: flex above outranks the browser's [hidden] rule, so the
   success path needs this stated: a hidden form is gone, not flexed. */
.form[hidden] { display: none; }

.field__label {
  display: block;
  font-family: var(--font-utility);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-secondary-light);
  margin-bottom: var(--space-8);
}

.field__input {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-17);
  line-height: var(--leading-17);
  color: var(--color-loam);
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--color-rule-light);
  border-radius: var(--radius);
  padding: var(--space-8) 0 var(--space-16) 0;
  transition: border-color 200ms ease;
}

.field__input:hover { border-bottom-color: var(--color-ink-secondary-light); }

/* Focus recolors the underline. The focus ring itself is the base layer's
   2px furrow outline, deliberately not suppressed here. */
.field__input:focus { border-bottom-color: var(--color-furrow); }

/* No native resize: the WebKit grip is the only piece of browser chrome on
   an act built from hairlines, and it squats exactly where the chamfer
   device lives. The min-height carries three to four sentences comfortably. */
.field__input--area {
  resize: none;
  min-height: var(--space-96);
}

/* Invalid is its own device, not a repaint of focus: the underline doubles
   to 2px, the weight the base focus outline already sanctions, and the error
   line below is a marked object on the same rule as .form__error. */
.form__field[data-invalid="true"] .field__input {
  border-bottom-width: 2px;
  border-bottom-color: var(--color-furrow);
}

.field__error {
  margin-top: var(--space-8);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  color: var(--color-furrow);
  border-left: var(--hairline) solid var(--color-furrow);
  padding-left: var(--space-16);
}

.trap {
  position: absolute;
  left: -9999px;
  top: auto;
}

.form__error {
  font-size: var(--text-14);
  line-height: var(--leading-14);
  color: var(--color-furrow);
  border-left: var(--hairline) solid var(--color-furrow);
  padding-left: var(--space-16);
}

.form__submit { align-self: flex-start; }

/* One rule for both CTA moments on the phone: full width, like the hero. */
@media (max-width: 767px) {
  .form__submit { align-self: stretch; text-align: center; }
}

/* The act closes tight: 128 under the form, not the heavy 192, so the
   footer arrives while the button is still in view. */
#contact { padding-bottom: var(--space-128); }

/* The left column anchors to the form. The head holds row one, the form
   spans both rows on the right, and the reach block sits in row two, pulled
   to the form's foot: the reply promise and the address, both at 24 Inter,
   so the column ends where the form ends. Under 1024 the grid stacks and the
   reach block simply follows the form. */
#contact .split__body { grid-row: 1 / 3; }

.split__foot {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  font-size: var(--text-24);
  line-height: var(--leading-24);
}

.split__promise { color: var(--color-ink-secondary-light); max-width: 24ch; }

/* The booking line sits between the promise and the address, same
   register as the promise, so the two ways in read as one thought. */
.split__book { margin-top: var(--space-16); color: var(--color-ink-secondary-light); max-width: 24ch; }

.split__reach { margin-top: var(--space-16); }

.split__privacy {
  margin-top: var(--space-16);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  color: var(--color-ink-secondary-light);
  max-width: 32ch;
}

@media (max-width: 1023px) {
  #contact .split__body { grid-row: auto; }
  .split__foot { grid-column: auto; grid-row: auto; }
}

@media (max-width: 767px) {
  #contact { padding-bottom: var(--space-64); }
  .split__foot { font-size: var(--text-17); line-height: var(--leading-17); }
}

/* The hairline frame is drawn with layered gradients, not border: a border
   plus clip-path leaves the right and bottom rules dangling at the chamfer
   with no stroke along the cut. The fifth gradient is the 45 degree edge,
   a hairline band placed just inside the clip line so the clip cannot
   shave it. All five stop exactly where the polygon does, so the frame
   reads as one continuous rule. */
.panel {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-16)), calc(100% - var(--chamfer-16)) 100%, 0 100%);
  padding: var(--space-32);
  background-image:
    linear-gradient(var(--color-rule-light), var(--color-rule-light)),
    linear-gradient(var(--color-rule-light), var(--color-rule-light)),
    linear-gradient(var(--color-rule-light), var(--color-rule-light)),
    linear-gradient(var(--color-rule-light), var(--color-rule-light)),
    linear-gradient(135deg, transparent calc(50% - var(--hairline)), var(--color-rule-light) calc(50% - var(--hairline)), var(--color-rule-light) 50%, transparent 50%);
  background-size:
    100% var(--hairline),
    var(--hairline) 100%,
    var(--hairline) 100%,
    100% var(--hairline),
    var(--chamfer-16) var(--chamfer-16);
  background-position: top left, top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
}

.panel__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-29);
  line-height: var(--leading-29);
  color: var(--color-loam);
}

.panel__meta {
  margin-top: var(--space-16);
  font-family: var(--font-utility);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  color: var(--color-ink-secondary-light);
}

/* Entry padding matches services (one step down from the heavy band) so
   the page tightens toward the CTA instead of slackening before it. */
#contact { padding-top: var(--space-128); }

/* The model enquiry in the message field. Placeholder ink is the secondary
   token, and it clears the moment the visitor types. */
.field__input::placeholder {
  color: var(--color-ink-secondary-light);
  opacity: 0.72;
}

/* Standalone links in the contact foot and the colophon get the same 8 of
   hit area as the showcase links (WCAG 2.5.8, 24px minimum) without moving
   the layout. The privacy line's link is inline in a sentence and exempt. */
@media (max-width: 767px) {
  .split__reach .textlink,
  .colophon__reach .textlink,
  .colophon__legal .textlink {
    display: inline-block;
    padding-block: var(--space-8);
    margin-block: calc(-1 * var(--space-8));
  }
}