/* One surface changes size; the type and images keep their own proportions. */
.vl-primary-links > .nav-links > li { display: flex; align-items: center; }
.niwa-nav-toggle { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; }
.niwa-nav-toggle::after { content: ""; width: 5px; height: 5px; border-right: 1px solid; border-bottom: 1px solid; transform: translateY(-2px) rotate(45deg); transition: transform 220ms; }
.niwa-nav-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.vl-primary-links li:has([aria-expanded="true"]) > a { opacity: .65; }
.niwa-nav-panel { display: none; position: absolute; inset: 100% auto auto 0; width: 240px; max-width: calc(100vw - 40px); padding: 10px; margin: 0; list-style: none; border: 1px solid #2e303214; border-radius: 14px; background: #fff; color: var(--pt-ink); }
.vl-primary-links li:is(:hover, :focus-within) > .niwa-nav-panel { display: block; }
.niwa-nav-panel[data-morph-layout="explore"] { width: 640px; }
.niwa-nav-panel[data-morph-layout="cards"] { width: 440px; }
.niwa-nav-shell {
  --nav-ease: cubic-bezier(.32, .72, 0, 1);
  position: absolute; left: 0; top: calc(100% - 8px); width: 0; height: 0;
  overflow: hidden; border: 1px solid #2e303214; border-radius: 14px;
  background: #fff;
  contain: layout paint;
  will-change: transform;
  box-shadow: 0 18px 50px -18px #20233138, 0 3px 10px #20233108;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(var(--nav-x, 0px), -6px);
  transition: width 460ms var(--nav-ease), height 460ms var(--nav-ease), transform 460ms var(--nav-ease), opacity 200ms ease, visibility 0s 200ms;
}
.niwa-nav-shell.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--nav-x, 0px), 0); transition-delay: 0s; }
.niwa-nav-shell.is-positioning { transition: none; }
.niwa-nav-shell > .niwa-nav-panel {
  display: block; inset: 0 auto auto 0; border: 0; border-radius: 0; background: transparent;
  max-height: var(--nav-max-height, 70dvh); overflow: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(var(--nav-shift, 24px));
  transition: opacity 160ms ease-out, transform 460ms var(--nav-ease), visibility 0s 160ms;
}
.niwa-nav-shell > .niwa-nav-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-duration: 260ms, 460ms, 0s; transition-delay: 35ms, 0s, 0s; }
.niwa-nav-shell > [data-morph-layout="explore"], .vl-primary-links li:is(:hover, :focus-within) > [data-morph-layout="explore"] { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 8px; }
.niwa-nav-features { list-style: none; padding: 0; margin: 0; display: grid; }
.niwa-nav-features a { display: flex; flex-direction: column; justify-content: center; align-items: start; min-height: 44px; padding: 10px 14px; border-radius: 8px; transition: background 160ms; }
.niwa-nav-features a:is(:hover, :focus-visible) { background: #2e303209; }
.niwa-nav-features strong { font-size: 13px; font-weight: 500; line-height: 1.4; }
.niwa-nav-images { position: relative; min-height: 320px; overflow: hidden; border-radius: 8px; background: var(--niwa-site-background); }
.niwa-nav-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms ease; }
.niwa-nav-images img.is-active { opacity: 1; }
.niwa-nav-shell > [data-morph-layout="cards"], .vl-primary-links li:is(:hover, :focus-within) > [data-morph-layout="cards"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.niwa-nav-card { position: relative; display: flex; align-items: end; min-height: 280px; overflow: hidden; border-radius: 8px; color: white; }
.niwa-nav-card::after { content: ""; position: absolute; inset: 20% 0 0; background: linear-gradient(transparent, #121619cc); pointer-events: none; }
.niwa-nav-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms; }
.niwa-nav-card:is(:hover, :focus-visible) > img { transform: scale(1.035); }
.niwa-nav-card > span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 20px 14px; font-size: 13px; line-height: 1.5; }
.niwa-nav-panel[data-morph-layout="compact"] a, .niwa-nav-shell > .sub-menu a { display: flex; align-items: center; min-height: 44px; padding: 12px 14px; font-size: 12px; line-height: 1.5; border-radius: 8px; }
.niwa-nav-panel[data-morph-layout="compact"] a:is(:hover, :focus-visible), .niwa-nav-shell > .sub-menu a:is(:hover, :focus-visible) { background: #2e303209; }
@media (max-width: 980px) { .niwa-nav-shell { display: none; } }
@media (prefers-reduced-motion: reduce) { .niwa-nav-shell, .niwa-nav-shell *, .niwa-nav-shell > .niwa-nav-panel.is-active, .niwa-nav-toggle::after { transition: none; } }