/* ==========================================================================
   NodApproved — custom overrides (nav, footer, work filter, pills)
   Loaded after nodapproved.webflow.css. Hand-authored, not from Webflow.
   ========================================================================== */

/* ---------- Navbar: keep link DOM order (Webflow sets order:1 on current) -- */
.navbar-component .nav-menu-2 .w-nav-link { order: 0 !important; }

/* ---------- Navbar: the Webflow block is now the spacer, not the header ----
   The header everyone sees is the shared glass bar from Website/shared/nav/,
   fetched by assets/nav/nav.js and fixed over the top of the page — the same
   one sites.nodapproved.com has, so both hosts wear one header.

   The Webflow navbar stays in the document underneath it and keeps its exact
   height. It has to: ix2 binds this page's interactions to its data-w-id
   attributes at load, and the home hero's negative margins are calibrated
   against the 10rem bottom spacer its .container carries. Deleting it moved
   the hero and killed the reveals once already (July 2026). So it gives up
   its pixels and keeps its space. visibility (not display) is deliberate —
   the box still occupies the flow, and the duplicate links leave the
   accessibility tree instead of being read out twice. */
.navbar .navbar-component { visibility: hidden; pointer-events: none; }

/* ---------- Navbar (rebuilt nf-navbar; currently unused, kept for ref) ----- */
.nf-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 3.5rem;
  position: relative;
  z-index: 90;
  font-family: Inter, sans-serif;
}
.nf-nav-group {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  flex: 1 1 0;
}
.nf-nav-left  { justify-content: flex-start; }
.nf-nav-right { justify-content: flex-end; }
.nf-nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .015em;
  opacity: .82;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.nf-nav-link:hover,
.nf-nav-link.nf-current { opacity: 1; }
.nf-nav-brand { flex: 0 0 auto; display: flex; align-items: center; }
.nf-nav-brand img { height: 46px; width: auto; display: block; }
@media (max-width: 767px) {
  .nf-navbar { padding: 1rem 1.25rem; gap: .6rem; }
  .nf-nav-group { gap: 1.1rem; }
  .nf-nav-link { font-size: .78rem; }
  .nf-nav-brand img { height: 34px; }
}

/* ---------- Footer (SickMoon-style grid) ---------------------------------- */
.nf-footer {
  background: #101011;
  border-top: 1px solid rgba(255,255,255,.08);
  /* bottom padding carries the extra ~15% of footer height: the content
     and its spacing are untouched, the page just breathes before it ends */
  padding: 4.5rem 3.5rem 5.6rem;
  font-family: Inter, sans-serif;
}
.nf-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: start;
}
.nf-footer-about { max-width: 280px; }
.nf-footer-brand { display: inline-block; margin-bottom: 1.25rem; }
.nf-footer-logo { height: 30px; width: auto; display: block; }
.nf-footer-tagline { font-size: 1rem; font-weight: 500; color: #fff; margin: 0 0 .5rem; }
.nf-footer-copy { font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.45); margin: 0; }
.nf-footer-links {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 3rem;
  justify-content: end;
}
.nf-footer-col { display: flex; flex-direction: column; gap: .6rem; }
.nf-footer-col-title {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .4rem;
}
.nf-footer-link {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  width: max-content;
  transition: color .2s ease, transform .2s ease;
}
.nf-footer-link:hover { color: #fff; transform: translateX(3px); }

/* ── imprint: same services table, breathing like a legal page ──────────
   The old heading sat on 16vh + 4rem of dead space. Here the section sets
   its own, smaller top margin and the rows sit closer together than the
   services rows do — legal lines are short, they shouldn't drift apart. */
/* the shared heading block carries 64/224px of padding for the home page —
   far too much air above a legal notice, so pull it in here */
/* The navbar container carries a 10rem bottom spacer that the home hero's
   negative margins are calibrated against. There is no hero here, so on
   this page only, drop it — that spacer was most of the dead air. */
.imprint-page .navbar .container { padding-bottom: 1rem; }
.nf-imprint { margin-top: 0; }
/* tight above the title, generous below it */
.nf-imprint .heading-2-copy-copy2 { padding: 0 0 4rem; }
.nf-imprint .subscript { font-size: 3.75rem; }
.nf-imprint .table-component { margin-top: 2.5rem; margin-bottom: 5rem; }
/* short legal values shouldn't be flung to the right edge like the long
   service copy is */
.nf-imprint .row > :last-child { justify-self: start; }
.nf-imprint .row { padding-bottom: 3.25rem; align-items: baseline; }
.nf-imprint .row:not(:first-child) { padding-top: 3.25rem; border-top: 1px solid rgba(229,229,229,.13); }
.nf-imprint .services-text-size { font-size: 1.5rem; letter-spacing: .01em; }
.nf-imprint .text-size-regular { line-height: 1.65; }
.nf-imprint-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(229,229,229,.3);
  transition: color .2s ease, border-color .2s ease;
}
.nf-imprint-link:hover { color: #fff; border-bottom-color: #ffbf00; }
@media (max-width: 767px) {
  .nf-imprint { margin-top: 2.5rem; }
  .nf-imprint .row { grid-template-columns: .3fr 1fr; grid-row-gap: .75rem; }
  .nf-imprint .row > :last-child { grid-column: 1 / -1; }
  .nf-imprint .services-text-size { font-size: 1.25rem; }
}
/* not a link yet — visible so people know it's coming, dead to the cursor */
.nf-footer-link.is-soon {
  color: rgba(255,255,255,.24);
  cursor: default;
  pointer-events: none;
}
.nf-footer-socials { display: flex; gap: .65rem; margin-top: .2rem; }
.nf-footer-social {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  transition: transform .2s ease, background .2s ease;
}
.nf-footer-social img { width: 17px; height: 17px; object-fit: contain; display: block; }
.nf-footer-social:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.nf-footer-bottom {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.nf-footer-spec { font-size: .7rem; letter-spacing: .06em; color: rgba(255,255,255,.4); }
@media (max-width: 767px) {
  .nf-footer { padding: 3rem 1.5rem 1.5rem; }
  .nf-footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .nf-footer-links { grid-template-columns: repeat(2, 1fr); gap: 2rem; justify-content: start; }
}

/* ---------- Work page: liquid-glass segmented filter ---------------------- */
.tabs-3 { display: flex !important; flex-direction: column; }

.tabs-menu-3 {
  filter: none !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  padding: 6px !important;
  gap: 0 !important;
  width: max-content;
  max-width: 100%;
  margin: 2.5rem auto !important;
  position: relative;
  display: flex !important;
  flex-wrap: nowrap;
  overflow: visible;
}
.tabs-menu-3 .w-tab-link {
  position: relative;
  z-index: 2;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 999px !important;
  margin: 0 !important;
  padding: 11px 22px !important;
  transition: color .3s ease, opacity .3s ease;
}
.tabs-menu-3 .w-tab-link,
.tabs-menu-3 .w-tab-link div {
  color: #fff !important;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}
.tabs-menu-3 .w-tab-link:not(.w--current) { opacity: .62; }
.tabs-menu-3 .w-tab-link:hover { opacity: 1; }
.tabs-menu-3 .w-tab-link.w--current { opacity: 1; background: transparent !important; }

.nf-tab-slider {
  position: absolute;
  top: 6px; left: 0;
  height: calc(100% - 12px);
  border-radius: 999px;
  background: rgba(255,191,0,.20);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 2px 14px rgba(255,191,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(9px) saturate(170%);
  backdrop-filter: blur(9px) saturate(170%);
  z-index: 1;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.34,1.32,.42,1), width .45s cubic-bezier(.34,1.32,.42,1);
}
@media (max-width: 600px) {
  .tabs-menu-3 { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .tabs-menu-3 .w-tab-link { padding: 9px 16px !important; }
  .tabs-menu-3 .w-tab-link div { font-size: .82rem; }
}

/* ---------- Work page: softer pill shadows (service tags) ----------------- */
.button-3,
.button-3-copy,
.button-3-copy-copy {
  box-shadow: inset 0 6px 7px -7px rgba(0,0,0,.45) !important;
}