/* ============================================================================
   DS SIGHT — navigation (shared by every page, two themes)
   A light, deliberate bar — not a capsule. Work · Services ▾ · Competitions ·
   Apparel · Contact · Account, plus one clear booking button. Everything is a
   real link/button: nothing is hover-only or hidden behind motion.
   Theme comes from <html data-theme="light"> (default = dark pages).
   ========================================================================== */
:root {
  --nav-ink: #e9eef9; --nav-ink-2: rgba(233, 238, 249, 0.72);
  --nav-bg: rgba(7, 11, 22, 0); --nav-bg-scrolled: rgba(8, 13, 26, 0.9);
  --nav-line: rgba(255, 255, 255, 0.14); --nav-hover: rgba(255, 255, 255, 0.09); --nav-active: rgba(143, 196, 255, 0.18);
  --cap-bg: rgba(13, 20, 38, 0.6); --cap-edge: rgba(255, 255, 255, 0.18);
  --nav-sheet: #0d1426; --nav-sheet-line: rgba(255, 255, 255, 0.14);
  --nav-cta-bg: linear-gradient(180deg, #6bb6ff 0%, #338ae8 100%); --nav-cta-ink: #04101f; --nav-cta-line: rgba(255, 255, 255, 0.32);
}
html[data-theme="light"] {
  --cap-bg: rgba(255, 255, 255, 0.58); --cap-edge: rgba(255, 255, 255, 0.85);
  --nav-ink: #11151b; --nav-ink-2: #4a5160;
  --nav-bg: rgba(255, 255, 255, 0); --nav-bg-scrolled: rgba(255, 255, 255, 0.9);
  --nav-line: rgba(17, 21, 27, 0.12); --nav-hover: rgba(17, 21, 27, 0.06); --nav-active: rgba(17, 21, 27, 0.08);
  --nav-sheet: rgba(255, 255, 255, 0.92); --nav-sheet-line: rgba(17, 21, 27, 0.14);
  --nav-cta-bg: #11151b; --nav-cta-ink: #ffffff; --nav-cta-line: #11151b;
}

/* Floating capsule: transparent sticky wrapper, inset rounded translucent glass bar (not a full-width strip). */
.ds-navbar-wrap { position: sticky; top: 0; z-index: 60; padding: 12px clamp(12px, 2vw, 20px) 0 !important; background: transparent !important; pointer-events: none; }
.ds-navbar {
  position: relative; max-width: 1400px !important; margin: 0 auto !important; min-height: 64px; display: flex; align-items: center; gap: 4px; pointer-events: auto;
  padding: 0 10px 0 clamp(14px, 2vw, 24px) !important; border: 1px solid var(--cap-edge) !important; border-radius: 999px !important;
  background: var(--cap-bg) !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 10px 34px rgba(17, 21, 27, 0.10), 0 1px 3px rgba(17, 21, 27, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
.ds-navbar::before, .ds-navbar::after { display: none !important; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ds-navbar { background: var(--nav-sheet) !important; } }

.ds-navbar-logo { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; min-height: 48px; min-width: 48px; text-decoration: none; position: relative; }
.ds-navbar-logo img { height: 38px !important; width: auto; border-radius: 4px; display: block; }
.ds-navbar-logo span { font: 500 14px/1 "Cinzel", Georgia, serif !important; letter-spacing: 0.2em !important; text-transform: uppercase; color: var(--nav-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; padding-left: 0.2em; white-space: nowrap; }

.ds-navbar-menu > a, .ds-nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px !important; border-radius: 12px !important; border: 0; background: transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 500 16px/1 var(--font-body, "Inter", system-ui, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--nav-ink) !important;
  transition: background 160ms var(--ds-ease, ease), color 160ms var(--ds-ease, ease);
}
.ds-navbar-menu > a:hover, .ds-nav-trigger:hover, .ds-nav-group.open > .ds-nav-trigger { background: var(--nav-hover) !important; }
.ds-navbar-menu > a.active, .ds-navbar-menu > a[aria-current="page"], .ds-nav-group.has-active > .ds-nav-trigger { background: var(--nav-active) !important; }
.ds-nav-trigger::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.75; transition: transform 160ms var(--ds-ease, ease); }
.ds-nav-group { position: relative; display: inline-flex; }
.ds-nav-group.open > .ds-nav-trigger::after { transform: translateY(1px) rotate(225deg); }
.ds-nav-sub {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; padding: 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 2px;
  background: var(--nav-sheet); border: 1px solid var(--nav-sheet-line); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity 160ms var(--ds-ease, ease), transform 160ms var(--ds-ease, ease), visibility 0s linear 160ms;
}
.ds-nav-group.open > .ds-nav-sub { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.ds-nav-sub a { display: flex; align-items: center; min-height: 48px; padding: 0 14px !important; border-radius: 10px !important; color: var(--nav-ink) !important; text-decoration: none; white-space: nowrap; font: 500 16px/1 var(--font-body, "Inter", sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; }
.ds-nav-sub a:hover, .ds-nav-sub a.active { background: var(--nav-hover); }

.ds-navbar-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-left: 10px; padding: 0 22px !important; border-radius: 14px !important; white-space: nowrap; text-decoration: none;
  font: 600 15.5px/1.1 var(--font-body, "Inter", sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--nav-cta-ink) !important; background: var(--nav-cta-bg) !important; border: 1px solid var(--nav-cta-line) !important; box-shadow: none !important;
  transition: filter 160ms var(--ds-ease, ease), transform 120ms var(--ds-ease, ease);
}
.ds-navbar-cta:hover { filter: brightness(1.12); }
.ds-navbar-cta:active { transform: translateY(1px) scale(0.992); }
.ds-navbar-cta .cta-short { display: none; }
.ds-navbar-toggle { display: none; width: 52px !important; height: 52px !important; border-radius: 14px !important; border: 1px solid var(--nav-line) !important; background: transparent !important; cursor: pointer; }
.ds-navbar-toggle span { background: var(--nav-ink) !important; }

@media (min-width: 1100px) {
  .ds-navbar-menu { position: static !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 2px !important; min-width: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; order: 2; }
  .ds-navbar-logo { order: 1; } .ds-navbar-cta { order: 3; }
}
@media (max-width: 1099px) {
  .ds-navbar { min-height: 60px; }
  .ds-navbar-wrap { padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important; }
  .ds-navbar-toggle { display: inline-flex !important; flex-direction: column; justify-content: center; gap: 5px; padding: 0 14px !important; }
  .ds-navbar-toggle span { display: block; height: 1.5px; width: 100%; border-radius: 2px; transition: transform 200ms ease, opacity 150ms ease; }
  .ds-navbar.open .ds-navbar-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .ds-navbar.open .ds-navbar-toggle span:nth-child(2) { opacity: 0; }
  .ds-navbar.open .ds-navbar-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .ds-navbar-menu {
    position: absolute !important; top: calc(100% + 10px) !important; left: 0 !important; right: 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column; gap: 0; padding: 8px 20px 14px;
    background: var(--nav-sheet) !important; border: 1px solid var(--nav-sheet-line) !important; box-shadow: 0 24px 48px rgba(17, 21, 27, 0.22) !important; border-radius: 28px !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
    opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transition: opacity 180ms var(--ds-ease, ease), transform 180ms var(--ds-ease, ease), visibility 0s linear 180ms;
  }
  .ds-navbar.open .ds-navbar-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
  .ds-navbar-menu > a { width: 100%; min-height: 54px; font-size: 18px !important; justify-content: flex-start; border-bottom: 1px solid var(--nav-line); border-radius: 0 !important; padding: 0 2px !important; }
  .ds-nav-group { display: flex; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--nav-line); }
  .ds-nav-trigger { pointer-events: none; min-height: 44px; padding: 8px 2px 0 !important; font-size: 14px !important; opacity: 0.62; }
  .ds-nav-trigger::after { display: none; }
  .ds-nav-sub { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; min-width: 0; padding: 0 0 8px 0; background: transparent; border: 0; box-shadow: none; transition: none; }
  .ds-nav-sub a { min-height: 50px; font-size: 18px !important; padding: 0 2px !important; }
}
@media (max-width: 640px) { .ds-navbar-cta .cta-long { display: none; } .ds-navbar-cta .cta-short { display: inline; } .ds-navbar-cta { padding: 0 16px !important; margin-left: 6px; } }
@media (max-width: 400px) { .ds-navbar-logo span { display: none !important; } .ds-navbar-cta { padding: 0 12px !important; } }
@media (prefers-reduced-motion: reduce) { .ds-navbar, .ds-navbar-menu, .ds-nav-sub, .ds-nav-trigger::after, .ds-navbar-toggle span { transition: none !important; } }

/* announcement bar: calm, readable, comfortable link target */
#ds-announce-bar { background: var(--ink, #11151b) !important; color: #e9eef9 !important; border-bottom: 0 !important; padding: 2px 44px 2px 16px !important; font-size: 14px !important; }
html[data-theme="light"] #ds-announce-bar { background: #11151b !important; }
#ds-announce-bar a { display: inline-flex !important; align-items: center; min-height: 44px; color: #fff !important; border-bottom-color: rgba(255, 255, 255, 0.5) !important; }