/* ==========================================================================
   Contact - page head, the three ways in, and the enquiry layout.
   Everything else on this page reuses form, figure, list-check, card and the
   CTA band from main.css as they are.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page head
   The home page opens on a full-bleed hero under the floating nav pill. An
   interior page has no hero, so its first section clears the pill itself.
   -------------------------------------------------------------------------- */

.chead {
  padding-top: clamp(7.5rem, 13vw, 10.5rem);
  padding-bottom: 0;
}

.chead__grid {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 62rem) {
  .chead__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* An interior headline sits in a column beside its lead, so it takes a step
   down from the hero scale rather than dwarfing the copy next to it. */
.chead__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
  max-width: 16ch;
}

.chead__lead { max-width: 44ch; }

@media (min-width: 62rem) {
  .chead .line-clip > span { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   2. The three ways in
   Phone, email and address are the page's real content, so they get the
   weight of a decision rather than three identical bordered cards.
   -------------------------------------------------------------------------- */

.reach {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}

@media (min-width: 52rem) {
  .reach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.reach__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}

@media (min-width: 52rem) {
  .reach__item {
    padding-inline: clamp(1.25rem, 2.4vw, 2rem);
    border-bottom: 0;
  }
  .reach__item:first-child { padding-left: 0; }
  .reach__item + .reach__item { border-left: 1px solid var(--rule); }
  .reach { border-bottom: 1px solid var(--rule); }
}

.reach__label { display: block; }

.reach__value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition: color var(--dur-2) var(--ease-out);
}

/* The address is long, so it drops a step rather than wrapping mid-domain. */
.reach__value--mail {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  letter-spacing: -0.02em;
  word-break: break-word;
}

.reach__note {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.5;
}

/* A blue rule rides the left edge of the one under the cursor, the same move
   the duty rows make. The static address block is not a link, so it does not
   pretend to react. */
.reach__item:not(.reach__item--static)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--nv-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-3) var(--ease-out);
}

/* Where a column sits flush to the shell edge there is no padding for the rule
   to stand in, so it steps out into the gutter rather than touching the type.
   The middle and right columns already have their own padding. */
.reach__item:not(.reach__item--static)::before { left: -0.875rem; }

@media (min-width: 52rem) {
  .reach__item + .reach__item:not(.reach__item--static)::before { left: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .reach__item:not(.reach__item--static):hover::before,
  .reach__item:not(.reach__item--static):focus-visible::before {
    transform: scaleY(1);
  }
  .reach__item:not(.reach__item--static):hover .reach__value {
    color: var(--nv-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reach__item,
  .reach__item::before,
  .reach__value { transition: none; }
  .reach__item:hover::before { transform: none; }
}

/* --------------------------------------------------------------------------
   3. Enquiry layout
   The form is the only thing in this section, so it runs full width on paper
   against the alt-grey ground.
   -------------------------------------------------------------------------- */

.enq {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* One column: the form is the whole section, so it runs the full measure. */

/* The form sits on paper against the alt-grey section, so it reads as the one
   thing on the page you are meant to fill in. */
.enq__main {
  background: var(--nv-paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.enq__head {
  display: grid;
  gap: var(--s-3);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
}

.enq__head .muted { max-width: 52ch; }
.enq__head .req { color: var(--nv-blue); }

.enq__form { gap: var(--s-5); }

.enq__submit {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-2);
}

@media (min-width: 44rem) {
  .enq__submit {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-6);
  }
  .enq__submit .form__note { max-width: 40ch; margin: 0; }
}

/* --------------------------------------------------------------------------
   4. The form itself
   Underlined fields rather than boxed ones. The rest of the site is built out
   of hairlines, and six bordered rectangles in a bordered panel read like a
   tax return. The rule under each field is the same rule used everywhere else,
   and it turns blue on the field you are actually in.
   -------------------------------------------------------------------------- */

.enq__form .field__row {
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.enq__form .field { gap: 0; }

.enq__form .field label {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  transition: color var(--dur-2) var(--ease-out);
}

.enq__form .field input,
.enq__form .field textarea {
  padding: 0.55rem 0 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--fg);
  transition: border-color var(--dur-2) var(--ease-out);
}

.enq__form .field input::placeholder,
.enq__form .field textarea::placeholder { color: var(--fg-faint); }

.enq__form .field input:focus,
.enq__form .field textarea:focus {
  outline: none;
  border-bottom-color: var(--nv-blue);
  box-shadow: none;
}

/* The label of the field in focus lifts to the accent, so the eye has one
   clear anchor while tabbing through. */
.enq__form .field:focus-within label { color: var(--nv-blue); }

/* An invalid field only reports once the visitor has actually interacted with
   it. :user-invalid is the whole point here - the older :invalid test lit up
   every required field the moment the page loaded. */
.enq__form .field input:user-invalid,
.enq__form .field textarea:user-invalid {
  border-bottom-color: #C4442E;
}

.enq__form .field textarea {
  min-height: 7.5rem;
  line-height: 1.55;
  resize: vertical;
}

/* The message field is the one that matters, so it gets air above it. */
.enq__form > .field:last-of-type { margin-top: var(--s-3); }

.enq__submit {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: var(--s-3);
}

@media (prefers-reduced-motion: reduce) {
  .enq__form .field label,
  .enq__form .field input,
  .enq__form .field textarea { transition: none; }
}