/* ============================================================================
   HYDRO2050 - PAGE 10, CONTACT US
   ----------------------------------------------------------------------------
   Measured from Paper artboards 8CQ-0 (1440) and B5Z-0 (375).

   This page calls Hydro.footer({ lifted: false }): it has no navy closing
   band for the enquiry card to straddle, so the card sits in normal flow.

   ONE CORRECTION OFF THE DESKTOP ARTBOARD, and it is the reason the two
   widths do not share an input style. Paper draws the desktop input with a
   1px --rule border, #CFE6F5, which measures 1.29:1 against the page. WCAG
   asks 3:1 of a control boundary, and --rule is the token this system
   reserves for decorative dividers precisely because it cannot carry one.
   The 375 artboard already uses --border-input, #5A6B78 at 5.51:1, and that
   is what both widths use here. Everything else about the desktop input, the
   8px radius, the 52px height, the transparent fill, is as measured.
   ========================================================================== */

.p10-open { padding-top: var(--rhythm-open); }
.p10-open__eyebrow { margin-bottom: 28px; }
.p10-open__title { max-width: 900px; margin-bottom: 28px; }
.p10-open__deck  { max-width: 680px; }

/* ===== THE ROW =========================================================== */

.p10-row {
  padding-top: var(--rhythm-open);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
.p10-row__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  /* 680 + 96 + 456 = 1232 inside 1312, and the artboard leaves the last 80
     empty. TWO tracks, not three: a third track takes a second 96 gap, which
     needs 1328 and silently shrank the form column to 664 and its pairs to
     322 against the measured 330. The slack is left by justify-content.

     All three figures are fractions of the 1312 column, not literals:
     680 / 1312 = 51.829%, 456 / 1312 = 34.756%, 96 / 1312 = 7.317%. At 1440
     they resolve to exactly the measured 680, 456 and 96 with the artboard's
     80 left over. As literals, the two tracks grew equally out of the free
     space below 1200 and the row rendered 338 / 338 at 900 and 388 / 388 at
     1000: an even split, on a row the design splits sixty forty, so the form
     lost width to a details column that had none of its own to use. */
  grid-template-columns: minmax(0, 51.829%) minmax(0, 34.756%);
  justify-content: start;
  column-gap: 7.317%;
  align-items: start;
}

/* ===== THE FORM ========================================================== */

.enquiry {
  border-top: 1px solid var(--rule);
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.enquiry__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}

.enquiry__fields { display: flex; flex-direction: column; gap: 20px; }

/* TWO FIELDS TO A ROW WHILE TWO FIELDS FIT, ONE WHEN THEY DO NOT.
   The artboard pairs them at 330 each inside the 680 form column, and
   (680 - 20) / 2 is exactly 330, so auto-fill reproduces the measured layout
   at 1440 without naming it. Below that it drops to one column on its own,
   at the width where a second column would fall under 240: two 190px boxes
   side by side, which is what a literal repeat(2, 1fr) gave at 900, is not
   enough room to read back an email address you have just typed.

   auto-FILL rather than auto-fit, and the distinction is load bearing here.
   The phone field sits alone on its row, and the artboard draws it at half
   width. auto-fill keeps the empty second track, so one child in a wide row
   takes half of it and one child in a narrow row takes all of it, which is
   the behaviour the design wants at both ends without a breakpoint or a
   separate width rule. auto-fit would collapse the empty track and stretch
   the phone field across the whole row at 1440. */
.enquiry__pair {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--wt-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);            /* 14.68:1 on page */
}
.field input,
.field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 24px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border-input);   /* 5.51:1, see the file header */
  border-radius: 8px;
}
.field input { height: 52px; padding: 0 16px; }
.field textarea {
  height: 150px;
  padding: 14px 16px;
  resize: vertical;
  display: block;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-muted); opacity: 1; }  /* 5.51:1 */

/* REST, HOVER, FOCUS, INVALID. The file header explains why the boundary is
   --border-input rather than the artboard's --rule; these are the other three
   states the same boundary has to have.

   Hover darkens the edge to --azure-ink, 4.94:1, which reads as a change
   without moving the box. Focus keeps base.css's 2px --focus ring and adds
   the same colour to the border, so the field a keyboard is in is legible
   from the border alone if the ring is ever suppressed. `outline-offset` is
   2px so the ring sits clear of an 8px radius instead of cutting its corner.

   The invalid state is not colour alone: the border thickens to 2px and the
   message below the field carries the reason in words. Roughly one man in
   twelve cannot use a red edge as a signal, and a form is the one place on
   this site where a missed signal costs the visitor their enquiry. The red is
   #B3261E: 6.54:1 on page and 5.99:1 on the --surface panel the form sits on
   below the breakpoint, so it clears the 4.5 body floor on both grounds and
   the 3:1 control-boundary floor as a border. Measured with tools/contrast.mjs
   against both grounds, not carried from a palette. */
.field input:hover,
.field textarea:hover { border-color: var(--azure-ink); }

.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--focus); outline-offset: 2px; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: #B3261E;
}
.field__error {
  font-size: 15px;
  line-height: 22px;
  color: #B3261E;               /* 5.90:1 on page */
}
.field__error[hidden] { display: none; }

.enquiry__submit {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 4px;
  flex-wrap: wrap;
}
.enquiry__privacy {
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-muted);
  max-width: 340px;
}
/* The link to the policy sat in muted body copy with the browser default blue
   underline and no hover state of its own, so it was the one link on this page
   that did not answer the pointer. It takes the same pair as the route line
   below it. */
.enquiry__privacy a { color: var(--brand-blue-cta); }    /* 6.16:1 on page */
.enquiry__privacy a:hover { color: var(--brand-blue-cta-h); }

/* The fallback line under the button: the address and number for anyone who
   would rather not use the form. They are here rather than only in the column
   beside it, because at this width that column is off screen on a phone. */
.enquiry__route {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-muted);      /* 5.51:1 on page, 5.06:1 on surface */
  max-width: 560px;
}
.enquiry__route a { color: var(--brand-blue-cta); }      /* 6.16:1 on page */
.enquiry__route a:hover { color: var(--brand-blue-cta-h); }

/* Empty until the form is submitted, and it takes no space until then, so it
   cannot open a gap under the button. It is role="status", so a screen reader
   announces it without the focus having to move. */
.enquiry__status {
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
  max-width: 560px;
}
.enquiry__status:empty { display: none; }

/* ===== THANKS.HTML =======================================================
   Where the form lands after Netlify has stored an enquiry. It reuses the
   opening block above; this only gives the short page the 404's minimum height
   so the footer does not ride up into the middle of a tall screen. */
.p10-sent {
  min-height: 52vh;
  padding-bottom: var(--rhythm-section);
}
.p10-sent__cta { margin-top: var(--s-10); }
.p10-open__deck a { color: var(--brand-blue-cta); }     /* the route line's pair */
.p10-open__deck a:hover { color: var(--brand-blue-cta-h); }

/* ===== THE DETAILS COLUMN ================================================ */

.details {
  border-top: 1px solid var(--rule);
  padding-top: 44px;
}
.details__block { display: flex; flex-direction: column; gap: 8px; padding-bottom: 28px; }
.details__block + .details__block {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.details__block:last-child { padding-bottom: 0; gap: 10px; }

.details__phone {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
  text-decoration: none;
}
.details__email {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 30px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
  text-decoration: none;
}
/* The artboard draws these at their type height, 42 and 30, both under the
   project's 44px target floor. The artwork keeps its measured size and the
   hit box grows around it, which costs 2px on the phone and 14 on the email. */
.details__phone, .details__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  align-self: flex-start;
}
.details__phone:hover, .details__email:hover { text-decoration: underline; }
.details__where { font-size: 18px; line-height: 30px; color: var(--ink); }
.details__note  { font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* The two full-width direct-action buttons are a 375 element with no desktop
   equivalent, so they are hidden here and shown in the mobile block. */
.p10-direct { display: none; }

/* ===== THE FAQ =========================================================== */

/* 112 both sides, the measured artboard value, expressed on the scale. */
.p10-faq {
  padding-top: var(--rhythm-section);
  padding-bottom: var(--rhythm-section);
}
/* 376 / 1312 = 28.659%, the fraction treatment the industry rows and the
   partner rows carry. As a literal the heading lane held 376 while the
   answers fell to 300 at 900, so the question column was narrower than the
   heading introducing it. */
.p10-faq__grid {
  display: grid;
  grid-template-columns: minmax(280px, 28.659%) minmax(0, 680px) minmax(0, 1fr);
  column-gap: 48px;
}
.p10-faq__head { display: flex; flex-direction: column; gap: 12px; }
.p10-faq__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.p10-faq__note { font-size: 16px; line-height: 26px; color: var(--ink-muted); max-width: 340px; }

.qa {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  padding-bottom: 28px;
}
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa__q {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 28px;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
  margin-bottom: 12px;
}
.qa__a { font-size: 18px; line-height: 30px; color: var(--ink); }

/* ===== MOBILE ============================================================
   From artboard B5Z-0, which is a different arrangement rather than a
   narrower one: the desktop's right-hand details column splits into a pair
   of full-width call and email buttons plus two rule-topped blocks, and the
   form moves onto a full-bleed --surface panel. */

@media (max-width: 899px) {
  .p10-open { padding-top: 32px; }
  .p10-open__eyebrow { margin-bottom: 14px; }
  .p10-open__title { margin-bottom: 14px; }

  .p10-row { padding-top: 0; }
  .p10-row__grid { grid-template-columns: minmax(0, 1fr); }

  /* Order the row the way the 375 artboard runs it: the direct actions, the
     two detail blocks, then the form. The markup keeps the desktop order. */
  .p10-direct {
    display: flex;
    flex-direction: column;
    gap: 12px;
    order: 1;
    margin-top: 32px;
  }
  .p10-direct .btn { border-radius: 0; height: 56px; font-size: 17px; line-height: 22px; }
  .p10-direct .btn--outline {
    background: transparent;
    border: 1.5px solid var(--brand-blue-cta);
    color: var(--brand-blue-cta);          /* 6.16:1 on page */
  }
  .p10-direct .btn--outline:hover { background: var(--surface); }

  .details { order: 2; border-top: 0; padding-top: 0; }
  /* Phone and email are the two buttons above at this width, so the details
     column keeps only the address and the note. */
  .details__block--phone, .details__block--email { display: none; }
  .details__block {
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    padding-bottom: 0;
    gap: 6px;
    margin-top: 32px;
  }
  .details__block + .details__block { margin-top: 24px; }
  .details__where { font-size: 17px; line-height: 26px; }
  .details__note  { font-size: 15px; line-height: 23px; }

  .enquiry {
    order: 3;
    border-top: 0;
    background: var(--surface);
    padding: 32px var(--gutter-mob) 36px;
    margin: 48px calc(50% - 50vw) 0;
    width: 100vw;
    max-width: 100vw;
    gap: 18px;
  }
  .enquiry__title { font-size: 22px; line-height: 28px; }
  .enquiry__pair { grid-template-columns: minmax(0, 1fr); }
  .field__label { font-size: 13px; line-height: 16px; color: var(--brand-navy); }
  .field input, .field textarea {
    background: var(--page);
    border-radius: 0;
    border-color: var(--border-input);
  }
  .field input { padding-inline: 14px; }
  .field textarea { height: 140px; padding: 14px; line-height: 25px; }
  .enquiry__submit { padding-top: 0; gap: 12px; }
  .enquiry__submit .btn {
    width: 100%;
    border-radius: 0;
    height: 56px;
    font-size: 17px;
    line-height: 22px;
  }
  .enquiry__privacy { font-size: 13px; line-height: 20px; max-width: none; }
  .enquiry__route  { font-size: 13px; line-height: 20px; max-width: none; }
  .enquiry__status { font-size: 15px; line-height: 23px; max-width: none; }
  .field__error    { font-size: 13px; line-height: 20px; }

  .p10-faq { padding-top: 52px; padding-bottom: 56px; }
  .p10-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .p10-faq__head { gap: 10px; margin-bottom: 12px; }
  .p10-faq__title { font-size: 22px; line-height: 28px; }
  .p10-faq__note { font-size: 13px; line-height: 20px; max-width: none; }

  .qa { padding-top: 18px; padding-bottom: 0; margin-top: 20px; }
  .qa:last-child { border-bottom: 0; }
  .qa__q { font-family: var(--font-body); font-size: 17px; line-height: 25px; font-weight: var(--wt-semi); margin-bottom: 8px; }
  .qa__a { font-size: 17px; line-height: 26px; }
}