/* ============================================================
   NEXVERTO TYPE SCALE — SINGLE SOURCE OF TRUTH
   Every page on nexverto.com loads this file. Heading sizes are
   defined HERE and nowhere else. Never add a font-size for a
   heading to a page's own <style> block again.

   Desktop (>=981px) and mobile (<=980px) each get their own
   scale. Same tags, same sizes, every page.
   ============================================================ */

:root{
  /* desktop scale */
  --nv-h1: 56px;
  --nv-h2: 38px;
  --nv-h3: 26px;
  --nv-h4: 20px;
  --nv-body: 16px;
  --nv-lead: 19px;   /* intro paragraph under an H1 */
  --nv-small: 14px;  /* minimum readable text */
  --nv-micro: 12.5px;/* labels, eyebrows, badges: the floor */
}

@media (max-width:980px){
  :root{
    /* mobile scale */
    --nv-h1: 34px;
    --nv-h2: 26px;
    --nv-h3: 20px;
    --nv-h4: 17px;
    --nv-body: 16px;
    --nv-lead: 17px;
    --nv-small: 14px;
    --nv-micro: 12.5px;
  }
}

/* Heading sizes. Page-level heading font-sizes were removed from
   per-page font-size rules that already exist in each page's
   inline <style> block, so the scale stays consistent without
   the only place heading sizes are defined. */
h1{ font-size: var(--nv-h1); line-height:1.06; }
h2{ font-size: var(--nv-h2); line-height:1.15; }
h3{ font-size: var(--nv-h3); line-height:1.25; }
h4{ font-size: var(--nv-h4); line-height:1.3; }

/* Body floor: nothing readable drops below 14px anywhere. */
body{ font-size: var(--nv-body); }

/* Keep decorative counters and separators out of the floor:
   they are generated content, not readable text. */

/* three verticals centred, our-work and about aligned right */
.nav-links{width:100%;align-items:center}
.nav-links .nav-push{margin-left:auto}



/* ---- nv-nav-three-part-alignment ------------------------------------------
   Three-part bar: wordmark left, item group centred, toggles right.

   .nav-links takes the free space between the two fixed ends and centres its
   own contents, so the six items read as one centred group rather than two
   clusters pinned to opposite edges.

   .nav-push previously used margin-left:auto, which produced a ~480px gulf
   between Studio and Industries. It is now a fixed two-gap break: wide enough
   to separate the commercial routes from the rest, narrow enough to stay one
   group. 34px is the inter-item gap, so this reads as exactly two blank slots.
*/
nav.site .wrap { display: flex; align-items: center; gap: 0; }
.wordmark { flex: 0 0 auto; }
.nav-side { flex: 0 0 auto; margin-left: auto; }
.nav-links {
  flex: 1 1 auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
  margin: 0 28px;
}
.nav-links .nav-push { margin-left: 34px; }  /* +34px flex gap = two blank slots */

@media (max-width: 1180px) {
  .nav-links { gap: 24px; margin: 0 18px; }
  .nav-links .nav-push { margin-left: 24px; }
}
@media (max-width: 1000px) {
  .nav-links { gap: 18px; margin: 0 12px; }
  .nav-links .nav-push { margin-left: 18px; }
}


/* ---- nv-nav-second-group ---------------------------------------------
   Two groups: what you buy, then how you orient yourself. The gap alone was
   easy to miss, so the break gets a hairline and the second group sits a
   shade lighter. The commercial routes keep the weight. */
.nav-links .nav-push {
  position: relative;
  margin-left: 78px;
  padding-left: 78px;
}
.nav-links .nav-push::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -39px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--rule);
}
.nav-links .nav-push ~ li > a,
.nav-links .nav-push > a { opacity: .78; }
.nav-links .nav-push ~ li > a:hover,
.nav-links .nav-push > a:hover { opacity: 1; }

@media (max-width: 1180px) {
  .nav-links .nav-push { margin-left: 48px; padding-left: 48px; }
}
@media (max-width: 1000px) {
  .nav-links .nav-push { margin-left: 32px; padding-left: 32px; }
}