/* NODE global typography overrides — code-like feel for nav, menus, eyebrows.
 * Body copy stays Inter (Framer default); only chrome gets the mono treatment. */

/* NODE logo font — Chakra Petch matches the chamfered geometric NOD3 wordmark. */
@font-face {
  font-family: "NODE Display";
  src: url("/node.framer.website/fonts/chakra-petch-500-latin.woff2") format("woff2"),
       url("/node.framer.website/fonts/chakra-petch-500.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Semibold cut — gives the nav links real weight (no faux-bold) so they read as bulky
   and match the chamfered NODE wordmark. */
@font-face {
  font-family: "NODE Display";
  src: url("/node.framer.website/fonts/chakra-petch-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --node-mono: "JetBrains Mono", "Fragment Mono", "Fira Code", ui-monospace, Menlo, monospace;
  --node-display: "NODE Display", "Chakra Petch", "JetBrains Mono", ui-monospace, monospace;
}

/* Remove the hairline divider under the nav (Framer draws it via header::after). */
header:has(.framer-7ymd1s)::after,
header[data-framer-name="Desktop"]::after {
  border-bottom: 0 !important;
}

/* Every heading uses the NODE logo font. !important + descendant spans to beat Framer's
   inline font-family on the per-character reveal spans. */
h1, h2, h3,
h1 *, h2 *, h3 *,
.node-hero-headline, .node-hero-headline * {
  font-family: var(--node-display) !important;
  letter-spacing: 0.01em;
}

/* Nav links + CTAs */
nav a, nav button, header a, header button,
nav a *, nav button *, header a *, header button * {
  font-family: var(--node-mono) !important;
  letter-spacing: 0.02em;
}

/* Get Template button + any pill button in the nav */
nav [class*="framer-"][class*="rounded"],
header [class*="framer-"][class*="rounded"] {
  font-family: var(--node-mono) !important;
}

/* Mobile hamburger menu items (Framer mobile menu) */
[data-framer-name="Menu"] a,
[data-framer-name="Mobile Menu"] a,
[data-framer-name="Hamburger"] *,
.framer-menu a {
  font-family: var(--node-mono) !important;
  letter-spacing: 0.02em;
}

/* Eyebrow / pill labels — anything that should feel like a code label */
[data-framer-name*="Badge"] p,
[data-framer-name*="Pill"] p,
[data-framer-name*="Chip"] p,
[data-framer-name*="Eyebrow"] p {
  font-family: var(--node-mono) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Nav: drop the dot separators between links, let the links breathe instead. */
nav [data-framer-name="dot"],
header [data-framer-name="dot"] {
  display: none !important;
}
nav[data-framer-name="nav links"] {
  gap: 26px !important;
}
/* Nav links use the bulky NODE wordmark font (Chakra Petch 600) so the menu matches the
   logo's chamfered geometric look. The hover decode effect (nav-decode.js) is unchanged. */
nav[data-framer-name="nav links"] a,
nav[data-framer-name="nav links"] a * {
  font-family: var(--node-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

/* Remove the "Coming Soon" item from the nav (link + its wrapper so no phantom gap). */
nav a[href*="coming-soon"],
header a[href*="coming-soon"],
nav *:has(> a[href*="coming-soon"]),
header *:has(> a[href*="coming-soon"]) {
  display: none !important;
}

/* Hide the "Made in Framer" badge. */
#__framer-badge-container,
.framer-badge-container,
.framer-badge,
[class*="framer-badge"] {
  display: none !important;
}

/* Remove the "Our Latest Project" cards only. The Projects section also CONTAINS
   the Trusted-by grid + stats, so we hide just the project-cards block; the stats
   below then rise to fill the freed space. */
section[data-framer-name="Projects"] [data-framer-name$="v1"],
section[data-framer-name="Projects"] [data-framer-name="project cards"] {
  display: none !important;
}

/* Stack the Trusted-by block vertically: logo grid on top, the 95% / 10+ stats
   underneath it (was side-by-side). The Trusted-by section sized itself via
   flex-grow in the old row, so in a column it needs an explicit width or it
   collapses to ~0. */
section[data-framer-name="Projects"] [data-framer-name="container"] > [data-framer-name="stats"] {
  flex-direction: column !important;
  align-items: center !important;
  gap: 30px !important;
}
section[data-framer-name="Projects"] [data-framer-name="container"] [data-framer-name="Trusted by"] {
  width: 100% !important;
  flex: 0 0 auto !important;
}
/* Hide the inner stats block ("10% Client Satisfaction" / "5+ Years of Experience").
   These are template-fabricated numbers; NODE is pre-revenue with no client track
   record yet, so they are removed rather than shown. Keep the Trusted-by logo grid. */
section[data-framer-name="Projects"] [data-framer-name="container"] > [data-framer-name="stats"] > [data-framer-name="stats"] {
  display: none !important;
}

/* Remove the template's fabricated "results" sections. NODE has no commercial clients
   yet, so the invented stats ("120+ automation projects", "$8.5M", "70k+ new customers",
   "$8m+"), the fake case study, and the fake testimonials are hidden until there is real
   client data to show honestly. */
section[data-framer-name="Achievments"],
section[data-framer-name="Campaigns"],
section[data-framer-name="Reviews"] {
  display: none !important;
}

/* Remove the two decorative "Set up a Google Meet" hero cards (top-left + bottom-right). */
.framer-1j3j7gw {
  display: none !important;
}

/* Precision vs Guesswork comparison: desktop keeps the side-by-side row (NODE left,
   Others right). On mobile, stack the cards with "Others" on top and NODE underneath. */
@media (max-width: 809.98px) {
  .framer-1v6yluh {
    flex-direction: column-reverse !important;
  }
  /* The cards size via flex-basis:0/grow in the row; in a column that collapses
     them to ~0 height. Give them their natural height + full width when stacked. */
  .framer-1v6yluh > [data-framer-name="Value card"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Nav bar texture: a faint periwinkle dot-grid over the existing blur, so the bar
   reads as a textured techy surface rather than a flat panel. */
header {
  background-image: radial-gradient(rgba(184, 184, 255, 0.06) 1px, transparent 1.4px) !important;
  background-size: 13px 13px !important;
  background-position: 0 0 !important;
}