/* ==========================================================================
   Contact — hero tags and closing panel
   Scoped styles only. Reuses the site's component classes and tokens.
   ========================================================================== */

/* The "one agreement / one bottleneck" pair, read as two small tags */
.nc-tags {
  display: flex;
  flex-flow: column;
  gap: var(--spacing--16);
  align-items: flex-start;
}
.nc-tag {
  display: flex;
  flex-flow: column;
  gap: .25rem;
  padding: var(--spacing--12) var(--spacing--16);
  border-radius: var(--radius-general-small);
  background-color: var(--color-tokens-background-lift);
}
.nc-tag_title {
  font-family: var(--typography-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-tokens-tone-strong);
}
.nc-tag_note {
  font-family: var(--typography-font-body);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--color-tokens-tone-subtle);
}

/* Hero eyebrow sits above the headline */
.nc-eyebrow {
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--spacing--16);
}

.contact-a_headline .text-size-large { margin-top: var(--spacing--16); }

@media screen and (min-width: 768px) {
  .nc-tags { flex-flow: row; flex-wrap: wrap; }
  .nc-tag { flex: 1 1 14rem; max-width: 18rem; }
}
/* Below 767px the template turns the details column into a 2-up grid, which is
   too tight for the tag pair on a phone. Stack it instead. */
@media screen and (max-width: 640px) {
  .contact-a_grid_left { grid-template-columns: 1fr; }
  .nc-tag { width: 100%; max-width: none; }
}
@media screen and (max-width: 479px) {
  .nc-tag_note { font-size: .8125rem; }
}

/* The client's spec repeats the hero headline in the closing panel as a
   bookend. On a page this short the two dark panels butt together and read as
   a duplication rather than a frame, so the field is allowed to breathe
   between them. */
.section_contact-a { padding-bottom: var(--section-padding--large); }

/* The send control was an <a href="#">, so the form could never be submitted
   and the required-field validation never fired. It is a submit button now;
   strip the user-agent button chrome so it matches the other CTAs. --------- */
button.cta_primary {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Honeypot: off-screen rather than display:none, so bots that skip hidden
   fields still fill it in. Never shown to a person. */
.nicholii-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Submit outcome, announced politely to screen readers. */
.nicholii-form_status {
  margin: 0 0 .875rem;
  font-size: .9375rem;
  line-height: 1.45;
}
.nicholii-form_status.is-ok { color: var(--color-base-accent-primary); }
.nicholii-form_status.is-error { color: var(--color-base-ui-error, #e0655b); }
.nicholii-form_status.is-pending { color: rgba(247, 247, 245, 0.76); }

/* Balance pass ------------------------------------------------------------
   The column was ragged: Company sat as a third item in a two-column grid and
   left 303px of dead space beside it, the two chips were 93px and 72px tall so
   their row read as lopsided, and the left column had its content pinned to the
   top and bottom with a 335px void between. */

/* Company takes the full width rather than orphaning half a row. */
.form_two-inputs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form_two-inputs-grid > .form_single-input:nth-child(3) { grid-column: 1 / -1; }

/* Chips share a height and a width, so the pair reads as one row. */
.nc-tags { align-items: stretch; }
.nc-tag {
  flex: 1 1 0;
  max-width: none;
  justify-content: flex-start;
}

/* Close the void: the column was justify-content: space-between and stretched
   to the form's height, which pushed the chips to the top and the address to
   the bottom with 335px of nothing between them. The two blocks sit together
   now and the column starts at the top, so the pair reads as one group. */
.contact-a_grid_left {
  justify-content: flex-start;
  align-self: start;
  gap: var(--spacing--48, 3rem);
}
.contact-a_grid_left .contact-a_details-wrap { margin: 0; }

/* The brand mark is a corner device, not something floating beside the
   headline's midpoint. */
.contact-a_top-flex { align-items: flex-start; }

@media screen and (max-width: 767px) {
  .form_two-inputs-grid { grid-template-columns: minmax(0, 1fr); }
  .nc-tags { flex-flow: column; }
  .nc-tag { flex: 0 0 auto; }
}