/* contact.css - the Say hello page.
 *
 * Linked LAST, after mobile-frame.css. That is deliberate: this sheet wins
 * ties on order, so nothing here has to fight the cascade with !important.
 * Everything is scoped under a .contact-* ancestor, so it cannot reach the
 * home page even if it is ever linked there.
 *
 * Colours come from the tokens in style.css. The two that are NOT tokens are
 * the field chrome and the error text, and both are here because the brand
 * red (#b43122) measures 2.25:1 on --ink and #df4d37 only 3.4:1 - neither
 * passes AA for text. The error colour below is the brand red lifted until it
 * clears 4.5:1 while still reading as the same family.
 */

/* The header is position:absolute, and site.js never adds .is-fixed here
   because the scene code does not run on a flat page. So the page has to
   leave room for it itself. */
.contact-main {
  padding: clamp(128px, 15vh, 196px) var(--pad) clamp(70px, 9vh, 120px);
  max-width: 1500px;
  margin: 0 auto;
}

.contact-lede h1 {
  font-family: var(--heading);
  font-size: clamp(4.6rem, 12vw, 11rem);
  line-height: .9;
  margin: 0 0 22px;
  text-transform: none;
}
.contact-lede h1 em { color: #f2bd92; font-style: italic; }
.contact-standfirst {
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(38px, 5vw, 86px);
  margin-top: clamp(44px, 6vh, 78px);
  align-items: start;
}

/* [hidden] HAS TO WIN over every display rule in this sheet.
 *
 * The UA stylesheet's [hidden]{display:none} loses to ANY author rule that
 * sets display, whatever the specificity - and .contact-form and .field both
 * set display:flex below. So contact-form.js could set form.hidden = true and
 * the element stayed on screen: the headcount field rendered permanently, and
 * after a successful submit the filled-in form sat underneath the "that's with
 * the team" panel with the button still frozen on "Sending...".
 *
 * Both fields read as correctly hidden to script the whole time - .hidden was
 * true, checkVisibility() was the only thing that disagreed - which is why a
 * functional test that asserted the property passed while the page was broken.
 *
 * This single rule is the fix for both. Keep it above the display rules. */
[hidden] { display: none !important; }

/* ---------- the form ---------- */

.contact-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }

.field { display: flex; flex-direction: column; gap: 8px; margin: 0; }

.field label {
  font-family: var(--heading);
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.field-optional {
  font-family: var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-size: .8125rem;
  margin-left: 6px;
}

.field input,
.field select,
.field textarea {
  font: 400 16px/1.5 var(--body);   /* 16px, not rem: under it iOS zooms on focus */
  color: var(--white);
  background: #232320;
  border: 1px solid #6f6d62;        /* 3.4:1 on --ink, clears the 3:1 UI floor */
  border-radius: 2px;
  padding: 13px 14px;
  min-height: 50px;
  width: 100%;
  transition: border-color .15s, background .15s;
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; }

/* The select needs its own arrow back, having had appearance stripped. */
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.field select option { background: #232320; color: var(--white); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid #f2bd92;
  outline-offset: 2px;
  border-color: #f2bd92;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #918e81; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #f0a08a; background: #2a211f; }

.field-error, .form-error {
  color: #f0a08a;                   /* 7.6:1 on --ink */
  font-size: .875rem;
  line-height: 1.45;
}
.form-error { margin: 0; }
.field-hint { color: var(--muted); font-size: .875rem; line-height: 1.45; }

.contact-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.contact-form .button:disabled { opacity: .72; cursor: default; }
.contact-privacy { color: var(--muted); font-size: .875rem; margin: 0; }

/* ---------- the sent state ---------- */

.contact-sent { border-top: 1px solid #d6b98455; padding-top: 30px; }
.contact-sent:focus { outline: none; }
.contact-sent:focus-visible { outline: 2px solid #f2bd92; outline-offset: 6px; }
.contact-sent h2 {
  font-family: var(--heading);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.02;
  margin: 0 0 14px;
}
.contact-sent p { color: var(--muted); margin: 0 0 22px; max-width: 42ch; }
.contact-sent .text-link { color: var(--white); }

/* ---------- the aside ---------- */

.contact-aside { display: flex; flex-direction: column; gap: 36px; }
.aside-block { border-top: 1px solid #d6b98455; padding-top: 22px; }
.aside-block h2 {
  font-family: var(--heading);
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0 0 14px;
}
.aside-block p { color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.aside-block p:last-child { margin-bottom: 0; }
.aside-block .address { color: var(--white); font-size: 1.0625rem; }
.aside-block a { color: var(--white); }
.aside-block .button-row { margin-top: 18px; }

.aside-hours { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.aside-hours th, .aside-hours td { text-align: left; padding: 9px 0; border-bottom: 1px solid #ffffff22; }
.aside-hours thead th {
  font-family: var(--heading);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.aside-hours tbody th { font-weight: 600; color: var(--white); }
.aside-hours td { color: var(--muted); }
.aside-note { font-size: .875rem; margin-top: 14px !important; }

/* ---------- phones ---------- */

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 740px) {
  /* The header collapses to a centred logo at 94px on phones. */
  .contact-main { padding-top: 118px; }
  .contact-lede h1 { font-size: clamp(4.2rem, 19vw, 6rem); }
  .contact-standfirst { font-size: 1rem; }
  .contact-actions { gap: 16px; }
  .contact-actions .button { width: 100%; justify-content: center; gap: 14px; }
  .contact-privacy { font-size: .8125rem; }
  .aside-block h2 { font-size: 1.4rem; }
}

/* ---------- Still mode ----------
   The page has no scroll scene to switch off, so Still only has to stop the
   field chrome animating and let the reveal targets through. The reveal rule
   in brand-palette.css already needs .motion-ready AND :not(.reduced) AND
   .reveal-ready to hide anything, so nothing here has to un-hide them. */

html.reduced .field input,
html.reduced .field select,
html.reduced .field textarea { transition: none; }

/* ---------- tap targets ----------
   A phone number sitting inside a sentence is only 19-25px tall, which the
   hit-test gate fails. Same fix the home page uses in mobile-frame.css S16: a
   44px band centred on the link, which buys touch area without changing the
   line box or the text's position.

   Scoped to links inside a paragraph and excluding .text-link, which already
   carries min-height:48px - doubling up there would push one link's band over
   its neighbour and swallow the tap. */
@media (max-width: 740px) {
  .aside-block p a:not(.text-link),
  .contact-sent p a:not(.text-link) { position: relative; }
  .aside-block p a:not(.text-link)::after,
  .contact-sent p a:not(.text-link)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* ---------- clearance for the mobile dock ----------
   The dock is position:fixed at bottom:0 and 67px tall, and reserves no space
   for itself, so the last 67px of the page sits behind it at full scroll. That
   is true of the home page too and is left alone there - but this page is one
   people scroll through filling in fields, so it reserves the space here.

   scroll-padding-bottom matters more than the padding: without it, focusing a
   field near the end of the form scrolls it to the viewport edge, which is
   underneath the dock. */
@media (max-width: 740px) {
  body { padding-bottom: 67px; }
  :root { scroll-padding-bottom: 79px; }
}