/* ============================================================
   GMDS · contact

   Loaded after pages.css, which supplies the room, the nav, the page head and
   the footer. This file is the form and the direct routes beside it.

   A form is the one place on a marketing site where the product register
   applies: real labels above real inputs, help under the field it belongs to,
   and a hit area you can land on with a thumb. It still borrows the page's
   grammar so it does not look like a different piece of software: hairlines,
   sharp corners, violet for anything interactive.
   ============================================================ */

.will-in {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease);
}
.will-in.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .will-in { opacity: 1; transform: none; transition: none; }
}

/* --- the two halves ------------------------------------------------------
   Form first in the source and on the left, because it is what most people
   came to do. The direct routes sit beside it rather than under it: plenty of
   people would rather not fill anything in, and burying the phone number
   below a form is how you lose the ones who were ready to call.
   ---------------------------------------------------------------------- */

.talk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  gap: 0;
  padding-bottom: clamp(4rem, 10vh, 6rem);
  border-top: 1px solid var(--edge);
}

.form { padding: clamp(2rem, 5vh, 3rem) clamp(1.8rem, 5vw, 4rem) 0 0; }

.ways {
  padding: clamp(2rem, 5vh, 3rem) 0 0 clamp(1.8rem, 5vw, 4rem);
  border-left: 1px solid var(--edge);
}

/* --- fields -------------------------------------------------------------- */

.form__body { display: grid; gap: clamp(1.1rem, 2.6vh, 1.5rem); }

.form__two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vh, 1.5rem);
}

/* The trap. A real input, off screen rather than display:none, because some
   bots skip anything that is not rendered. A person never reaches it: no
   label, no tab stop, hidden from the accessibility tree. */
.form__honey {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.field { display: grid; gap: 0.45rem; }

/* Label above the input, always. A placeholder is not a label: it disappears
   the moment somebody types, which is exactly when they might want to check
   what the field was asking for. */
.field__label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.22em; text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mut);
}
.field__opt {
  letter-spacing: 0.1em; text-indent: 0.1em;
  font-weight: 600;
  text-transform: none;
  opacity: 0.7;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--input);
  border: 1px solid var(--edge);
  color: var(--paper);
  font: inherit;
  font-size: 1rem;                     /* 16px, or iOS zooms the page on focus */
  line-height: 1.5;
  transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 8rem; }

.field input:hover,
.field textarea:hover { border-color: var(--edge-strong); }

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

/* Placeholders have to clear contrast too, or the hint is only a hint for
   people with good screens. */
.field ::placeholder { color: var(--paper-mut); opacity: 0.75; }

.field__help {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--paper-mut);
}

/* Only once somebody has actually typed something wrong. :invalid on its own
   paints every required field red before anybody has touched the form. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid {
  border-color: var(--scarlet-a70);
}

/* --- send ---------------------------------------------------------------- */

.form__foot {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding-top: clamp(0.6rem, 2vh, 1rem);
}

.form__go {
  padding: 0.95rem 1.8rem;
  border: 0;
  background: var(--violet);
  color: var(--void);
  font: inherit;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; text-indent: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 0 var(--violet-a50);
  transition: box-shadow 320ms var(--ease-out), background 240ms var(--ease-out);
}
.form__go:hover, .form__go:focus-visible {
  background: var(--violet-lit-b);
  box-shadow: 0 0 0 3px var(--violet-a28);
}
.form__go:active { background: var(--violet-press); }

.form__small {
  margin: 0;
  max-width: 22rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--paper-mut);
}

/* --- the direct routes --------------------------------------------------
   Label beside the value rather than above it. Stacked, four contacts and a
   set of opening hours ran to eleven lines against a form of five fields, and
   the column ended up half as long again as the thing it sits next to.
   ---------------------------------------------------------------------- */

.ways__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800; font-stretch: 112%;
  line-height: 1.1; letter-spacing: -0.03em;
  color: var(--paper);
}

.ways__note {
  margin: 0 0 clamp(1.2rem, 3vh, 1.7rem);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--paper-dim);
}

.ways__list {
  margin: 0;
  border-top: 1px solid var(--edge);
}

/* Each entry is its own two-column row. A dl of bare dt and dd pairs cannot
   be laid out this way without wrapping each pair, which is the only reason
   the divs are there. */
.ways__list > div {
  display: grid;
  grid-template-columns: minmax(0, 4.6rem) minmax(0, 1fr);
  gap: 0.3rem 0.9rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--edge);
}

.ways__list dt {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--paper-mut);
}

.ways__list dd { margin: 0; display: grid; gap: 0.3rem; justify-items: start; }

/* The underline is drawn rather than inherited, so it can be animated on a
   transform and sits where the type wants it rather than where the browser
   puts it. */
.ways__value {
  position: relative;
  padding-bottom: 0.12rem;
  font-size: clamp(0.94rem, 1.1vw, 1.02rem);
  font-weight: 700; font-stretch: 104%;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-decoration: none;
  word-break: break-word;
  transition: color 240ms var(--ease-out);
}
.ways__value::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--violet);
  transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--ease-out);
}
.ways__value:hover, .ways__value:focus-visible { color: var(--violet-soft); }
.ways__value:hover::after, .ways__value:focus-visible::after { transform: none; }

/* The second route to the same number, set quietly under it. Printing the
   digits twice cost two lines and told nobody anything they did not already
   have on the line above. */
.ways__alt {
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--violet-a35);
  font-size: 0.76rem; font-weight: 600;
  line-height: 1.4;
  color: var(--paper-mut);
  text-decoration: none;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.ways__alt:hover, .ways__alt:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--violet);
}

/* Facts, not links, so they get none of a link's affordances. */
.ways__plain {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--paper-dim);
}

/* --- narrow -------------------------------------------------------------
   The routes go under the form. They keep the rule, moved to the top edge,
   so the two halves are still two halves rather than one long column.
   ---------------------------------------------------------------------- */

@media (max-width: 880px) {
  .talk { grid-template-columns: minmax(0, 1fr); }
  .form { padding-right: 0; }
  .ways {
    padding: clamp(2rem, 5vh, 3rem) 0 0;
    margin-top: clamp(2.5rem, 6vh, 3.5rem);
    border-left: 0;
    border-top: 1px solid var(--edge);
  }
}

@media (max-width: 560px) {
  /* Two inputs side by side at this width gives each of them about nine
     characters of visible value. */
  .form__two { grid-template-columns: minmax(0, 1fr); }
  .form__foot { align-items: flex-start; }
  .form__go { width: 100%; justify-content: center; }
}

/* --- the confirmation page ----------------------------------------------
   Where the form lands. A page that only says thank you leaves somebody
   wondering whether to send it again tomorrow, so this one says what happens
   next, when, and what to do if it does not.
   ---------------------------------------------------------------------- */

.done { padding-bottom: clamp(4rem, 10vh, 6rem); }

.done__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}

.done__list li {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: start;
  padding: clamp(1.4rem, 3.5vh, 2rem) 0;
  border-bottom: 1px solid var(--edge);
}

.done__n {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800; font-stretch: 118%;
  line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--violet);
}

.done__list h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 800; font-stretch: 108%;
  line-height: 1.25; letter-spacing: -0.02em;
  color: var(--paper);
}
.done__list p {
  margin: 0;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 42rem;
}

.done__end {
  display: grid;
  gap: clamp(1.8rem, 4.5vh, 2.6rem);
  padding-top: clamp(1.8rem, 4.5vh, 2.6rem);
}

.done__note {
  margin: 0;
  max-width: 42rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--paper-mut);
}
.done__note a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.done__note a:hover { color: var(--violet-soft); }

/* Two ways onward rather than a single button back to the home page. Somebody
   who has just written to you is the most interested visitor the site will
   have all week, and sending them to a doormat wastes that. */
.done__go {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--edge);
}

.done__go a {
  display: grid; gap: 0.4rem;
  padding: clamp(1.2rem, 3vh, 1.7rem) clamp(1.2rem, 3vw, 2rem)
           clamp(1.2rem, 3vh, 1.7rem) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
}
.done__go a + a {
  padding-right: 0;
  padding-left: clamp(1.2rem, 3vw, 2rem);
  border-left: 1px solid var(--edge);
}

.done__golabel {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--paper-mut);
  transition: color 240ms var(--ease-out);
}
.done__goname {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 800; font-stretch: 108%;
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--paper-dim);
  transition: color 240ms var(--ease-out), font-stretch 380ms var(--ease);
}
.done__go a:hover .done__golabel,
.done__go a:focus-visible .done__golabel { color: var(--scarlet-lit); }
.done__go a:hover .done__goname,
.done__go a:focus-visible .done__goname {
  color: var(--paper);
  font-stretch: 116%;
}

@media (max-width: 620px) {
  .done__list li { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .done__go { grid-template-columns: minmax(0, 1fr); }
  .done__go a,
  .done__go a + a {
    padding-left: 0; padding-right: 0;
    border-left: 0;
  }
}