.page-banner{position:relative;background:var(--red);color:#fff;padding:170px 0 90px;overflow:hidden}
.banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:kenburns 22s ease-in-out infinite alternate}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(142,27,27,.93) 0%,rgba(200,32,31,.75) 55%,rgba(232,80,31,.35) 100%)}
.page-banner .container{position:relative;z-index:2}
.page-banner h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;margin:.4rem 0 .6rem;animation:up .8s .1s both}
.page-banner .lead{max-width:56ch;opacity:1;animation:up .8s .3s both}
.crumbs{display:flex;gap:.6rem;font-size:.95rem;animation:up .8s both}
.crumbs a{text-decoration:none;opacity:.85}
.crumbs a:hover{opacity:1;color:var(--yellow)}
.crumbs b{color:var(--yellow);font-weight:600}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}


.project-image-grid {
  width: 92%;
  max-width: 1160px;
  margin: 40px auto 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.project-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #f6e9dd;
  box-shadow: 0 5px 18px rgba(92, 16, 19, 0.10);
}

.project-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-image:hover img {
  transform: scale(1.06);
}

@media (max-width: 900px) {
  .project-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

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