/* Full-bleed real ocean photograph, with no image animation or side panel. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url("../fonts/bricolage-grotesque-variable.adc0421e2dd4.woff2") format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
.immersive-home .site-header { position: fixed; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; transition: background .25s ease, border-color .25s ease; }
.immersive-home .header-inner { border-bottom: 1px solid #ffffff26; }
.immersive-home .site-header .brand { color: #fff; }
.immersive-home .brand-ocean-mark { display: block; width: 61px; height: 23px; color: #fff; mix-blend-mode: normal; }
.immersive-home .brand-ocean-mark feFlood { flood-color: #fff; }
.immersive-home .site-header .navigation-link { color: #f2f5fa; }
.immersive-home .navigation-link::after { background: #fff; }
.immersive-home .site-header .header-contact { border-color: #fff; background: #fff; color: #142238; }
.immersive-home .site-header .header-contact:hover { background: #e5efff; border-color: #e5efff; }
.immersive-home .site-header.is-scrolled { background: #fff; border-bottom-color: #dfe5eb; }
.immersive-home .site-header.is-scrolled .header-inner { border-bottom: 0; }
.immersive-home .site-header.is-scrolled .brand, .immersive-home .site-header.is-scrolled .brand-ocean-mark { color: #142238; }
.immersive-home .site-header.is-scrolled .brand-ocean-mark feFlood { flood-color: #142238; }
.immersive-home .site-header.is-scrolled .navigation-link { color: #566274; }
.immersive-home .site-header.is-scrolled .navigation-link:hover, .immersive-home .site-header.is-scrolled .navigation-link.is-section-active { color: #142238; }
.immersive-home .site-header.is-scrolled .navigation-link::after { background: #142238; }
.immersive-home .site-header.is-scrolled .header-contact { background: #142238; border-color: #142238; color: #fff; }
.immersive-home .site-header.is-scrolled .header-contact:hover { background: #2563eb; border-color: #2563eb; }
.agency-hero-ocean { --hero-stage-height: max(690px, 100svh); --hero-travel: clamp(320px, 68svh, 620px); position: relative; isolation: isolate; overflow: visible; background: #0c233a; color: #fff; }
.ocean-stage { position: relative; isolation: isolate; overflow: hidden; }
.agency-hero-ocean.is-scroll-ready { min-height: calc(var(--hero-stage-measured, var(--hero-stage-height)) + var(--hero-travel)); }
.agency-hero-ocean.is-scroll-ready .ocean-stage { position: sticky; top: var(--hero-sticky-top, 0px); }
.agency-ocean-media, .agency-ocean-shade { position: absolute; inset: 0; z-index: -1; }
.agency-ocean-media .ocean-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; animation: none; transform: none; filter: none; }
.agency-ocean-shade { background: linear-gradient(90deg, #020f1dcc, #02101e70 48%, #0315250d), linear-gradient(180deg, #03101d66, transparent 40%, #03111e40); }
.immersive-home .agency-hero-grid { display: flex; align-items: center; min-height: var(--hero-stage-height); padding-block: 150px 110px; }
.immersive-home .agency-hero-copy { width: 100%; max-width: 940px; padding: 0; }
.immersive-home .agency-hero .agency-kicker { color: #e2ebf4; margin-bottom: 29px; }
.immersive-home .agency-hero h1 { color: #fff; font-family: 'Bricolage Grotesque', 'Manrope', sans-serif; font-size: clamp(64px, 7.1875vw, 110px); font-weight: 600; font-style: normal; font-synthesis: none; font-kerning: normal; font-optical-sizing: auto; line-height: 1.08; letter-spacing: -.025em; min-height: clamp(188px, 17.734375vw, 260px); }
.immersive-home .agency-hero h1 strong { font-style: normal; font-weight: 700; white-space: nowrap; }
.immersive-home .agency-hero-description { max-width: 500px; margin-top: 29px; color: #e0e8f1; font-size: 15px; line-height: 1.85; }
.immersive-home .agency-hero-description strong { color: #fff; }
.immersive-home .agency-hero-actions { margin-top: 30px; gap: 30px; }
.immersive-home .agency-hero .agency-cta { background: #fff; border-color: #fff; color: #142238; }
.immersive-home .agency-hero .agency-cta:hover { background: #e5efff; border-color: #e5efff; }
.immersive-home .agency-hero .agency-text-link { border-color: #aebdcc; color: #fff; }
.immersive-home .agency-hero .agency-text-link:hover { border-color: #fff; }
/* Text completes in stages with native scroll; the photograph stays still. */
.is-scroll-ready [data-hero-complete] { transform: translate3d(0, 12px, 0); }
.is-scroll-ready [data-hero-description] { opacity: 0; transform: translate3d(0, 14px, 0); }
.is-scroll-ready .agency-hero-copy:focus-within [data-hero-complete], .is-scroll-ready .agency-hero-copy:focus-within [data-hero-description] { opacity: 1 !important; transform: none !important; }
.is-scroll-ready .hero-scroll-actions { opacity: 0; transform: translate3d(0, 22px, 0); pointer-events: none; }
.is-scroll-ready.is-actions-visible .hero-scroll-actions { pointer-events: auto; }
.is-scroll-ready .hero-scroll-actions:focus-within { opacity: 1 !important; transform: none !important; pointer-events: auto; }
.is-hero-active [data-hero-complete] { will-change: transform; }
.is-hero-active [data-hero-description], .is-hero-active [data-hero-actions] { will-change: transform, opacity; }
@media (max-width: 1020px) {
  .immersive-home .site-header .navigation { background: #142238; border-color: #42566b; }
  .immersive-home .site-header .navigation-link, .immersive-home .site-header.is-scrolled .navigation-link { color: #f2f5fa; border-bottom-color: #42566b; }
  .immersive-home .site-header.is-scrolled .navigation-link:hover, .immersive-home .site-header.is-scrolled .navigation-link.is-section-active { color: #fff; }
  .immersive-home .site-header .menu-toggle { background: transparent; border-color: #ffffff66; color: #fff; }
  .immersive-home .site-header .menu-toggle span { background: #fff; }
  .immersive-home .site-header.is-scrolled .menu-toggle { border-color: #dfe5eb; color: #142238; }
  .immersive-home .site-header.is-scrolled .menu-toggle span { background: #142238; }
  .immersive-home .site-header.is-scrolled .navigation .header-contact { background: #fff; border-color: #fff; color: #142238; }
}
@media (max-width: 760px) {
  .immersive-home .brand-ocean-mark { width: 54px; height: 21px; }
  .agency-hero-ocean { --hero-stage-height: max(680px, 100svh); --hero-travel: clamp(260px, 55svh, 460px); }
  .immersive-home .agency-hero-grid { justify-content: center; min-height: var(--hero-stage-height); padding-block: 120px 80px; }
  .immersive-home .agency-hero h1 { max-width: 100%; min-height: 0; font-size: clamp(36px, 10.8vw, 72px); line-height: 1.12; letter-spacing: -.025em; }
  .immersive-home .agency-hero .agency-kicker { margin-bottom: 24px; font-size: 8px; }
  .immersive-home .agency-hero-description { max-width: 38ch; font-size: 14px; line-height: 1.8; }
  .agency-ocean-shade { background: linear-gradient(90deg, #041425c9, #05182a66), linear-gradient(180deg, #03111e40, transparent 40%, #03111ecc); }
  .immersive-home .agency-hero-actions { gap: 24px; }
}
/* Keep the whole composition useful on laptop windows and landscape phones. */
@media (max-height: 760px) {
  .agency-hero-ocean { --hero-stage-height: max(400px, 100svh); }
  .immersive-home .agency-hero-grid { padding-block: clamp(94px, 14svh, 120px) clamp(38px, 7svh, 56px); }
  .immersive-home .agency-hero h1 { min-height: 0; font-size: clamp(44px, min(7.1875vw, 11.5svh), 88px); }
  .immersive-home .agency-hero .agency-kicker { margin-bottom: 18px; }
  .immersive-home .agency-hero-description { margin-top: 22px; }
  .immersive-home .agency-hero-actions { margin-top: 24px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .immersive-home .agency-hero h1 { font-size: clamp(36px, min(10.8vw, 11.5svh), 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-home .site-header { transition: none; }
  .agency-hero-ocean.is-scroll-ready { min-height: 0; }
  .agency-hero-ocean.is-scroll-ready .ocean-stage { position: relative; }
  .is-scroll-ready [data-hero-complete], .is-scroll-ready [data-hero-description] { opacity: 1 !important; transform: none !important; will-change: auto; }
  .is-scroll-ready .hero-scroll-actions { opacity: 1 !important; transform: none !important; pointer-events: auto; will-change: auto; }
}