/* ==========================================================================
   SITE NAV — the one header used on every page.
   A floating glass bar that is always visible, a sliding ink highlight that
   follows the pointer and rests on the current page, and a "Quorel People"
   compact People menu. Loaded after site.css on every page.
   ========================================================================== */
.qn { --qn-ease: cubic-bezier(.22, 1, .36, 1); --qn-blue: #007cfe; --qn-violet: #6a31ee; --qn-leaf: #5cb615; --qn-orange: #ff8a00; }

/* Always-on glass bar (overrides the transparent-until-scrolled behaviour and on-ink variants). */
.site-header.qn::before { opacity: 1 !important; background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 10px 30px -18px rgb(30 50 110 / 30%); transition: box-shadow 400ms var(--qn-ease), background-color 400ms ease; }
.site-header.qn[data-scrolled='true']::before { box-shadow: 0 1px 2px rgb(16 24 40 / 5%), 0 18px 40px -20px rgb(30 50 110 / 38%); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.site-header.qn .lockup .logo-light { display: block; }
.site-header.qn .lockup .logo-dark { display: none; }
:root[data-theme='dark'] .site-header.qn .lockup .logo-light { display: none; }
:root[data-theme='dark'] .site-header.qn .lockup .logo-dark { display: block; }
.site-header.qn .nav-links a:not(.btn):not(.qn-item), .site-header.qn .nav-links .qn-link { color: var(--ink-2); }
@media (min-width: 901px) { .site-header.qn .nav-mobile-only { display: none !important; } .site-header.qn .nav-end .hide-sm { display: inline-flex; } }

/* Brand rule along the bar's bottom edge, drawn once on load. */
.site-header.qn::after { content: ''; position: absolute; z-index: 0; left: max(8px, calc((100% - var(--shell-wide)) / 2 + var(--gutter) - 14px) + 22px); right: max(8px, calc((100% - var(--shell-wide)) / 2 + var(--gutter) - 14px) + 22px);
  bottom: 6px; height: 2px; border-radius: 2px; pointer-events: none; opacity: .7;
  background: linear-gradient(90deg, var(--qn-blue) 0 25%, var(--qn-leaf) 25% 50%, var(--qn-orange) 50% 75%, var(--qn-violet) 75%);
  transform-origin: left; animation: qn-rule 1100ms var(--qn-ease) 200ms backwards; }
@keyframes qn-rule { from { transform: scaleX(0); } }

/* --- Desktop links -------------------------------------------------------- */
@media (min-width: 901px) {
  .qn .nav-links { position: relative; isolation: isolate; gap: 4px; }
  .qn-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 10px; background: none;
    font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: color 220ms ease; }
  .qn-link:hover, .qn-link[aria-current='page'], .qn-dd.is-open > .qn-people-link, .qn-dd.is-open > .qn-dd-btn, .qn-dd.is-current > .qn-people-link, .qn-dd.is-current > .qn-dd-btn { color: var(--ink); }
  .qn-link[aria-current='page'], .qn-dd.is-current > .qn-people-link { font-weight: 600; }
  .qn-link:focus-visible, .qn-dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .qn-dd-btn { display:inline-flex; align-items:center; justify-content:center; padding:9px 10px 9px 4px; border:0; border-radius:0 10px 10px 0; background:none; font:inherit; font-size:var(--fs-md); color:var(--ink-2); cursor:pointer; transition:color 220ms ease; }
  .qn-dd-btn svg { width: 15px; height: 15px; transition: transform 200ms var(--qn-ease); }
  .qn-dd.is-open .qn-dd-btn svg { transform: rotate(180deg); }
  /* Sliding highlight behind the hovered / current link. */
  .qn-ink { position: absolute; z-index: 0; top: 50%; left: 0; height: 38px; width: var(--w, 0); border-radius: 10px; pointer-events: none;
    background: color-mix(in srgb, var(--accent) 9%, transparent); transform: translate(var(--x, 0), -50%); opacity: var(--o, 0);
    transition: transform 380ms var(--qn-ease), width 380ms var(--qn-ease), opacity 240ms ease; }
  .qn-ink::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: -6px; height: 2px; border-radius: 2px; background: var(--accent); opacity: var(--cur, 0); transition: opacity 240ms ease; }
  .site-header.qn .nav-links a[aria-current='page']::after { display: none; }

  /* --- People menu -------------------------------------------------------- */
  .qn-dd { position: relative; display:inline-flex; align-items:center; }
  .qn-dd .qn-people-link { padding-right:4px; border-radius:10px 0 0 10px; }
  .qn-panel { position: absolute; z-index: 70; top: calc(100% + 16px); left: 50%; width: 360px; max-width:calc(100vw - 32px); display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px;
    border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 2px 4px rgb(16 24 40 / 5%), 0 30px 60px -24px rgb(30 50 110 / 40%);
    transform: translate(-50%, -6px); transform-origin: 30% 0; opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 200ms var(--qn-ease), opacity 200ms ease, visibility 0s linear 200ms; }
  .qn-dd.is-open .qn-panel { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .qn-items { display: grid; gap: 2px; margin: 0; padding: 4px; list-style: none; }
  .qn-item { --c: var(--qn-blue); display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background-color 220ms ease; }
  .qn-item--violet { --c: var(--qn-violet); } .qn-item--leaf { --c: #3f9a10; } .qn-item--orange { --c: var(--qn-orange); }
  .qn-item:hover, .qn-item:focus-visible, .qn-item[aria-current='page'] { background: color-mix(in srgb, var(--c) 8%, transparent); outline: none; }
  .qn-item-ico { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); transition: transform 300ms var(--qn-ease), background-color 220ms ease, color 220ms ease; }
  .qn-item-ico svg { width: 20px; height: 20px; }
  .qn-item:hover .qn-item-ico, .qn-item[aria-current='page'] .qn-item-ico { color: #fff; background: var(--c); transform: rotate(-6deg) scale(1.05); }
  .qn-item b { display: block; font-size: 14.5px; font-weight: 650; }
  .qn-item small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
  /* Items cascade in when the panel opens. */
  .qn-dd.is-open .qn-items li { animation: qn-item 200ms var(--qn-ease) backwards; animation-delay: calc(20ms + var(--i) * 25ms); }
  @keyframes qn-item { from { opacity: 0; transform: translateX(10px); } }
}

/* CTA arrow */
.qn-cta { gap: 8px; }
.qn-cta svg { width: 15px; height: 15px; transition: transform 300ms var(--qn-ease); }
.qn-cta:hover svg { transform: translateX(3px); }

/* Entrance: the bar's contents settle in once per page load. */
.qn .lockup, .qn .nav-links > .qn-link, .qn .nav-links > .qn-dd, .qn .nav-end > * { animation: qn-in 600ms var(--qn-ease) backwards; }
.qn .nav-links > :nth-child(3) { animation-delay: 60ms; } .qn .nav-links > :nth-child(4) { animation-delay: 100ms; } .qn .nav-links > :nth-child(5) { animation-delay: 140ms; }
.qn .nav-links > :nth-child(6) { animation-delay: 180ms; } .qn .nav-links > :nth-child(7) { animation-delay: 220ms; } .qn .nav-end > * { animation-delay: 260ms; }
@keyframes qn-in { from { opacity: 0; transform: translateY(-8px); } }

/* --- Mobile sheet: the People menu becomes an accordion ------------------ */
@media (max-width: 900px) {
  .qn-ink { display: none; }
  .qn-dd { display:grid; grid-template-columns:1fr auto; align-items:center; }
  .qn-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: var(--fs-lg); color: var(--ink-2); text-align: left; cursor: pointer; text-decoration: none; }
  .qn-dd-btn { display:flex; align-items:center; justify-content:center; width:44px; min-height:48px; padding:var(--s-3) 0; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; color:var(--ink-2); cursor:pointer; }
  .qn-dd-btn svg { width: 18px; height: 18px; transition: transform 200ms var(--qn-ease); }
  .qn-dd.is-open .qn-dd-btn svg { transform: rotate(180deg); }
  .qn-panel { grid-column:1/-1; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 200ms var(--qn-ease); }
  .qn-panel > * { min-height: 0; }
  .qn-dd.is-open .qn-panel { grid-template-rows: 1fr; }
  .qn-panel { grid-template-columns: 1fr; }
  .qn-items { margin: 0; padding: 6px 0 10px; list-style: none; overflow: hidden; }
  .qn-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border: 0 !important; font-size: var(--fs-md) !important; color: var(--ink) !important; }
  .qn-item-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--qn-blue); background: color-mix(in srgb, var(--qn-blue) 10%, transparent); }
  .qn-item--violet .qn-item-ico { color: var(--qn-violet); background: color-mix(in srgb, var(--qn-violet) 10%, transparent); }
  .qn-item--leaf .qn-item-ico { color: #3f9a10; background: color-mix(in srgb, #3f9a10 10%, transparent); }
  .qn-item--orange .qn-item-ico { color: var(--qn-orange); background: color-mix(in srgb, var(--qn-orange) 10%, transparent); }
  .qn-item-ico svg { width: 18px; height: 18px; }
  .qn-item small { display: block; font-size: 12.5px; color: var(--ink-3); }
}

@media (prefers-reduced-motion: reduce) {
  .qn *, .site-header.qn::after { animation: none !important; transition: none !important; }
}

.site-header.qn .qn-item b { color: var(--ink); }

/* Never wrap a label onto two lines; tighten instead as the bar narrows. */
.site-header.qn .qn-link, .site-header.qn .nav-end .btn, .site-header.qn .lockup { white-space: nowrap; flex-shrink: 0; }
.site-header.qn .nav-row { gap: clamp(10px, 1.6vw, 28px); }
@media (min-width: 901px) and (max-width: 1240px) {
  .site-header.qn .qn-link { padding: 8px 9px; font-size: 14.5px; }
  .site-header.qn .nav-end { gap: 8px; }
  .site-header.qn .lockup img { width: 104px; height: auto; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .site-header.qn .nav-end .btn-ghost { display: none !important; }
  .site-header.qn .qn-link { padding: 8px 7px; font-size: 14px; }
  .site-header.qn .qn-cta svg { display: none; }
}

/* Header buttons: one look on every page (page-level styles used to restyle
   them for dark heroes, which left them invisible on the light bar). */
.site-header.qn .nav-end .btn-primary { color: #fff !important; background: linear-gradient(180deg, #2f78ff, #1c5ff0) !important; border: 1px solid #1a56dc !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 8px 18px -10px rgb(28 95 240 / 70%) !important; }
.site-header.qn .nav-end .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 12px 24px -10px rgb(28 95 240 / 80%) !important; }
.site-header.qn .nav-end .btn-ghost { color: var(--ink) !important; background: var(--surface) !important; border: 1px solid var(--line-2) !important; }
.site-header.qn .nav-end .btn-ghost:hover { border-color: var(--accent) !important; color: var(--accent-ink) !important; }
.site-header.qn .icon-btn { color: var(--ink-2) !important; background: var(--surface) !important; border-color: var(--line-2) !important; }
@media (max-width: 900px) {
  .site-header.qn .nav-links .btn-primary { color: #fff !important; }
  .site-header.qn .qn-items { padding: 0; }
  .site-header.qn .qn-dd.is-open .qn-items { padding: 6px 0 10px; }
  .site-header.qn .qn-panel { padding: 0; margin: 0; border: 0; box-shadow: none; background: none; }
}