/* Smooth, complete silhouettes for the SEO and development hero submarines. */
.concept-deep .submarine .sub-body{z-index:1}
.concept-deep .submarine .sub-light{right:13px;top:19px}
.concept-deep .submarine .sub-body:after{
  content:"";
  display:block;
  left:30px;
  top:-12px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b4fbff;
  box-shadow:0 0 7px #5ce8f6,0 0 12px rgba(92,232,246,.7);
}
.concept-deep .submarine svg.sub-tail{
  position:absolute;
  z-index:0;
  left:10px;
  top:11px;
  width:28px;
  height:22px;
  border:0;
  clip-path:none;
  background:none;
  overflow:visible;
}
.concept-deep .submarine svg.sub-tail:after{content:none}
.concept-deep .submarine svg.sub-tail path{
  fill:#0a4560;
  stroke:#5ce8f6;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Keep the animated hull and bubbles clear of the progress rail below. */
.build-bay-screen g.bay-sub{transform:translateY(-28px)}
@keyframes subCruise{
  0%,100%{transform:translateY(-28px)}
  50%{transform:translate(14px,-32px)}
}
.build-bay-screen g.bay-bubbles{transform:translateY(-28px)}
@keyframes subBubbles{
  0%{transform:translateY(-28px);opacity:.66}
  100%{transform:translate(16px,-66px);opacity:0}
}

/* Homepage and portfolio use the same miniature vessel at different scales. */
:is(.seo-submarine,.portfolio-submarine) .seo-sub-body{z-index:1}
:is(.seo-submarine,.portfolio-submarine) .seo-sub-body:after{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b4fbff;
  box-shadow:0 0 7px #5ce8f6,0 0 12px rgba(92,232,246,.7);
}
.seo-submarine .seo-sub-body:after{left:30px;top:-13px}
.portfolio-submarine .seo-sub-body:after{left:37px;top:-15px;width:7px;height:7px}
:is(.seo-submarine,.portfolio-submarine) svg.seo-sub-tail{
  position:absolute;
  z-index:0;
  border:0;
  clip-path:none;
  background:none;
  overflow:visible;
}
.seo-submarine .seo-sub-light{left:14px;top:19px}
.portfolio-submarine .seo-sub-light{left:16px;top:23px}
.seo-submarine svg.seo-sub-tail{left:77px;top:12px;width:23px;height:20px}
.portfolio-submarine svg.seo-sub-tail{left:92.5px;top:14.4px;width:27px;height:22.8px;transform:scaleX(-1)}
:is(.seo-submarine,.portfolio-submarine) svg.seo-sub-tail path{
  fill:#0a4560;
  stroke:#5ce8f6;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}