.hero--coast { display: block; height: calc(100svh - var(--header-h) - 48px); min-height: 360px; max-height: 900px; background: #f7f5f0; }
.hero--coast .hero__bg { position: absolute; inset: 0; background: transparent; }
.hero--coast .hero__img { position: absolute; inset: 0; height: 100%; width: 100%; max-height: none; object-fit: cover; object-position: center; opacity: 1; }
.hero--coast .hero__overlay { display: none; }
.hero--coast .hero__scroll { display:flex; color:#173d72; z-index:2; }
.hero--coast .hero__brand-mark { display:block; position:absolute; top:20px; left:0; right:0; bottom:auto; width:100%; padding:0 16px; margin:0; transform:none; text-align:center; font-family:Georgia,serif; font-size:64px; font-weight:400; line-height:1.15; letter-spacing:0; color:#173d72; opacity:1; z-index:2; pointer-events:none; }
.hero--coast .hero__content { position: absolute; bottom: 12%; left: 5%; padding: 0; width: 46%; }
.hero--coast .hero__brand-mark { aspect-ratio:auto; overflow:visible; }
.hero--coast .hero__eyebrow { color: #173d72; letter-spacing: 0; }
.hero--coast .hero__title { font-size: 64px; color: #173d72; text-shadow: 0 1px 8px #f7f5f0; }
.hero--coast .btn { color: #173d72; border-color: #173d72; background: transparent; }
.hero--coast .btn:hover { background: #173d72; color: #fff; }
.hero--coast .btn:focus-visible { outline-color: #173d72; }
@media (max-width: 600px) {
  .hero--coast .hero__scroll { right:18px; bottom:28px; }
  .hero--coast .hero__brand-mark { top:18px; font-size:36px; }
  .hero--coast .hero__content { bottom: 24px; left: 24px; padding: 0; width: calc(100% - 48px); }
  .hero--coast .hero__title { font-size: 36px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .hero--coast .hero__title { font-size: 44px; }
}