/* Mobile home: white film surround and a continuous scrolling sky. */
@media (max-width: 767px) {
  html:has(.ys-site), body:has(.ys-site) { background: #fff; }
  .ys-site .ys-world { z-index: 0; }
  .ys-site > main { position: relative; z-index: 1; }
  .ys-site .ys-hero-stage {
    background: #fff;
    padding-bottom: 94px;
  }
  .ys-site .ys-header { padding: 24px 22px; align-items: center; }
  .ys-site .ys-header .ys-logo { color: #536e7b; }
  .ys-site .ys-header .ys-header-cta {
    color: #4b6673;
    background: #edf2f3;
    border-color: #c5d2d8;
    box-shadow: 0 4px 16px #36596c08;
  }
  .ys-site .ys-brand-headline { transform: translateX(8px); }
  .ys-site .ys-contact-dock {
    left: 16px;
    right: 16px;
    width: auto;
    margin-inline: auto;
    background: rgb(255 255 255 / .88);
    border-color: #cedbe0;
    box-shadow: 0 5px 24px #253e4b12;
    padding: 6px;
  }
  .ys-site .ys-contact-dock .ys-primary {
    justify-content: center;
    color: #fff;
    background: #6b8794;
    border: 1px solid #77929e;
    text-align: center;
  }
  .ys-site .ys-contact-dock .ys-primary:hover { background: #5c7a88; }
  .ys-site .ys-about {
    background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0) 45px);
  }
}

/* Visible textual H1 retains the introduction's established typography. */
.ys-hero-content h1.ys-hero-intro{font-family:var(--ys-sans);font-weight:400;font-size:15px;line-height:2;letter-spacing:.065em;color:var(--ys-ink)}
@media(max-width:767px){.ys-hero-content h1.ys-hero-intro{font-size:12px;letter-spacing:.02em;text-wrap:balance}}