/* Homepage only. The supplied ocean and brand assets remain unchanged. */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--header-height); min-height: 0; height: min(56.25vw, calc(100svh - var(--header-height) - 80px), 800px); aspect-ratio: auto; align-items: flex-end; padding-top: 32px; padding-bottom: 40px; background: #fff; }
.hero-ocean { position: absolute; inset: 0; z-index: -2; background: url('/media/homepage-reel-poster.webp') center / cover no-repeat; filter: saturate(.65); }
.hero h1 { font-size: 46px; line-height: 1.08; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.hero-lead, .hero-typed-line { display: block; }
.hero-typed-line { min-height: 1.08em; white-space: nowrap; }
.hero-cursor { display: none; width: .5em; margin-left: .12em; }
.motion-enabled .hero-cursor { display: inline-block; animation: cursor-blink 900ms steps(1, end) infinite; }
.motion-offscreen .hero-cursor { animation-play-state: paused; }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hero-ocean-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 200ms ease; }
.hero-ocean-video.is-ready { opacity: 1; }
.motion-pending { opacity: 0; transform: translateY(24px); }
.motion-reveal { transition: opacity 450ms ease, transform 450ms cubic-bezier(.2,.7,.2,1); }
@media (max-width: 680px) {
  /* Fill the first mobile screen with a portrait crop and an overlaid headline. */
  .hero { height: calc(100vh - var(--header-height)); height: calc(100svh - var(--header-height)); padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom, 0px))); }
  .hero h1 { font-size: clamp(30px, 8.5vw, 36px); }
}
@media print {
  .hero h1 { color: var(--ink); text-shadow: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-nav a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 7px; transition: color 180ms ease, text-decoration-color 180ms ease; }
  .site-nav a:hover { text-decoration-color: currentColor; }
  .text-link > span, .contact-link > span { transition: transform 180ms ease; }
  .text-link:hover > span, .contact-link:hover > span { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce), print {
  .hero-cursor { display: none !important; animation: none !important; }
  .hero-ocean-video { display: none; }
  .hero-ocean { animation: none !important; transform: none !important; }
  .motion-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}