/* ═══════════════════════════════════════════════════════════════
   T28 — Header + logo statement (HOME-SPEC "Header")
   Two modes, decided by <body class="body--home">:
     · HOME  → transparent white header over the video hero + large
               centered OBX logo statement (entrance turn + sweep).
               On scroll: white bar, ink text, 44px compact logo left.
     · EVERY OTHER PAGE → white compact header by default: white bar,
               ink text, 44px logo on the left (always readable, QA/axe
               clean over the light 70vh heroes).
   Mobile: logo left, BOOK SERVICE + menu icon right.
   Loaded after obx-premium / obx-house so it wins the cascade.
   ═══════════════════════════════════════════════════════════════ */

/* ── Header base: WHITE compact bar (the safe default for inner pages) ── */
.site-header {
  position: relative; top: 0; left: 0; right: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--obx-hairline);
  box-shadow: 0 1px 0 rgba(11,27,43,.04);
  transition: background .35s var(--obx-ease), box-shadow .35s;
}
/* keep the compact bar fixed while scrolling inner pages */
.site-header.scrolled { position: fixed; }

/* HOME: transparent, white text, floating over the hero.
   !important is required: styles.css (loaded earlier) sets .site-header{
   background: var(--header-bg)} = white, and ocean-theme resolves that to
   rgba(255,255,255,.94). Without !important the transparent rule loses and
   the white nav text paints on white (QA INVISIBLE / axe contrast). */
.body--home .site-header {
  position: absolute;
  background: transparent !important;
  border-bottom: none;
  box-shadow: none;
  backdrop-filter: none !important;
}
.body--home .site-header.scrolled {
  position: fixed;
  background: #fff !important;
  border-bottom: 1px solid var(--obx-hairline);
  box-shadow: 0 1px 0 rgba(11,27,43,.04);
  backdrop-filter: saturate(180%) blur(14px);
}

/* ── Thin top nav row ─────────────────────────────────────────── */
.header-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 14px clamp(20px, 4vw, 48px);
}

/* ── Brand mark ───────────────────────────────────────────────── */
.site-header .brand { gap: .55rem; font-size: 1.05rem; }
.site-header .brand__mark { position: relative; width: 44px; height: 44px; animation: none; opacity: 1; transform: none; }
.site-header .brand__name { display: none; } /* wordmark lives in the logo statement / footer */

/* ink brand on the white bar (inner pages + home scrolled) */
.site-header .brand { color: var(--obx-ink); }
.site-header .brand__logo--pearl { display: none; }   /* white logo hidden on white bar */
.site-header .brand__logo--dark  { display: block; }  /* dark logo shows on white bar */

/* HOME over the hero: white logo, no ink */
.body--home .site-header .brand { color: rgba(255,255,255,.95); text-shadow: 0 1px 14px rgba(4,12,22,.8); }
.body--home .site-header .brand__logo--pearl { display: block; }
.body--home .site-header .brand__logo--dark  { display: none; }
/* HOME scrolled → back to the white bar */
.body--home .site-header.scrolled .brand { color: var(--obx-ink); text-shadow: none; }
.body--home .site-header.scrolled .brand__logo--pearl { display: none; }
.body--home .site-header.scrolled .brand__logo--dark  { display: block; }

/* ── Nav links ────────────────────────────────────────────────── */
.site-header nav { display: flex; gap: 1.6rem; margin-left: .4rem; }
.site-header nav a {
  color: var(--obx-ink) !important;
  font-family: var(--obx-font-body); font-size: .82rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.site-header nav a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--obx-ink); transition: width .3s var(--obx-ease); }
.site-header nav a:hover { color: #8A6A2F !important; }
.site-header nav a:hover::after { width:100%; }

/* T32a — dropdown menus (Services, Company): hover/focus panel, one-line descriptions */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: .35rem; }
.nav-caret { font-size: .62rem; line-height: 1; transform: translateY(-.05em); transition: transform .25s var(--obx-ease); opacity: .55; }
.nav-sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 250px; background: #fff; border: 1px solid var(--obx-hairline);
  border-top: 2px solid var(--obx-ink); box-shadow: 0 18px 44px -22px rgba(11,27,43,.45);
  padding: 10px 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--obx-ease), transform .28s var(--obx-ease), visibility .28s;
  z-index: 5; white-space: normal;
}
.nav-sub::before { content:""; position:absolute; top:100%; left:0; right:0; height:14px; } /* hover bridge */
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.nav-item:hover > a .nav-caret, .nav-item:focus-within > a .nav-caret { transform: translateY(-.05em) rotate(90deg); opacity: .9; }
.nav-sub a {
  display: block; padding: 10px 20px; position: static;
  color: rgba(11,27,43,.55) !important; text-shadow: none !important;
  font-size: .72rem; letter-spacing: .1em; text-transform: none; line-height: 1.45;
  border-bottom: none;
}
.nav-sub a strong { display:block; font-size: .82rem; font-weight:600; letter-spacing: .12em; text-transform: uppercase; color: var(--obx-ink); margin-bottom: 2px; }
.nav-sub a span { display:block; font-weight:400; }
.nav-sub a::after { display: none; }
.nav-sub a:hover, .nav-sub a:focus { color: var(--obx-ink) !important; background: rgba(198,166,100,.08); }
.nav-sub a:hover strong { color: #8A6A2F; }
/* over the dark hero (Home, unscrolled) keep the panel solid white — it must read on the video */
.body--home .site-header .nav-sub { background: #fff; border-color: var(--obx-hairline); }
/* HOME over the hero: white links, strong legibility over bright water.
   T31i — scope to the CLOSED inline nav only. The mobile dropdown (nav.open)
   is a solid white panel, so it must keep ink text; the white rule above beat
   the mobile media-query rule on specificity and painted white-on-white. */
/* T32f — scope the white-hero rules to the UNSCROLLED header only: nav (incl. dropdown links), brand, portal link, book button.
   The old selectors matched in BOTH states, so on Home after scrolling the white text + heavy shadow stayed painted on the white bar. */
.body--home .site-header:not(.scrolled) nav:not(.open) a { color: rgba(255,255,255,.98) !important; text-shadow: 0 1px 2px rgba(4,12,22,.9), 0 1px 10px rgba(4,12,22,.65), 0 0 3px rgba(4,12,22,.5); }
.body--home .site-header:not(.scrolled) nav:not(.open) a::after { background: #fff; }
.body--home .site-header:not(.scrolled) nav:not(.open) a:hover { color: #fff !important; }
.body--home .site-header:not(.scrolled) .brand { color: #fff !important; text-shadow: 0 1px 2px rgba(4,12,22,.9), 0 1px 10px rgba(4,12,22,.6); }
.body--home .site-header:not(.scrolled) .brand__logo--pearl { filter: drop-shadow(0 1px 3px rgba(4,12,22,.8)); }
.body--home .site-header:not(.scrolled) .portal-link { color: rgba(255,255,255,.98) !important; text-shadow: 0 1px 2px rgba(4,12,22,.9), 0 1px 10px rgba(4,12,22,.65); }
.body--home .site-header:not(.scrolled) .btn-header-book { color: #fff !important; border-color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(4,12,22,.9), 0 1px 10px rgba(4,12,22,.65); }
/* T32f — scrolled state (and inner pages, which never carry .body--home) must be plain ink: no shadow, no stroke, no filter, full opacity */
.body--home .site-header.scrolled nav a { color: var(--obx-ink) !important; text-shadow: none !important; opacity: 1; filter: none; -webkit-text-stroke: 0px transparent; }
.body--home .site-header.scrolled nav a::after { background: var(--obx-ink); }
.body--home .site-header.scrolled nav a:hover { color: #8A6A2F !important; }
.body--home .site-header .btn-header-book:hover { background: #fff; color: var(--obx-ink) !important; text-shadow: none; }
/* portal link lives in the right cluster, not the left nav */
.site-header nav a.portal-link { display: none; }
.site-header .nav-sep { display: none; }

/* ── Right cluster: portal + book + menu ──────────────────────── */
.site-header .header-right { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.site-header .portal-link {
  color: var(--obx-ink) !important;
  font-family: var(--obx-font-body); font-size: .82rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.site-header .portal-link:hover { color: #8A6A2F !important; }
/* HOME over hero: white portal link */
.body--home .site-header .portal-link { color: #fff !important; text-shadow: 0 1px 2px rgba(4,12,22,.95), 0 1px 10px rgba(4,12,22,.7); }
.body--home .site-header .portal-link:hover { color: #fff !important; }
.body--home .site-header.scrolled .portal-link { color: var(--obx-ink) !important; text-shadow: none; }
.body--home .site-header.scrolled .portal-link:hover { color: #8A6A2F !important; }

/* BOOK SERVICE — ink outline (white bar) / white outline (home over hero) */
.site-header .btn-header-book {
  font-family: var(--obx-font-body); font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 11px 20px; border-radius: 2px; cursor: pointer; white-space: nowrap;
  color: var(--obx-ink) !important; background: transparent; border: 1px solid var(--obx-ink);
  transition: background .25s, color .25s, border-color .25s;
}
.site-header .btn-header-book:hover { background: var(--obx-ink); color: #fff !important; }
/* HOME over hero: white outline button */
.body--home .site-header .btn-header-book { color: #fff !important; border-color: rgba(255,255,255,.98); text-shadow: 0 1px 2px rgba(4,12,22,.95), 0 1px 10px rgba(4,12,22,.7); }
.body--home .site-header .btn-header-book:hover { background: #fff; color: var(--obx-ink) !important; text-shadow: none; }
.body--home .site-header.scrolled .btn-header-book { color: var(--obx-ink) !important; border-color: var(--obx-ink); text-shadow: none; }
.body--home .site-header.scrolled .btn-header-book:hover { background: var(--obx-ink); color: #fff !important; }

/* menu toggle */
.site-header .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .25rem; line-height: 0; }
.site-header .nav-toggle svg { stroke: var(--obx-ink); }
.body--home .site-header .nav-toggle svg { stroke: #fff; }
.body--home .site-header.scrolled .nav-toggle svg { stroke: var(--obx-ink); }

/* ── Logo statement: large centered OBX logo over the hero (HOME ONLY) ── */
.logo-statement { display: none; }
.body--home .logo-statement {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: absolute; top: 84px; left: 0; right: 0;
  text-decoration: none; z-index: 2;
  opacity: 0; transform: scale(1.02); filter: blur(8px);
  animation: logo-dissolve-in 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s 1 forwards;
}
@keyframes logo-dissolve-in {
  from { opacity: 0; transform: scale(1.02); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
/* soft radial scrim so the white wordmark stays legible over bright water (no hard box) */
.body--home .logo-statement::before {
  content: ""; position: absolute; inset: -14% -30%; z-index: -1;
  background: radial-gradient(ellipse 60% 55% at 50% 46%, rgba(6,16,28,.42) 0%, rgba(6,16,28,.16) 55%, transparent 72%);
  pointer-events: none;
}
.logo-statement__mark { position: relative; display: inline-block; width: 184px; height: 184px; }
.logo-statement__mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-statement__name {
  font-family: var(--obx-font-display); font-weight: 400;
  font-size: 1.35rem; letter-spacing: .34em; text-indent: .34em;
  color: #fff; line-height: 1.25; text-align: center;
  text-shadow: 0 2px 24px rgba(4,12,22,.9), 0 0 8px rgba(4,12,22,.7), 0 1px 3px rgba(4,12,22,.9);
}
.logo-statement__name em {
  display: block; font-style: italic; font-size: .8rem; letter-spacing: .3em;
  color: rgba(255,255,255,.82); margin-top: 2px;
  text-shadow: 0 2px 16px rgba(4,12,22,.9), 0 1px 3px rgba(4,12,22,.9);
}
/* gold shimmer sweep removed — T31e: logo is a single smooth dissolve-in only */

/* On scroll the statement fades out (header becomes the compact bar) */
.body--home .site-header.scrolled .logo-statement { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .header-inner { gap: .8rem; padding: 12px 18px; }
  .site-header .brand { font-size: 1rem; }
  .site-header .brand__mark { width: 44px; height: 44px; }
  .site-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: .2rem; background: #fff;
    padding: 14px 18px 20px; border-bottom: 1px solid var(--obx-hairline);
    box-shadow: 0 12px 30px -18px rgba(11,27,43,.5); z-index: 1;
  }
  .site-header nav.open { display: flex; }
  /* T31i — the Home logo statement (z-index 2) painted over the open dropdown
     (z-index 1). Hide it while the menu is open so the panel reads clean. */
  .site-header:has(nav.open) .logo-statement { visibility: hidden; pointer-events: none; opacity: 0 !important; animation: none !important; }
  .site-header nav a { color: var(--obx-ink) !important; padding: 10px 0; font-size: .9rem; }
  .site-header .header-right { margin-left: auto; gap: .8rem; }
  .site-header .portal-link { display: none; } /* portal moves into the mobile menu */
  .site-header nav a.portal-link { display: block; color: #8A6A2F !important; }
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .btn-header-book { padding: 9px 14px; font-size: .72rem; }
  .body--home .logo-statement { top: 64px; }
  .body--home .logo-statement__mark { width: 92px; height: 92px; }
  .body--home .logo-statement__name { font-size: .82rem; letter-spacing: .24em; text-indent: .24em; }
  .body--home .logo-statement__name em { font-size: .56rem; letter-spacing: .22em; }
  /* mobile: read the dissolve almost entirely as a fade (tiny scale range) */
  .body--home .logo-statement { animation: logo-dissolve-in-m 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s 1 forwards; }
}
@keyframes logo-dissolve-in-m {
  from { opacity: 0; transform: scale(1.01); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .body--home .logo-statement { animation: none; opacity: 1; transform: none; filter: none; }
}