.gallery-hero { position: relative; min-height: 560px; overflow: hidden; color: white; background: #12191c; }
.gallery-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,52,28,.95) 0%, rgba(8,113,60,.84) 48%, rgba(46,8,18,.34) 100%), url("../images/hero-high-rise.webp") center 38% / cover no-repeat; }
.gallery-hero::after { content: ""; position: absolute; right: -90px; bottom: -220px; width: 520px; height: 520px; border: 90px solid rgba(255,255,255,.06); border-radius: 50%; }
.gallery-hero-inner { position: relative; z-index: 2; min-height: 560px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; }
.gallery-kicker { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 17px; color: #a5e1bf; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.gallery-kicker::before { content: ""; width: 40px; height: 2px; background: #42a971; }
.gallery-hero h1 { max-width: 780px; margin: 0; font-size: clamp(52px, 7vw, 86px); line-height: .98; letter-spacing: -.05em; }
.gallery-hero p { max-width: 650px; margin: 24px 0 0; color: #e8d8dd; font-size: 17px; }
.coming-badge { margin-top: 30px; padding: 13px 18px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.coming-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #69d296; box-shadow: 0 0 0 6px rgba(105,210,150,.14); }

.gallery-intro { padding: 82px 0 28px; text-align: center; }
.gallery-intro span { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.gallery-intro h2 { max-width: 850px; margin: 10px auto 0; font-size: clamp(34px, 4vw, 49px); line-height: 1.1; letter-spacing: -.04em; }
.gallery-intro p { max-width: 670px; margin: 16px auto 0; color: var(--muted); font-size: 14px; }

.gallery-preview { padding: 35px 0 92px; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.gallery-card { position: relative; overflow: hidden; min-height: 320px; border-radius: 12px; background: #dce2df; box-shadow: 0 12px 35px rgba(20,31,25,.1); }
.gallery-card:nth-child(1), .gallery-card:nth-child(4) { grid-column: span 7; }
.gallery-card:nth-child(2), .gallery-card:nth-child(3) { grid-column: span 5; }
.gallery-card:nth-child(5), .gallery-card:nth-child(6) { grid-column: span 6; }
.gallery-card img { height: 100%; object-fit: cover; filter: saturate(.75) brightness(.68); transition: transform .4s ease, filter .4s ease; }
.gallery-card:hover img { transform: scale(1.04); filter: saturate(.9) brightness(.75); }
.gallery-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,19,16,.88), transparent 60%); }
.gallery-card-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 25px; color: white; }
.gallery-card-copy small { color: #9eddb9; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.gallery-card-copy h3 { margin: 5px 0 0; font-size: 22px; }
.gallery-card-copy span { display: inline-block; margin-top: 10px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.45); color: #edf4f0; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

.gallery-progress { padding: 74px 0; color: white; background: #11191c; }
.gallery-progress-inner { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }
.gallery-progress h2 { margin: 0; font-size: clamp(31px, 4vw, 45px); line-height: 1.1; }
.gallery-progress p { max-width: 760px; margin: 13px 0 0; color: #b6c0bb; }
.gallery-progress .button { min-width: 220px; color: var(--burgundy); background: white; }

@media (max-width: 800px) {
  .gallery-card:nth-child(n) { grid-column: span 6; }
  .gallery-progress-inner { grid-template-columns: 1fr; }
  .gallery-progress .button { justify-self: start; }
}

@media (max-width: 580px) {
  .gallery-hero, .gallery-hero-inner { min-height: 590px; }
  .gallery-hero h1 { font-size: 54px; }
  .gallery-card:nth-child(n) { grid-column: 1 / -1; min-height: 280px; }
  .gallery-intro { padding-top: 65px; }
  .gallery-preview { padding-bottom: 65px; }
}