/* One proportional HERO composition from tablet down to phone (390px reference). */
@media (max-width: 1100px) {
  .header {
    height: 20vw;
    padding: 0 5.1vw;
    gap: 3vw;
    justify-content: space-between;
  }
  .header nav { display: none; }
  .header .brand { font-size: 4.8vw; }
  .header .brand small { font-size: 2.05vw; margin-top: 1vw; }
  .header .nav-cta { font-size: 2.56vw; padding: 2.3vw 3.85vw; }
  .header i { width: 2vw; height: 2vw; margin-left: 2vw; }
  .hero {
    display: block;
    position: relative;
    height: 258vw;
    min-height: 0;
    padding: 0;
    background: #f3f7f7;
  }
  .hero::after { display: none; }
  .hero-photo {
    position: absolute;
    inset: 45vw auto auto 0;
    width: 100%;
    height: 145vw;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: 68% center;
    mask-image: linear-gradient(transparent, #000 15%, #000 80%, transparent);
  }
  .hero-copy { display: contents; }
  .hero-copy h1 {
    position: absolute;
    top: 26vw;
    left: 4vw;
    width: 92vw;
    margin: 0;
    transform: none;
    z-index: 2;
  }
  .hero .thought {
    display: block;
    top: 82vw;
    left: 3vw;
    width: 42vw;
    padding: 0;
    z-index: 3;
  }
  .hero .hero-worry {
    display: block;
    top: 130vw;
    left: 4vw;
    right: auto;
    width: 33vw;
    z-index: 3;
  }
  .hero .memo { display: none; }
  .hero-copy p {
    position: absolute;
    top: 184vw;
    left: 4vw;
    width: 92vw;
    max-width: none;
    margin: 0;
    text-align: center;
    font-size: 3.33vw;
    line-height: 1.95;
    z-index: 2;
  }
  .hero-explanation { white-space: normal; }
  .hero .mobile-break { display: initial; }
  .hero-copy > .cta {
    position: absolute;
    top: 216vw;
    left: 6vw;
    display: block;
    width: 88vw;
    max-width: none;
    padding: 4.35vw 5vw;
    margin: 0;
    border-radius: 15vw;
    font-size: 3.59vw;
    z-index: 2;
  }
  .hero-copy > .cta i { width: 2.05vw; height: 2.05vw; margin-left: 6.4vw; }
  .hero-copy > small {
    position: absolute;
    top: 235vw;
    left: 6vw;
    width: 88vw;
    margin: 0;
    text-align: center;
    font-size: 2.56vw;
    line-height: 1.9;
    z-index: 2;
  }
  .hero .wave { height: 16.7vw; }
}