.site-nav{--panel:rgba(14,19,23,.9);--line:rgba(255,255,255,.12);--hover:rgba(255,255,255,.065);--soft:rgba(255,255,255,.8);--muted:rgba(255,255,255,.65);--ease:cubic-bezier(.22,1,.36,1);--morph:.5s}
.site-nav a{color:inherit;text-decoration:none}.site-nav button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}.site-nav :focus-visible{outline:2px solid var(--pollen);outline-offset:4px}
      /* =====================================================================
         HEADER BAR
         ===================================================================== */
      .header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
      }

      .bar {
        height: 76px;
        padding: 0 clamp(20px, 3.4vw, 52px);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
      }

      .logo {
        width: 30px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: start;
        animation: fadeDown 0.9s var(--ease) 0.35s backwards;
      }

      .desktop-nav {
        animation: fadeIn 0.9s ease 0.45s backwards;
      }

      .actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 10px;
        animation: fadeDown 0.9s var(--ease) 0.55s backwards;
      }

      @keyframes fadeDown {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
      }

      .links {
        display: flex;
        align-items: center;
        gap: 26px;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      .trigger,
      .plain-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 0;
        font-size: 14.5px;
        color: var(--soft);
        transition: color 0.25s ease;
        user-select: none;
      }

      .trigger:hover,
      .trigger[aria-expanded="true"],
      .plain-link:hover {
        color: #fff;
      }

      .chevron {
        transition: transform 0.35s var(--ease);
      }

      .trigger[aria-expanded="true"] .chevron {
        transform: rotate(180deg);
      }

      .cta {
        height: 32px;
        padding: 0 15px;
        border-radius: 999px;
        background: #fff;
        color: #0b0f12;
        font-size: 14px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.25s, transform 0.25s;
      }

      .cta:hover {
        background: #e9eef0;
        transform: translateY(-1px);
      }

      .menu-btn {
        display: none;
        width: 36px;
        height: 32px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        align-items: center;
        justify-content: center;
      }

      /* =====================================================================
         MORPHING DROPDOWN CONTAINER & PANELS
         ===================================================================== */
      .dd {
        --x: 0px;
        --w: 400px;
        --h: 300px;
        --s: 0.97;
        position: absolute;
        top: 64px;
        left: 0;
        width: var(--w);
        height: var(--h);
        transform: translateX(var(--x)) scale(var(--s));
        transform-origin: 50% 0;
        opacity: 0;
        pointer-events: none;
        border-radius: 16px;
        background: var(--panel);
        border: 1px solid var(--line);
        box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        transition: transform var(--morph) var(--ease), width var(--morph) var(--ease), height var(--morph) var(--ease), opacity 0.3s ease;
      }

      .dd.open {
        --s: 1;
        opacity: 1;
        pointer-events: auto;
      }

      .dd.instant {
        transition: opacity 0.3s ease, transform var(--morph) var(--ease);
      }

      .dd.instant.snap {
        transition: none;
      }

      .panel {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(0);
        transition: opacity 0.26s ease, transform var(--morph) var(--ease), filter 0.4s ease, visibility 0s linear var(--morph);
      }

      .panel[data-state="exit-left"] {
        transform: translateX(-56px);
      }

      .panel[data-state="exit-right"] {
        transform: translateX(56px);
      }

      .panel[data-state="active"] {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: opacity 0.36s ease 0.06s, transform var(--morph) var(--ease), filter 0.45s ease 0.04s, visibility 0s;
      }

      .panel.snap {
        transition: none !important;
      }

      /* Panel A: DISCOVER */
      #p-discover {
        width: 664px;
        height: 358px;
        display: grid;
        grid-template-columns: 236px 1fr;
      }

      .d-list {
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 2px;
      }

      .d-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 12px;
        border-radius: 10px;
        transition: background 0.3s;
      }

      .d-item.is-active {
        background: var(--hover);
      }

      .d-item strong {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 4px;
      }

      .d-item span {
        font-size: 13px;
        line-height: 1.42;
        color: var(--muted);
      }

      .d-media {
        position: relative;
        overflow: hidden;
        border-radius: 0 15px 15px 0;
      }

      .d-media::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 70px;
        background: linear-gradient(to right, rgba(14, 19, 23, 0.55), rgba(14, 19, 23, 0));
        z-index: 2;
        pointer-events: none;
      }

      .d-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity 0.6s ease, transform 0.9s var(--ease), filter 0.6s ease;
      }

      .d-media img.is-active {
        opacity: 1;
        transform: scale(1);
        z-index: 1;
      }

      /* Panel B: JOURNEYS */
      #p-journeys {
        width: 446px;
        height: 308px;
        padding: 7px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
      }

      .card {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 14px;
        isolation: isolate;
      }

      .card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -2;
        transition: transform 0.9s var(--ease), filter 0.5s;
      }

      .card:hover .card-img,
      .card:focus-visible .card-img {
        transform: scale(1.05);
        filter: brightness(1.08);
      }

      .card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to top, rgba(8, 11, 13, 0.88) 0%, rgba(8, 11, 13, 0.35) 38%, rgba(8, 11, 13, 0) 60%);
      }

      .card strong {
        font-size: 15.5px;
        font-weight: 500;
        margin-bottom: 5px;
      }

      .card span {
        font-size: 13px;
        line-height: 1.42;
        color: var(--muted);
      }

      /* Panel C: REGIONS */
      #p-regions {
        width: 232px;
        height: 218px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .r-link {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 12px;
        border-radius: 9px;
        font-size: 15px;
        transition: background 0.25s;
      }

      .r-link:hover,
      .r-link:focus {
        background: var(--hover);
      }

      /* =====================================================================
         MOBILE SHEET & RESPONSIVENESS
         ===================================================================== */
      .sheet {
        position: absolute;
        top: 68px;
        left: 12px;
        right: 12px;
        padding: 10px;
        border-radius: 16px;
        background: var(--panel);
        border: 1px solid var(--line);
        max-height: calc(100svh - 90px);
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px) scale(0.98);
        transform-origin: 50% 0;
        transition: opacity 0.3s ease, transform 0.45s var(--ease), visibility 0s linear 0.45s;
      }

      .sheet.open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.3s ease, transform 0.45s var(--ease), visibility 0s;
      }

      .sheet h3 {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 10px 12px 6px;
      }

      .sheet-link {
        display: block;
        padding: 10px 12px;
        border-radius: 9px;
        font-size: 15px;
        transition: background 0.25s;
      }

      .sheet-link:hover,
      .sheet-link:focus {
        background: var(--hover);
      }

      @media (min-width: 861px) {
        .sheet {
          display: none;
        }
      }

      @media (max-width: 860px) {
        .bar {
          grid-template-columns: 1fr auto;
        }
        .desktop-nav {
          display: none;
        }
        .menu-btn {
          display: inline-flex;
        }
      }

    
.site-nav.header{position:fixed;z-index:50;background:none}
.site-nav .logo{width:auto;height:44px;animation:none}.site-nav .cta{color:#fff;background:#000;border:1px solid rgba(255,255,255,.65)}
.site-nav .cta:hover{background:#171717;border-color:#fff}
.site-nav .trigger,.site-nav .plain-link,.site-nav .cta{min-height:44px}.site-nav .menu-btn{width:44px;height:44px}
.d-media{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 70% 30%,#202426,transparent 65%),#080a0b}
.orbit{width:180px;height:180px;border:1px solid #d6d6d688;border-radius:50%;position:relative;transform:rotate(-25deg)}
.orbit:before,.orbit:after{content:"";position:absolute;inset:25px -25px;border:1px solid #d6d6d688;border-radius:50%}.orbit:after{inset:-25px 25px}
.card{background:linear-gradient(145deg,#2b4450,#111d24)}.card:nth-child(2){background:linear-gradient(145deg,#494e40,#191f1b)}
.card-symbol{position:absolute;top:34px;left:24px;font:48px Georgia,serif;color:#d6e2d5}
.skip{position:fixed;top:8px;left:12px;padding:12px;background:white;color:#111;z-index:100;transform:translateY(-160%)}.skip:focus{transform:none}
.view[hidden]{display:none!important}
.collection-views .view{max-width:1100px;margin:auto;min-height:100svh;padding:160px 32px 80px}
.collection-views h1{font-size:clamp(48px,8vw,100px);font-weight:400;letter-spacing:-.06em;margin:30px 0}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pollen)}
.intro{max-width:500px;font-size:18px;line-height:1.7;color:#ccc}.empty{border-top:1px solid #333;margin-top:60px;padding-top:25px;color:#aaa;line-height:1.7}
@media(max-width:500px){.site-nav .logo-wordmark{width:110px}.site-nav .cta{padding:0 10px;font-size:11px}.bar{padding:0 16px}.actions{gap:6px}}