/* ==========================================================================
   HEADER / NAVIGATION — fixed top bar with logo, links and "Send a query"
   Behaviour (scroll shadow, mobile menu): assets/js/components/nav.js
   ========================================================================== */

.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
/* Added by JS once the page is scrolled */
.nav.scrolled {
  background: rgba(246, 244, 239, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); }

/* Logo + company name */
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 38px; height: 38px; }
.brand-name { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.brand-sub {
  display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 600;
}

/* Links */
.nav-links { display: flex; align-items: center; gap: 36px; font-size: 14.5px; font-weight: 500; }
.nav-links a:not(.btn) { position: relative; padding: 4px 0; }
.nav-links a:not(.btn)::after {                         /* underline grows on hover */
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links .btn { height: 42px; padding: 0 20px; font-size: 14px; }

/* Mobile menu button (two-line icon that turns into an X) */
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .3s; }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 25px; }
.nav.open .menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.open .menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---- Tablet & phone: links collapse into a drop-down panel ---- */
@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: var(--nav-height) 0 auto; flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); padding: 10px var(--gutter) 26px; box-shadow: 0 20px 30px -20px rgba(15, 39, 66, .25);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden; transition: all .35s var(--ease);
  }
  .nav.open .nav-links { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
  .nav-links a:not(.btn) { font-family: var(--serif); font-size: 26px; padding: 10px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin-top: 20px; }
  .nav.open { background: var(--paper); }
  .menu-btn { display: block; }
}