.featured-case {
  scroll-margin-top: 104px;
  overflow: hidden;
  border-radius: 30px;
  background: #f3f1eb;
  color: var(--ink);
}

.case-header {
  display: grid;
  grid-template-columns: .48fr 1.15fr .8fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  padding: clamp(32px, 5vw, 72px);
}

.case-header > div { display: flex; flex-direction: column; gap: 8px; }
.case-header span,.case-header small,.reportage-head,.project-wall-head { font: 500 .75rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.case-header span { color: var(--red); }
.case-header small { color: var(--muted); }
.case-header h3 { max-width: 720px; margin: 0; font-size: clamp(2.3rem, 5vw, 5rem); font-weight: 800; letter-spacing: -.055em; line-height: .92; text-transform: uppercase; }
.case-header p { max-width: 440px; margin: 0; color: var(--muted); font-size: 1rem; }

.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 0 3px; background: #fff; }
.case-pair.single { grid-template-columns: 1fr; }
.case-photo { position: relative; height: min(58vw, 660px); min-height: 430px; padding: 0; overflow: hidden; border: 0; background: #0b111c; cursor: zoom-in; }
.case-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease, filter .45s ease; }
.case-photo:hover img,.case-photo:focus-visible img { transform: scale(1.025); filter: contrast(1.05); }
.case-photo > span { position: absolute; bottom: 22px; left: 22px; display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(16,24,39,.9); color: #fff; font: 600 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.after-photo > span { background: rgba(207,32,44,.94); }
.case-photo > span b { color: #f6878e; font-weight: 500; }
.after-photo > span b { color: #fff; }

.pair-controls { display: grid; grid-template-columns: 54px auto 54px; justify-content: center; align-items: center; gap: 18px; padding: 22px; border-bottom: 1px solid #c7c9cc; }
.pair-controls button { width: 54px; height: 46px; border: 1px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.pair-controls button:hover,.pair-controls button:focus-visible { background: var(--ink); color: #fff; }
.pair-controls span { font: 500 .75rem var(--mono); letter-spacing: .06em; }

.reportage-head,.project-wall-head { display: flex; justify-content: space-between; gap: 20px; padding: 22px clamp(24px,4vw,52px); }
.reportage-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 0 3px 3px; background: #fff; }
.reportage-photo { position: relative; height: 220px; padding: 0; overflow: hidden; border: 0; background: #111926; cursor: zoom-in; }
.reportage-photo:first-child,.reportage-photo:nth-child(6n) { grid-column: span 2; }
.reportage-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); transition: .35s ease; }
.reportage-photo:hover img,.reportage-photo:focus-visible img { transform: scale(1.04); filter: saturate(1); }
.reportage-photo span { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 7px; padding: 6px 8px; background: rgba(16,24,39,.88); color: #fff; font: 600 .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.reportage-photo span b { color: #f26a73; font-weight: 500; }

.project-wall-head { margin-top: 90px; padding-inline: 0; border-bottom: 1px solid #69717f; color: #aeb7c5; }
.project-wall { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; background: #69717f; }
.project-card { position: relative; min-height: 330px; padding: 0; overflow: hidden; border: 0; background: #111926; color: #fff; text-align: left; cursor: pointer; }
.project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.52); transition: transform .55s ease, filter .45s ease; }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 25%,rgba(8,14,24,.9)); }
.project-card > span { position: absolute; z-index: 1; right: 28px; bottom: 26px; left: 28px; display: grid; grid-template-columns: 1fr auto; gap: 8px 25px; align-items: end; }
.project-card small { grid-column: 1/-1; color: #d8dde7; font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.project-card strong { max-width: 560px; font-size: clamp(1.4rem,2.5vw,2.35rem); line-height: 1; text-transform: uppercase; }
.project-card i { font: 500 .75rem var(--mono); font-style: normal; text-transform: uppercase; }
.project-card:hover img,.project-card:focus-visible img,.project-card.active img { transform: scale(1.04); filter: grayscale(0) brightness(.68); }
.project-card.active::before { content: "ACTIEF"; position: absolute; z-index: 2; top: 20px; right: 20px; padding: 7px 9px; background: var(--red); color: #fff; font: 600 .68rem var(--mono); letter-spacing: .06em; }

.project-lightbox { width: min(1500px,calc(100% - 40px)); height: min(900px,calc(100% - 40px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #080e18; color: #fff; }
.project-lightbox::backdrop { background: rgba(3,7,13,.92); }
.project-lightbox figure { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 60px 90px; }
.project-lightbox figure img { width: 100%; height: 100%; object-fit: contain; }
.project-lightbox figcaption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 180px); font: 500 .75rem var(--mono); letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.lightbox-close { position: absolute; z-index: 2; top: 18px; right: 20px; padding: 10px; border: 0; background: transparent; color: #fff; font: 500 .75rem var(--mono); text-transform: uppercase; cursor: pointer; }
.lightbox-nav { position: absolute; z-index: 2; top: 50%; width: 54px; height: 54px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(8,14,24,.7); color: #fff; font-size: 1.2rem; cursor: pointer; }
.lightbox-prev { left: 20px; }.lightbox-next { right: 20px; }
.lightbox-nav:hover,.lightbox-nav:focus-visible { background: var(--red); border-color: var(--red); }

@media (max-width: 980px) {
  .case-header { grid-template-columns: 1fr 1.6fr; }
  .case-header p { grid-column: 2; }
  .case-photo { min-height: 360px; }
  .reportage-grid { grid-template-columns: repeat(3,1fr); }
  .project-card { min-height: 280px; }
}

@media (max-width: 680px) {
  .featured-case { border-radius: 20px; }
  .case-header { grid-template-columns: 1fr; padding: 30px 22px; }
  .case-header p { grid-column: auto; }
  .case-pair { grid-template-columns: 1fr; }
  .case-photo { height: 390px; min-height: 0; }
  .pair-controls { grid-template-columns: 46px auto 46px; gap: 10px; padding: 16px 10px; }
  .pair-controls button { width: 46px; height: 42px; }
  .reportage-grid { grid-template-columns: repeat(2,1fr); }
  .reportage-photo { height: 155px; }
  .reportage-photo:first-child,.reportage-photo:nth-child(6n) { grid-column: auto; }
  .project-wall { grid-template-columns: 1fr; }
  .project-wall-head { margin-top: 65px; }
  .project-card { min-height: 260px; }
  .project-card > span { right: 20px; bottom: 20px; left: 20px; grid-template-columns: 1fr; }
  .project-card i { display: none; }
  .project-lightbox { width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 14px; }
  .project-lightbox figure { padding: 60px 14px; }
  .project-lightbox figcaption { max-width: calc(100% - 30px); }
  .lightbox-nav { top: auto; bottom: 54px; transform: none; }
}