.concept-hero { position: relative; min-height: min(760px, 82vh); display: grid; align-items: end; overflow: hidden; margin-top: calc(-1 * 0px); }
.concept-hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.52) 48%, rgba(0,0,0,.16) 100%), #000 url('../../images/bg-rabat-concept.webp') center/contain no-repeat; }
.concept-hero-content { position: relative; z-index: 1; padding-block: clamp(100px, 15vh, 160px) clamp(70px, 10vh, 110px); color: #fff; }
.concept-hero-content .display-title { max-width: 920px; }
.concept-hero-content .lead { margin: 24px 0 30px; color: rgba(255,255,255,.76); }

.concept-story { background: var(--bg-body); }
.story-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(38px, 7vw, 90px); }

.concept-steps { background: var(--bg-elevated); border-block: 1px solid var(--color-border); }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card { min-height: 290px; padding: clamp(25px, 4vw, 42px); display: flex; flex-direction: column; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--card-bg); }
.step-card > span { color: var(--gold); font-family: var(--fd); font-size: 54px; line-height: 1; opacity: .6; }
.step-card h3 { margin: auto 0 12px; font-family: var(--fd); font-size: 30px; letter-spacing: .03em; text-transform: uppercase; }
.step-card p { margin: 0; color: var(--text-muted); }

.concept-gallery { background: var(--bg-body); }
.gallery-head { margin-bottom: 30px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.gallery-grid figure { margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 15px; background: #050505; border: 1px solid var(--color-border); }
.gallery-wide { grid-column: auto; }
.gallery-grid img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.gallery-grid figure:hover img { transform: scale(1.045); }

@media (max-width: 820px) {
  .story-grid, .step-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-wide { grid-column: auto; }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-wide { grid-column: auto; }
}