/* SKYL palette: harbour blue leads, cornflower accents, coral stays for buttons. */
:root { --teal: #1E4A6E; --shell: #E3EBF2; --peach: #C9D7E3; --apricot: #7C9CC4; }
.hero::after { background: linear-gradient(90deg, rgba(30,74,110,0.94) 0%, rgba(30,74,110,0.78) 38%, rgba(30,74,110,0) 66%); }
.footer-top img.sub-logo { width: 220px; margin: 0; }
.brand img.lockup { width: 220px; }
@media (max-width: 700px) {
  .brand img.lockup { width: 168px; }
  .hero::after { background: linear-gradient(180deg, rgba(30,74,110,1) 0%, rgba(30,74,110,1) calc(100% - 340px), rgba(30,74,110,0) calc(100% - 250px)); }
}
/* SKYL: additions to the shared styles. The speaker sits mid-frame, so the photo takes the right of the banner. */
.hero-photo { object-position: 50% 18%; }
@media (min-width: 701px) {
  .hero-photo { left: auto; right: 0; width: 58%; }
  .hero::after { background: linear-gradient(90deg, rgba(30,74,110,1) 0%, rgba(30,74,110,1) 42%, rgba(30,74,110,0) 70%); }
}