@property --broker-shutter-1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-5 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-6 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-7 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --broker-shutter-8 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
/* Broker skyline hero — no shared page styles changed. */
@property --broker-skyline-wipe {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -20%;
}
.brokers-page-view .broker-hero.broker-skyline-hero { background: #fff; isolation: isolate; }
.brokers-page-view .broker-skyline-hero::before,
.brokers-page-view .broker-skyline-hero::after { content: none; }
.brokers-page-view .broker-skyline-hero .broker-hero__inner
:where(.hero__eyebrow, h1, .broker-hero__lead, .broker-hero__actions .btn, .hero__trust span, .broker-hero__visual) { animation: none; }

/* Keep the pricing CTA and its supporting copy local to this hero. */
.broker-skyline-hero .broker-hero__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.broker-skyline-hero .broker-hero__actions .btn { width: 100%; }
.broker-skyline-hero .broker-hero__pricer {
  background: #292c29;
  color: #fff;
}
.brokers-page-view .broker-skyline-hero .broker-hero__pricer:hover { background: #1e211e; }
.broker-skyline-hero .broker-hero__cta-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #626862;
  font-size: .8125rem;
  line-height: 1.6;
}
@media (min-width: 48rem) {
  .broker-skyline-hero .broker-hero__actions {
    grid-template-columns: max-content max-content;
    justify-content: start;
  }
}
@keyframes broker-pricer-spotlight {
  0% { opacity: 0; transform: translateY(8px); box-shadow: 0 0 0 0 rgb(41 44 41 / 0%); }
  40% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 0 rgb(41 44 41 / 16%); }
  85%, 100% { opacity: 1; transform: translateY(0); box-shadow: 0 0 0 9px rgb(41 44 41 / 0%); }
}
@keyframes broker-pricer-arrow {
  0%, 45%, 100% { transform: translateX(0); }
  70% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .brokers-page-view .broker-skyline-hero .broker-hero__inner .broker-hero__pricer.broker-entry-ready.broker-entry-visible {
    animation: broker-pricer-spotlight 1400ms var(--entry-delay, 440ms) ease-out both;
  }
  .broker-skyline-hero .broker-hero__pricer.broker-entry-visible .broker-hero__pricer-arrow {
    animation: broker-pricer-arrow 1400ms var(--entry-delay, 440ms) ease-in-out both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brokers-page-view .broker-skyline-hero .broker-hero__inner .broker-hero__pricer,
  .broker-skyline-hero .broker-hero__pricer .broker-hero__pricer-arrow {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* Content entrances are independent of the repeating skyline background. */
@keyframes broker-skyline-content-enter {
  from { opacity: 0; transform: translate3d(var(--entry-x, 0px), var(--entry-y, 0px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .brokers-page-view .broker-skyline-hero .broker-hero__inner .broker-entry-ready {
    animation: broker-skyline-content-enter 1600ms var(--entry-delay, 0ms) cubic-bezier(.16,1,.3,1) both;
    animation-play-state: paused;
  }
  .brokers-page-view .broker-skyline-hero .broker-hero__inner .broker-entry-ready.broker-entry-visible {
    animation-play-state: running;
  }
}
.broker-skyline-hero__background { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; animation: broker-skyline-cycle 14s linear infinite both; }
.broker-skyline-hero__background,
.broker-skyline-hero__background * { border: 0; outline: 0; box-shadow: none; }
.broker-skyline-hero__wipe,
.broker-skyline-hero__image { position: absolute; inset: 0; }
.broker-skyline-hero__wipe {
  mask-image: linear-gradient(135deg, transparent calc(var(--broker-skyline-wipe) - 18%), #000 var(--broker-skyline-wipe));
  animation: broker-skyline-wipe 14s ease-in-out infinite both;
}
.broker-skyline-hero__image {
  background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 94%) 28%, rgb(255 255 255 / 55%) 52%, transparent 100%), url("../images/heroes/vorfin-broker-hero-nyc-skyline.jpg") 70% center / cover no-repeat;
  opacity: .28;
  filter: grayscale(.75);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-repeat: no-repeat;
  mask-position: 0% 0%, 14.285714% 100%, 28.571429% 0%, 42.857143% 100%, 57.142857% 0%, 71.428571% 100%, 85.714286% 0%, 100% 100%;
  /* Shared clock: stagger inside keyframes; all resets occur behind the hidden parent. */
  mask-size: calc(12.5% + 2px) var(--broker-shutter-1), calc(12.5% + 2px) var(--broker-shutter-2), calc(12.5% + 2px) var(--broker-shutter-3), calc(12.5% + 2px) var(--broker-shutter-4), calc(12.5% + 2px) var(--broker-shutter-5), calc(12.5% + 2px) var(--broker-shutter-6), calc(12.5% + 2px) var(--broker-shutter-7), calc(12.5% + 2px) var(--broker-shutter-8);
  animation: broker-shutter-1 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-2 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-3 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-4 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-5 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-6 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-7 14s cubic-bezier(.45,0,.2,1) infinite both, broker-shutter-8 14s cubic-bezier(.45,0,.2,1) infinite both;
}
@keyframes broker-skyline-cycle {
  0%, 2%, 90%, 100% { opacity: 0; visibility: hidden; }
  3%, 85% { opacity: 1; visibility: visible; }
}
@keyframes broker-skyline-wipe {
  0%, 55% { --broker-skyline-wipe: -20%; }
  85%, 100% { --broker-skyline-wipe: 120%; }
}
@keyframes broker-shutter-1 {
  0%, 10.0000%, 96%, 100% { --broker-shutter-1: 0%; }
  35.0000%, 90% { --broker-shutter-1: 100%; }
}
@keyframes broker-shutter-2 {
  0%, 13.5714%, 96%, 100% { --broker-shutter-2: 0%; }
  38.5714%, 90% { --broker-shutter-2: 100%; }
}
@keyframes broker-shutter-3 {
  0%, 17.8571%, 96%, 100% { --broker-shutter-3: 0%; }
  42.8571%, 90% { --broker-shutter-3: 100%; }
}
@keyframes broker-shutter-4 {
  0%, 21.4286%, 96%, 100% { --broker-shutter-4: 0%; }
  46.4286%, 90% { --broker-shutter-4: 100%; }
}
@keyframes broker-shutter-5 {
  0%, 22.8571%, 96%, 100% { --broker-shutter-5: 0%; }
  47.8571%, 90% { --broker-shutter-5: 100%; }
}
@keyframes broker-shutter-6 {
  0%, 20.0000%, 96%, 100% { --broker-shutter-6: 0%; }
  45.0000%, 90% { --broker-shutter-6: 100%; }
}
@keyframes broker-shutter-7 {
  0%, 15.0000%, 96%, 100% { --broker-shutter-7: 0%; }
  40.0000%, 90% { --broker-shutter-7: 100%; }
}
@keyframes broker-shutter-8 {
  0%, 11.7857%, 96%, 100% { --broker-shutter-8: 0%; }
  36.7857%, 90% { --broker-shutter-8: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .broker-skyline-hero__background { display: none; animation: none; }
  .broker-skyline-hero__background * { animation: none; }
}