/* "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);
}

/* Service mark notice (℠, not ™/®) — the trademark application is filed but
   not yet granted, so this is the correct mark for a pending registration.
   em-based so it scales with .logo__word's own font-size automatically,
   including the !important overrides above (2rem desktop / 1.125rem mobile)
   — no need to duplicate those breakpoints here. */
/* Sits right at the top-right corner of the final "X" — close enough to
   read as attached to the wordmark, but with a small gap rather than
   overlapping/merging into the glyph. */
.logo__sm {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 0.05em;
  transform: translateY(-0.4em);
  opacity: 0.7;
}

.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);
  }
}