/* NUXA — production styles.
   The page content below is intentionally close to the exact design source
   (NUXA Website.dc.html): almost everything is styled with inline "style"
   attributes on each element, matching the original pixel-for-pixel design.
   This stylesheet only carries the small amount of *behavior* that used to
   live in the design tool's runtime (page switching, hover dropdowns). */

body {
  margin: 0;
  background: #F4F4F1;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #0F1C3F;
  text-decoration: none;
}

a:hover {
  color: oklch(0.55 0.09 210);
}

p {
  text-wrap: pretty;
}

input::placeholder,
textarea::placeholder {
  color: #5C647A;
  opacity: 1;
}

textarea {
  font-family: Arial, Helvetica, sans-serif;
}

form {
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* Single-page-app style page switching: only the current page's <section> is shown. */
.page {
  width: 1440px;
}

/* Header "Applications" / "About" hover dropdowns.
   The wrapping element keeps the same invisible bottom padding the original
   design used, so moving the mouse from the link down into the menu doesn't
   count as leaving the hover area. */
.nav-drop {
  position: relative;
}

/* !important is required here: each dropdown panel also carries an inline
   style="...display:flex;..." (from the original design markup), and an
   inline style always wins over a plain class rule, so without !important
   this would never actually hide. */
.dropdown-menu {
  display: none !important;
}

.nav-drop:hover .dropdown-menu {
  display: flex !important;
}

.dropdown-menu a:hover {
  background: #EDEEF6;
  color: #0F1C3F;
}

/* ============================================================
   Mobile responsive layer (generated) — everything above this
   point in the file is unchanged from the desktop design; these
   rules only take effect below 760px and override specific inline
   styles via !important + attribute-substring selectors, so the
   1440px desktop markup never has to be touched or duplicated.
   ============================================================ */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* the whole 1440px-wide desktop canvas becomes fluid */
  #desk { width: 100% !important; }
  .page { width: 100% !important; }

  /* every CSS Grid layout in the design (hero splits, 2/3/4-column
     feature grids, the footer, etc.) collapses to one column */
  [style*="display:grid"] { grid-template-columns: 1fr !important; }

  img { max-width: 100%; height: auto; }

  /* -------- header / mobile nav -------- */
  /* the header row itself needs position:relative so the absolutely-positioned
     mobile-open panel below anchors right under it, instead of under whatever
     positioned ancestor happens to be further up the tree */
  [style*="justify-content:space-between;padding:26px 100px;background:#F4F4F1;border-bottom:1px solid #E4E4DE;"] {
    position: relative !important;
  }

  .nav-links {
    display: none !important;
  }
  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #F4F4F1 !important;
    border-bottom: 1px solid #E4E4DE !important;
    box-shadow: 0 18px 30px rgba(15,28,63,0.12) !important;
    padding: 8px 0 16px !important;
    z-index: 30 !important;
  }
  .nav-links.mobile-open > a {
    padding: 14px 24px !important;
  }
  .nav-links.mobile-open .nav-drop {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-links.mobile-open .nav-drop > a {
    padding: 14px 24px !important;
  }
  /* on mobile the flyout becomes a plain static stacked sub-list, collapsed by
     default -- tapping the "Applications" / "About" label toggles it open
     (see site.js) instead of it always being expanded or navigating away */
  .nav-links.mobile-open .dropdown-menu {
    display: none !important;
    position: static !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 8px !important;
  }
  .nav-links.mobile-open .nav-drop.mobile-expanded .dropdown-menu {
    display: flex !important;
  }
  .nav-links.mobile-open .dropdown-menu a {
    padding-left: 48px !important;
  }
  /* rotate the little ▼ caret when the submenu is open, so it's clear it's a toggle */
  .nav-links.mobile-open .nav-drop > a span {
    transition: transform 0.15s ease;
  }
  .nav-links.mobile-open .nav-drop.mobile-expanded > a span {
    transform: rotate(180deg);
  }

  .hamburger {
    display: inline-flex !important;
  }

  [style*="font:900 17px"], [style*="font:700 17px"], [style*="font:400 17px"] { font-size: 15px !important; }
  [style*="font:900 18px"], [style*="font:700 18px"], [style*="font:400 18px"] { font-size: 16px !important; }
  [style*="font:900 19px"], [style*="font:700 19px"], [style*="font:400 19px"] { font-size: 17px !important; }
  [style*="font:900 20px"], [style*="font:700 20px"], [style*="font:400 20px"] { font-size: 18px !important; }
  [style*="font:900 21px"], [style*="font:700 21px"], [style*="font:400 21px"] { font-size: 19px !important; }
  [style*="font:900 22px"], [style*="font:700 22px"], [style*="font:400 22px"] { font-size: 16px !important; }
  [style*="font:900 23px"], [style*="font:700 23px"], [style*="font:400 23px"] { font-size: 16px !important; }
  [style*="font:900 24px"], [style*="font:700 24px"], [style*="font:400 24px"] { font-size: 16px !important; }
  [style*="font:900 25px"], [style*="font:700 25px"], [style*="font:400 25px"] { font-size: 16px !important; }
  [style*="font:900 26px"], [style*="font:700 26px"], [style*="font:400 26px"] { font-size: 16px !important; }
  [style*="font:900 27px"], [style*="font:700 27px"], [style*="font:400 27px"] { font-size: 16px !important; }
  [style*="font:900 34px"], [style*="font:700 34px"], [style*="font:400 34px"] { font-size: 20px !important; }
  [style*="font:900 38px"], [style*="font:700 38px"], [style*="font:400 38px"] { font-size: 22px !important; }
  [style*="font:900 46px"], [style*="font:700 46px"], [style*="font:400 46px"] { font-size: 27px !important; }
  [style*="font:900 48px"], [style*="font:700 48px"], [style*="font:400 48px"] { font-size: 28px !important; }
  [style*="font:900 50px"], [style*="font:700 50px"], [style*="font:400 50px"] { font-size: 29px !important; }
  [style*="font:900 54px"], [style*="font:700 54px"], [style*="font:400 54px"] { font-size: 31px !important; }
  [style*="font:900 60px"], [style*="font:700 60px"], [style*="font:400 60px"] { font-size: 35px !important; }
  [style*="font:900 62px"], [style*="font:700 62px"], [style*="font:400 62px"] { font-size: 36px !important; }
  [style*="font:900 64px"], [style*="font:700 64px"], [style*="font:400 64px"] { font-size: 37px !important; }
  [style*="font:900 68px"], [style*="font:700 68px"], [style*="font:400 68px"] { font-size: 39px !important; }
  [style*="font:900 82px"], [style*="font:700 82px"], [style*="font:400 82px"] { font-size: 40px !important; }

  [style*="padding:26px 100px;"] { padding: 26px 20px 26px 20px !important; }
  [style*="padding:104px 72px 104px 100px;"] { padding: 52px 20px 52px 20px !important; }
  [style*="padding:17px 30px;"] { padding: 17px 20px 17px 20px !important; }
  [style*="padding:48px;"] { padding: 24px 20px 24px 20px !important; }
  [style*="padding:112px 100px 0;"] { padding: 56px 20px 0px 20px !important; }
  [style*="padding:64px 100px 112px;"] { padding: 32px 20px 56px 20px !important; }
  [style*="padding:44px 40px 48px;"] { padding: 24px 20px 24px 20px !important; }
  [style*="padding:108px 100px;"] { padding: 54px 20px 54px 20px !important; }
  [style*="padding:36px 40px 40px 0;"] { padding: 24px 20px 24px 0px !important; }
  [style*="padding:36px 0 40px 40px;"] { padding: 24px 0px 24px 20px !important; }
  [style*="padding:72px 64px;"] { padding: 36px 20px 36px 20px !important; }
  [style*="padding:104px 100px 104px 72px;"] { padding: 52px 20px 52px 20px !important; }
  [style*="padding:104px 100px;"] { padding: 52px 20px 52px 20px !important; }
  [style*="padding:20px 38px;"] { padding: 20px 20px 20px 20px !important; }
  [style*="padding:80px 100px 40px;"] { padding: 40px 20px 24px 20px !important; }
  [style*="padding:96px 100px 64px;"] { padding: 48px 20px 32px 20px !important; }
  [style*="padding:0 100px 100px;"] { padding: 0px 20px 50px 20px !important; }
  [style*="padding:28px 28px 30px;"] { padding: 28px 28px 24px 28px !important; }
  [style*="padding:92px 72px 92px 100px;"] { padding: 46px 20px 46px 20px !important; }
  [style*="padding:38px 44px 42px 0;"] { padding: 24px 20px 24px 0px !important; }
  [style*="padding:38px 0 42px 44px;"] { padding: 24px 0px 24px 20px !important; }
  [style*="padding:104px 100px 112px;"] { padding: 52px 20px 56px 20px !important; }
  [style*="padding:96px 100px;"] { padding: 48px 20px 48px 20px !important; }
  [style*="padding:104px 100px 96px;"] { padding: 52px 20px 48px 20px !important; }
  [style*="padding:56px 56px 60px;"] { padding: 28px 20px 30px 20px !important; }
  [style*="padding:0 100px 112px;"] { padding: 0px 20px 56px 20px !important; }
  [style*="padding:56px 0;"] { padding: 28px 0px 28px 0px !important; }
  [style*="padding:32px;"] { padding: 24px 20px 24px 20px !important; }
  [style*="padding:44px 44px 48px 0;"] { padding: 24px 20px 24px 0px !important; }
  [style*="padding:44px 0 48px 44px;"] { padding: 24px 0px 24px 20px !important; }
  [style*="padding:96px 100px 88px;"] { padding: 48px 20px 44px 20px !important; }
  [style*="padding:0 100px 104px;"] { padding: 0px 20px 52px 20px !important; }
  [style*="padding:40px 44px 44px 0;"] { padding: 24px 20px 24px 0px !important; }
  [style*="padding:40px 0 44px 44px;"] { padding: 24px 0px 24px 20px !important; }
  [style*="padding:96px 72px 96px 100px;"] { padding: 48px 20px 48px 20px !important; }
  [style*="padding:96px 100px 96px 72px;"] { padding: 48px 20px 48px 20px !important; }
  [style*="padding:18px 36px;"] { padding: 18px 20px 18px 20px !important; }

  [style*="min-height:660px"] { min-height: 320px !important; }
  [style*="min-height:560px"] { min-height: 320px !important; }
  [style*="min-height:600px"] { min-height: 320px !important; }

  /* Company & Team page: the "founders" banner photo (Daniel + Patrick).
     On desktop it's a fixed 420px-tall crop with 100px side margins; on a
     390px phone that leaves almost no width, so object-fit:cover crops in
     hard on both sides and cuts off faces. object-fit:contain (tried
     earlier) fixed the cropping but made the two people tiny in the middle
     of a mostly-empty frame. The fix is to make the banner nearly full
     width with a height close to the photo's own aspect ratio (~3:2), so
     a plain object-fit:cover only trims a sliver off the sides instead of
     cutting into faces, and the subjects stay a normal, readable size. */
  [style*="height:420px;margin:0 100px 104px;overflow:hidden;background:#EDEEF6;"] {
    height: 250px !important;
    margin: 0 40px 40px !important;
  }
}

/* hamburger button: hidden on desktop, shown only inside the mobile media query above.
   flex-direction:column stacks the three bars (::before, span, ::after) into the
   familiar 3-line "menu" icon instead of laying them out side by side in a row. */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #C5C9D6;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #0F1C3F;
  border-radius: 1px;
}