/* The floating navigation follows the original homepage: Aeonik, square glass
   panel, bottom-centred bar and the same restrained reveal timings. */
.cb-navigation, .cb-navigation-panel {
  --nav-unit: calc(100vw / 1600 * 10);
  --nav-glass: rgba(11,16,18,.8);
  font-family: "Aeonik Pro", Arial, sans-serif;
  color: #fff;
  box-sizing: border-box;
}
.cb-navigation *, .cb-navigation-panel * { box-sizing: border-box; }
.cb-navigation {
  position: fixed; z-index: 90; left: 50%; bottom: calc(4 * var(--nav-unit));
  width: calc(27.6 * var(--nav-unit)); height: calc(5 * var(--nav-unit));
  transform: translateX(-50%); display: flex; align-items: center;
  background: var(--nav-glass); backdrop-filter: blur(20px);
  transition: width .6s cubic-bezier(.65,0,.35,1);
}
.cb-navigation a, .cb-navigation button, .cb-navigation-panel a, .cb-navigation-panel button {
  color: inherit; text-decoration: none; border: 0; border-radius: 0; margin: 0;
}
.cb-navigation-symbol { width: calc(5 * var(--nav-unit)); height: 100%; display: grid; place-items: center; }
.cb-navigation-symbol img { width: calc(2.4 * var(--nav-unit)); height: calc(2.4 * var(--nav-unit)); filter: brightness(0) invert(1); }
.cb-navigation-toggle {
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  flex: 1; height: 100%; padding: 0 calc(1.5 * var(--nav-unit)); gap: calc(2 * var(--nav-unit));
  font: 500 calc(1.2 * var(--nav-unit))/1.3 "Aeonik Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
.cb-navigation-toggle svg { width: calc(2 * var(--nav-unit)); height: calc(1.1 * var(--nav-unit)); }
.cb-navigation-panel {
  position: fixed; inset: auto auto calc(10 * var(--nav-unit)) 50%; margin: 0;
  transform: translateX(-50%); width: calc(40 * var(--nav-unit));
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px);
  padding: calc(6 * var(--nav-unit)); overflow: visible;
  border: 0; background: transparent;
}
.cb-navigation-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--nav-glass); backdrop-filter: blur(20px); transform-origin: center bottom;
}
.cb-navigation-panel::backdrop { background: rgba(11,16,18,.45); }
.cb-navigation-panel nav { max-height: calc(100dvh - 210px); overflow-y: auto; scrollbar-width: thin; }
.cb-navigation-label {
  color: rgba(255,255,255,.6); font: 500 calc(1.2 * var(--nav-unit))/1.3 "Aeonik Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 calc(2 * var(--nav-unit));
}
.cb-static .cb-navigation-label { margin-bottom: calc(2 * var(--nav-unit)); }
.cb-static .cb-contact-hero { margin-top: 0; }
.cb-navigation-links { display: flex; flex-direction: column; }
.cb-navigation-links a {
  display: block; font-size: calc(3.2 * var(--nav-unit)); line-height: 1.125;
  letter-spacing: -.02em; font-weight: 400; transition: color .3s;
}
.cb-navigation-links a[aria-current="page"]::before { content: '◆'; font-size: .23em; vertical-align: middle; margin-left: -1.7em; margin-right: .7em; }
.cb-navigation-secondary {
  display: flex; flex-wrap: wrap; gap: calc(.6 * var(--nav-unit)) calc(2.4 * var(--nav-unit));
  margin: calc(4 * var(--nav-unit)) 0 calc(4 * var(--nav-unit));
  color: rgba(255,255,255,.6); font-size: calc(1.6 * var(--nav-unit)); line-height: 1.3;
}
.cb-navigation-secondary a:last-child { flex-basis: 100%; }
.cb-navigation-contact {
  width: 100%; display: flex; gap: calc(1.6 * var(--nav-unit)); align-items: center;
  background: #0b1012; padding: calc(1.5 * var(--nav-unit)) calc(2.4 * var(--nav-unit)); cursor: pointer;
  font: 500 calc(1.2 * var(--nav-unit))/1.3 "Aeonik Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
}
.cb-navigation-close {
  position: absolute; bottom: calc(-6 * var(--nav-unit)); left: 50%; transform: translateX(-50%);
  width: calc(5 * var(--nav-unit)); height: calc(5 * var(--nav-unit)); background: var(--nav-glass);
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.cb-navigation-close svg { width: calc(1.3 * var(--nav-unit)); height: calc(1.3 * var(--nav-unit)); }
.cb-navigation-panel[open]::before { animation: cb-menu-panel .6s cubic-bezier(.65,0,.35,1) both; }
.cb-navigation-panel[open] nav { animation: cb-menu-links .8s cubic-bezier(.65,0,.35,1) both; }
.cb-navigation-panel[data-closing] { pointer-events: none; }
.cb-navigation-panel[data-closing]::before { animation: cb-menu-panel .4s cubic-bezier(.65,0,.35,1) reverse both; }
.cb-navigation-panel[data-closing] nav { animation: cb-menu-links .3s ease-in reverse both; }
html.cb-menu-open .cb-navigation { width: calc(5 * var(--nav-unit)); }
html.cb-menu-open .cb-navigation > * { visibility: hidden; }
.cb-navigation :focus-visible, .cb-navigation-panel :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@keyframes cb-menu-panel { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes cb-menu-links { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:600px) {
  .cb-navigation, .cb-navigation-panel { --nav-unit: calc(100vw / 375 * 10); }
  .cb-navigation { bottom: calc(3 * var(--nav-unit)); }
  .cb-navigation-panel { bottom: calc(10 * var(--nav-unit)); width: calc(32 * var(--nav-unit)); padding: calc(6 * var(--nav-unit)) calc(4 * var(--nav-unit)) calc(3 * var(--nav-unit)); }
  .cb-navigation-close { bottom: calc(-7 * var(--nav-unit)); }
  .cb-navigation-secondary { margin: calc(3 * var(--nav-unit)) 0; }
}
/* Remove the obsolete corner quote control. Current forms remain available
   through the menu, page CTAs and shared footer. */
.page-header > .container > .base-button, .page-header .base-button,
.quote-panel, .cb-contact-launcher { display: none !important; }
.menu .sub { column-count: 1 !important; display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; margin: 4rem 0; }
.menu .sub li:has(a[href^="mailto:"]) { flex-basis: 100%; margin-left: 0 !important; }
.menu .sub li[hidden] { display: none !important; }
@media (max-width:600px) { .menu .sub { margin: 3rem 0; } }
/* A separate curtain owns navigation; the original intro keeps its own logo. */
#cb-page-transition {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: var(--color-cream, #eeece7); opacity: 0; visibility: hidden;
  transition: opacity .45s cubic-bezier(.65,0,.35,1), visibility 0s .45s;
}
html[data-cb-navigation="leaving"] #cb-page-transition,
html[data-cb-navigation="arriving"] #cb-page-transition {
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
html[data-cb-navigation="arriving"] #cb-page-transition { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cb-navigation, .cb-navigation-panel::before, .cb-navigation-panel nav, #cb-page-transition { animation: none !important; transition: none !important; }
}
