/* The operator page keeps its original orange/cyan accents; only its hero background changes. */

.sf-operator {
  --operator-paper:#f7f6fa;
}
.sf-operator .sf-hero-operator {
  background:
    radial-gradient(circle at 84% 20%,rgba(117,108,152,.1),transparent 25rem),
    linear-gradient(135deg,#fff 0 56%,var(--operator-paper) 56% 100%)!important;
}
.sf-operator .sf-hero-operator .sf-kicker,
.sf-operator .sf-operator-map > header span {
  color:var(--cyan-deep)!important;
}
.sf-operator .sf-hero-operator h2 em,
.sf-operator .sf-operator-route small,
.sf-operator .sf-operator-route > i,
.sf-operator .sf-operator-map dt {
  color:var(--final-orange)!important;
}
.sf-operator .sf-operator-map {
  border-color:var(--final-ink)!important;
  background:#fff!important;
  box-shadow:18px 18px 0 var(--final-orange)!important;
  transform:rotate(.6deg)!important;
}
.sf-operator .sf-operator-route article {
  background:#f8f6ef!important;
}
.sf-operator .sf-operator-route article:last-child {
  background:var(--final-ink)!important;
}
.sf-operator .sf-operator-person {
  box-shadow:8px 8px 0 var(--final-cyan)!important;
  transform:rotate(-1deg)!important;
}
.sf-operator .sf-operator-person span {
  color:var(--final-cyan)!important;
}
.sf-operator .sf-story-art {
  box-shadow:-18px 18px 0 var(--final-orange)!important;
}

@media (max-width:720px) {
  .sf-operator .sf-hero-operator {
    background:linear-gradient(160deg,#fff 0 60%,var(--operator-paper) 100%)!important;
  }
  .sf-operator .sf-operator-map {
    box-shadow:9px 9px 0 var(--final-orange)!important;
  }
  .sf-operator .sf-story-art {
    box-shadow:-8px 8px 0 var(--final-orange)!important;
  }
}