/* NAVIGATION STORYBOARD
 *   0ms  Full-width header extension expands; active content fades in without scaling.
 * 250ms  Extension and menu settle together on the content grid.
 * Close  Both fade/retract over 150ms; content becomes inert immediately.
 * Motion values follow Transitions Dev / Transitions Polish.
 */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* All navigation edges share the page's twelve tracks and gutter token.
   Only opacity animates on content: scaling would break grid alignment. */
header{background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;border-bottom:1px solid var(--line)}
header>.container{position:static}
.nav-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);height:64px;background:transparent;border:0}
.nav-row>.wordmark{grid-column:1/3;min-width:0}
.nav-row .umbra-logo{max-width:100%}
.nav-row>nav{display:contents}
.nav-row nav button{width:100%;min-width:0;padding:10px 0;justify-content:flex-start;border-radius:0;gap:8px;font-size:14px}
.nav-row nav button:nth-child(1){grid-column:3/5}
.nav-row nav button:nth-child(2){grid-column:5/7}
.nav-row nav button:nth-child(3){grid-column:7/9}
.nav-row nav button:nth-child(4){grid-column:9/11}
.nav-row>.use-button{grid-column:11/13;margin:0;width:100%;height:32px;min-height:32px;align-self:center;padding:0 12px;white-space:nowrap;border-radius:6px;font-size:14px;line-height:20px;font-weight:var(--weight-emphasis)}
.nav-row>.use-button span{margin-left:8px}
.menus{position:absolute;top:100%;left:0;right:0;width:100%;height:0;overflow:hidden;pointer-events:none;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;box-shadow:inset 0 -1px var(--line);transition:height var(--dropdown-close-dur) var(--dropdown-ease)}
.nav-open .menus{pointer-events:auto;transition-duration:var(--dropdown-open-dur)}
.menu-panel,.menu-panel[hidden]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));position:absolute;left:0;right:0;top:0;width:100%;max-width:var(--page);margin-inline:auto;padding:24px;column-gap:var(--gap);row-gap:24px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;visibility:visible;overflow:visible;max-height:none}
.menu-card{grid-column:span 4;min-width:0;width:100%;border-radius:12px}
.menu-card>span:not(.menu-icon):not(.menu-arrow){min-width:0;overflow-wrap:anywhere}
.menu-panel.t-dropdown,.menu-panel.t-dropdown.is-closing{transform:none;opacity:0;pointer-events:none;transition:opacity var(--dropdown-close-dur) var(--dropdown-ease);will-change:opacity}
.menu-panel.t-dropdown.is-open{transform:none;opacity:1;pointer-events:auto;transition-duration:var(--dropdown-open-dur)}
.nav-backdrop{transition:opacity var(--dropdown-close-dur) var(--dropdown-ease),visibility 0s var(--dropdown-close-dur)}
.nav-open .nav-backdrop{transition-duration:var(--dropdown-open-dur),0s;transition-delay:0s}
[data-theme="dark"] header{background:rgba(16,16,16,.96)}
[data-theme="dark"] .nav-row{background:transparent}
[data-theme="dark"] .menus{background:rgba(16,16,16,.96)}
[data-theme="dark"] .menu-panel,[data-theme="dark"] .menu-panel[hidden]{background:transparent;box-shadow:none;border:0}
@media(max-width:900px) and (min-width:621px){.nav-row nav button{font-size:12px;gap:5px}.nav-row>.use-button{font-size:12px}.nav-row>.use-button span{display:none}}
@media(max-width:620px){
 .nav-row{height:auto;min-height:110px;padding-top:18px;row-gap:10px;padding-bottom:12px}
 .nav-row>.wordmark{grid-column:1/5;grid-row:1}
 .nav-row>.use-button{grid-column:9/13;grid-row:1;font-size:11px}
 .nav-row>.use-button span{display:none}
 .nav-row nav button{grid-row:2;font-size:11px;padding:9px 0;gap:5px}
 .nav-row nav button:nth-child(1){grid-column:1/4}
 .nav-row nav button:nth-child(2){grid-column:4/7}
 .nav-row nav button:nth-child(3){grid-column:7/10}
 .nav-row nav button:nth-child(4){grid-column:10/13}
 .menus{left:0;right:0}
 .menu-panel,.menu-panel[hidden]{padding:16px 20px;column-gap:var(--gap);row-gap:12px;max-height:calc(100dvh - 140px);overflow-y:auto}
 .menu-card{grid-column:span 6;padding:10px}
}
@media(prefers-reduced-motion:reduce){.menus,.nav-open .menus,.menu-panel.t-dropdown,.menu-panel.t-dropdown.is-closing,.nav-backdrop,.nav-open .nav-backdrop{transition:none}}

/* A compact navigation group, with every trigger anchored to a column. */
@media(min-width:1440px){
 .nav-row nav button{font-size:14px;letter-spacing:normal}
 .nav-row nav button:nth-child(1){grid-column:3/4}
 .nav-row nav button:nth-child(2){grid-column:4/5}
 .nav-row nav button:nth-child(3){grid-column:5/6}
 .nav-row nav button:nth-child(4){grid-column:6/7}
}
.nav-row nav button,.nav-row nav button:hover,.nav-row nav button[aria-expanded=true],[data-theme="dark"] .nav-row nav button,[data-theme="dark"] .nav-row nav button:hover,[data-theme="dark"] .nav-row nav button[aria-expanded=true]{background:transparent}
.nav-row nav button{min-height:32px;height:32px;line-height:20px;padding-block:6px}
.nav-row nav button[aria-expanded=true]{color:var(--ink)}
.menu-card{min-height:88px;border-radius:12px;padding:20px;align-items:center}
.menu-title{font-weight:var(--weight-emphasis)}
.menu-description{line-height:1.4}
@media(max-width:620px){.menu-card{padding:12px;min-height:80px}}

/* WNZ-0: 64px shell, 14/20 labels and compact 32px action. */
.nav-row nav button{font-weight:var(--weight-regular);color:#737373;transition:color 180ms ease}
.nav-row nav button:hover,.nav-row nav button[aria-expanded=true]{color:var(--ink)}
.nav-row>.use-button{justify-self:end;width:auto;transition:background-color 180ms ease}
.nav-row>.use-button span{display:none}
.nav-row>.use-button:hover{background:#383838}
[data-theme="dark"] .nav-row nav button{color:#a1a1a1}
[data-theme="dark"] .nav-row nav button:hover,[data-theme="dark"] .nav-row nav button[aria-expanded=true]{color:#ededed}
[data-theme="dark"] .nav-row>.use-button:hover{background:#d4d4d4}
@media(max-width:620px){.nav-row{min-height:110px}.nav-row>.use-button{font-size:12px}.nav-row nav button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.nav-row nav button,.nav-row>.use-button{transition:none}}

/* Logo occupies the first track; menu triggers start one track earlier. */
.nav-row>.wordmark{grid-column:1/2;width:100%}
.nav-row .umbra-logo{width:100%;height:auto}
@media(min-width:621px){
 .nav-row nav button:nth-child(1){grid-column:2/4}
 .nav-row nav button:nth-child(2){grid-column:4/6}
 .nav-row nav button:nth-child(3){grid-column:6/8}
 .nav-row nav button:nth-child(4){grid-column:8/10}
}
@media(min-width:1440px){
 .nav-row nav button:nth-child(1){grid-column:2/3}
 .nav-row nav button:nth-child(2){grid-column:3/4}
 .nav-row nav button:nth-child(3){grid-column:4/5}
 .nav-row nav button:nth-child(4){grid-column:5/6}
}
@media(max-width:620px){.nav-row>.wordmark{grid-column:1/5}}

/* Continue the page's dot field through the navigation surface. */
header{background-image:radial-gradient(#dedede .65px,transparent .65px);background-size:12px 12px}
[data-theme="dark"] header{background-image:radial-gradient(#303030 .65px,transparent .65px);background-size:12px 12px}

/* Center the navigation group on the page grid with equal topic spacing. */
@media(min-width:621px){
 .nav-row>nav{display:grid;grid-column:3/11;grid-row:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);width:100%;padding:0}
 .nav-row nav button:nth-child(n){grid-column:auto;justify-content:center;gap:8px}
 .nav-row>.wordmark,.nav-row>.use-button{grid-row:1}
}
@media(min-width:1440px){
 .nav-row>nav{grid-column:5/9}
}
@media(max-width:620px){.nav-row nav button{justify-content:center}}

/* Align the visible lettering and logo to one horizontal centerline. */
.nav-row{align-items:center}
.nav-row>.wordmark,.nav-row>nav,.nav-row>.use-button{align-self:center}
.nav-row nav button,.nav-row>.use-button{display:flex;align-items:center;justify-content:center}
.nav-row .nav-label,.nav-row>.use-button .nav-label{display:block;margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}

/* Quiet translucent navigation surface over the page's dot pattern. */
header{background:rgba(242,242,242,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
[data-theme="dark"] header{background:rgba(10,10,10,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Navigation labels without dot indicators. */
.nav-row nav button::after{content:none}

/* Light navigation blends into the white page without the dot field. */
:root:not([data-theme="dark"]) header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Products reference cards: fixed 320 × 76, with compact type and icons. */
#menu-products{display:flex;justify-content:center;gap:24px;padding-block:24px;flex-wrap:wrap}
#menu-products .menu-card{flex:0 1 320px;width:320px;max-width:100%;height:76px;min-height:76px;padding:12px 24px;gap:20px;border-radius:24px;box-shadow:0 1px 2px #00000006}
#menu-products .product-icon{width:28px;height:32px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:32px;color:var(--ink)}
#menu-products .product-code{font-size:20px}
#menu-products .menu-title{font-size:16px;line-height:24px;font-weight:var(--weight-emphasis)}
#menu-products .menu-description{font-size:12px;line-height:16px;margin-top:4px}
@media(max-width:620px){#menu-products{gap:12px;padding-block:16px}}

/* Keep the divider inside the navbar's eight-pixel layout height. */
header{border-bottom:0;box-shadow:inset 0 -1px var(--line)}
@media(max-width:620px){.nav-row{height:112px;min-height:112px;padding-block:16px;row-gap:16px}}

/* Only the hero entrance sequence is animated. Controls stay static on hover. */
.nav-row nav button,.nav-row>.use-button{transition:none}
.nav-row nav button:hover{color:#737373}
[data-theme="dark"] .nav-row nav button:hover{color:#a1a1a1}
.nav-row>.use-button:hover,.button.primary:hover{background:#171717}
[data-theme="dark"] .nav-row>.use-button:hover,[data-theme="dark"] .button.primary:hover{background:#ededed}

/* Account actions: primary and secondary pills using the approved grayscale. */
.nav-actions{grid-column:9/13;grid-row:1;justify-self:end;align-self:center;display:flex;align-items:center;gap:8px}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border:0;border-radius:999px;font-size:var(--type-small);font-weight:var(--weight-emphasis);line-height:16px;white-space:nowrap;transition:none}
.nav-cta .nav-label{display:block;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.nav-cta-primary{background:var(--umbra-gray-6);color:var(--umbra-gray-0)}
.nav-cta-secondary{background:var(--umbra-gray-1);color:var(--umbra-gray-5)}
[data-theme="dark"] .nav-cta-primary{background:var(--umbra-gray-0);color:var(--umbra-gray-6)}
[data-theme="dark"] .nav-cta-secondary{background:var(--umbra-gray-5);color:var(--umbra-gray-0)}
.nav-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:621px) and (max-width:1439px){.nav-row>nav{grid-column:3/9}}
@media(min-width:1440px){.nav-actions{grid-column:10/13}}
@media(max-width:620px){.nav-actions{grid-column:5/13}}

/* Divider appears only after scrolling. Navigation topics remain inactive. */
header{box-shadow:none}
header.is-scrolled{box-shadow:inset 0 -1px var(--line)}

/* Desktop navbar: 60% opaque surface; contents remain fully opaque. */
@media(min-width:901px){
 :root:not([data-theme="dark"]) header{background:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 [data-theme="dark"] header{background:rgba(10,10,10,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}

/* Requested navy text on the light desktop navigation surface. */
@media(min-width:901px){
 :root:not([data-theme="dark"]) .nav-row nav button,
 :root:not([data-theme="dark"]) .nav-cta-secondary{color:#000724}
}

/* A faint divider keeps the glass navbar edge unobtrusive. */
@media(min-width:901px){
 header.is-scrolled{box-shadow:inset 0 -1px rgba(0,0,0,.035)}
 [data-theme="dark"] header.is-scrolled{box-shadow:inset 0 -1px rgba(255,255,255,.045)}
}

/* Local contrast treatment over the blue business band; not a theme change. */
@media(min-width:901px){
 :root:not([data-theme="dark"]) header.is-over-blue{background:rgba(0,0,255,.9);box-shadow:inset 0 -1px rgba(255,255,255,.12);color:#fff}
 header.is-over-blue .umbra-logo{filter:brightness(0) invert(1)}
 :root:not([data-theme="dark"]) header.is-over-blue .nav-row nav button{color:#fff}
 :root:not([data-theme="dark"]) header.is-over-blue .nav-cta-primary{background:#fff;color:#171717}
 :root:not([data-theme="dark"]) header.is-over-blue .nav-cta-secondary{background:#e4e4e4;color:#171717}
 header.is-over-blue .nav-cta:focus-visible,header.is-over-blue .wordmark:focus-visible{outline-color:#fff}
}