/* ==========================================================================
   CONTACT
   ==========================================================================

   The old page was the purchased template's contact layout, and it had one
   problem that mattered more than any styling issue: the form posted to
   https://WebMotionHQ.com/html/ziptech/v2/php/send-mail.php — a leftover
   demo endpoint from the theme. Every message sent from this page went
   nowhere, with no CSRF token, no validation and no confirmation.

   The rest was ordinary template debt: an empty <h5> above the address, the
   admin's two-office address list dumped raw inside a <p>, social icons
   pointing at bare facebook.com / twitter.com, and placeholder-only inputs
   with no <label> — the same accessibility failure the consultation block
   was rebuilt to fix.

   Deliberately inherits the site's typography and background: no font-family
   declarations and no page background here, so the page keeps the template's
   Mulish headings, Roboto body and existing banner. Accents are read from the
   template's own custom properties rather than a second palette.
   ========================================================================== */

.wm-contact {
  /* Tints are mixed from the accent rather than built from the template's
     --webex-primary-color-rgb: that variable is comma-separated, so it cannot
     take a slash alpha and every rule using it would be dropped. */
  --wm-accent: var(--webex-primary-color, #3b38eb);

  /* Text colours are pinned, NOT read from --heading-font-color and
     --body-font-color. style-dark.css is loaded unconditionally in
     main_master (there is no light/dark toggle), so those two tokens resolve
     to #ffffff and #cccccc site-wide. The cards below are deliberately white,
     and reading the theme tokens painted white text on white cards — the form
     labels, the office addresses and the direct lines were all invisible.
     These are the light-theme values from style.css, restated so this
     component cannot be repainted by the theme sheet again.

     --wm-accent stays a variable on purpose: it is the brand colour and both
     sheets agree on it, so a rebrand should still reach this page. */
  --wm-ink: #232323;
  --wm-body: #515264;
  --wm-muted: #6b6c7b;
  --wm-line: rgb(35 35 35 / .12);
  --wm-soft: #f7f7f7;
  --wm-success: #197f52;
}

.wm-contact *, .wm-contact *::before, .wm-contact *::after { box-sizing: border-box; }

/* Every light surface sets its own text colour so anything inside it inherits
   dark — including markup this file never sees, such as the office address
   block, which is raw HTML from the admin. Without this, an unstyled tag in
   there falls through to the theme's body colour and vanishes. */
.wm-contact__form,
.wm-contact__card,
.wm-contact__demo,
.wm-contact__signals li,
.wm-contact__map-caption { color: var(--wm-body); }

/* Inheritance alone is not enough for these two: style-dark.css colours the
   bare `p` and `h1`-`h6` selectors, and a direct rule beats an inherited value
   however dark the parent is.

   `:where()` keeps the element list weightless, so each of these lands at a
   single class — heavy enough to beat the theme's bare tags, light enough that
   every specific rule further down this file still wins. That matters: the
   intro copy outside these cards sits on the site's dark background and must
   stay light, and .wm-contact__reassure below is a deliberately muted <p>. */
.wm-contact__form :where(p, h1, h2, h3, h4, h5, h6),
.wm-contact__card :where(p, h1, h2, h3, h4, h5, h6),
.wm-contact__demo :where(p, h1, h2, h3, h4, h5, h6) { color: var(--wm-body); }

.wm-contact__form :where(h1, h2, h3, h4, h5, h6),
.wm-contact__card :where(h1, h2, h3, h4, h5, h6),
.wm-contact__demo :where(h1, h2, h3, h4, h5, h6) { color: var(--wm-ink); }

/* --- Intro -----------------------------------------------------------------------
   Uses the template's own section-title classes in the markup, so the heading
   font, size and accent match every other page. */

.wm-contact__intro { max-width: 62ch; }

/* Three short promises rather than a paragraph of reassurance. */
.wm-contact__signals {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.wm-contact__signals li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--wm-line);
  border-radius: 999px;
  background-color: #fff;
  font-size: .875rem;
  line-height: 1.4;
}

.wm-contact__signals svg {
  width: .9375rem;
  height: .9375rem;
  flex-shrink: 0;
  color: var(--wm-accent);
}

/* --- Body grid ------------------------------------------------------------------- */

.wm-contact__grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (width >= 62rem) {
  .wm-contact__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 3rem;
  }
}

/* --- Form card -------------------------------------------------------------------- */

.wm-contact__form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background-color: #fff;
  border: 1px solid var(--wm-line);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgb(35 35 35 / .06);
}

.wm-contact__form-title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--wm-ink);
}

.wm-contact__form-note {
  margin: .625rem 0 1.75rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--wm-body);
}

.wm-contact__row {
  display: grid;
  gap: 1.25rem;
  margin-block-end: 1.25rem;
}

@media (width >= 34rem) {
  .wm-contact__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Scoped under .wm-contact so these beat the shared .wm-field rules in
   consult.css, which are written for a dark panel — this card is white. */
.wm-contact .wm-field { display: flex; flex-direction: column; gap: .4375rem; }

.wm-contact .wm-field label {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wm-ink);
}

.wm-contact .wm-field label span { color: var(--wm-accent); }

.wm-contact .wm-field input,
.wm-contact .wm-field select,
.wm-contact .wm-field textarea {
  width: 100%;
  height: auto;
  padding: .8125rem .9375rem;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--wm-ink);
  background-color: var(--wm-soft);
  border: 1px solid var(--wm-line);
  border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.wm-contact .wm-field input::placeholder,
.wm-contact .wm-field textarea::placeholder { color: var(--wm-muted); opacity: 1; }

.wm-contact .wm-field input:focus,
.wm-contact .wm-field select:focus,
.wm-contact .wm-field textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--wm-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wm-accent) 18%, transparent);
}

.wm-contact .wm-field textarea { resize: vertical; min-height: 9rem; }

/* Native selects size their own line box, which clips the option text at the
   padding used for the text inputs. */
.wm-contact .wm-field select {
  min-height: 3rem;
  padding-block: .6875rem;
  padding-inline-end: 2.5rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7c7d8c 50%),
    linear-gradient(135deg, #7c7d8c 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.375rem, calc(100% - 13px) 1.375rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* The open dropdown is drawn by the OS, not by the page, and it does not
   inherit the select's colours in every browser. Stated so "Choose one" and
   the product names are legible however the theme sheet has left things. */
.wm-contact .wm-field select option {
  color: var(--wm-ink);
  background-color: #fff;
}

.wm-contact .wm-field__hint { font-size: .8125rem; line-height: 1.5; color: var(--wm-muted); }

/* Honeypot. Hidden from people, left in the DOM for bots. Not display:none —
   some bots skip those and fill everything else. */
.wm-contact__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wm-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9375rem 2rem;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background-color: var(--wm-accent);
  border: 1px solid var(--wm-accent);
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.wm-contact__submit svg { width: 1em; height: 1em; }

.wm-contact__submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--wm-accent) 32%, transparent);
  transform: translateY(-1px);
}

.wm-contact__reassure {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 1.125rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--wm-muted);
}

.wm-contact__reassure svg {
  width: .9375rem;
  height: .9375rem;
  margin-block-start: .25rem;
  color: var(--wm-success);
  flex-shrink: 0;
}

/* --- Feedback ----------------------------------------------------------------------
   The old form had none at all: submitting told the visitor nothing. */

.wm-contact__alert {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-block-end: 1.5rem;
  padding: .9375rem 1rem;
  border-radius: 6px;
  border: 1px solid rgb(25 127 82 / .3);
  background-color: rgb(25 127 82 / .07);
  font-size: .9375rem;
  line-height: 1.6;
  color: #14603e;
}

.wm-contact__alert svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-block-start: .3125rem; }

.wm-contact__errors {
  margin-block-end: 1.5rem;
  padding: .9375rem 1rem;
  border-radius: 6px;
  border: 1px solid rgb(179 52 31 / .3);
  background-color: rgb(179 52 31 / .06);
  font-size: .9375rem;
  line-height: 1.6;
  color: #8f2a19;
}

.wm-contact__errors ul { margin: .375rem 0 0; padding-inline-start: 1.1rem; }

/* --- Rail -------------------------------------------------------------------------- */

.wm-contact__rail {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wm-contact__card {
  padding: 1.625rem;
  border: 1px solid var(--wm-line);
  border-radius: 10px;
  background-color: #fff;
}

.wm-contact__card-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.125rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wm-ink);
}

.wm-contact__card-title svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--wm-accent); }

/* Direct lines. Each row is a link, so the numbers are one tap on a phone
   rather than something to copy out by hand. */
.wm-contact__lines {
  display: flex;
  flex-direction: column;
  gap: .9375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-contact__line { display: flex; flex-direction: column; gap: .125rem; }

.wm-contact__line-label {
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--wm-muted);
}

.wm-contact__line a {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  color: var(--wm-ink);
  word-break: break-word;
  transition: color .15s ease;
}

.wm-contact__line a:hover { color: var(--wm-accent); }

/* --- Offices -----------------------------------------------------------------------
   The address is one HTML blob edited in the admin, so this styles whatever
   list it holds rather than hardcoding two offices here. */

.wm-contact__address ul { margin: 0; padding: 0; list-style: none; }

.wm-contact__address li {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--wm-body);
}

.wm-contact__address li:has(strong):not(:first-child) { margin-block-start: .5rem; }

.wm-contact__address strong {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wm-accent);
}

.wm-contact__address p { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--wm-body); }

/* --- Demo cross-link ----------------------------------------------------------------- */

.wm-contact__demo {
  padding: 1.625rem;
  border: 1px solid color-mix(in srgb, var(--wm-accent) 25%, transparent);
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--wm-accent) 5%, #fff);
}

.wm-contact__demo h3 {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--wm-ink);
}

.wm-contact__demo p {
  margin: 0 0 1rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--wm-body);
}

.wm-contact__demo-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--wm-accent);
}

.wm-contact__demo-link svg {
  width: 1em;
  height: 1em;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.wm-contact__demo-link:hover svg { transform: translateX(.25rem); }

/* --- Social ------------------------------------------------------------------------- */

.wm-contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-contact__social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--wm-line);
  border-radius: 8px;
  color: var(--wm-body);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.wm-contact__social a:hover {
  color: var(--wm-accent);
  border-color: color-mix(in srgb, var(--wm-accent) 50%, transparent);
  background-color: color-mix(in srgb, var(--wm-accent) 7%, #fff);
}

/* --- Maps ---------------------------------------------------------------------------
   Two offices, so two maps. Both lazy — nothing is fetched from Google until
   someone actually scrolls this far. */

.wm-contact__maps-grid {
  display: grid;
  gap: 1.5rem;
}

@media (width >= 48rem) {
  .wm-contact__maps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wm-contact__map {
  overflow: hidden;
  border: 1px solid var(--wm-line);
  border-radius: 10px;
  background-color: var(--wm-soft);
}

.wm-contact__map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  filter: grayscale(.35);
  transition: filter .3s ease;
}

.wm-contact__map:hover iframe { filter: none; }

@media (width >= 48rem) {
  .wm-contact__map iframe { height: 340px; }
}

.wm-contact__map-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .9375rem 1.125rem;
  border-block-start: 1px solid var(--wm-line);
  background-color: #fff;
}

.wm-contact__map-caption strong {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--wm-ink);
}

.wm-contact__map-caption a {
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--wm-accent);
}

.wm-contact__map-caption a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .wm-contact *, .wm-contact *::before, .wm-contact *::after {
    transition-duration: .01ms !important;
  }
}