/* Contact block: booking button and the reach-out form.

   One stylesheet for all eighty-one premium templates rather than the same
   rules copied into eighty-one stylesheets. Everything reads from the custom
   properties the templates already declare, so the block takes each template's
   own palette instead of imposing one.

   Every property carries a fallback. Most templates declare all of --brand,
   --on-brand, --ink, --ink-soft, --surface-2 and --border, but a handful do
   not, and a missing variable must degrade rather than render invisible text.
   currentColor is used for borders wherever a neutral is wanted, since it
   follows the host template in both light and dark designs. */

.cta {
  display: inline-block;
  padding: 9px 18px;
  background: var(--brand, #1c3557);
  color: var(--on-brand, #ffffff);
  text-decoration: none;
  font: 700 13.5px/1.3 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Templates that set a general link colour would otherwise paint this label
   the brand colour on a brand colour ground and make it vanish, so the button
   restates its own colour at higher specificity. */
a.cta, a.cta:link, a.cta:visited { color: var(--on-brand, #ffffff); }
a.cta:hover, a.cta:focus-visible {
  background: var(--ink, currentColor);
  color: var(--bg, #ffffff);
}

/* Label-and-value row for the handful of templates that have no .pair of their
   own. Deliberately not named .pair: this stylesheet loads after the template's
   own, so reusing that name would override the bespoke .pair rules in the
   seventy-odd templates that do define one. */
.cpair { display: flex; gap: 16px; align-items: baseline; margin: 0 0 10px; }
.cpair > span:first-child {
  flex: 0 0 110px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, currentColor);
}

.formhead {
  margin: 38px 0 16px;
  color: var(--ink, inherit);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.reach { max-width: 34em; }

.fld { display: block; margin: 0 0 14px; }
.fld > span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, currentColor);
}
.fld input,
.fld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--surface-2, transparent);
  border: 1px solid var(--border, currentColor);
  color: var(--ink, inherit);
  font: 15px/1.5 inherit;
}
.fld textarea { resize: vertical; }
.fld input:focus,
.fld textarea:focus {
  border-color: var(--brand, currentColor);
  outline: 2px solid var(--brand, currentColor);
  outline-offset: 1px;
}

.send {
  margin-top: 4px;
  padding: 10px 22px;
  background: var(--brand, #1c3557);
  color: var(--on-brand, #ffffff);
  border: 0;
  cursor: pointer;
  font: 700 13.5px/1.3 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.send:hover, .send:focus-visible {
  background: var(--ink, currentColor);
  color: var(--bg, #ffffff);
}

/* Live status while the form submits. role="status" on the element itself
   announces changes to screen readers. Hidden until there is something to say,
   so it occupies no space at rest.

   Set in the monospace status voice the rest of the sequencer uses, and in the
   GO lamp green rather than the page brand, because this is a go/no-go
   readout. The first version of this was 13px in --ink-soft, which on a black
   ground was invisible enough that a failed send looked like nothing had
   happened at all. Loud is the point. */
.formstat {
  margin: 14px 0 0;
  font: 700 13px/1.4 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00e05a;
}
.formstat.bad { color: #ff6b6b; }
.formstat[hidden] { display: none; }

/* Honeypot. Positioned off-screen rather than display:none, because some bots
   skip fields that are not rendered at all. Kept out of the tab order and the
   accessibility tree by tabindex and aria-hidden on the markup itself. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 700px) {
  .reach { max-width: 100%; }
  .cpair { display: block; }
  .cpair > span:first-child { display: block; margin-bottom: 4px; }
}