/* Build 36: one continuous emotional line from the hero into the film. */
.hero-action{
  position:relative;
  max-width:440px;
  padding-left:0;
  border-left:0;
  transform:translateX(clamp(14px,2.2vw,36px));
}

.hero-action::before{
  content:none;
  display:none;
}

.hero-action .hero-intro{
  max-width:390px;
  margin:0 0 22px;
  color:var(--ink);
}

.hero-action .hero-intro strong{
  display:block;
  font-size:clamp(23px,2vw,31px);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.035em;
}

.hero-action .hero-intro span{
  display:block;
  width:max-content;
  max-width:22ch;
  margin-top:10px;
  color:var(--muted);
  font-size:clamp(14px,1.08vw,17px);
  font-weight:400;
  line-height:1.55;
  letter-spacing:0;
}

.hero-action .button{
  width:auto;
  min-width:0;
  padding-inline:24px;
}

.hero-action .hero-note{
  margin-top:10px!important;
}

.journey .film-caption{
  left:clamp(42px,7vw,132px);
  right:auto;
  width:auto;
  max-width:min(420px,84vw);
  color:#fff;
  font-size:inherit;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-shadow:0 2px 16px rgba(0,27,43,.42);
  transform:none;
}

.journey .pier-caption{
  top:26%;
}

.journey .reef-caption{
  top:20%;
}

.journey .film-caption > span{
  display:block;
  margin-bottom:12px;
  color:rgba(255,255,255,.88);
  font-size:clamp(11px,.82vw,13px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.journey .film-caption > strong{
  display:block;
  max-width:10ch;
  color:#fff;
  font-size:clamp(42px,4.2vw,68px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.052em;
}

@media(max-width:720px){
  .hero-action{
    max-width:none;
    transform:none;
  }

  .hero-action::before{
    display:none;
  }

  .hero-action .hero-intro{
    max-width:31ch;
    margin-bottom:18px;
  }

  .hero-action .hero-intro strong{
    font-size:22px;
  }

  .hero-action .hero-intro span{
    width:auto;
    max-width:24ch;
    margin-top:8px;
    font-size:14px;
    line-height:1.5;
  }

  .journey .film-caption{
    left:8%;
    max-width:84%;
  }

  .journey .pier-caption{
    top:22%;
  }

  .journey .reef-caption{
    top:17%;
  }

  .journey .film-caption > span{
    margin-bottom:9px;
    font-size:10px;
    letter-spacing:.14em;
  }

  .journey .film-caption > strong{
    font-size:clamp(34px,10.5vw,46px);
    line-height:1;
  }
}

@media(min-width:721px) and (max-height:760px){
  .hero-action .hero-intro{
    margin-bottom:16px;
  }

  .hero-action .hero-intro strong{
    font-size:clamp(21px,1.75vw,27px);
  }

  .hero-action .hero-intro span{
    margin-top:7px;
    font-size:14px;
  }
}

/* Build 47: balance the right hero column on wider viewports. */
@media(min-width:1101px){
  .hero-action{
    max-width:380px;
    transform:translateX(clamp(112px,7.5vw,144px));
  }
}

@media(min-width:721px) and (max-width:1100px){
  .hero-action{
    transform:translateX(clamp(32px,4.8vw,54px));
  }
}