/* "Talk to Us" — contact CTA section between "Where it applies" and the
   stay-tuned footer. Field/button colors below were sampled directly from the
   reference screenshot and turned out to already match sitewide tokens
   (--color-dark-surface, --color-dark-border, --gradient-brand) almost
   exactly, so nothing new is introduced beyond what contact.CW3nh7dV.css
   already defines.

   The form is the demo gate: it POSTs to the Azure lead function and, on
   success, is replaced in place by the HLS video player in the same column.
   Behaviour lives in site/js/lead-form.js, which finds everything by DATA
   ATTRIBUTE -- every class below can be renamed without breaking it. The
   data-* attributes and the field name="" attributes cannot. */

.section.talk-to-us {
  padding-top: 0;
}

.talk-to-us__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .talk-to-us__inner {
    grid-template-columns: 0.9fr 1.1fr;
    /* The form is taller than the intro text, so center the row instead of
       top-aligning it — otherwise the intro reads stranded near the top. */
    align-items: center;
  }
}

.talk-to-us__label {
  /* Uppercased in CSS rather than in the markup: some screen readers spell out
     all-caps text letter by letter. Delete these two lines to revert. */
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--color-paper);
}

.talk-to-us__label-underline {
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--gradient-brand);
}

.talk-to-us__heading {
  font-size: var(--type-section-headline);
  font-weight: 700;
  margin-top: var(--space-3);
  line-height: 1.15;
}

.talk-to-us__body {
  margin-top: var(--space-4);
  font-size: var(--type-body);
  color: var(--color-gray-300);
  max-width: 46ch;
}

.talk-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.talk-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.talk-form__field label {
  font-size: var(--type-label);
  font-weight: 400;
  color: var(--color-gray-300);
}

.talk-form__field input,
.talk-form__field textarea {
  font: inherit;
  padding: var(--space-3);
  border: 1.5px solid var(--color-dark-border);
  border-radius: var(--radius-sm);
  background: var(--color-dark-surface);
  color: var(--color-paper);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

/* No `outline: none` here. It used to sit in this rule and, being higher
   specificity than the global `:focus-visible` in contact.CW3nh7dV.css, it
   silently removed the keyboard focus ring from every field in this form --
   a WCAG 2.1 SC 2.4.7 failure. The border-color change is decoration on top
   of that ring, not a replacement for it. */
.talk-form__field input:focus,
.talk-form__field textarea:focus {
  border-color: var(--color-violet);
}

.talk-form__submit {
  align-self: flex-start;
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 500;
  font-size: var(--type-button);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.talk-form__submit:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .talk-form__submit:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Demo gate: honeypot, Turnstile, errors, privacy note, video player
   --------------------------------------------------------------------------- */

/* lead-form.js toggles visibility with the `hidden` property. A later
   `display:` rule on any of these elements would beat `hidden`'s default
   display:none and leave the form and the video on screen at the same time. */
.talk-to-us [hidden] {
  display: none !important;
}

/* The swap container. No height is reserved for the swap -- see the comment on
   reveal() in lead-form.js for why.

   The centred flex column is defensive rather than load-bearing: with no
   reserved height it is a no-op, because the box is exactly as tall as whatever
   is inside it. It exists so that if a min-height is ever reintroduced here, or
   the grid above switches to align-items: stretch, the player centres in the
   box instead of sticking to the top while the intro column beside it centres
   in the same row. That mismatch is the bug this section already had once, and
   it presented as "the layout is broken until you reload". */
.talk-to-us__form-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.talk-form__optional {
  color: var(--color-gray-300);
}

/* Honeypot. Positioned off-screen rather than display:none so that a naive
   bot still fills it in, and marked aria-hidden + tabindex="-1" in the markup
   so no human ever reaches it. autocomplete="off" matters: a password manager
   filling this field would silently block a real submission. */
.talk-form__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reserve the widget's height so the layout does not shift when Cloudflare
   finishes rendering into it. 65px is Turnstile's standard widget height. */
.talk-form__turnstile {
  min-height: 65px;
}

.talk-form__error {
  color: #ff8f8f;
  font-size: var(--type-label);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-magenta);
  border-radius: var(--radius-sm);
  background: rgba(255, 27, 143, .08);
}

/* The error region is a permanently-present role="alert" -- see the comment in
   lead-form.js. This is what keeps it out of the layout while it has no text. */
.talk-form__error:empty {
  display: none;
}

.talk-form__submit[disabled] {
  opacity: .6;
  cursor: progress;
}

.talk-form__privacy {
  font-size: var(--font-size-xs);
  color: var(--color-gray-300);
  max-width: 52ch;
}

.talk-form__privacy a {
  text-decoration: underline;
}

/* --- player --- */

.talk-video {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

/* Gradient border, matching the .btn--shiny treatment: a 2px gradient bed with
   the content inset on top of it. */
.talk-video__frame {
  width: 100%;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand-diagonal);
}

.talk-video__player {
  display: block;
  width: 100%;
  /* Holds the box before metadata arrives, so revealing the player does not
     shift the page a second time. The ladder is 16:9 -- see infra/aws. */
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius-md) - 2px);
  background: #000;
}

/* Shown only when autoplay had to fall back to muted -- iOS refuses an unmuted
   programmatic play() after the fetch. Native controls also offer a volume
   toggle; this is the obvious, visible one. */
.talk-video__unmute {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--color-dark-border);
  border-radius: 999px;
  background: var(--color-dark-surface);
  color: var(--color-paper);
  font-size: var(--type-button);
  font-weight: 500;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.talk-video__unmute:hover {
  border-color: var(--color-violet);
}

/* Shown when the one-hour playback grant lapses mid-session. Same treatment as
   the form error: a permanently-present role="alert" that CSS hides while it
   has no text, because a live region removed from the accessibility tree and
   put back does not reliably announce. */
.talk-video__error {
  color: #ff8f8f;
  font-size: var(--type-label);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-magenta);
  border-radius: var(--radius-sm);
  background: rgba(255, 27, 143, .08);
}

.talk-video__error:empty {
  display: none;
}

/* Gradient BORDER with a dark fill, not a gradient fill -- the same
   double-background technique .header-cta uses.

   White on var(--gradient-brand) measures 2.87:1 at the orange stop and 3.62:1
   at the magenta stop, both short of the 4.5:1 that 15px text needs. Moving the
   ramp to the border keeps the brand treatment and puts the label on
   --color-dark-bg instead, which measures 20.43:1. */
.talk-video__retry {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--color-dark-bg), var(--color-dark-bg)) padding-box,
    var(--gradient-brand) border-box;
  color: var(--color-paper);
  font-weight: 500;
  font-size: var(--type-button);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.talk-video__retry:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .talk-video__retry:hover {
    transform: none;
  }
}

.talk-video__retry[disabled] {
  opacity: .6;
  cursor: progress;
}