/* "See it in Motion" — top-right header CTA, links to the Talk to Us section.
   .corner-brand (from index.Dg6SV2NV.css) is only ever sized to its logo
   content today (position:absolute; top:0; left:0), so it's stretched
   full-width here and turned into a row with the logo on the left and this
   button on the right — none of the properties added below conflict with what
   that rule already sets, so this works regardless of stylesheet order.

   The header is deliberately NOT sticky. That `position` was `fixed`, which
   pinned the logo and this button over the page for the entire scroll; it is
   now `absolute`, so the header sits over the top of the hero exactly as
   before and then scrolls away with it. Changed at the declaration in
   index.Dg6SV2NV.css rather than overridden here, because that file loads
   last and its selector carries the higher specificity — an override would
   have needed !important to win. */
.corner-brand {
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  /* Gradient border via the double-background technique (see
     built-different.css) — a flat dark fill clipped to the padding box,
     the brand ramp clipped to the border box. */
  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);
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.header-cta:hover {
  transform: translateY(-1px);
}

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

@media (max-width: 640px) {
  .header-cta {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
  }
}