nav [aria-current=page] {
  color:var(--cyan)
}

.projects-main {
  padding-top:65px
}

.projects-intro {
  padding-bottom:55px;
  max-width:760px
}

.projects-intro h1 {
  font-size:clamp(46px,6vw,78px)
}

.projects-intro>p:not(.eyebrow) {
  font-size:18px;
  color:var(--muted);
  max-width:540px;
  margin:24px 0 18px
}

.preview-note {
  font-size:14px;
  color:#9aabc5;
  display:block;
  max-width:560px
}

.project {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:50px;
  align-items:center;
  padding:45px 0;
  border-top:1px solid var(--line)
}

.project-copy h2 {
  font-size:36px;
  letter-spacing:-1px
}

.project-copy>p:not(.eyebrow) {
  color:var(--muted);
  margin:22px 0
}

.project-copy .eyebrow {
  line-height:1.7;
  letter-spacing:1.5px
}

.project-status {
  display:inline-block;
  font-size:12px;
  color:#b2c0d6;
  border:1px solid #35455e;
  border-radius:30px;
  padding:6px 12px
}

.gallery {
  min-width:0;
  border:1px solid #415579;
  border-radius:12px;
  overflow:hidden;
  background:#0c1425
}

.gallery:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px
}

.slide {
  margin:0
}

.slide[hidden] {
  display:none
}

.slide-placeholder {
  aspect-ratio:16/10;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:28px;
  gap:18px;
  background:radial-gradient(ellipse at 20% 10%,#234e7944,transparent 65%),#0c1425;
  text-align:center
}

.slide-placeholder strong {
  font-family:Manrope,sans-serif;
  font-weight:500;
  font-size:clamp(24px,3vw,40px);
  letter-spacing:-1px;
  line-height:1.25
}

.slide-placeholder>span:last-child {
  font-size:14px;
  color:var(--muted)
}

.placeholder-label {
  font-size:11px;
  letter-spacing:2px;
  color:var(--cyan)
}

.slide img {
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:contain;
  background:#0c1425
}

.slide figcaption {
  padding:12px 20px;
  font-size:14px;
  color:#b5c4dd;
  border-top:1px solid var(--line)
}

.gallery-controls {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-top:1px solid var(--line)
}

.gallery-controls button {
  display:grid;
  place-items:center;
  min-width:44px;
  min-height:44px;
  border:1px solid #415579;
  background:#121f35;
  color:white;
  border-radius:6px;
  font-size:20px;
  cursor:pointer
}

.gallery-controls button:hover {
  background:#253d62
}

.gallery-controls button:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:2px
}

.slide-dots {
  display:flex;
  gap:0;
  margin-right:auto
}

.slide-dots button {
  border:0;
  background:transparent;
  min-width:30px;
  font-size:0
}

.slide-dots button:before {
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#526079
}

.slide-dots button[aria-pressed=true]:before {
  background:var(--cyan);
  width:18px;
  border-radius:5px
}

.slide-count {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}

.projects-cta {
  border-top:1px solid var(--line);
  padding:65px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.projects-cta h2 {
  font-size:36px
}

.projects-cta .button {
  flex-shrink:0
}

@media(max-width:800px) {
  .project {
    grid-template-columns:1fr;
    gap:25px
  }

  .project-copy {
    padding-bottom:15px
  }

  .projects-cta {
    flex-direction:column;
    align-items:flex-start
  }

  .projects-cta h2 {
    font-size:30px
  }

}

@media(max-width:650px) {
  header {
    height:auto;
    min-height:90px;
    flex-wrap:wrap;
    gap:12px;
    padding-top:15px;
    padding-bottom:15px
  }

  nav {
    flex-wrap:wrap;
    gap:15px
  }

  .projects-main {
    padding-top:40px
  }

  .projects-intro {
    padding-bottom:30px
  }

  .project {
    padding:30px 0
  }

  .gallery-controls {
    gap:8px;
    padding:10px
  }

  .project-copy h2 {
    font-size:30px
  }

  .slide-placeholder {
    padding:20px
  }

  .projects-cta {
    padding:40px 0
  }

}