/* ══════════════════════════════════════════════════════════════
   QUATRE CASE STUDIES PAGE — CASE-STUDIES.HTML SPECIFIC STYLES
   ═════════════════════════════════════════════════════════════ */

html,
body {
  background: #0a0a0a;
  color: var(--text-light);
}

/* Nav always white on this dark-background page */
.nav {
  color: #ffffff;
}

.nav-links .nav-disabled {
  color: rgba(255, 255, 255, 0.30);
}

.logo img {
  filter: brightness(0) invert(1);
}

.nav-contact-btn {
  background: #ffffff;
  color: #0f0f0f;
}


.cs-hero {
  padding-top: calc(var(--nav-h) + 72px);
  padding-bottom: 48px;
}

.cs-hero-title {
  font-size: 32px;
  line-height: 40px;
  margin-top: 14px;
  max-width: 28ch;
}

/* Filter pills */
.cs-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.cs-filter-pill {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-lh);
  cursor: pointer;
  font-family: "Inter", Arial, sans-serif;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.24s ease;
}

.cs-filter-pill:hover {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.cs-filter-pill.is-active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

/* Masonry grid */
.cs-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  padding-bottom: 80px;
}

/* Responsive */
@media (max-width: 1024px) {
  .cs-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .cs-masonry {
    grid-template-columns: 1fr;
  }

  .cs-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.96);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 14px;
    display: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
  }

  .nav-links.open {
    display: flex;
  }
}