/* DORQ — nav.css
   Fixed top navigation, mega menus and the mobile menu. */
  /* ============================ Navigation bar ============================ */

  /* Single source of truth for the bar height: the mobile menu sits directly
     beneath it and inner-page anchors offset by it. */
  :root { --nav-h: 72px; }

  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(4, 5, 7, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--hairline);
    font-family: 'Inter', system-ui, sans-serif;
  }
  .nav__inner {
    max-width: 1440px;
    margin: 0 auto;
    height: var(--nav-h);
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 24px;
  }

  /* Left — logo */
  .nav__logo { display: inline-flex; align-items: center; justify-self: start; padding: 6px; border-radius: 10px; transition: transform 220ms cubic-bezier(0.22, 0.8, 0.3, 1); }
  .nav__logo:hover { transform: scale(1.08) rotate(-4deg); }
  .nav__logo img { display: block; height: 34px; width: 34px; }
  .nav__logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

  /* Center — links */
  .nav__links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 38px;
  }
  .nav__item { position: static; display: inline-flex; }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    color: var(--orange);
    transition: color 200ms ease;
  }
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__item--open > .nav__link { color: #FFFFFF; }
  .nav__link:focus-visible { outline: none; }
  /* underline animates in from the center */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 2px; right: 2px; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms ease;
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  .nav__item--open > .nav__link::after { transform: scaleX(1); }
  .nav__caret { width: 9px; height: 9px; opacity: 0.75; transition: transform 220ms ease; }
  .nav__item--open .nav__caret { transform: rotate(180deg); }

  /* Right — CTA */
  .nav__cta { justify-self: end; display: inline-flex; }
  .btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--orange);
    color: #0A0B0D;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
    box-shadow: 0 0 0 rgba(240,78,35,0);
    transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
  }
  .btn-contact:hover,
  .btn-contact:focus-visible {
    background: var(--orange-hi);
    color: #0A0B0D;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(240,78,35,0.32);
    outline: none;
  }
  .btn-contact:focus-visible { box-shadow: 0 10px 26px rgba(240,78,35,0.32), 0 0 0 2px rgba(255,255,255,0.85); }

  /* ---- Mega menu ----
     All five panels render at the same position and are locked to the same
     height, so the menu reads as one persistent surface whose contents settle
     in as you move between tabs. */
  .mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(1040px, calc(100vw - 48px));
    padding-top: 14px;                 /* transparent bridge to keep hover intent */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .nav__item--open .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;                        /* the active panel always sits on top */
    transition: opacity 200ms ease;
  }
  .mega__card {
    height: 240px;                     /* uniform size across all five tabs */
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.15fr;
    gap: 8px 40px;
    padding: 30px 32px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.75), 0 2px 10px rgba(0,0,0,0.5);
    /* entrance used only when opening from a fully-closed menu */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }
  .nav__item--open .mega__card { opacity: 1; transform: translateY(0); }

  /* Inner content animates independently of the shell: when you move between
     tabs the surface holds still while the content settles into place. */
  .mega__card > * {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }
  .nav__item--open .mega__card > * { opacity: 1; transform: translateY(0); }

  /* Moving straight from one open tab to another: the shell snaps into place
     (no re-fade, no dip) while only the content transitions. */
  .nav--switching .nav__item--open .mega { transition: none; }
  .nav--switching .nav__item--open .mega__card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav--switching .nav__item--open .mega__card > * {
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }

  .mega__col { display: flex; flex-direction: column; justify-content: center; }
  .mega__heading {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(233,236,240,0.4);
  }
  .mega__entry {
    display: block;
    padding: 9px 0;
    color: #EDEFF2;
    transition: color 180ms ease, transform 180ms ease;
  }
  .mega__entry:hover { color: var(--orange); transform: translateX(2px); }
  .mega__entry b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.2; color: inherit; }
  .mega__entry span { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Featured panel */
  .mega__feature {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 12px;
    background:
      radial-gradient(120% 100% at 100% 0%, rgba(240,78,35,0.16) 0%, rgba(240,78,35,0) 55%),
      #131418;
    border: 1px solid rgba(240,78,35,0.16);
  }
  /* Promo copy, not a document heading: kept as a <p> so it stays out of the
     page's heading outline (it would otherwise sit above the <h1>). */
  .mega__feature .mega__ftitle { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: #FFFFFF; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mega__feature p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mega__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--orange);
    color: #0A0B0D;
    font-size: 14px;
    font-weight: 500;
    transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  }
  .mega__btn:hover { background: var(--orange-hi); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(240,78,35,0.3); color: #0A0B0D; }

  @media (max-width: 980px) {
    .nav__links { gap: 26px; }
    .nav__inner { padding: 0 20px; }
  }
  @media (max-width: 860px) {
    :root { --nav-h: 62px; }
    .nav__links, .nav__cta { display: none; }
    /* Two columns keep the logo and burger on one row, vertically centred.
       A single 1fr column pushed the burger onto a second row, so it spilled
       below the bar's bottom border. */
    .nav__inner { grid-template-columns: 1fr auto; padding: 0 16px; column-gap: 12px; }
    .nav__logo { padding: 4px; }
    .nav__logo img { height: 30px; width: 30px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav__link::after, .mega, .mega__card, .mega__card > *, .btn-contact, .mega__btn, .nav__caret { transition-duration: 1ms; }
  }


  /* ---- Mobile menu ---- */
  .nav__burger {
    display: none;
    justify-self: end;
    align-self: center;
    width: 44px; height: 44px;
    flex: none;
    border: 1px solid var(--hairline); border-radius: 10px;
    background: none; cursor: pointer;
    position: relative;
  }
  .nav__burger span {
    position: absolute; left: 11px; right: 11px; height: 2px;
    background: #EDEFF2; border-radius: 2px;
    transition: transform 250ms ease, opacity 200ms ease, top 250ms ease;
  }
  .nav__burger span:nth-child(1) { top: 14px; }
  .nav__burger span:nth-child(2) { top: 21px; }
  .nav__burger span:nth-child(3) { top: 28px; }
  html.mnav-open .nav__burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  html.mnav-open .nav__burger span:nth-child(2) { opacity: 0; }
  html.mnav-open .nav__burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

  .mnav {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 999;
    background: #050607;
    padding: 18px 24px 40px;
    overflow-y: auto;
    display: none;
    font-family: 'Inter', system-ui, sans-serif;
  }
  html.mnav-open .mnav { display: block; }
  html.mnav-open { overflow: hidden; }
  .mnav__group { border-bottom: 1px solid var(--hairline); }
  .mnav__head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 16px 2px;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 17px; font-weight: 600; color: #FFFFFF;
  }
  .mnav__head svg { width: 12px; height: 12px; color: var(--orange); transition: transform 220ms ease; }
  .mnav__group.open .mnav__head svg { transform: rotate(180deg); }
  .mnav__sub { display: none; padding: 0 2px 14px; }
  .mnav__group.open .mnav__sub { display: block; }
  /* 13px padding keeps each row at the 44px minimum touch-target size. */
  .mnav__sub a { display: block; padding: 13px 0; font-size: 15px; color: var(--muted); }
  .mnav__sub a:hover { color: var(--orange); }
  .mnav__link { display: block; padding: 16px 2px; border-bottom: 1px solid var(--hairline); font-size: 17px; font-weight: 600; color: #FFFFFF; }
  .mnav__cta { display: flex; margin-top: 26px; }
  .mnav__cta .btn-contact { flex: 1; justify-content: center; }
  @media (max-width: 860px) {
    .nav__burger { display: block; }
  }

  /* Current-page pill */
  .nav__link[aria-current="page"] { color: #FFFFFF; }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }