/* ==========================================================================
   Nomadman Studio — brand layer
   Loaded AFTER template.css. Owns typography, palette tokens and the
   dark theme; template.css consumes the --nm-* tokens defined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typefaces
   Cadiz is the studio typeface and the only one used on the site —
   display and body alike. Weights are limited to Regular / Medium /
   SemiBold; headings never go heavier than SemiBold.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Cadiz"; src: url("../fonts/Cadiz-Regular.woff2") format("woff2");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cadiz"; src: url("../fonts/Cadiz-Medium.woff2") format("woff2");    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cadiz"; src: url("../fonts/Cadiz-SemiBold.woff2") format("woff2");  font-weight: 600; font-style: normal; font-display: swap; }


/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --nm-primary:      #CCFF31;   /* Nomadman lime */
  --nm-primary-dim:  #A8D628;
  --nm-primary-soft: rgba(204, 255, 49, 0.12);

  --nm-ink:      #0A0A0A;       /* near-black, the brand ground */
  --nm-ink-2:    #141414;
  --nm-surface:  #101010;       /* raised panel */
  --nm-surface-2:#171717;
  --nm-line:     rgba(255, 255, 255, 0.10);
  --nm-line-2:   rgba(255, 255, 255, 0.16);

  --nm-paper:    #FFFFFF;
  --nm-muted:    #9AA0A6;
  --nm-muted-2:  #828890;   /* AA on ink and both surfaces (5.0:1+) */

  /* IGDA Azerbaijan, used only on partner surfaces */
  --igda-yellow: #FBD800;
  --igda-red:    #D81315;
  /* Brand red is only 3.8:1 on the dark ground, so form errors use a
     lightened tint that passes AA for small text. */
  --nm-error:    #F2555A;

  /* Cadiz is the only typeface used on the site. Both tokens point at it
     so display and body can never drift apart. */
  --nm-font-display: "Cadiz", "Helvetica Neue", Arial, sans-serif;
  --nm-font-body:    "Cadiz", "Helvetica Neue", Arial, sans-serif;

  --nm-radius: 4px;
  --nm-maxw: 1320px;
}

/* --------------------------------------------------------------------------
   3. Base — dark ground
   -------------------------------------------------------------------------- */
/* Bootstrap applied this globally; the layout is written against it, so
   removing Bootstrap without restoring it makes every padded container
   overflow its viewport. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The off-canvas menu sits at translateX(100%), which would otherwise
   extend the document and create a horizontal scrollbar on phones.
   `clip` prevents that without turning body into a scroll container
   (which would break `position: sticky` on the header). */
body { overflow-x: clip; }

body {
  background: var(--nm-ink);
  color: var(--nm-paper);
  font-family: var(--nm-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.section-title h2, .hero-title {
  font-family: var(--nm-font-display);
  color: var(--nm-paper);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

p { color: var(--nm-muted); }

/* Cadiz ships no weight above SemiBold on this site, so let the browser
   fall back to SemiBold rather than synthesising a faux bold. */
strong, b { font-weight: 600; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--nm-primary); }

::selection { background: var(--nm-primary); color: var(--nm-ink); }

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

/* Visible keyboard focus — the template removes outlines in places. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nm-primary);
  outline-offset: 3px;
}

.nm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--nm-primary); color: var(--nm-ink);
  padding: 12px 20px; font-weight: 600;
}
.nm-skip:focus { left: 8px; top: 8px; }

.container, .container-fluid { max-width: var(--nm-maxw); }

/* --------------------------------------------------------------------------
   4. Buttons
   Lime needs dark text — white on lime fails contrast.
   -------------------------------------------------------------------------- */
.theme-btn,
.nm-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--nm-primary);
  color: var(--nm-ink) !important;
  font-family: var(--nm-font-display);
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 16px 28px;
  border: 2px solid var(--nm-primary);
  border-radius: var(--nm-radius);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.theme-btn:hover,
.nm-btn:hover {
  background: transparent;
  color: var(--nm-primary) !important;
  transform: translateY(-2px);
}
.nm-btn--ghost {
  background: transparent;
  color: var(--nm-paper) !important;
  border-color: var(--nm-line-2);
}
.nm-btn--ghost:hover {
  border-color: var(--nm-primary);
  color: var(--nm-primary) !important;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.wpo-site-header,
#header .wpo-site-header {
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--nm-line);
}
.nm-header { position: sticky; top: 0; z-index: 500; }

/* The wordmark is the supplied artwork, never re-typeset. */
.nm-brand { display: inline-flex; align-items: center; }
.nm-brand__lockup { display: block; height: 44px; width: auto; }
.nm-footer .nm-brand__lockup { height: 54px; }
@media (max-width: 640px) { .nm-brand__lockup { height: 34px; } }

.nm-nav-shell { display: contents; }
.nm-nav { display: flex; gap: 34px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nm-nav a {
  font-family: var(--nm-font-display);
  font-weight: 500; font-size: 14px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--nm-paper);
  position: relative; padding: 6px 0;
}
.nm-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--nm-primary);
  transition: width .25s ease;
}
.nm-nav a:hover::after,
.nm-nav a[aria-current="page"]::after { width: 100%; }
.nm-nav a[aria-current="page"] { color: var(--nm-primary); }

.nm-langs { display: inline-flex; gap: 6px; align-items: center; }
.nm-langs a {
  font-family: var(--nm-font-display); font-size: 13px; font-weight: 600;
  padding: 5px 9px; border: 1px solid var(--nm-line); border-radius: 3px;
  color: var(--nm-muted);
}
.nm-langs a[aria-current="true"] {
  color: var(--nm-ink); background: var(--nm-primary); border-color: var(--nm-primary);
}

.nm-burger {
  display: none; background: none; border: 0; padding: 8px;
  color: var(--nm-paper); font-size: 22px; line-height: 1;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.nm-hero {
  position: relative; overflow: hidden;
  padding: 84px 0 104px;
  background: var(--nm-ink);
}
.nm-hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--nm-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nm-line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 78%);
}
.nm-hero__glow {
  position: absolute; width: 780px; height: 780px; top: -280px; right: -180px;
  background: radial-gradient(circle, var(--nm-primary-soft) 0%, transparent 62%);
  pointer-events: none;
}
.nm-hero__inner { position: relative; z-index: 2; }


.nm-hero__title {
  font-family: var(--nm-font-display);
  font-size: clamp(2.8rem, 8.5vw, 7.2rem);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.035em;
  text-transform: uppercase; margin: 0 0 28px;
}
.nm-hero__title .accent { color: var(--nm-primary); }
.nm-hero__title .stroke {
  color: transparent;
  -webkit-text-stroke: 2px var(--nm-paper);
}
.nm-hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 62ch; color: var(--nm-muted); margin-bottom: 40px;
}
.nm-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */
.nm-section { padding: 110px 0; position: relative; }
.nm-section--tight { padding: 78px 0; }
.nm-section--surface { background: var(--nm-surface); }

.nm-sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin-bottom: 56px; flex-wrap: wrap;
}
.nm-sec-head__label {
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--nm-primary);
  display: block; margin-bottom: 14px;
}
.nm-sec-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  text-transform: uppercase; margin: 0;
}
.nm-sec-head p { max-width: 56ch; margin: 14px 0 0; }

.nm-rule { height: 1px; background: var(--nm-line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   8. Cards — games / ecosystem / services / team
   -------------------------------------------------------------------------- */
.nm-grid { display: grid; gap: 28px; }
.nm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nm-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* People grids size to the number of people, so a founder-only team does
   not sit alone in a four-column track with three empty ones beside it. */
.nm-grid--1 { grid-template-columns: minmax(0, 300px); }

.nm-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--nm-surface);
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.nm-card:hover { border-color: var(--nm-primary); transform: translateY(-5px); }

.nm-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--nm-surface-2);
}
.nm-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.nm-card:hover .nm-card__media img { transform: scale(1.05); }

.nm-card__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.nm-card__title {
  font-family: var(--nm-font-display); font-size: 1.32rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: var(--nm-paper);
}
.nm-card__tagline { margin: 0; font-size: .96rem; color: var(--nm-muted); }
.nm-card__meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--nm-line);
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--nm-muted-2);
}
.nm-card__link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; }

/* status / type chips */
.nm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--nm-line-2); color: var(--nm-muted);
  background: rgba(0, 0, 0, .4);
}
.nm-chip--released    { color: var(--nm-ink); background: var(--nm-primary); border-color: var(--nm-primary); }
.nm-chip--development { color: var(--nm-primary); border-color: var(--nm-primary); }
.nm-chip--prototype,
.nm-chip--concept     { color: var(--nm-muted); }
.nm-chip--igda        { color: var(--nm-ink); background: var(--igda-yellow); border-color: var(--igda-yellow); }
.nm-card__media .nm-chip { position: absolute; top: 14px; left: 14px; z-index: 2; }

/* team */
.nm-person__photo {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--nm-surface-2);
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
}
.nm-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.nm-person__name {
  font-family: var(--nm-font-display); font-weight: 500; text-transform: uppercase;
  margin: 16px 0 2px; font-size: 1.06rem;
}
.nm-person__role { font-size: .9rem; color: var(--nm-primary); margin: 0; }

/* services */
.nm-service { padding: 34px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); background: var(--nm-surface); transition: border-color .3s ease, transform .3s ease; position: relative; }
/* Only panels that are actually links get the hover affordance — a static
   panel that lifts on hover reads as clickable when it is not. */
.nm-service--link:hover { border-color: var(--nm-primary); transform: translateY(-5px); }
.nm-service__icon { font-size: 30px; color: var(--nm-primary); margin-bottom: 20px; display: block; }
.nm-service h3 { font-size: 1.24rem; text-transform: uppercase; margin: 0 0 10px; }

/* --------------------------------------------------------------------------
   9. Filters
   -------------------------------------------------------------------------- */
.nm-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.nm-filter {
  font-family: var(--nm-font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 20px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--nm-line-2); background: transparent; color: var(--nm-muted);
  transition: all .2s ease;
}
.nm-filter:hover { color: var(--nm-paper); border-color: var(--nm-paper); }
.nm-filter[aria-pressed="true"] {
  background: var(--nm-primary); border-color: var(--nm-primary); color: var(--nm-ink);
}

/* --------------------------------------------------------------------------
   10. Split / partner / stats
   -------------------------------------------------------------------------- */
.nm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

.nm-partner {
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
  background: linear-gradient(135deg, rgba(204,255,49,.05), transparent 55%), var(--nm-surface);
  padding: 56px;
}
.nm-partner__logo { max-width: 260px; margin-bottom: 28px; }
.nm-partner__logo img { width: 100%; display: block; }

.nm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--nm-line); border: 1px solid var(--nm-line); }
.nm-stat { background: var(--nm-ink); padding: 40px 28px; text-align: center; }
.nm-stat__value {
  font-family: var(--nm-font-display); font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500; color: var(--nm-primary); line-height: 1; display: block;
}
.nm-stat__label {
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--nm-muted); margin-top: 12px; display: block;
}

/* marquee */
.nm-marquee { overflow: hidden; border-block: 1px solid var(--nm-line); padding: 22px 0; background: var(--nm-ink); }
.nm-marquee__track { display: flex; gap: 44px; width: max-content; animation: nm-scroll 32s linear infinite; }
.nm-marquee span {
  font-family: var(--nm-font-display); font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 1px var(--nm-line-2); white-space: nowrap;
}
.nm-marquee span:nth-child(even) { color: var(--nm-primary); -webkit-text-stroke: 0; }
@keyframes nm-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nm-marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   11. Page header (inner pages)
   -------------------------------------------------------------------------- */
.nm-page-head { padding: 170px 0 74px; border-bottom: 1px solid var(--nm-line); position: relative; overflow: hidden; }
.nm-page-head h1 {
  font-size: clamp(2.4rem, 6.5vw, 5rem); text-transform: uppercase;
  letter-spacing: -0.03em; margin: 0 0 18px;
}
.nm-page-head p { max-width: 62ch; font-size: 1.06rem; margin: 0; }
.nm-crumbs {
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--nm-muted-2); margin-bottom: 18px;
}
.nm-crumbs a:hover { color: var(--nm-primary); }

/* --------------------------------------------------------------------------
   12. Detail pages
   -------------------------------------------------------------------------- */
.nm-detail__hero { aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); background: var(--nm-surface-2); }
.nm-detail__hero img { width: 100%; height: 100%; object-fit: cover; }

.nm-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--nm-line); border: 1px solid var(--nm-line); margin: 44px 0; }
.nm-spec { background: var(--nm-ink); padding: 22px; }
.nm-spec__k {
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--nm-muted-2); display: block; margin-bottom: 7px;
}
.nm-spec__v { font-family: var(--nm-font-display); font-weight: 600; color: var(--nm-paper); font-size: 1rem; }

.nm-prose p { font-size: 1.06rem; margin-bottom: 1.35em; }
.nm-prose h2, .nm-prose h3 { text-transform: uppercase; margin: 1.8em 0 .7em; }
.nm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.nm-list li { position: relative; padding-left: 30px; color: var(--nm-muted); }
.nm-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; background: var(--nm-primary);
}

.nm-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.nm-gallery img { width: 100%; border: 1px solid var(--nm-line); border-radius: var(--nm-radius); }

.nm-pager { display: flex; justify-content: space-between; gap: 20px; padding-top: 44px; border-top: 1px solid var(--nm-line); margin-top: 64px; flex-wrap: wrap; }
.nm-pager a { font-family: var(--nm-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; }
.nm-pager small { display: block; color: var(--nm-muted-2); font-size: 11px; letter-spacing: .18em; margin-bottom: 5px; }

/* --------------------------------------------------------------------------
   13. Forms / contact
   -------------------------------------------------------------------------- */
.nm-form { display: grid; gap: 20px; }
.nm-field { display: grid; gap: 8px; }
.nm-field label {
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--nm-muted);
}
.nm-field .req { color: var(--nm-primary); }
.nm-form input, .nm-form select, .nm-form textarea {
  width: 100%; background: var(--nm-surface); color: var(--nm-paper);
  border: 1px solid var(--nm-line-2); border-radius: var(--nm-radius);
  padding: 15px 17px; font-family: var(--nm-font-body); font-size: 1rem;
  transition: border-color .2s ease;
}
.nm-form input::placeholder, .nm-form textarea::placeholder { color: var(--nm-muted-2); }
.nm-form input:focus, .nm-form select:focus, .nm-form textarea:focus {
  border-color: var(--nm-primary); outline: none;
}
.nm-form textarea { min-height: 170px; resize: vertical; }
.nm-form [aria-invalid="true"] { border-color: var(--nm-error); }

.nm-form__note { font-size: .9rem; }
.nm-form__note[data-state="ok"]  { color: var(--nm-primary); }
.nm-form__note[data-state="err"] { color: var(--nm-error); }
.nm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nm-info { display: grid; gap: 26px; }
.nm-info__k {
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nm-muted-2); display: block; margin-bottom: 6px;
}
.nm-info__v { font-size: 1.08rem; color: var(--nm-paper); }
.nm-info__v a:hover { color: var(--nm-primary); }

/* --------------------------------------------------------------------------
   14. Press
   -------------------------------------------------------------------------- */
.nm-asset {
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
  background: var(--nm-surface); padding: 26px; display: flex;
  flex-direction: column; gap: 16px;
}
/* The preview keeps a strict 16:9 box whatever the artwork's own aspect
   ratio is — a square logo must not make its card taller than the others.
   The image is taken out of flow so it cannot grow the box. */
.nm-asset__prev {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--nm-radius); border: 1px solid var(--nm-line);
  overflow: hidden;
}
.nm-asset__prev img {
  position: absolute; inset: 20px; margin: auto;
  max-width: calc(100% - 40px); max-height: calc(100% - 40px);
  width: auto; height: auto; object-fit: contain;
}
.nm-asset__prev--dark  { background: var(--nm-ink); }
.nm-asset__prev--light { background: var(--nm-paper); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.nm-footer { background: var(--nm-ink); border-top: 1px solid var(--nm-line); padding: 84px 0 30px; }
.nm-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 44px; }
.nm-footer h4 {
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--nm-muted-2); margin: 0 0 20px;
}
.nm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.nm-footer a:hover { color: var(--nm-primary); }
.nm-footer__bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--nm-line); margin-top: 56px; padding-top: 26px;
  font-size: .88rem; color: var(--nm-muted-2);
}
.nm-social { display: flex; gap: 12px; }
.nm-social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--nm-line-2); border-radius: 50%; color: var(--nm-paper);
  transition: all .25s ease;
}
.nm-social a:hover { background: var(--nm-primary); border-color: var(--nm-primary); color: var(--nm-ink); }

.nm-footer__partner {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 26px;
  padding: 14px 18px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
}
.nm-footer__partner img { height: 36px; width: auto; }
.nm-footer__partner span {
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nm-muted);
}

/* --------------------------------------------------------------------------
   16. 404
   -------------------------------------------------------------------------- */
.nm-404 { padding: 190px 0 140px; text-align: center; }
.nm-404__code {
  font-family: var(--nm-font-display); font-size: clamp(6rem, 22vw, 17rem);
  font-weight: 500; line-height: .85; color: transparent;
  -webkit-text-stroke: 2px var(--nm-primary); display: block; margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .nm-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .nm-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  /* Viewport-sized shell: clips the panel so an off-screen menu never
     creates a horizontal scrollbar (a fixed-position panel is not clipped
     by body overflow). */
  .nm-nav-shell {
    display: block; position: fixed; inset: 0; overflow: hidden;
    z-index: 600; visibility: hidden; pointer-events: none;
    transition: visibility .3s ease;
  }
  .nm-nav-shell[data-open="true"] { visibility: visible; pointer-events: auto; }
  .nm-nav {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    background: var(--nm-surface); border-left: 1px solid var(--nm-line);
    flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 96px 30px 30px; transform: translateX(100%);
    transition: transform .3s ease; overflow-y: auto;
  }
  .nm-nav-shell[data-open="true"] .nm-nav { transform: translateX(0); }
  .nm-nav a { font-size: 1.15rem; padding: 12px 0; width: 100%; }
  .nm-burger { display: inline-block; z-index: 700; position: relative; }
  .nm-grid--3, .nm-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nm-split { grid-template-columns: 1fr; gap: 40px; }
  .nm-stats { grid-template-columns: repeat(2, 1fr); }
  .nm-section { padding: 78px 0; }
  .nm-hero { padding: 56px 0 72px; }
  .nm-partner { padding: 36px; }
}
@media (max-width: 640px) {
  .nm-grid--2, .nm-grid--3, .nm-grid--4 { grid-template-columns: 1fr; }
  .nm-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .nm-page-head { padding: 140px 0 56px; }
  .nm-specs { grid-template-columns: repeat(2, 1fr); }
}

/* Scroll reveal — visible by default, animated in when observed.
   Never hides content behind JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .is-revealed { animation: nm-rise .6s ease both; }
}
@keyframes nm-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Custom icons
   Themify has no gamepad or itch.io glyph. These use CSS masks so they
   inherit currentColor and line up with the .ti-* icons.
   -------------------------------------------------------------------------- */
.nm-ico {
  display: inline-block; width: 1em; height: 1em;
  background-color: currentColor; vertical-align: -0.125em;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.nm-ico--gamepad { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.5%207h11a4.5%204.5%200%200%201%204.4%203.6l1%205A3.5%203.5%200%200%201%2019.5%2020c-1%200-1.9-.5-2.5-1.3L15.6%2017H8.4l-1.4%201.7A3.2%203.2%200%200%201%204.5%2020%203.5%203.5%200%200%201%201.1%2015.6l1-5A4.5%204.5%200%200%201%206.5%207Zm.5%203v2H5v2h2v2h2v-2h2v-2H9v-2H7Zm9.5%201a1.25%201.25%200%201%200%200%202.5%201.25%201.25%200%200%200%200-2.5Zm-2.5%203a1.25%201.25%200%201%200%200%202.5%201.25%201.25%200%200%200%200-2.5Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.5%207h11a4.5%204.5%200%200%201%204.4%203.6l1%205A3.5%203.5%200%200%201%2019.5%2020c-1%200-1.9-.5-2.5-1.3L15.6%2017H8.4l-1.4%201.7A3.2%203.2%200%200%201%204.5%2020%203.5%203.5%200%200%201%201.1%2015.6l1-5A4.5%204.5%200%200%201%206.5%207Zm.5%203v2H5v2h2v2h2v-2h2v-2H9v-2H7Zm9.5%201a1.25%201.25%200%201%200%200%202.5%201.25%201.25%200%200%200%200-2.5Zm-2.5%203a1.25%201.25%200%201%200%200%202.5%201.25%201.25%200%200%200%200-2.5Z%22%2F%3E%3C%2Fsvg%3E"); }
.nm-ico--itch { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3.1%203.5C2%204.2.1%206.4.1%207v1c0%201.3%201.2%202.4%202.3%202.4%201.3%200%202.4-1.1%202.4-2.4%200%201.3%201%202.4%202.4%202.4%201.3%200%202.3-1.1%202.3-2.4%200%201.3%201.1%202.4%202.5%202.4s2.5-1.1%202.5-2.4c0%201.3%201%202.4%202.3%202.4%201.4%200%202.4-1.1%202.4-2.4%200%201.3%201.1%202.4%202.4%202.4C22.8%2010.4%2024%209.3%2024%208V7c0-.6-1.9-2.8-3-3.5-3.5-.1-6-.2-8.9-.2s-8.5.1-9%20.2Zm6.3%208.2c-1.2%200-2.2-.6-2.7-1.5-.5.9-1.5%201.5-2.7%201.5-.4%200-.8-.1-1.2-.2-.2%201.9-.3%204-.3%206.2%200%201.6%201.4%202.8%203.1%202.8h12.8c1.7%200%203.1-1.2%203.1-2.8%200-2.2-.1-4.3-.3-6.2-.4.1-.8.2-1.2.2-1.2%200-2.2-.6-2.7-1.5-.5.9-1.5%201.5-2.7%201.5s-2.2-.6-2.7-1.5c-.5.9-1.4%201.5-2.6%201.5Zm-.5%202h6.2c1%200%201.9.9%202.5%202.4a1%201%200%200%201-1%201.3c-.9%200-1.7-.6-2.4-1.2v1.6c0%20.5-.4.9-.9.9h-2.6a.9.9%200%200%201-.9-.9v-1.6c-.7.6-1.5%201.2-2.4%201.2a1%201%200%200%201-1-1.3c.6-1.5%201.5-2.4%202.5-2.4Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3.1%203.5C2%204.2.1%206.4.1%207v1c0%201.3%201.2%202.4%202.3%202.4%201.3%200%202.4-1.1%202.4-2.4%200%201.3%201%202.4%202.4%202.4%201.3%200%202.3-1.1%202.3-2.4%200%201.3%201.1%202.4%202.5%202.4s2.5-1.1%202.5-2.4c0%201.3%201%202.4%202.3%202.4%201.4%200%202.4-1.1%202.4-2.4%200%201.3%201.1%202.4%202.4%202.4C22.8%2010.4%2024%209.3%2024%208V7c0-.6-1.9-2.8-3-3.5-3.5-.1-6-.2-8.9-.2s-8.5.1-9%20.2Zm6.3%208.2c-1.2%200-2.2-.6-2.7-1.5-.5.9-1.5%201.5-2.7%201.5-.4%200-.8-.1-1.2-.2-.2%201.9-.3%204-.3%206.2%200%201.6%201.4%202.8%203.1%202.8h12.8c1.7%200%203.1-1.2%203.1-2.8%200-2.2-.1-4.3-.3-6.2-.4.1-.8.2-1.2.2-1.2%200-2.2-.6-2.7-1.5-.5.9-1.5%201.5-2.7%201.5s-2.2-.6-2.7-1.5c-.5.9-1.4%201.5-2.6%201.5Zm-.5%202h6.2c1%200%201.9.9%202.5%202.4a1%201%200%200%201-1%201.3c-.9%200-1.7-.6-2.4-1.2v1.6c0%20.5-.4.9-.9.9h-2.6a.9.9%200%200%201-.9-.9v-1.6c-.7.6-1.5%201.2-2.4%201.2a1%201%200%200%201-1-1.3c.6-1.5%201.5-2.4%202.5-2.4Z%22%2F%3E%3C%2Fsvg%3E"); }

/* --------------------------------------------------------------------------
   19. Partner row
   Outbound endorsements shown side by side. Links are do-follow.
   -------------------------------------------------------------------------- */
/* Logo wall: auto-fit, so adding or removing a partner needs no CSS change. */
.nm-partners {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.nm-partner-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
  background: var(--nm-ink);
  transition: border-color .25s ease, transform .25s ease;
}
.nm-partner-card:hover { border-color: var(--nm-primary); transform: translateY(-3px); }
.nm-partner-card__logo {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 116px;              /* fixed, so wide and square marks align alike */
}
.nm-partner-card__logo img { max-width: 100%; width: auto; display: block; }
.nm-partner-card__meta { display: grid; gap: 3px; min-width: 0; }
.nm-partner-card__meta strong {
  font-family: var(--nm-font-display); font-weight: 500;
  font-size: 1.02rem; color: var(--nm-paper);
}
.nm-partner-card__meta small {
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--nm-muted-2);
}
.nm-partner-card > .ti-arrow-top-right { margin-left: auto; color: var(--nm-primary); }

.nm-footer__partners { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.nm-footer__partners .nm-footer__partner { margin-top: 0; }
.nm-footer__partner { transition: border-color .25s ease; }
.nm-footer__partner:hover { border-color: var(--nm-primary); }

/* The two home pillars are now links into their sections. */
.nm-service--link { display: block; }
.nm-service__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nm-primary);
}
.nm-service--link:hover .nm-service__go { gap: 12px; }

@media (max-width: 767px) {
  .nm-partners { grid-template-columns: 1fr; }
  .nm-partner-card { gap: 14px; padding: 18px; }
  /* `width` here, not min/max — the base rule sets a fixed width that a
     min-width override cannot shrink, which overflowed narrow screens. */
  .nm-partner-card__logo { width: 84px; }
}
.nm-ico--x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.9%202H22l-7.4%208.5L23.3%2022h-6.8l-5.3-7-6.1%207H2l7.9-9.1L1.7%202h7l4.8%206.4L18.9%202Zm-1.2%2018h1.9L7.4%203.9H5.4L17.7%2020Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.9%202H22l-7.4%208.5L23.3%2022h-6.8l-5.3-7-6.1%207H2l7.9-9.1L1.7%202h7l4.8%206.4L18.9%202Zm-1.2%2018h1.9L7.4%203.9H5.4L17.7%2020Z%22%2F%3E%3C%2Fsvg%3E"); }

/* --------------------------------------------------------------------------
   20. itch.io widget
   Third-party iframe, so it gets a fixed height (itch renders at 167px)
   and full width of its column.
   -------------------------------------------------------------------------- */
.nm-itch { margin-top: 30px; }
.nm-itch__label {
  display: block; margin-bottom: 10px;
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nm-muted-2);
}
.nm-itch__frame {
  width: 100%; height: 167px; border: 0; display: block;
  border-radius: var(--nm-radius); background: var(--nm-surface);
}

/* --------------------------------------------------------------------------
   21. Games showcase
   Art-forward blocks in place of per-game pages. Alternating sides keep a
   short catalogue from reading as a list.
   -------------------------------------------------------------------------- */
.nm-showcase { display: grid; gap: 88px; }
.nm-show {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 48px; align-items: center;
}
.nm-show:nth-child(even) .nm-show__media { order: 2; }

.nm-show__media {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
  background: var(--nm-surface-2); aspect-ratio: 16 / 10;
}
.nm-show__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.nm-show__media:hover img { transform: scale(1.04); }
.nm-show__media:hover { border-color: var(--nm-primary); }
.nm-show__media .nm-chip { position: absolute; top: 16px; left: 16px; }

.nm-show__title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); text-transform: uppercase;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.nm-show__tagline { font-size: 1.06rem; margin: 0 0 20px; max-width: 46ch; }
.nm-show__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 24px;
  font-family: var(--nm-font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--nm-muted-2);
}
.nm-show .nm-itch { margin-top: 0; }

@media (max-width: 900px) {
  .nm-showcase { gap: 60px; }
  .nm-show { grid-template-columns: 1fr; gap: 26px; }
  .nm-show:nth-child(even) .nm-show__media { order: 0; }
}

/* --------------------------------------------------------------------------
   22. Engine / platform marks
   Unity and Unreal come from Simple Icons (CC0 icon set; the marks remain
   their owners' trademarks, used here nominatively to say what a game was
   built with). Windows is authored locally — Microsoft marks were pulled
   from Simple Icons. All render through the .nm-ico mask so they take
   currentColor like the rest of the icon set.
   -------------------------------------------------------------------------- */
.nm-ico--unity { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m12.9288%204.2939%203.7997%202.1929c.1366.077.1415.2905%200%20.3675l-4.515%202.6076a.4192.4192%200%200%201-.4246%200L7.274%206.8543c-.139-.0745-.1415-.293%200-.3675l3.7972-2.193V0L1.3758%205.5977V16.793l3.7177-2.1456v-4.3858c-.0025-.1565.1813-.2682.318-.1838l4.5148%202.6076a.4252.4252%200%200%201%20.2136.3676v5.2127c.0025.1565-.1813.2682-.3179.1838l-3.7996-2.1929-3.7178%202.1457L12%2024l9.6954-5.5977-3.7178-2.1457-3.7996%202.1929c-.1341.082-.3229-.0248-.3179-.1838V13.053c0-.1565.087-.2956.2136-.3676l4.5149-2.6076c.134-.082.3228.0224.3179.1838v4.3858l3.7177%202.1456V5.5977L12.9288%200Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m12.9288%204.2939%203.7997%202.1929c.1366.077.1415.2905%200%20.3675l-4.515%202.6076a.4192.4192%200%200%201-.4246%200L7.274%206.8543c-.139-.0745-.1415-.293%200-.3675l3.7972-2.193V0L1.3758%205.5977V16.793l3.7177-2.1456v-4.3858c-.0025-.1565.1813-.2682.318-.1838l4.5148%202.6076a.4252.4252%200%200%201%20.2136.3676v5.2127c.0025.1565-.1813.2682-.3179.1838l-3.7996-2.1929-3.7178%202.1457L12%2024l9.6954-5.5977-3.7178-2.1457-3.7996%202.1929c-.1341.082-.3229-.0248-.3179-.1838V13.053c0-.1565.087-.2956.2136-.3676l4.5149-2.6076c.134-.082.3228.0224.3179.1838v4.3858l3.7177%202.1456V5.5977L12.9288%200Z%22%2F%3E%3C%2Fsvg%3E"); }
.nm-ico--unreal { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200a12%2012%200%201012%2012A12%2012%200%200012%200zm0%2023.52A11.52%2011.52%200%201123.52%2012%2011.52%2011.52%200%200112%2023.52zm7.13-9.791c-.206.997-1.126%203.557-4.06%204.942l-1.179-1.325-1.988%202a7.338%207.338%200%2001-5.804-2.978%202.859%202.859%200%2000.65.123c.326.006.678-.114.678-.66v-5.394a.89.89%200%2000-1.116-.89c-.92.212-1.656%202.509-1.656%202.509a7.304%207.304%200%20012.528-5.597%207.408%207.408%200%20013.73-1.721c-1.006.573-1.57%201.507-1.57%202.29%200%201.262.76%201.109.984.923v7.28a1.157%201.157%200%2000.148.256%201.075%201.075%200%2000.88.445c.76%200%201.747-.868%201.747-.868V9.172c0-.6-.452-1.324-.905-1.572%200%200%20.838-.149%201.484.346a5.537%205.537%200%2001.387-.425c1.508-1.48%202.929-1.902%204.112-2.112%200%200-2.151%201.69-2.151%203.96%200%201.687.043%205.801.043%205.801.799.771%201.986-.342%203.059-1.441Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200a12%2012%200%201012%2012A12%2012%200%200012%200zm0%2023.52A11.52%2011.52%200%201123.52%2012%2011.52%2011.52%200%200112%2023.52zm7.13-9.791c-.206.997-1.126%203.557-4.06%204.942l-1.179-1.325-1.988%202a7.338%207.338%200%2001-5.804-2.978%202.859%202.859%200%2000.65.123c.326.006.678-.114.678-.66v-5.394a.89.89%200%2000-1.116-.89c-.92.212-1.656%202.509-1.656%202.509a7.304%207.304%200%20012.528-5.597%207.408%207.408%200%20013.73-1.721c-1.006.573-1.57%201.507-1.57%202.29%200%201.262.76%201.109.984.923v7.28a1.157%201.157%200%2000.148.256%201.075%201.075%200%2000.88.445c.76%200%201.747-.868%201.747-.868V9.172c0-.6-.452-1.324-.905-1.572%200%200%20.838-.149%201.484.346a5.537%205.537%200%2001.387-.425c1.508-1.48%202.929-1.902%204.112-2.112%200%200-2.151%201.69-2.151%203.96%200%201.687.043%205.801.043%205.801.799.771%201.986-.342%203.059-1.441Z%22%2F%3E%3C%2Fsvg%3E"); }
.nm-ico--windows { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M1.5%201.5h9v9h-9zM13.5%201.5h9v9h-9zM1.5%2013.5h9v9h-9zM13.5%2013.5h9v9h-9z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M1.5%201.5h9v9h-9zM13.5%201.5h9v9h-9zM1.5%2013.5h9v9h-9zM13.5%2013.5h9v9h-9z%22%2F%3E%3C%2Fsvg%3E"); }
/* Icons sit inline with their label in the showcase meta line. */
.nm-show__meta span { display: inline-flex; align-items: center; gap: 7px; }
.nm-show__meta .nm-ico { font-size: 15px; opacity: .9; }
/* Three-up variant of the stat band (games portfolio totals). */
.nm-stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .nm-stats--3 { grid-template-columns: 1fr; } }
.nm-ico--team { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%2011.5a3.75%203.75%200%201%200%200-7.5%203.75%203.75%200%200%200%200%207.5Z%22%2F%3E%3Cpath%20d%3D%22M16.8%2011.9a3%203%200%201%200-2.2-5.5%205.2%205.2%200%200%201%20.1%205.2c.6.3%201.3.4%202.1.3Z%22%2F%3E%3Cpath%20d%3D%22M9%2013.2c-3.3%200-6%201.9-6%204.2V20h12v-2.6c0-2.3-2.7-4.2-6-4.2Z%22%2F%3E%3Cpath%20d%3D%22M17%2013.4c-.6%200-1.2.1-1.7.2%201.2%201%201.9%202.4%201.9%203.8V20h4v-2.3c0-2-1.9-4.3-4.2-4.3Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%2011.5a3.75%203.75%200%201%200%200-7.5%203.75%203.75%200%200%200%200%207.5Z%22%2F%3E%3Cpath%20d%3D%22M16.8%2011.9a3%203%200%201%200-2.2-5.5%205.2%205.2%200%200%201%20.1%205.2c.6.3%201.3.4%202.1.3Z%22%2F%3E%3Cpath%20d%3D%22M9%2013.2c-3.3%200-6%201.9-6%204.2V20h12v-2.6c0-2.3-2.7-4.2-6-4.2Z%22%2F%3E%3Cpath%20d%3D%22M17%2013.4c-.6%200-1.2.1-1.7.2%201.2%201%201.9%202.4%201.9%203.8V20h4v-2.3c0-2-1.9-4.3-4.2-4.3Z%22%2F%3E%3C%2Fsvg%3E"); }

/* --------------------------------------------------------------------------
   23. Named partner credit on a project
   -------------------------------------------------------------------------- */
.nm-credit { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--nm-line); }
.nm-credit__label {
  display: block; margin-bottom: 14px;
  font-family: var(--nm-font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nm-muted-2);
}
.nm-credit__logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.nm-credit__logos a {
  display: grid; place-items: center; padding: 10px 14px;
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius);
  background: var(--nm-ink); transition: border-color .25s ease;
}
.nm-credit__logos a:hover { border-color: var(--nm-primary); }
.nm-credit__logos img { height: 34px; width: auto; display: block; }

/* --------------------------------------------------------------------------
   24. Layout primitives
   Replaces Bootstrap. The site used 11 of its classes — a container, a
   12-column row, four column widths, one offset and four display utilities —
   for 155KB. This is the same behaviour in about 1KB.
   -------------------------------------------------------------------------- */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 24px;
}
.container { max-width: var(--nm-maxw); }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}
.row > [class*="col-"] {
  width: 100%;
  padding-inline: 12px;
}

/* Columns are 12ths, and only apply at or above their breakpoint, matching
   the Bootstrap behaviour the markup was written against. */
@media (min-width: 768px) {
  .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-4 { width: 33.333333%; }
  .col-lg-7 { width: 58.333333%; }
  .col-lg-8 { width: 66.666667%; }
  .offset-lg-1 { margin-left: 8.333333%; }
}

.d-none  { display: none !important; }
.d-flex  { display: flex !important; }
@media (min-width: 992px) {
  .d-lg-none        { display: none !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
}

/* Flex utilities the markup uses. These came from Bootstrap and were missed
   when it was removed — the header relies on them, and without them the nav
   collapsed onto the logo. */
.align-items-center     { align-items: center !important; }
.justify-content-between{ justify-content: space-between !important; }