/* Forte animated wordmark - scoped component styles.
   Everything here is namespaced to .forte-wordmark. No page header, footer or
   layout from the motion-study preview is carried over.

   Sizing: the inline SVG is cropped to the lettering's own ink bounds, so the
   width set on .forte-wordmark is the width of the lettering itself. That is
   what makes it match the wordmark the site used before. The speaker is taken
   out of flow so it never shifts the wordmark off centre. */

.forte-wordmark {
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: #f4f4ef;
  line-height: 0;
}

.forte-wordmark__art {
  display: block;
  width: 100%;
  overflow: visible;
}

.forte-wordmark__art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Discreet speaker accent sitting outside the final S. The icon reads at 15px
   on desktop and 13px on narrow screens; the tap target stays 44px either way.
   Absolutely positioned, so it adds no width and the lettering stays centred.
   The hero clips its own overflow, so on a very narrow phone the invisible edge
   of the tap target can clip while the icon itself stays fully visible. */
.forte-wordmark__sound {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -6px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.forte-wordmark__sound svg {
  display: block;
  width: 15px;
  height: 15px;
  opacity: .48;
  transition: opacity .18s ease;
}

.forte-wordmark__sound:hover svg,
.forte-wordmark__sound:focus-visible svg {
  opacity: .92;
}

.forte-wordmark__sound[data-sound="on"] svg {
  opacity: .92;
}

.forte-wordmark__sound:disabled {
  cursor: default;
}

.forte-wordmark__sound:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The muted state hides the waves; the on state shows them. */
.forte-wordmark__sound .forte-wordmark__waves { display: none; }
.forte-wordmark__sound .forte-wordmark__slash { display: block; }
.forte-wordmark__sound[data-sound="on"] .forte-wordmark__waves { display: block; }
.forte-wordmark__sound[data-sound="on"] .forte-wordmark__slash { display: none; }

/* Keyboard-reachable pause control. Off-screen until focused so the wordmark
   stays plain, with no extra graphics. */
.forte-wordmark__pause,
.forte-wordmark__state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.forte-wordmark__pause:focus-visible {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  margin: 8px 0 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  font: 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  z-index: 4;
}

@media (max-width: 600.98px) {
  .forte-wordmark__sound {
    margin-left: -10px;
  }
  .forte-wordmark__sound svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .forte-wordmark__sound svg { transition: none; }
}