/* Netsense /projects/ — design handoff integration. */
.projects-page {background: var(--bg); color: var(--text);}
.projects-page h1,
.projects-page h2,
.projects-page h3 {letter-spacing: -.03em;}
.projects-page h2 {margin: 0;}

.projects-hero {border-bottom: 1px solid var(--line);}
.projects-hero__inner {display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr); gap: clamp(42px, 5vw, 78px); align-items: center; padding-top: 54px; padding-bottom: 52px; max-width: var(--container);}
.projects-hero__content {min-width: 0;}
.projects-kicker {display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--text); font-size: 13px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;}
.projects-kicker::before {content: ""; width: 28px; height: 2px; flex: 0 0 28px; background: var(--green);}
.projects-hero h1 {margin: 0 0 22px; max-width: 760px; font-size: clamp(42px, 4.6vw, 66px); line-height: .98; font-weight: 650;}
.projects-hero__lead {max-width: 760px; margin: 0 0 18px; color: var(--muted); font-size: 18px; line-height: 1.55;}
.projects-hero__note {max-width: 760px; margin: 0; color: #c9ced0; font-size: 15px; line-height: 1.55;}
.projects-hero__visual {position: relative; min-height: 344px; align-self: stretch;}
.projects-hero-shot {position: absolute; overflow: hidden; border: 1px solid #314149; background: #071116; box-shadow: 0 18px 46px rgba(0, 0, 0, .24);}
.projects-hero-shot img {display: block; width: 100%; height: 100%; object-fit: cover;}
.projects-hero-shot--main {z-index: 1; top: 8px; right: 0; width: 82%; height: 236px;}
.projects-hero-shot--secondary {z-index: 2; left: 0; bottom: 4px; width: 58%; height: 166px;}
.projects-hero-shot--portrait {z-index: 3; right: 7%; bottom: 0; width: 24%; height: 184px;}
.projects-hero-shot--portrait img {object-fit: contain; background: #071116;}

.projects-featured {border-bottom: 1px solid var(--line);}
.projects-featured > .container {padding-top: 38px; padding-bottom: 38px;}
.projects-featured h2 {margin-bottom: 26px; font-size: clamp(28px, 2.4vw, 38px);}
.projects-featured__grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid transparent;}
.projects-featured-card {position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(220px, .88fr); grid-template-areas: "heading media" "body media"; align-content: start; gap: 14px 28px; min-width: 0; padding: 24px 18px 26px 12px; border-bottom: 1px solid var(--line); transition: background .18s ease;}
.projects-featured-card:nth-child(odd) {border-right: 1px solid var(--line); padding-right: 28px;}
.projects-featured-card:nth-child(even) {padding-left: 20px;}
.projects-featured-card:hover,
.projects-featured-card:focus-visible {background: rgba(9, 26, 31, .42); outline: none;}
.projects-featured-card__heading {grid-area: heading; padding-right: 48px;}
.projects-featured-card__heading h3 {margin: 0 0 3px; font-size: 24px; line-height: 1.12;}
.projects-card-type {margin: 0; color: var(--muted); font-size: 14px; line-height: 1.42;}
.projects-featured-card__body {grid-area: body; min-width: 0;}
.projects-card-role {margin: 0 0 13px; color: var(--green); font-size: 13px; line-height: 1.42;}
.projects-card-role strong {font-weight: 600;}
.projects-featured-card__media {grid-area: media; align-self: start; display: grid; place-items: center; min-height: 196px; overflow: hidden; border: 1px solid var(--line); background: #071116;}
.projects-featured-card__media picture {width: 100%;}
.projects-featured-card__media img {width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover;}
.projects-featured-card__media--portrait img {width: auto; max-width: 58%; height: 190px; margin: 0 auto; object-fit: contain;}
.projects-check-list {display: grid; gap: 5px; margin: 0 0 16px; padding: 0; list-style: none; color: #d9ddde; font-size: 13px; line-height: 1.42;}
.projects-check-list li {display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 5px; align-items: start;}
.projects-check-list li > span {color: var(--green); font-weight: 700;}
.projects-tags {display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;}
.projects-tags span {display: inline-flex; min-height: 22px; align-items: center; padding: 2px 8px; border: 1px solid #43525a; border-radius: 5px; color: #e7e9e8; font-size: 11px; line-height: 1.25;}
.projects-card-arrow {position: absolute; z-index: 2; top: 20px; right: 18px; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); background: rgba(3, 13, 16, .88); transition: background .18s ease, color .18s ease;}
.projects-card-arrow svg {width: 19px; height: 19px;}
.projects-featured-card:hover .projects-card-arrow,
.projects-featured-card:focus-visible .projects-card-arrow,
.projects-compact-card:hover .projects-card-arrow,
.projects-compact-card:focus-visible .projects-card-arrow {background: var(--green); color: #041008;}

.projects-catalog > .container {padding-top: 34px; padding-bottom: 34px;}
.projects-catalog__head {padding-bottom: 16px; border-bottom: 1px solid var(--line);}
.projects-catalog__head h2 {margin-bottom: 14px; font-size: clamp(30px, 2.7vw, 42px);}
.projects-filters {display: flex; align-items: center; gap: 28px; overflow-x: auto; scrollbar-width: none;}
.projects-filters::-webkit-scrollbar {display: none;}
.projects-filters button,
.projects-filters a {flex: 0 0 auto; padding: 0 0 6px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.2; cursor: pointer;}
.projects-filters button:hover,
.projects-filters button:focus-visible,
.projects-filters button.is-active,
.projects-filters a:hover,
.projects-filters a:focus-visible,
.projects-filters a.is-active {color: var(--green); border-bottom-color: var(--green); outline: none;}
.projects-catalog__grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
.projects-compact-card {position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; min-width: 0; padding: 18px 52px 18px 10px; border-bottom: 1px solid var(--line); transition: background .18s ease;}
.projects-compact-card:nth-child(odd) {border-right: 1px solid var(--line); padding-right: 58px;}
.projects-compact-card:nth-child(even) {padding-left: 20px;}
.projects-compact-card[hidden] {display: none !important;}
.projects-compact-card:hover,
.projects-compact-card:focus-visible {background: rgba(9, 26, 31, .38); outline: none;}
.projects-compact-card.is-placeholder-link {cursor: default;}
.projects-compact-card__media {display: grid; place-items: center; align-self: start; min-height: 116px; overflow: hidden; border: 1px solid #3b4a52; background: #071116;}
.projects-compact-card__media picture {width: 100%; height: 100%;}
.projects-compact-card__media img {width: 100%; height: 116px; object-fit: cover;}
.projects-compact-card__media--portrait img {width: auto; max-width: 76%; margin: 0 auto; object-fit: contain;}
.projects-fallback {display: grid; place-items: center; width: 100%; min-height: 116px; color: var(--green); font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -.05em;}
.projects-compact-card__content {min-width: 0;}
.projects-compact-card h3 {margin: 0 42px 2px 0; font-size: 18px; line-height: 1.15;}
.projects-compact-card .projects-card-type {margin-bottom: 10px; font-size: 12px;}
.projects-compact-card .projects-card-role {margin-bottom: 8px; font-size: 12px;}
.projects-compact-card .projects-check-list {gap: 3px; margin-bottom: 9px; font-size: 11px;}
.projects-compact-card .projects-tags span {min-height: 20px; padding: 1px 7px; font-size: 10px;}
.projects-compact-card .projects-card-arrow {top: 17px; right: 14px; width: 33px; height: 33px;}

.site-project-cta {border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.site-project-cta__inner {padding-top: 48px; padding-bottom: 48px; text-align: center;}
.site-project-cta h2 {margin: 0 0 18px; font-size: clamp(30px, 3vw, 44px);}
.site-project-cta p {max-width: 720px; margin: 0 auto 24px; color: var(--muted); font-size: 17px; line-height: 1.55;}
.site-project-cta .button {min-width: 250px;}

@media (max-width: 1180px) {
  .projects-hero__inner {grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr); gap: 34px;}
  .projects-hero__visual {min-height: 316px;}
  .projects-hero-shot--main {height: 216px;}
  .projects-hero-shot--secondary {height: 150px;}
  .projects-hero-shot--portrait {height: 168px;}
  .projects-featured-card {grid-template-columns: minmax(0, 1fr) 230px;}
  .projects-featured-card__media {min-height: 168px;}
  .projects-featured-card__media--portrait img {height: 164px;}
  .projects-compact-card {grid-template-columns: 112px minmax(0, 1fr); gap: 14px;}
  .projects-compact-card__media,
  .projects-fallback {min-height: 105px;}
  .projects-compact-card__media img {height: 105px;}
}

@media (max-width: 900px) {
  .projects-hero__inner {grid-template-columns: 1fr; gap: 30px; padding-top: 42px; padding-bottom: 42px;}
  .projects-hero__visual {width: min(680px, 100%); min-height: 300px;}
  .projects-featured__grid,
  .projects-catalog__grid {grid-template-columns: 1fr;}
  .projects-featured-card:nth-child(odd),
  .projects-compact-card:nth-child(odd) {border-right: 0;}
  .projects-featured-card:nth-child(even),
  .projects-compact-card:nth-child(even) {padding-left: 12px;}
  .projects-featured-card {grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);}
  .projects-compact-card {padding-left: 10px;}
}

@media (max-width: 767px) {
  .projects-hero__inner {gap: 22px; padding-top: 26px; padding-bottom: 28px;}
  .projects-kicker {gap: 9px; margin-bottom: 10px; font-size: 11px;}
  .projects-kicker::before {width: 22px; flex-basis: 22px;}
  .projects-hero__visual {min-height: 222px;}
  .projects-hero-shot--main {top: 0; width: 84%; height: 148px;}
  .projects-hero-shot--secondary {bottom: 0; width: 58%; height: 106px;}
  .projects-hero-shot--portrait {right: 4%; width: 25%; height: 118px;}
  .projects-hero h1 {margin-bottom: 12px; font-size: 31px; line-height: 1.04;}
  .projects-hero__lead {margin-bottom: 10px; font-size: 16px; line-height: 1.45;}
  .projects-hero__note {font-size: 14px; line-height: 1.45;}

  .projects-featured > .container {padding-top: 24px; padding-bottom: 24px;}
  .projects-featured h2 {margin-bottom: 16px; font-size: 25px;}
  .projects-featured__grid {border-top: 1px solid var(--line);}
  .projects-featured-card,
  .projects-featured-card:nth-child(odd),
  .projects-featured-card:nth-child(even) {grid-template-columns: 1fr; grid-template-areas: "heading" "media" "body"; gap: 12px; padding: 18px 0 20px;}
  .projects-featured-card__heading {padding-right: 46px;}
  .projects-featured-card__heading h3 {font-size: 20px;}
  .projects-featured-card__media {min-height: 0;}
  .projects-featured-card__media img {aspect-ratio: 1.72 / 1;}
  .projects-featured-card__media--portrait {min-height: 214px;}
  .projects-featured-card__media--portrait img {height: 212px; max-width: 60%; object-fit: contain;}
  .projects-featured-card .projects-card-role {font-size: 13px;}
  .projects-featured-card .projects-check-list {font-size: 13px;}
  .projects-card-arrow {top: 15px; right: 0; width: 32px; height: 32px;}

  .projects-catalog > .container {padding-top: 24px; padding-bottom: 20px;}
  .projects-catalog__head h2 {margin-bottom: 10px; font-size: 27px;}
  .projects-filters {gap: 20px; padding-bottom: 3px; white-space: nowrap;}
  .projects-filters button,
.projects-filters a {font-size: 11px;}
  .projects-compact-card,
  .projects-compact-card:nth-child(odd),
  .projects-compact-card:nth-child(even) {grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px 42px 14px 0;}
  .projects-compact-card__media,
  .projects-fallback {min-height: 94px;}
  .projects-compact-card__media img {height: 94px;}
  .projects-fallback {font-size: 27px;}
  .projects-compact-card h3 {margin-right: 0; font-size: 17px;}
  .projects-compact-card .projects-card-type {font-size: 12px;}
  .projects-compact-card .projects-card-role {font-size: 12px;}
  .projects-compact-card .projects-check-list {grid-column: 1 / -1; font-size: 12px;}
  .projects-compact-card .projects-tags {grid-column: 1 / -1;}
  .projects-compact-card .projects-card-arrow {top: 13px; right: 0; width: 30px; height: 30px;}

  .site-project-cta__inner {padding-top: 32px; padding-bottom: 34px; text-align: left;}
  .site-project-cta h2 {margin-bottom: 12px; font-size: 28px;}
  .site-project-cta p {margin: 0 0 20px; font-size: 15px;}
  .site-project-cta .button {width: 100%; min-width: 0;}
}

/* Step81: progressive catalog reveal + text block after projects. */
.projects-load-more {
  display: flex;
  justify-content: center;
  padding-top: 26px;
}

.projects-load-more[hidden] {
  display: none !important;
}

.projects-load-more__button {
  min-width: 250px;
}

.projects-seo {
  border-top: 1px solid var(--line);
}

.projects-seo__inner {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 110px);
  padding-top: 48px;
  padding-bottom: 52px;
}

.projects-seo__heading h2 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(30px, 2.7vw, 42px);
}

.projects-seo__copy {
  max-width: 760px;
}

.projects-seo__copy p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.projects-seo__copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .projects-seo__inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 36px;
    padding-bottom: 38px;
  }

  .projects-seo__heading h2 {
    max-width: 680px;
  }
}

@media (max-width: 767px) {
  .projects-load-more {
    padding-top: 20px;
  }

  .projects-load-more__button {
    width: 100%;
    min-width: 0;
  }

  .projects-seo__inner {
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .projects-seo__heading h2 {
    font-size: 25px;
  }

  .projects-seo__copy p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.55;
  }
}

/* Step82: author display rules must not override the HTML hidden state used by projects.js. */
.projects-catalog__grid .projects-compact-card[hidden] {
  display: none !important;
}

/* step83: server-side filtering + pagination */
.projects-empty {
  margin: 26px 0 0;
  color: #aeb6b8;
}

.projects-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}

.projects-pagination__page,
.projects-pagination__arrow {
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d6dcde;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.projects-pagination__page:hover,
.projects-pagination__arrow:hover {
  border-color: var(--green);
  color: var(--green);
}

.projects-pagination__page.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #071006;
}

.projects-pagination__ellipsis {
  min-width: 24px;
  text-align: center;
  color: #798285;
}

@media (max-width: 767px) {
  .projects-pagination {
    margin-top: 24px;
    gap: 6px;
  }

  .projects-pagination__page,
  .projects-pagination__arrow {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
  }
}

/* step84: featured is a compact marketing slider; catalog contains all projects. */
.projects-featured > .container {
  position: relative;
  padding-top: 30px;
  padding-bottom: 30px;
}

.projects-featured__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-right: 104px;
  margin-bottom: 18px;
}

.projects-featured h2 {
  margin: 0;
}

.projects-featured-slider {
  position: relative;
}

.projects-featured-slider__controls {
  position: absolute;
  right: 0;
  bottom: calc(100% + 18px);
  z-index: 4;
  display: flex;
  gap: 8px;
}

.projects-featured-slider__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, opacity .18s ease;
}

.projects-featured-slider__arrow:hover,
.projects-featured-slider__arrow:focus-visible {
  border-color: var(--green);
  color: var(--green);
  outline: none;
}

.projects-featured-slider__arrow:disabled {
  opacity: .28;
  cursor: default;
}

.projects-featured-slider__viewport {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.projects-featured-slider__viewport::-webkit-scrollbar {
  display: none;
}

.projects-featured__grid {
  display: flex;
  width: 100%;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 0;
}

.projects-featured-card,
.projects-featured-card:nth-child(odd),
.projects-featured-card:nth-child(even) {
  flex: 0 0 50%;
  grid-template-columns: minmax(0, 1fr) 180px;
  grid-template-areas: "heading media" "body media";
  gap: 10px 20px;
  min-height: 248px;
  padding: 18px 22px 18px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.projects-featured-card:first-child {
  border-left: 1px solid var(--line);
}

.projects-featured-card__heading h3 {
  font-size: 21px;
}

.projects-featured-card__media {
  min-height: 148px;
}

.projects-featured-card__media img {
  aspect-ratio: 1.45 / 1;
}

.projects-featured-card__media--portrait img {
  height: 148px;
}

.projects-featured-card .projects-check-list {
  gap: 3px;
  margin-bottom: 10px;
  font-size: 12px;
}

.projects-featured-card .projects-card-role {
  margin-bottom: 9px;
  font-size: 12px;
}

.projects-featured-card .projects-tags span {
  font-size: 10px;
}

@media (max-width: 1180px) {
  .projects-featured-card,
  .projects-featured-card:nth-child(odd),
  .projects-featured-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 155px;
  }
}

@media (max-width: 900px) {
  .projects-featured-card,
  .projects-featured-card:nth-child(odd),
  .projects-featured-card:nth-child(even) {
    flex-basis: 72%;
    grid-template-columns: minmax(0, 1fr) 210px;
    padding-left: 18px;
  }
}

@media (max-width: 767px) {
  .projects-featured > .container {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .projects-featured__head {
    padding-right: 88px;
    margin-bottom: 14px;
  }

  .projects-featured-slider__controls {
    bottom: calc(100% + 13px);
  }

  .projects-featured-slider__arrow {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .projects-featured-card,
  .projects-featured-card:nth-child(odd),
  .projects-featured-card:nth-child(even) {
    flex-basis: 88%;
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "media" "body";
    gap: 10px;
    min-height: 0;
    padding: 16px 14px 18px;
  }

  .projects-featured-card__media,
  .projects-featured-card__media--portrait {
    min-height: 0;
  }

  .projects-featured-card__media img {
    aspect-ratio: 1.72 / 1;
  }

  .projects-featured-card__media--portrait img {
    height: 190px;
  }
}


/* step85: featured has no outer frame; only internal separators remain. */
.projects-featured__grid {
  border-top: 0;
  border-bottom: 0;
}

.projects-featured-card:first-child {
  border-left: 0;
}


/* step93: compact hero for filtered and paginated states */
.projects-hero--compact .projects-hero__inner {
  display: block;
  padding-top: 34px;
  padding-bottom: 34px;
}
.projects-hero--compact .projects-hero__content {
  max-width: none;
}
.projects-hero--compact h1 {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .projects-hero--compact .projects-hero__inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}