/* Qureoon navigation. Mechanics and measures from the Halden header. */
.qn {
  --ink: #0b1013;
  --panel: rgba(14, 19, 23, 0.84);
  --line: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.065);
  --text: #ffffff;
  --soft: rgba(255, 255, 255, 0.74);
  --muted: rgba(255, 255, 255, 0.60);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph: 0.5s;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  font-family: "Geist", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}
.qn-pad { padding-top: 76px; }
.qn * { box-sizing: border-box; }
.qn a { color: inherit; text-decoration: none; }
.qn button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.qn :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.qn-bar {
  height: 76px;
  padding: 0 clamp(20px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.qn-logo {
  width: 30px; height: 26px;
  display: inline-flex;
  justify-self: start;
  animation: qnFadeDown 0.9s var(--ease) 0.35s backwards;
}
.qn-logo svg { width: 30px; height: 26px; display: block; }
.qn-nav { animation: qnFadeIn 0.9s ease 0.45s backwards; }
.qn-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.qn-trigger, .qn-plain {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0; font-size: 14.5px; color: var(--soft);
  transition: color 0.25s ease;
}
.qn-trigger:hover, .qn-plain:hover, .qn-trigger[aria-expanded="true"] { color: #fff; }
.qn-trigger svg { width: 8px; height: 5px; transition: transform 0.35s var(--ease); }
.qn-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.qn-actions {
  justify-self: end;
  display: flex; gap: 10px; align-items: center;
  animation: qnFadeDown 0.9s var(--ease) 0.55s backwards;
}
.qn-cta {
  height: 32px; padding: 0 15px; border-radius: 999px;
  background: #fff; color: #0b0f12; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center;
  transition: 0.25s;
}
.qn-cta:hover { background: #e9eef0; transform: translateY(-1px); }
.qn-menu {
  display: none;
  width: 36px; height: 32px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
}
.qn-menu svg { width: 16px; height: 16px; display: block; }
.qn-dd {
  --x: 0px; --w: 400px; --h: 300px; --s: 0.97;
  position: absolute; top: 64px; left: 0;
  width: var(--w); height: var(--h);
  transform: translateX(var(--x)) scale(var(--s));
  transform-origin: 50% 0;
  opacity: 0; pointer-events: none;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.65), 0 2px 10px rgba(0,0,0,0.2);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  overflow: hidden;
  transition: transform var(--morph) var(--ease), width var(--morph) var(--ease), height var(--morph) var(--ease), opacity 0.3s ease;
}
.qn-dd.open { --s: 1; opacity: 1; pointer-events: auto; }
.qn-dd.instant { transition: opacity 0.3s ease, transform var(--morph) var(--ease); }
.qn-dd.instant.snap { transition: none; }
.qn-panel {
  position: absolute; top: 0; left: 0;
  opacity: 0; visibility: hidden; filter: blur(8px); transform: translateX(0);
  transition: opacity 0.26s ease, transform var(--morph) var(--ease), filter 0.4s ease, visibility 0s linear var(--morph);
}
.qn-panel[data-state="exit-left"] { transform: translateX(-56px); }
.qn-panel[data-state="exit-right"] { transform: translateX(56px); }
.qn-panel[data-state="active"] {
  opacity: 1; visibility: visible; filter: blur(0); transform: translateX(0);
  transition: opacity 0.36s ease 0.06s, transform var(--morph) var(--ease), filter 0.45s ease 0.04s, visibility 0s;
}
.qn-panel.snap { transition: none !important; }
#p-services { width: 664px; height: 358px; display: grid; grid-template-columns: 236px 1fr; }
.qn-d-list { display: flex; flex-direction: column; height: 100%; padding: 8px; gap: 2px; }
.qn-d-item {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 12px; border-radius: 10px; transition: background 0.3s;
}
.qn-d-item.is-active { background: var(--hover); }
.qn-d-item strong { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.qn-d-item span, .qn-card span { font-size: 13px; line-height: 1.42; color: var(--muted); }
.qn-d-media { position: relative; overflow: hidden; border-radius: 0 15px 15px 0; }
.qn-d-media::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 70px; z-index: 2;
  background: linear-gradient(to right, rgba(14,19,23,0.55), rgba(14,19,23,0));
}
.qn-d-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); filter: blur(10px);
  transition: opacity 0.6s ease, transform 0.9s var(--ease), filter 0.6s ease;
}
.qn-d-media img.is-active { opacity: 1; transform: scale(1); filter: blur(0); z-index: 1; }
#p-engage { width: 446px; height: 308px; padding: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.qn-card {
  position: relative; overflow: hidden; border-radius: 10px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; isolation: isolate; min-height: 0;
}
.qn-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 0.9s var(--ease), filter 0.5s;
}
.qn-card:hover img, .qn-card:focus-visible img { transform: scale(1.05); filter: brightness(1.08); }
.qn-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,11,13,0.88) 0%, rgba(8,11,13,0.35) 38%, rgba(8,11,13,0) 60%);
}
.qn-card strong { font-size: 15.5px; font-weight: 500; margin-bottom: 5px; }
#p-sectors { width: 232px; height: 218px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.qn-r {
  flex: 1; display: flex; align-items: center;
  padding: 0 12px; border-radius: 9px; font-size: 15px;
  transition: background 0.25s;
}
.qn-r:hover, .qn-r:focus { background: var(--hover); }
.qn-sheet {
  display: none;
  position: absolute; top: 68px; left: 12px; right: 12px;
  padding: 10px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  max-height: calc(100svh - 90px); overflow: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: 50% 0;
  transition: opacity 0.3s ease, transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.qn-sheet.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.45s var(--ease), visibility 0s; }
.qn-sheet h3 {
  font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  margin: 10px 12px 6px;
}
.qn-sheet a { display: block; padding: 10px 12px; border-radius: 9px; font-size: 15px; }
.qn-sheet a:hover { background: var(--hover); }
@keyframes qnFadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qnFadeIn { from { opacity: 0; } }
body.locked .wordmark,
body.locked .phone-nav { display: none !important; }
@media (max-width: 860px) {
  .qn-bar { grid-template-columns: 1fr auto; }
  .qn-nav { display: none; }
  .qn-menu { display: inline-flex; }
  .qn-sheet { display: block; }
}
@media (min-width: 861px) {
  .qn-sheet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qn { --morph: 0.01s; }
  .qn, .qn * { animation-duration: 0.01s !important; animation-delay: 0s !important; }
  .qn-panel, .qn-d-media img { filter: none !important; }
}