/* /servers/ only: compact Hero and brief section */
  .hero.servers-hero {
    min-height: 460px;
    padding: 92px 40px 40px;
  }

  .servers-hero-content {
    width: min(100%, 1200px);
    max-width: 1200px;
    margin: 0 auto;
  }

  .hero.servers-hero h1 {
    max-width: 720px;
    margin-bottom: 18px;
  }

  .hero.servers-hero .hero-desc {
    max-width: 620px;
    margin-bottom: 28px;
  }

  section#brief {
    position: relative;
    max-width: none;
    padding: 36px 40px;

    background:
      linear-gradient(
        90deg,
        rgba(10, 12, 15, 0.76) 0%,
        rgba(10, 12, 15, 0.66) 50%,
        rgba(10, 12, 15, 0.78) 100%
      ),
      url('/server-infrastructure-banner.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    border-top: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
  }

  section#brief > .section-label,
  section#brief > .section-title,
  section#brief > .brief-grid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  section#brief .section-label {
    margin-bottom: 8px;
  }

  section#brief .section-title {
    margin-bottom: 16px;
  }

  section#brief .brief-grid {
    margin-top: 12px;
  }

  section#brief .brief-card {
    background: rgba(15, 19, 24, 0.90);
    backdrop-filter: blur(3px);
  }

  @media (max-width: 700px) {
    .hero.servers-hero {
      min-height: auto;
      padding: 84px 20px 36px;
    }

    section#brief {
      padding: 28px 20px;
      background-attachment: scroll;
      background-position: center center;
    }
  }