/* HSF site stylesheet (brand kit): button system from Figma "Buttons" (node 4092:30984).
   Loaded after each page's css/site.css, so these rules win over the older .btn hover.

   Variants   default                         hover
   .btn       red #da0a2d                     #8e0d22 + arrow
   .btn--navy navy #1e2e69 (Secondary)        ink #080c28 + arrow
   .btn--light ice #c5d7f4, ink text (Tertiary) blue #5d80b8, white text + arrow
   .btn--sm   16px label, min-width 220px

   On hover the side padding drops 34px -> 20px while a 12px gap + 16px arrow slide in,
   so the button keeps exactly the same width. */

.btn {
  gap: 0;
  transition: background-color .2s ease, color .2s ease, padding .2s ease;
}

.btn::after {
  content: '';
  flex: none;
  width: 0;
  height: 14px;
  margin-left: 0;
  background: url(/media/01a1a842-f398-7404-8942-158536a4289a) no-repeat center / 16px 14px;
  transform: rotate(180deg);
  transition: width .2s ease, margin-left .2s ease;
}

.btn:hover,
.btn:focus-visible {
  filter: none;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #8e0d22;
}

.btn:hover::after,
.btn:focus-visible::after {
  width: 16px;
  margin-left: 12px;
}

/* Secondary */
.btn--navy:hover,
.btn--navy:focus-visible { background-color: var(--ink, #080c28); }

/* Tertiary */
.btn--light { background-color: var(--ice, #c5d7f4); color: var(--ink, #080c28); }
.btn--light:hover,
.btn--light:focus-visible { background-color: var(--blue, #5d80b8); color: var(--white, #fff); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after { transition: none; }
}

/* Home hero, desktop and tablet only: trimmed from 210px / 100px.
   The hero slides up under the 100px sticky header, so 190px top padding leaves
   90px of visible space below the header, matching the 90px at the bottom.
   Phones (760px and under) keep the 104px / 48px and -56px set in the page's own stylesheet. */
@media (min-width: 761px) {
  .page-home .hero { margin-top: -100px; padding-top: 190px; padding-bottom: 90px; }
}