/* Full-width progressive-disclosure navigation for Concept B. */
.cb-header { transition:background-color 240ms ease,color 240ms ease; }
.cb-header.has-navigation { background:var(--cb-surface-dark-alt); color:var(--cb-light); }
.cb-header.has-navigation .cb-brand__logo--dark { display:none; }
.cb-header.has-navigation .cb-brand__logo--light { display:block; }
.cb-global-nav { display:flex; align-items:center; gap:clamp(24px,3vw,48px); margin-left:auto; }
.cb-nav-item { position:static; }
.cb-nav-trigger,.cb-global-nav__contact { font:500 11px var(--cb-font); letter-spacing:.08em; text-transform:uppercase; color:inherit; text-decoration:none; }
.cb-nav-trigger { display:flex; align-items:center; min-height:48px; padding:12px 0; opacity:.8; transition:opacity 180ms ease; }
.cb-nav-trigger:hover,.cb-nav-trigger[aria-expanded="true"] { opacity:1; }
.cb-nav-toggle { display:none; }
.cb-global-nav__contact { padding:12px 18px; border:1px solid currentColor; border-radius:14px; }
.cb-nav-phone { display:flex; align-items:center; min-height:48px; padding:12px 0; font:500 11px var(--cb-font); letter-spacing:.08em; color:inherit; text-decoration:none; opacity:.7; white-space:nowrap; transition:opacity 180ms ease; }
.cb-nav-phone:hover,.cb-nav-phone:focus-visible { opacity:1; }
.cb-header :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.cb-menu { min-width:44px; min-height:44px; }
.cb-menu span { transition:transform 200ms ease; }
.cb-menu[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
.cb-menu[aria-expanded="true"] span:nth-child(2) { transform:translateY(-3px) rotate(-45deg); }
.cb-flyout[hidden],.cb-nav-backdrop[hidden] { display:none; }
.cb-header::after { content:""; position:absolute; top:100%; left:0; width:100%; height:min(408px,calc(100dvh - 92px)); background:var(--cb-surface-dark-alt); transform:scaleY(0); transform-origin:top; opacity:0; pointer-events:none; transition:height 240ms cubic-bezier(.2,.7,.25,1),transform 240ms cubic-bezier(.2,.7,.25,1),opacity 200ms ease; }
.cb-header.has-navigation::after { transform:scaleY(1); opacity:1; }
.cb-flyout { position:absolute; z-index:1; top:100%; left:0; width:100%; color:var(--cb-light); }
.cb-flyout__inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(64px,10vw,160px); height:min(408px,calc(100dvh - 92px)); padding:42px 8vw 54px; overflow-y:auto; animation:cb-navigation-enter 240ms cubic-bezier(.2,.7,.25,1) both; }
.cb-flyout__eyebrow { margin:0 0 22px; color:#bcc5c8; font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; }
.cb-flyout a { color:inherit; text-decoration:none; transition:color 160ms ease; }
.cb-flyout a:hover { color:#fff; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.cb-flyout__feature { display:block; max-width:570px; font-size:clamp(32px,3.35vw,52px); font-weight:500; letter-spacing:-.055em; line-height:1.1; }
.cb-flyout__overview { display:inline-block; margin-top:30px; padding:8px 0; font-size:14px; color:#d0d7d9; }
.cb-flyout__secondary > a { display:block; width:fit-content; padding:8px 0; font-size:16px; line-height:1.35; }
.cb-flyout__pending { display:block; margin-top:8px; color:#d0d7d9; font-size:16px; line-height:1.4; }
.cb-flyout__pending small { display:block; margin-top:4px; color:#b8c3c7; font-size:11px; }
.cb-nav-backdrop { position:fixed; inset:0; z-index:19; background:rgba(12,18,23,.23); animation:cb-navigation-dim 200ms ease both; }
#concept-projects { scroll-margin-top:28px; }
@keyframes cb-navigation-enter { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
@keyframes cb-navigation-dim { from { opacity:0; } to { opacity:1; } }

@media (min-width:901px) {
  .cb-header:has(#nav-projects[aria-expanded="true"])::after { height:min(286px,calc(100dvh - 92px)); }
  .cb-header:has(#nav-projects[aria-expanded="true"]) #panel-projects .cb-flyout__inner { height:min(286px,calc(100dvh - 92px)); padding:34px 8vw 38px; }
  .cb-header:has(#nav-about[aria-expanded="true"])::after { height:min(316px,calc(100dvh - 92px)); }
  .cb-header:has(#nav-about[aria-expanded="true"]) #panel-about .cb-flyout__inner { height:min(316px,calc(100dvh - 92px)); padding:38px 8vw 42px; }
  .cb-flyout__inner { animation:cb-mega-menu-enter 180ms cubic-bezier(.22,.61,.36,1) both; }
}

@keyframes cb-mega-menu-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

@media (max-width:900px) {
  .cb-header::after { display:none; }
  .cb-global-nav { position:absolute; top:100%; right:0; left:0; display:none; max-height:calc(100dvh - 92px); overflow-y:auto; padding:14px 6vw 30px; background:var(--cb-surface-dark-alt); color:var(--cb-light); }
  .cb-global-nav.is-open { display:block; }
  .cb-nav-item { display:grid; grid-template-columns:minmax(0,1fr) 48px; border-bottom:1px solid rgba(245,246,247,.16); }
  .cb-nav-trigger { min-height:58px; font-size:14px; letter-spacing:.03em; opacity:1; }
  .cb-nav-toggle { display:grid; place-items:center; width:48px; min-height:48px; border:0; background:transparent; color:inherit; cursor:pointer; }
  .cb-nav-toggle::before { content:""; width:8px; height:8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 180ms ease; }
  .cb-nav-toggle[aria-expanded="true"]::before { transform:translateY(2px) rotate(225deg); }
  .cb-flyout { position:static; grid-column:1/-1; }
  .cb-flyout__inner { display:block; height:auto; overflow:visible; padding:12px 0 28px 14px; animation-duration:200ms; }
  .cb-flyout__feature { max-width:500px; font-size:30px; }
  .cb-flyout__eyebrow { margin-bottom:14px; }
  .cb-flyout__secondary { margin-top:28px; }
  .cb-flyout__secondary > a { display:flex; align-items:center; min-height:44px; padding:8px 0; font-size:15px; }
  .cb-flyout__overview { min-height:44px; margin-top:16px; }
  .cb-global-nav__contact { display:block; min-height:48px; margin-top:24px; text-align:center; line-height:22px; }
  .cb-nav-phone { display:flex; min-height:56px; padding:15px 0; border-bottom:1px solid rgba(245,246,247,.16); font-size:14px; letter-spacing:.03em; opacity:1; }
}

@media (max-width:620px) {
  .cb-global-nav { max-height:calc(100dvh - 76px); padding-right:22px; padding-left:22px; }
  .cb-flyout__feature { font-size:28px; }
}

@media (prefers-reduced-motion:reduce) {
  .cb-header,.cb-header::after,.cb-nav-trigger,.cb-nav-toggle::before,.cb-flyout a,.cb-menu span { transition:none; }
  .cb-flyout__inner,.cb-nav-backdrop { animation:none; }
}