/* ==========================================================================
   GrapeNode Private Limited
   Stylesheet

   Colours are taken straight from the logo:
     "Grape" violet   #6a2c91
     connector blue   #3168a3
     "Node" teal      #14868c
   Brightened versions of those are used as the neon accents on the dark UI.

   Contents
     1.  Tokens
     2.  Base
     3.  Reusable bits (buttons, labels, rules, reveal animation)
     4.  Navbar + mobile menu
     5.  Hero
     6.  About
     7.  Services (bento grid)
     8.  Stack marquee
     9.  Contact + form
     10. Footer
     11. Responsive
     12. Reduced motion
     13. Inner pages (services, contact, careers, blog, article)
     14. Inner page responsive
   ========================================================================== */


/* 1. TOKENS ============================================================== */
:root {
  /* Brand: violet */
  --grape-300: #c090ec;
  --grape-400: #a855f7;
  --grape-500: #8b3fd4;
  --grape-600: #6a2c91;

  /* Brand: teal */
  --node-300: #5fd8cb;
  --node-400: #2dd4bf;
  --node-500: #17a79c;
  --node-600: #14868c;

  /* Brand: connector blue */
  --bridge-400: #4a86c4;
  --bridge-500: #3168a3;

  /* Off-palette amber, used only to mark a role that is not open yet.
     Deliberately outside the logo colours so "coming soon" cannot be
     mistaken for one of the brand accents. */
  --ember-400: #ff9d4d;

  /* Ink: slightly violet-tinted blacks, never pure #000 */
  --ink-950: #07050b;
  --ink-900: #0b0812;
  --ink-850: #100c1a;
  --ink-800: #161022;
  --ink-700: #201830;
  --ink-600: #2f2445;
  --ink-400: #6b5f85;
  --ink-300: #9d93b3;
  --ink-200: #c8c1d6;
  --ink-100: #e9e5f0;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1200px;
}


/* 2. BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Native easing for the in-page anchor links. Deliberately not a
     wheel-hijacking smooth-scroll library: this keeps the scrollbar,
     keyboard, trackpad and touch behaving exactly as the browser intends. */
  scroll-behavior: smooth;
}

/* Stops the fixed navbar covering a section heading after an anchor jump. */
section[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--ink-200);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-100);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--grape-400); color: var(--ink-950); }

:focus-visible {
  outline: 2px solid var(--node-400);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--grape-500), var(--node-500));
  border-radius: 99px;
  border: 3px solid var(--ink-950);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 16px; top: 16px;
  z-index: 200;
  background: var(--node-400);
  color: var(--ink-950);
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 14px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-400);
}


/* 3. REUSABLE BITS ======================================================= */

/* -- gradient text ------------------------------------------------------ */
.grad {
  background-image: linear-gradient(100deg, var(--grape-400) 0%, var(--bridge-400) 48%, var(--node-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -- hairline divider --------------------------------------------------- */
.rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, rgba(168, 85, 247, 0.5), rgba(45, 212, 191, 0.5), transparent);
}

/* -- section eyebrow ---------------------------------------------------- */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink-300);
  margin-bottom: 30px;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--node-400);
  position: relative;
  flex: none;
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--node-400);
  animation: pulse 2.8s cubic-bezier(0.83, 0, 0.17, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.9); }
}

/* -- buttons ------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.15s linear;
  will-change: transform;
}

.btn__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  will-change: transform;
}

.btn--solid {
  color: var(--ink-950);
  background: linear-gradient(100deg, var(--grape-400), var(--bridge-400), var(--node-400));
  box-shadow: 0 0 28px -6px var(--grape-400);
}

.btn--ghost {
  color: var(--ink-100);
  background: transparent;
  border-color: var(--ink-600);
}
.btn--ghost:hover { border-color: rgba(45, 212, 191, 0.6); }

/* sheen sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: transform 0.9s var(--ease);
  z-index: 1;
}
.btn:hover::after { transform: translateX(200%); }

/* -- the logo -----------------------------------------------------------
   The logo used to sit on a light "paper" plate, because the traced artwork
   carried the dark print colours and vanished against the background. The
   SVG is now drawn in the display palette instead, so it reads on the dark
   UI unaided and the plate is gone. The class name is kept because it is
   referenced from all eight pages. */
.logo-plate {
  display: inline-flex;
  align-items: center;
  transition: transform 0.5s var(--ease);
}
.logo-plate img { height: 48px; width: auto; }

.logo-plate--lg img { height: 60px; }

.nav__logo:hover .logo-plate { transform: scale(1.03); }

/* -- scroll reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* masked line reveal, used on the big headings */
.line { display: block; overflow: hidden; }
.line__inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s var(--ease);
  padding-bottom: 0.12em;
}
.line__inner.in { transform: none; }


/* 4. NAVBAR ============================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 16px 24px 0;
  animation: navdrop 1s var(--ease) 0.2s backwards;
}
@keyframes navdrop {
  from { transform: translateY(-80px); opacity: 0; }
}

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 12px;
  border: 1px solid transparent;
  border-radius: 99px;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.nav.scrolled .nav__inner {
  background: rgba(22, 16, 34, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(233, 229, 240, 0.08);
  box-shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.9);
}

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  position: relative;
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--ink-300);
  border-radius: 99px;
  transition: color 0.3s var(--ease);
}
.nav__links a:hover { color: var(--ink-100); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 1px;
  background: linear-gradient(to right, var(--grape-400), var(--node-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { padding: 11px 20px; font-size: 13px; }

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--ink-600);
  border-radius: 99px;
  cursor: pointer;
  z-index: 60;
}
.nav__burger span {
  display: block;
  width: 16px; height: 1px;
  background: var(--ink-100);
  transition: transform 0.4s var(--ease), opacity 0.3s linear;
}
.nav__burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(7, 5, 11, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
/* The display:flex above beats the browser's own [hidden] { display: none },
   so the closed menu has to be taken out of the layout explicitly. Without
   this line it stays a full-screen invisible sheet on top of the page and
   swallows every click on the site, on every page. The script keeps the
   hidden attribute in sync, setting it immediately on close and clearing it
   before the menu fades in. */
.mobilemenu[hidden] { display: none; }
.mobilemenu.open { opacity: 1; }
.mobilemenu a {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: -0.03em;
  line-height: 1.5;
}
.mobilemenu__mail {
  margin-top: 32px;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  color: var(--node-400) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* 5. HERO ================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, var(--ink-850), var(--ink-950) 65%);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, transparent 40%, var(--ink-950) 100%);
}

.hero__copy {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 120px 24px 80px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ink-600);
  background: rgba(11, 8, 18, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 99px;
  padding: 7px 16px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-300);
}
.pill .dot { width: 6px; height: 6px; }

.hero__title {
  font-size: clamp(2.6rem, 8.5vw, 6rem);
  font-weight: 600;
  line-height: 0.94;
  max-width: 15ch;
}

.hero__sub {
  margin-top: 32px;
  max-width: 34rem;
  font-size: 17px;
  color: var(--ink-300);
}

.hero__actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.scrollhint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 24px; height: 40px;
  border: 1px solid var(--ink-600);
  border-radius: 99px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scrollhint span {
  display: block;
  width: 4px; height: 6px;
  border-radius: 99px;
  background: var(--node-400);
  animation: hint 2.2s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%      { transform: translateY(10px); opacity: 0.2; }
}


/* 6. ABOUT =============================================================== */
.about, .contact {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.about__grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(107, 95, 133, 0.3) 1px, transparent 1px);
  background-size: 32px 32px;
}

.about__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 15% 20%, rgba(106, 44, 145, 0.22), transparent 70%);
}

.about__cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: start;
}

.about__heading {
  font-size: clamp(1.85rem, 4.4vw, 3.2rem);
  font-weight: 600;
  max-width: 20ch;
}

.about__body { display: grid; gap: 24px; }
.about__body p { color: var(--ink-300); font-size: 15.5px; }

.statplate {
  margin-top: 96px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.5);
  border-radius: 24px;
  padding: 56px 48px;
}
.statplate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background: linear-gradient(115deg, rgba(106, 44, 145, 0.3), transparent 45%, rgba(20, 134, 140, 0.3));
}
.statplate dl {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
.statplate dt {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-100);
}
.statplate dd { margin: 8px 0 0; font-size: 14px; color: var(--ink-300); }

.about__loc {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-400);
}


/* 7. SERVICES ============================================================ */
.services { padding: 120px 0; }

.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 72px;
}

.services__title {
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  font-weight: 600;
}

.services__note {
  max-width: 24rem;
  font-size: 15px;
  color: var(--ink-300);
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: 20px;
}

.card {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.45);
  border-radius: 24px;
  padding: 32px;
  transition: border-color 0.5s var(--ease);
}
.card:hover { border-color: var(--ink-600); }

.card--tall { grid-row: span 2; }
.card--half { grid-column: span 3; }

/* cursor spotlight, position fed from JS */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, 0.16), transparent 72%);
  pointer-events: none;
}
.card--featured::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(168, 85, 247, 0.16), transparent 72%);
}
.card:hover::before { opacity: 1; }

/* gradient underline that draws itself on hover */
.card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--grape-400), var(--bridge-400), var(--node-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.card:hover::after { transform: scaleX(1); }

.card__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-400);
}
.card__dot {
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--node-400);
  transition: transform 0.5s var(--ease);
}
.card__dot--grape { background: var(--grape-400); }
.card:hover .card__dot { transform: scale(1.8); }

.card h3 {
  position: relative;
  font-size: 22px;
  font-weight: 600;
}
.card--featured h3 { font-size: 27px; }

.card p {
  position: relative;
  margin-top: 16px;
  max-width: 32rem;
  font-size: 15px;
  color: var(--ink-300);
}

.tags {
  position: relative;
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags li {
  border: 1px solid var(--ink-700);
  background: rgba(16, 12, 26, 0.7);
  border-radius: 99px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-300);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card:hover .tags li { color: var(--ink-200); border-color: var(--ink-600); }


/* 8. STACK MARQUEE ======================================================= */
.stack { padding: 96px 0; overflow: hidden; }

.stack__head { margin: 56px auto; }
.stack__head h2 {
  max-width: 40rem;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
}

.marquee { position: relative; }

.marquee__row { display: flex; overflow: hidden; padding: 16px 0; }

.marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  flex: none;
  padding-right: 56px;
}
.marquee__track--l { animation: mleft var(--dur, 46s) linear infinite; }
.marquee__track--r { animation: mright var(--dur, 54s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes mleft  { from { transform: translate3d(0, 0, 0); }      to { transform: translate3d(-50%, 0, 0); } }
@keyframes mright { from { transform: translate3d(-50%, 0, 0); }   to { transform: translate3d(0, 0, 0); } }

.marquee__track span {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-300);
  transition: color 0.3s var(--ease);
}
.marquee__track span:hover { color: var(--ink-100); }
.marquee__track i {
  width: 6px; height: 6px;
  border-radius: 99px;
  background: rgba(23, 167, 156, 0.7);
  flex: none;
}

.marquee__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 180px;
  z-index: 10;
  pointer-events: none;
}
.marquee__fade--l { left: 0;  background: linear-gradient(to right, var(--ink-950), transparent); }
.marquee__fade--r { right: 0; background: linear-gradient(to left,  var(--ink-950), transparent); }


/* 9. CONTACT ============================================================= */
.contact__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 55% at 80% 30%, rgba(16, 106, 112, 0.3), transparent 70%);
}

.contact__cols {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}

.contact__left h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 600;
  max-width: 16ch;
}
.contact__body {
  margin-top: 28px;
  max-width: 28rem;
  font-size: 15px;
  color: var(--ink-300);
}

.contact__details { margin: 48px 0 0; display: grid; gap: 24px; }
.contact__details dt {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-400);
}
.contact__details dd {
  margin: 6px 0 0;
  font-size: 17px;
  color: var(--ink-100);
}
.contact__details dd a { transition: color 0.3s var(--ease); }
.contact__details dd a:hover { color: var(--node-400); }
.contact__details div:last-child dd { font-size: 15px; color: var(--ink-300); line-height: 1.7; }

.formcard {
  position: relative;
  background: rgba(22, 16, 34, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(233, 229, 240, 0.08);
  border-radius: 24px;
  padding: 40px;
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
form > * + * { margin-top: 20px; }

.field { position: relative; }

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.5);
  border-radius: 12px;
  padding: 24px 16px 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-100);
  outline: none;
  transition: border-color 0.3s var(--ease);
}
.field textarea { resize: none; }
.field input::placeholder,
.field textarea::placeholder { color: transparent; }

.field input:focus,
.field textarea:focus,
.field select:focus { border-color: rgba(45, 212, 191, 0.7); }

.field.invalid input,
.field.invalid textarea { border-color: var(--grape-400); }

/* floating label */
.field label {
  position: absolute;
  top: 8px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-400);
  pointer-events: none;
  transition: all 0.3s var(--ease);
}
.field label span { color: var(--node-400); }

.field input:placeholder-shown + label,
.field textarea:placeholder-shown + label {
  top: 17px;
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}
.field input:focus + label,
.field textarea:focus + label {
  top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--node-400);
}

.field--select select { appearance: none; padding-right: 40px; }
.field--select svg {
  position: absolute;
  top: 50%; right: 16px;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}

.err {
  margin-top: 6px;
  font-size: 12px;
  color: var(--grape-300);
  min-height: 0;
}

/* field passed validation */
.field.valid input,
.field.valid textarea { border-color: rgba(45, 212, 191, 0.55); }

.field.valid::after {
  content: "";
  position: absolute;
  top: 22px; right: 16px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--node-400);
  border-bottom: 2px solid var(--node-400);
  transform: rotate(-45deg);
  pointer-events: none;
  animation: tickin 0.35s var(--ease);
}
@keyframes tickin {
  from { opacity: 0; transform: rotate(-45deg) scale(0.6); }
  to   { opacity: 1; transform: rotate(-45deg) scale(1); }
}
/* While the email domain is being looked up. The tick is withheld until we
   know, so it never briefly claims an address is good before the check has
   finished. */
.field.checking::after {
  content: "";
  position: absolute;
  top: 20px; right: 16px;
  width: 13px; height: 13px;
  border: 2px solid var(--ink-600);
  border-top-color: var(--node-400);
  border-radius: 50%;
  pointer-events: none;
  animation: fieldspin 0.7s linear infinite;
}
.field.checking.valid::after { animation: fieldspin 0.7s linear infinite; }
@keyframes fieldspin { to { transform: rotate(360deg); } }

/* the select already has a chevron in that corner */
.field--select.valid::after { display: none; }

/* submission failure message */
.formerr {
  margin-top: 20px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: rgba(106, 44, 145, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--grape-300);
}
/* neutral variant, used for the "opened as a local file" heads-up */
.formerr.is-note {
  border-color: rgba(74, 134, 196, 0.4);
  background: rgba(49, 104, 163, 0.14);
  color: var(--ink-300);
}
.formerr a { color: var(--node-400); text-decoration: underline; text-underline-offset: 3px; }

.btn:disabled,
.btn.is-busy {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}

.formcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.formcard__direct {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ink-700);
  text-align: center;
  font-size: 14px;
  color: var(--ink-400);
}
.formcard__direct a {
  color: var(--node-400);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.formcard__done {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* Same trap as the mobile menu: the display:flex above beats the browser's
   own [hidden] { display: none }, so without this line the "message sent"
   panel is visible before anything has been sent. The script clears the
   hidden attribute only once a submission actually succeeds. */
.formcard__done[hidden] { display: none; }
.formcard__done .tick {
  width: 48px; height: 48px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--grape-400), var(--node-400));
  margin-bottom: 24px;
}
.formcard__done h3 { font-size: 24px; font-weight: 600; }
.formcard__done p { margin-top: 12px; max-width: 26rem; font-size: 15px; color: var(--ink-300); }
.formcard__done p a { color: var(--node-400); text-decoration: underline; text-underline-offset: 3px; }
.formcard__done button {
  margin-top: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--node-400);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* 10. FOOTER ============================================================= */
.footer {
  position: relative;
  border-top: 1px solid var(--ink-700);
  background: var(--ink-950);
  padding: 72px 0 56px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}

.footer__brand p {
  margin-top: 20px;
  max-width: 22rem;
  font-size: 14px;
  color: var(--ink-400);
}

.footer h2 { margin-bottom: 20px; }
.footer ul { display: grid; gap: 12px; }
.footer ul a {
  font-size: 14px;
  color: var(--ink-300);
  transition: color 0.3s var(--ease);
}
.footer ul a:hover { color: var(--node-400); }

.footer__bar {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-400);
}


/* -- homepage: what-we-do pillars, AI/SaaS bands, grouped stack ----------
   Added for the AI-first repositioning. The pillar cards reuse .phases /
   .phase from the services page rather than inventing a second card. */
.pillars { padding: 96px 0 8px; }
.pillars__head { margin-bottom: 40px; }
.pillars__title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 600;
}
.phase__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--node-400);
}
.phase__link svg { transition: transform 0.4s var(--ease); }
.phase:hover .phase__link svg { transform: translateX(4px); }

/* A full-width statement band, for the AI and SaaS sections: they need more
   presence than one card in a grid. */
.band { position: relative; overflow: hidden; padding: 96px 0; }
.band--tight { padding: 72px 0; }
.band--alt { background: rgba(11, 8, 18, 0.5); }
.band--ai { background: radial-gradient(90% 70% at 50% 0%, var(--ink-850), var(--ink-950) 72%); }
.band__glow {
  position: absolute;
  top: -20%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.13), transparent 62%);
  pointer-events: none;
}
.band__title {
  position: relative;
  max-width: 22ch;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
}
.band__body {
  position: relative;
  max-width: 46rem;
  margin-top: 24px;
  font-size: 16.5px;
  color: var(--ink-300);
}
.band__actions { position: relative; margin-top: 40px; }

.chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}
.chips li {
  border: 1px solid var(--ink-700);
  background: rgba(16, 12, 26, 0.8);
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--ink-200);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.chips li:hover { border-color: var(--node-500); color: var(--ink-100); }

/* idea -> scale, as a wrapping sequence rather than a wide diagram */
.flow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 6px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.flow li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-200);
}
.flow li::after {
  content: "";
  width: 18px; height: 1px;
  background: linear-gradient(to right, var(--grape-500), var(--node-500));
}
.flow li:last-child::after { display: none; }
.flow li:last-child { color: var(--node-300); }

/* grouped technology stack */
.stackgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  padding: 48px 0;
}
.stackgrid__col h3 { margin-bottom: 14px; }
.stackgrid .tags { display: flex; flex-wrap: wrap; gap: 8px; }

.why__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* the six delivery steps read better in two columns on the homepage */
.steps--wide { margin-top: 40px; }
.steps--wide ol { grid-template-columns: 1fr 1fr; gap: 26px 40px; }


/* 11. RESPONSIVE ========================================================= */
@media (max-width: 1024px) {
  .stackgrid { grid-template-columns: repeat(2, 1fr); }
  .why__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .about__cols { grid-template-columns: 1fr; gap: 32px; }
  .contact__cols { grid-template-columns: 1fr; gap: 48px; }
  .services__head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .card, .card--half { grid-column: span 2; }
  .card--tall { grid-row: span 1; }
}

@media (max-width: 768px) {
  .band { padding: 72px 0; }
  .pillars { padding: 72px 0 0; }
  .stackgrid { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .why__grid--4 { grid-template-columns: 1fr; }
  .steps--wide ol { grid-template-columns: 1fr; }

  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .about, .contact, .services { padding: 88px 0; }
  .stack { padding: 72px 0; }

  .bento { grid-template-columns: 1fr; }
  .card, .card--half, .card--tall { grid-column: span 1; grid-row: span 1; }

  .statplate { margin-top: 64px; padding: 40px 28px; }
  .statplate dl { grid-template-columns: 1fr; gap: 32px; text-align: left; }

  .row2 { grid-template-columns: 1fr; }
  .formcard { padding: 24px; }

  .marquee__track span { font-size: 24px; }
  .marquee__fade { width: 90px; }

  .footer__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 480px) {
  .hero__copy { padding: 108px 24px 72px; }
  .mobilemenu a { font-size: 36px; }
}


/* 12. REDUCED MOTION ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .line__inner { transform: none; }
}


/* ==========================================================================
   13. INNER PAGES
   Used by services.html, contact.html, careers.html, blog.html and the posts
   inside blog/. The homepage does not use any of these.
   ========================================================================== */

/* -- current page marker in the navbar ---------------------------------- */
.nav__links a.active { color: var(--ink-100); }
.nav__links a.active::after { transform: scaleX(1); }


/* -- page hero (top of every inner page) -------------------------------- */
.pagehero {
  position: relative;
  overflow: hidden;
  padding: 180px 0 90px;
  background: radial-gradient(80% 60% at 50% 0%, var(--ink-850), var(--ink-950) 70%);
}
.pagehero--short { padding-bottom: 60px; }

.pagehero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(rgba(107, 95, 133, 0.3) 1px, transparent 1px);
  background-size: 32px 32px;
}
.pagehero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 20% 10%, rgba(106, 44, 145, 0.28), transparent 70%);
}
.pagehero__glow--teal {
  background: radial-gradient(50% 60% at 80% 10%, rgba(20, 134, 140, 0.28), transparent 70%);
}

.pagehero__title {
  font-size: clamp(2.3rem, 6.5vw, 4.6rem);
  font-weight: 600;
  line-height: 0.98;
}
.pagehero__sub {
  margin-top: 28px;
  max-width: 40rem;
  font-size: 17px;
  color: var(--ink-300);
}

/* jump links under the services hero */
.jumpnav {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jumpnav a {
  border: 1px solid var(--ink-600);
  background: rgba(11, 8, 18, 0.6);
  border-radius: 99px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-300);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.jumpnav a:hover { color: var(--ink-100); border-color: var(--node-400); }


/* -- service detail blocks ---------------------------------------------- */
.svc { padding: 96px 0; }
.svc--alt { background: rgba(11, 8, 18, 0.5); }

.svc__head { max-width: 44rem; margin-bottom: 56px; }
.svc__num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--node-400);
}
.svc__head h2 {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  font-weight: 600;
}
.svc__lead {
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-300);
}

.svc__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.svc__block h3 {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-400);
}

/* tick list, shared by services, roles and phases */
.ticks { display: grid; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-300);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--node-400);
  border-bottom: 2px solid var(--node-400);
  transform: rotate(-45deg);
}


/* -- link-style bento card ---------------------------------------------- */
.bento--even { grid-auto-rows: minmax(240px, auto); }
.bento--even .card { grid-column: span 2; }

.card--link { justify-content: space-between; }
.card--link:hover { border-color: var(--node-400); }
.card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--node-400);
}
.card__cta svg { transition: transform 0.4s var(--ease); }
.card--link:hover .card__cta svg { transform: translateX(4px); }


/* -- roadmap phases ------------------------------------------------------ */
.roadmap { padding: 96px 0 120px; }
.roadmap__title {
  max-width: 32rem;
  margin-bottom: 56px;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}

.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.phase {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.45);
  border-radius: 24px;
  padding: 32px;
  transition: border-color 0.5s var(--ease);
}
.phase:hover { border-color: var(--ink-600); }
.phase::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(168, 85, 247, 0.14), transparent 72%);
  pointer-events: none;
}
.phase:hover::before { opacity: 1; }

.phase__tag {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
  border: 1px solid var(--grape-500);
  border-radius: 99px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--grape-300);
}
.phase--mid .phase__tag { border-color: var(--bridge-400); color: var(--bridge-300); }
.phase--end .phase__tag { border-color: var(--node-500); color: var(--node-300); }

.phase h3 { position: relative; font-size: 24px; font-weight: 600; }
.phase__for {
  position: relative;
  margin: 10px 0 24px;
  font-size: 14px;
  color: var(--ink-400);
}
.phase .ticks { position: relative; }


/* -- closing call to action ---------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
}
.cta__inner { max-width: 46rem; }
.cta__title {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.06;
}
.cta__body {
  margin-top: 24px;
  font-size: 16px;
  color: var(--ink-300);
}
.cta__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}


/* -- contact page: what happens next ------------------------------------- */
.steps { margin-top: 56px; }
.steps h2 { margin-bottom: 24px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps__n {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-600);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--node-400);
}
.steps h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
.steps p { margin-top: 4px; font-size: 14px; color: var(--ink-400); }

.label--static { position: absolute; }


/* -- careers: why work here ---------------------------------------------- */
.why { padding: 96px 0; }
.why__title {
  max-width: 26rem;
  margin-bottom: 48px;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.why__card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.45);
  border-radius: 20px;
  padding: 28px;
  transition: border-color 0.5s var(--ease);
}
.why__card:hover { border-color: var(--ink-600); }
.why__card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, 0.13), transparent 72%);
  pointer-events: none;
}
.why__card:hover::before { opacity: 1; }

.why__icon {
  position: relative;
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--node-400);
}
.why__card h3 { position: relative; font-size: 18px; font-weight: 600; }
.why__card p {
  position: relative;
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--ink-300);
}


/* -- careers: open roles (native details/summary, works without JS) ------ */
.roles { padding: 0 0 96px; }
.wrap--roles { max-width: 920px; }

.roles__head { margin-bottom: 48px; }
.roles__head--center { text-align: center; }
.roles__head--center .label { justify-content: center; }
.roles__title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 600;
}
.roles__note {
  margin: 14px auto 0;
  max-width: 34rem;
  font-size: 15px;
  color: var(--ink-300);
}

.roles__list { display: grid; gap: 14px; }

.role {
  position: relative;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.45);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.role:hover { border-color: var(--node-500); }
.role[open] { border-color: var(--node-500); background: rgba(16, 12, 26, 0.7); }

.role summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;
}
.role summary::-webkit-details-marker { display: none; }

.role__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-100);
}
.role__meta { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  border: 1px solid var(--ink-700);
  background: rgba(16, 12, 26, 0.8);
  border-radius: 99px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-300);
  white-space: nowrap;
}
.chip--grape { border-color: var(--grape-500); color: var(--grape-300); }

.role__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--node-300);
  white-space: nowrap;
}
.role__flag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--node-400);
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.85);
  animation: roleLivePulse 1.8s ease-in-out infinite;
}
@keyframes roleLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Amber variant for a role that is not taking applications yet. The whole
   flag blinks rather than just its dot, so it reads as a status that is
   going to change. The reduced-motion block near the end of this file
   flattens the animation for anyone who asks for that. */
.role__flag--soon {
  color: var(--ember-400);
  animation: roleSoonBlink 1.7s ease-in-out infinite;
}
.role__flag--soon::before {
  background: var(--ember-400);
  box-shadow: 0 0 8px rgba(255, 157, 77, 0.8);
  animation: none;
}
@keyframes roleSoonBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

.role__plus {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  transition: transform 0.4s var(--ease);
}
.role__plus::before,
.role__plus::after {
  content: "";
  position: absolute;
  background: var(--node-400);
  border-radius: 2px;
}
.role__plus::before { top: 9px; left: 1px; right: 1px; height: 2px; }
.role__plus::after { left: 9px; top: 1px; bottom: 1px; width: 2px; }
.role[open] .role__plus { transform: rotate(135deg); }

.role__body {
  margin-top: 4px;
  padding: 4px 26px 32px;
  border-top: 1px solid var(--ink-700);
}

.role-more {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 30px;
  text-align: center;
  border: 1px dashed var(--ink-600);
  border-radius: 16px;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.014) 14px 28px);
}
.role-more__mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink-600);
}
.role-more strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-200);
}
.role-more span { font-size: 13.5px; color: var(--ink-400); }
.role__body > p:first-child {
  margin: 24px 0 4px;
  max-width: 46rem;
  font-size: 15.5px;
  color: var(--ink-300);
}
.role__body h4 {
  margin: 28px 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-400);
}
.role__apply { margin-top: 32px; }

/* Stands in for the apply button on a role that is not taking applications
   yet. Deliberately not a button: there is nothing to click. */
.role__soon {
  display: inline-block;
  margin-top: 32px;
  padding: 13px 26px;
  border: 1px dashed rgba(255, 157, 77, 0.4);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ember-400);
}


/* -- careers: application ------------------------------------------------ */
.apply {
  position: relative;
  overflow: hidden;
  padding: 96px 0 120px;
}
.apply__cols {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}
.apply__title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 600;
}
.apply__body {
  margin-top: 24px;
  max-width: 28rem;
  font-size: 15px;
  color: var(--ink-300);
}
.apply__note {
  margin-top: 36px;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.5);
  border-radius: 16px;
  padding: 20px 22px;
}
.apply__note h3 { margin-bottom: 10px; }
.apply__note p { font-size: 14px; color: var(--ink-300); }
.apply__note strong { color: var(--ink-100); }


/* -- blog listing --------------------------------------------------------- */
.posts { padding: 80px 0 96px; }

.post {
  position: relative;
  overflow: hidden;
  display: block;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.45);
  border-radius: 24px;
  padding: 32px;
  transition: border-color 0.5s var(--ease);
}
.post:hover { border-color: var(--node-400); }
.post::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, 0.13), transparent 72%);
  pointer-events: none;
}
.post:hover::before { opacity: 1; }

.post--featured { padding: 44px; margin-bottom: 20px; }
.post--featured::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(168, 85, 247, 0.15), transparent 72%);
}

.post__meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-400);
}

.post h2 {
  position: relative;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.post--featured h2 { max-width: 22ch; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }

.post p {
  position: relative;
  margin-top: 16px;
  max-width: 46rem;
  font-size: 15px;
  color: var(--ink-300);
}

.post__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--node-400);
}
.post__cta svg { transition: transform 0.4s var(--ease); }
.post:hover .post__cta svg { transform: translateX(4px); }

.posts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.posts__more {
  margin-top: 48px;
  font-size: 15px;
  color: var(--ink-400);
}
.posts__more a { color: var(--node-400); text-decoration: underline; text-underline-offset: 3px; }


/* -- single post ---------------------------------------------------------- */
.article {
  position: relative;
  overflow: hidden;
  padding: 150px 0 100px;
  background: radial-gradient(70% 40% at 50% 0%, var(--ink-850), var(--ink-950) 70%);
}
.article__wrap { max-width: 760px; }

.article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-400);
  transition: color 0.3s var(--ease);
}
.article__back:hover { color: var(--node-400); }
.article__back svg { transition: transform 0.4s var(--ease); }
.article__back:hover svg { transform: translateX(-4px); }

.article__head { margin-bottom: 48px; }
.article__head h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
}
.article__standfirst {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-200);
}

/* article typography */
.article__body { font-size: 16.5px; line-height: 1.78; color: var(--ink-300); }
.article__body > * + * { margin-top: 24px; }

.article__body h2 {
  margin-top: 52px;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.25;
}
.article__body strong { font-weight: 600; color: var(--ink-100); }

.article__body ul { display: grid; gap: 12px; padding-left: 4px; }
.article__body ul li { position: relative; padding-left: 22px; }
.article__body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--node-400);
}

.article__body blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--grape-400);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink-100);
}

.article__body .callout {
  border: 1px solid var(--bridge-500);
  background: rgba(49, 104, 163, 0.12);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-300);
}
.article__body .callout strong { color: var(--bridge-300); }

.article__foot {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--ink-700);
}
.article__foot p {
  max-width: 34rem;
  margin-bottom: 28px;
  font-size: 16px;
  color: var(--ink-300);
}

.article__next { margin-top: 64px; }
.article__next h2 { margin-bottom: 20px; }
.article__next a {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--ink-700);
  background: rgba(11, 8, 18, 0.5);
  border-radius: 14px;
  padding: 18px 22px;
  transition: border-color 0.4s var(--ease);
}
.article__next a:hover { border-color: var(--node-400); }
.article__next strong {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-100);
}


/* ==========================================================================
   14. INNER PAGE RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .svc__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .phases { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .apply__cols { grid-template-columns: 1fr; gap: 48px; }
  .bento--even .card { grid-column: span 2; }
}

@media (max-width: 768px) {
  .pagehero { padding: 140px 0 64px; }
  .article { padding: 120px 0 72px; }

  .svc { padding: 72px 0; }
  .svc__head { margin-bottom: 40px; }
  .svc__cols { grid-template-columns: 1fr; gap: 32px; }

  .why, .roadmap { padding: 72px 0; }
  .why__grid { grid-template-columns: 1fr; }

  .cta { padding: 80px 0; }

  .role summary { flex-wrap: wrap; gap: 10px 12px; padding: 20px 22px; }
  .role__title { flex: 1 0 100%; font-size: 17px; order: -1; }
  .role__plus { position: absolute; top: 22px; right: 20px; }
  .role__body { padding: 4px 22px 28px; }

  .apply { padding: 72px 0 88px; }

  .posts { padding: 56px 0 72px; }
  .posts__grid { grid-template-columns: 1fr; }
  .post { padding: 26px; }
  .post--featured { padding: 30px; }

  .article__body { font-size: 16px; }
  .article__body blockquote { margin: 32px 0; padding-left: 20px; }

  .bento--even .card { grid-column: span 1; }
}