/* primecode — /contact/ route stylesheet.
   Enqueued as `primecode-contact` with `primecode-interior` as its dependency:
   the title band comes from interior.css and is not repeated here. What is
   left is what only this route has — the two-column grid, the Fluent Forms
   adapter, the company block and the map. This route has no prose column, so
   it shares none of interior.css's content typography.

   Every value was measured from migration/capture/source/contact/ at 1440,
   768 and 390. The source form was an Elementor Pro widget, so none of its
   .elementor-field-textual CSS survives the swap: the rules below are an
   intentional adapter onto Fluent Forms' own class names. */

/* Route-local values the base token set does not carry. Named --pc-contact-*
   where a base token of a similar name already exists, so nothing is shadowed. */
.pc-contact {
  --pc-contact-y: 60px;          /* band -> content, content -> map */
  --pc-field-h: 40px;
  --pc-field-lh: 21px;           /* 15px x 1.4 */
  --pc-field-bd: #EDEDED;        /* measured; NOT --pc-rule (#E4E4E4) */
  --pc-field-ink: #1F2124;
  --pc-field-label: #8F8F8F;     /* measured floor; NOT --pc-muted (#A4A4A4) */
}

/* ---------- the two columns ----------------------------------------------
   .pc-shell gives 1140/10px; each column adds the source's 10px inset, so
   content lands at 540px (1440), 354px (768) and 350px (390) as measured.
   60px below the band, not the 50px the other content routes use: the first
   chip's box measures y=296 against a band bottom of 236. */
.pc-contact__grid {
  display: flex;
  flex-wrap: wrap;
  padding-block: var(--pc-contact-y);
}
.pc-contact__col {
  flex: 1 1 50%;
  min-width: 0;
  padding-inline: var(--pc-gutter);
}

/* Contact is the one route whose content H2s are 700, not the site's 500. */
.pc-contact__chip {
  font-size: var(--pc-fs-h2);
  font-weight: 700;
}

/* ---------- Fluent Forms adapter -----------------------------------------
   flow-root so the last group's 20px keeps the form 359px tall instead of
   collapsing out of it, as it does in the source. */
.pc-contact__form {
  display: flow-root;
}
.pc-contact .pc-contact__form .fluentform,
.pc-contact .pc-contact__form .frm-fluent-form {
  margin: 0;
}

/* Every group carries 20px below it, the submit included: that is what makes
   the source form exactly 359px tall at all three viewports. */
.pc-contact .pc-contact__form .ff-el-group {
  margin: 0 0 var(--pc-chip-gap);
}
.pc-contact .pc-contact__form .ff-el-group:last-child {
  margin-bottom: var(--pc-chip-gap);
}

/* Labels sit above the field (Fluent Forms label_placement: top), 21px tall. */
.pc-contact .pc-contact__form .ff-el-input--label {
  margin: 0;
  padding: 0;
}
.pc-contact .pc-contact__form .ff-el-input--label label {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--pc-field-label);
  font-family: var(--pc-font);
  font-size: var(--pc-fs-field);
  font-weight: var(--pc-fw-body);
  line-height: var(--pc-field-lh);
}
/* The source marks Email required but shows no asterisk. Kept off-screen so
   the input's own required state still reaches assistive tech. */
.pc-contact .pc-contact__form .ff-el-is-required {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pc-contact .pc-contact__form .ff-el-input--content {
  margin: 0;
}
.pc-contact .pc-contact__form .ff-el-form-control {
  display: block;                      /* the source computed block on both; inline
                                          textareas add a 7px descender gap */
  width: 100%;
  height: var(--pc-field-h);
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--pc-field-bd);
  border-radius: var(--pc-radius);
  background: var(--pc-surface-odd);   /* #FCFCFC */
  color: var(--pc-field-ink);
  font-family: var(--pc-font);
  font-size: var(--pc-fs-field);
  font-weight: var(--pc-fw-body);
  line-height: var(--pc-field-lh);
  box-shadow: none;
  appearance: none;
}
.pc-contact .pc-contact__form textarea.ff-el-form-control {
  height: 96px;                        /* 4 rows x 21px + 10px padding + 2px border */
  padding: 5px 14px;
  resize: vertical;
}
.pc-contact .pc-contact__form .ff-el-form-control::placeholder {
  color: var(--pc-field-ink);
  opacity: .6;                         /* renders #77797A over #FCFCFC, as measured */
}
.pc-contact .pc-contact__form .ff-el-form-control:focus,
.pc-contact .pc-contact__form .ff-el-form-control:focus-visible {
  border-color: var(--pc-primary);
  background: var(--pc-surface-odd);
  box-shadow: none;
}

/* Submit — full-width yellow. Deliberately not .pc-btn: that component is
   16px/600 with 12px padding, and this button measured 15px/400/40px. */
.pc-contact .pc-contact__form .ff_submit_btn_wrapper {
  margin-bottom: var(--pc-chip-gap);
  text-align: left;
}
.pc-contact .pc-contact__form .ff-btn-submit {
  display: block;
  width: 100%;
  height: var(--pc-field-h);
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--pc-radius);
  background: var(--pc-secondary);
  color: var(--pc-black);
  font-family: var(--pc-font);
  font-size: var(--pc-fs-field);
  font-weight: var(--pc-fw-body);
  line-height: 15px;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  transition: filter var(--pc-motion) ease;
}
.pc-contact .pc-contact__form .ff-btn-submit:hover {
  background: var(--pc-secondary);
  filter: brightness(.94);
}

/* reCAPTCHA v3 renders no visible widget, so its group must not add height. */
.pc-contact .pc-contact__form .pc-contact__captcha {
  margin: 0;
}

/* Success / error states — the source never showed these, so they are dressed
   from the site's own tokens rather than left as Fluent Forms' stock green. */
.pc-contact .pc-contact__form .ff-message-success {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--pc-field-bd);
  border-radius: var(--pc-radius);
  background: var(--pc-surface-odd);
  color: var(--pc-ink);
  font-size: var(--pc-fs-field);
  line-height: var(--pc-lh-body);
}
.pc-contact .pc-contact__form .ff-el-is-error .ff-el-form-control {
  border-color: var(--pc-primary);
}
.pc-contact .pc-contact__form .error,
.pc-contact .pc-contact__form .text-danger,
.pc-contact .pc-contact__form .ff-errors-in-stack {
  margin: 4px 0 0;
  color: var(--pc-primary);
  font-size: var(--pc-fs-field);
  line-height: var(--pc-lh-body);
}

/* ---------- company block ------------------------------------------------
   Redesigned 2026-09-22 at Nick's request (the source stacked a bare icon
   over solid-set text with uneven gaps). Rows on one grid: a 44px brand-yellow
   badge carrying the icon, then a label-over-value block at the body line
   height. The copy is the source's word for word. */
.pc-contact__rows {
  display: grid;
  gap: var(--pc-chip-gap);
  margin: 0;
  padding-block-start: 6px;
  font-style: normal;
}
.pc-contact__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}
.pc-contact__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pc-secondary);
  color: var(--pc-black);
}
.pc-contact__icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.pc-contact__text {
  margin: 0;
  padding-block-start: 2px;
  color: var(--pc-ink);
  font-size: var(--pc-fs-body);
  font-weight: var(--pc-fw-body);
  line-height: var(--pc-lh-body);
}
.pc-contact__text b {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
}
.pc-contact__text a {
  color: var(--pc-primary);
  font-weight: var(--pc-fw-nav);       /* 600 */
  text-decoration: none;
}
.pc-contact__text a:hover,
.pc-contact__text a:focus-visible {
  text-decoration: underline;
}

/* ---------- map ---------------------------------------------------------- */
.pc-contact__map {
  width: 100%;
}
.pc-contact__map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

/* ---------- stacked ------------------------------------------------------
   Columns stack below 768px, matching base.css's breakpoint. The form's last
   group already carries 20px, so the second column needs no extra margin. */
@media (max-width: 767px) {
  .pc-contact__col {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-contact .pc-contact__form .ff-btn-submit {
    transition: none;
  }
}