/* Homepage details: continuous brand ribbons and quiet interaction cues. */
.media-proof-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.brand-marquee-hint { font-size: .8125rem; color: #766780; }
.brand-motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 112px;
  padding: 9px 14px;
  flex: none;
  border: 1px solid #e1d7eb;
  border-radius: 999px;
  background: #f8f5fc;
  color: #644880;
  font-size: .8125rem;
  transition: background .2s, border-color .2s;
}
.brand-motion-toggle:hover { background: #eee7f7; border-color: #bca4d3; }
.brand-motion-toggle .motion-play,
.brand-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.brand-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.brand-marquee { --brand-gap: 14px; display: grid; gap: var(--brand-gap); min-width: 0; }
.brand-marquee-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--brand-gap); }
.brand-marquee.is-ready .brand-marquee-row {
  overflow: hidden;
  padding-block: 5px;
  margin-block: -5px;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.brand-marquee.is-ready .brand-marquee-track {
  display: flex;
  width: max-content;
  animation: brand-ribbon 40s linear infinite;
}
.brand-marquee.is-ready .brand-marquee-row:first-child .brand-marquee-track { animation-direction: reverse; }
.brand-marquee.is-ready .brand-marquee-row:last-child .brand-marquee-track { animation-duration: 44s; }
.brand-marquee.is-ready .brand-marquee-group {
  flex: none;
  width: max(var(--brand-row-width, 100vw), 760px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-right: var(--brand-gap);
}
.brand-marquee.is-paused .brand-marquee-track { animation-play-state: paused; }
.brand-marquee .media-brand { min-width: 0; }
.brand-marquee .media-brand:focus-visible { outline-offset: -5px; }
/* Keyboard focus reveals the original links in a horizontally scrollable row. */
.brand-marquee.is-ready .brand-marquee-row.has-keyboard-focus { overflow-x: auto; mask-image: none; }
.brand-marquee.is-ready .has-keyboard-focus .brand-marquee-track { animation: none; transform: none; }
.brand-marquee .has-keyboard-focus [data-brand-copy] { display: none; }
@keyframes brand-ribbon { to { transform: translateX(-50%); } }

.process .workflow-intro > p { max-width: 420px; }
.process .workflow-body a { color: #ead0ff; text-decoration: underline; text-underline-offset: 4px; }
.process .workflow-body > p + p { margin-top: 15px; }
.workflow-track button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 8px;
}
.workflow-track button > span { color: #bba8cc; font-size: .75rem; line-height: 1.5; }
.workflow-track .is-current button > span { color: #e6c493; }
.workflow-track button:hover b { border-color: #edc593; box-shadow: 0 0 0 5px #edc59310; }
.workflow-console-hint { margin-top: 15px; }

.contact-copy-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.contact-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #c1a5df40;
  border-radius: 9px;
  color: #dac9e8;
  background: #b899d510;
  font-size: .8125rem;
  transition: background .2s, border-color .2s;
}
.contact-copy:hover { background: #b899d523; border-color: #c1a5df70; }
.contact-copy-status { font-size: .8125rem; color: #d5ef8a; line-height: 1.6; }
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 35;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #ab91c577;
  border-radius: 50%;
  color: #eee4f7;
  background: #251c32f2;
  box-shadow: 0 6px 24px #16101f25;
  transition: background .2s, border-color .2s, translate .2s;
}
.back-to-top:hover { background: #51356b; border-color: #d4b0f0; translate: 0 -3px; }
body:has(.nav.is-open) .back-to-top { visibility: hidden; }
.text-link .ui-icon, .hero-secondary .ui-icon, .media-proof-bottom .ui-icon, .manager-link .ui-icon { transition: translate .25s; }
.media-card { transition: box-shadow .3s, border-color .3s; }
.media-card:has(.media-select input:checked) { border-color: #9672c0; box-shadow: 0 0 0 3px #9672c024; }
@media (hover: hover) and (pointer: fine) {
  .brand-marquee .brand-marquee-row:hover .brand-marquee-track { animation-play-state: paused; }
  .text-link:hover .ui-icon, .hero-secondary:hover .ui-icon,
  .media-proof-bottom a:hover .ui-icon, .manager-link:hover .ui-icon { translate: 2px -2px; }
}
@media (max-width: 768px) {
  .media-proof-controls { align-items: center; gap: 10px; }
  .brand-marquee-hint { max-width: 210px; line-height: 1.6; }
  .brand-motion-toggle { min-width: 44px; padding-inline: 10px; }
  .brand-motion-toggle > span { display: none; }
  .brand-marquee { --brand-gap: 10px; }
  .brand-marquee-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-marquee.is-ready .brand-marquee-group { width: max(var(--brand-row-width, 100vw), 680px); }
  .brand-marquee.is-ready .brand-marquee-row { mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  .brand-marquee .brand-foxford > span { font-size: .6875rem; }
  .back-to-top { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-motion-toggle { display: none; }
  .brand-marquee.is-ready .brand-marquee-row { overflow: visible; mask-image: none; }
  .brand-marquee.is-ready .brand-marquee-track { display: block; width: auto; animation: none; }
  .brand-marquee.is-ready .brand-marquee-group { width: auto; padding-right: 0; }
  .brand-marquee [data-brand-copy] { display: none; }
  .brand-marquee .media-brand, .brand-motion-toggle, .contact-copy,
  .media-card, .back-to-top, .text-link .ui-icon, .hero-secondary .ui-icon,
  .media-proof-bottom .ui-icon, .manager-link .ui-icon { transition: none; }
  .back-to-top:hover, .text-link:hover .ui-icon, .hero-secondary:hover .ui-icon,
  .media-proof-bottom a:hover .ui-icon, .manager-link:hover .ui-icon { translate: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .brand-marquee.is-ready .brand-marquee-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}