/* Shared navigation for the homepage, Hawai‘i, team, and case-study review pages. */

/* Navigate immediately. The shared header has its final geometry in the HTML. */
.site-header { position: static; background: rgba(246, 245, 241, 0.96); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(html[data-hero="framed"]) .hero-scene .site-header {
  width: 100vw;
  align-self: center;
  margin: calc(-1 * var(--framed-header-bleed)) 0 var(--framed-header-bleed);
}
.site-header .masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  margin-inline: auto;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--navy);
}
.site-header .brand { display: inline-flex; align-items: center; gap: 13px; width: 220px; max-width: 100%; color: var(--navy); font: 800 18px/1.3 "DM Sans", sans-serif; letter-spacing: -0.01em; }
.site-header .brand img { display: block; flex: none; width: 190px; height: auto; max-width: 100%; aspect-ratio: 910 / 160; object-fit: contain; }
.site-header .brand span { white-space: nowrap; }
.site-header .nav-links, .site-header .header-contact { display: flex; align-items: center; gap: 26px; font: 500 16px/1.3 "DM Sans", sans-serif; }
.site-header .nav-links a, .site-header .header-contact { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; color: var(--muted); text-decoration: none; }
.site-header .nav-links [aria-current="page"] { color: var(--navy); }
.site-header .header-contact { justify-self: end; gap: 8px; color: var(--navy); padding: 10px 18px; border: 1px solid currentColor; border-radius: 999px; box-sizing: border-box; white-space: nowrap; }
.site-header .booking-nav-icon { display: block; width: 18px; height: 18px; flex: none; }
.site-header a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.site-header .navigation-toggle { display: none; }
:where(.has-js) .site-header .brand { grid-column: 1; grid-row: 1; }
.site-header .navigation-panel { display: contents; }
:where(.has-js) .site-header .nav-links { grid-column: 2; grid-row: 1; }
:where(.has-js) .site-header .header-contact { grid-column: 3; grid-row: 1; }
@media (hover: hover) { .site-header .nav-links a:hover, .site-header .header-contact:hover { color: var(--blue); } }
@media (max-width: 980px) {
  .site-header .masthead { grid-template-columns: 1fr auto; row-gap: 4px; }
  .site-header .nav-links { grid-column: 1 / -1; grid-row: 2; display: grid; align-items: stretch; grid-template-columns: repeat(3, max-content); gap: 24px; }
  .site-header .header-contact { grid-column: 2; grid-row: 1; }
}

@media (max-width: 980px) {
  :where(.has-js) .site-header .masthead { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 12px; padding-block: 16px; }
  :where(.has-js) .site-header .brand { min-height: 44px; }
  :where(.has-js) .site-header .header-contact { grid-column: 2; gap: 8px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 999px; }
  :where(.has-js) .site-header .navigation-toggle { display: grid; place-items: center; grid-column: 3; grid-row: 1; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; }
  .site-header .navigation-toggle svg { width: 24px; height: 24px; }
  .site-header .navigation-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  :where(.has-js) .site-header .navigation-panel { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 240ms cubic-bezier(.23, 1, .32, 1), visibility 240ms; }
  .site-header[data-menu-open="true"] .navigation-panel { grid-template-rows: 1fr; visibility: visible; }
  :where(.has-js) .site-header .nav-links { display: grid; grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 0; width: 100%; min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.23, 1, .32, 1); }
  .site-header[data-menu-open="true"] .nav-links { opacity: 1; transform: translateY(0); }
  :where(.has-js) .site-header .nav-links a { min-height: 54px; padding: 12px 0; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.025em; }
  :where(.has-js) .site-header .nav-links a::after { display: none; }
}
@media (max-width: 680px) {
  :where(.has-js) .site-header .masthead { gap: 0 6px; padding-block: 12px; }
  :where(.has-js) .site-header .brand { gap: 8px; font-size: 14px; }
  :where(.has-js) .site-header .header-contact { padding-inline: 10px; font-size: 14px; }
}
@media (max-width: 680px) {
  .site-header .masthead { padding: 20px 0 16px; }
  .site-header .brand { font-size: 15px; }
  .site-header .brand img { width: 148px; height: auto; }
  .site-header .header-contact { font-size: 14px; }
  .site-header .nav-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 15px; }
}

/* One interaction treatment across all four navigation bars. */
.site-header .nav-links a { position: relative; }
.site-header .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.site-header .nav-links a[aria-current="page"]::after,
.site-header .nav-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-header .nav-links a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links a::after { transition: none; }
}

@media (max-width: 980px) {
  .site-header .masthead { width: calc(100vw - 48px); }
  .site-header .brand { width: 180px; }
}
@media (max-width: 680px) {
  .site-header .brand { width: 132px; }
}
@media (max-width: 360px) {
  .site-header .booking-nav-icon { display: none; }
}

/* Phosphor List strokes move into a close mark without replacing the icon. */
.site-header .navigation-toggle path { transform-origin: 128px 128px; transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 160ms ease-out; }
.site-header[data-menu-open="true"] .menu-top { transform: rotate(45deg) translateY(64px); }
.site-header[data-menu-open="true"] .menu-middle { opacity: 0; transform: scaleX(.5); }
.site-header[data-menu-open="true"] .menu-bottom { transform: rotate(-45deg) translateY(-64px); }
.site-header[data-menu-instant] .navigation-panel,
.site-header[data-menu-instant] .nav-links,
.site-header[data-menu-instant] .navigation-toggle path { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header .navigation-panel, .site-header .nav-links, .site-header .navigation-toggle path { transition: none; }
}