/* Client project artwork on transparent layers; live, accessible proof copy. */
main > .projects-proof.content-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding-block: 48px;
  border: 0;
}
/* Each light follows its artwork at every breakpoint and fades before its bounds. */
.projects-proof-copy, .projects-proof-cards, .projects-proof-map {
  position: relative;
  isolation: isolate;
}
.projects-proof-copy::before, .projects-proof-cards::before, .projects-proof-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at center,
    #e9a82045 0%, #c7891930 30%, #a2681014 60%, transparent 100%);
}
.projects-proof-copy::before {
  background: radial-gradient(ellipse 50% 50% at center,
    #f5b52c40 0%, #bd7d1829 30%, #a2681010 65%, transparent 100%);
}
.projects-proof-map::before {
  background: radial-gradient(ellipse 50% 50% at center,
    #efaf2e55 0%, #c7891933 35%, #a2681014 65%, transparent 100%);
}
.projects-proof-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, .85fr);
  gap: 24px;
  align-items: center;
}
.projects-proof-copy { min-width: 0; }
.projects-proof-number {
  display: block;
  width: fit-content;
  padding: .04em .08em .06em 0;
  font-size: clamp(88px, 9vw, 136px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #f2ba39;
  background: linear-gradient(135deg, #b57913 0%, #ffdf70 22%, #f7bf32 38%, #d9930c 54%, #ffdd68 70%, #e6a21c 86%, #a8670b 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px #e9a52338);
}
.projects-proof-copy .projects-proof-title {
  margin: 8px 0 12px;
  color: #fff;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.18;
}
.projects-proof-copy .projects-proof-detail {
  margin: 0;
  color: #c2bfb9;
  font-size: 20px;
  line-height: 1.5;
}
.projects-proof-cards, .projects-proof-map { display: block; min-width: 0; }
.projects-proof-cards img, .projects-proof-map img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1023px) {
  main > .projects-proof.content-section { padding-block: 32px; }
  .projects-proof-content { grid-template-columns: minmax(0, 1fr); gap: 32px; text-align: center; }
  .projects-proof-copy { max-width: 440px; justify-self: center; }
  .projects-proof-number { margin-inline: auto; font-size: clamp(112px, 29vw, 168px); }
  .projects-proof-copy .projects-proof-title { font-size: clamp(28px, 7.2vw, 36px); margin-top: 12px; }
  .projects-proof-copy .projects-proof-detail { font-size: 20px; }
  .projects-proof-cards { width: 100%; }
  .projects-proof-map { width: 85%; max-width: 400px; justify-self: center; }
}
/* Full-bleed light uses main’s content width, excluding the scrollbar. */
.projects-proof::before {
  content: '';
  position: absolute;
  inset: -96px calc(50% - 50cqw);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent),
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 20% 50% at 15% 40%, #bf831b24, transparent 100%),
    radial-gradient(ellipse 34% 50% at 54% 52%, #d9992540, #b27a181a 50%, transparent 100%),
    radial-gradient(ellipse 19% 50% at 85% 50%, #daa4333d, #b27a181a 50%, transparent 100%);
}
@media (max-width: 1023px) {
  .projects-proof::before {
    background:
      radial-gradient(ellipse 50% 18% at 50% 15%, #bf831b24, transparent 100%),
      radial-gradient(ellipse 50% 24% at 50% 45%, #d9992540, #b27a181a 50%, transparent 100%),
      radial-gradient(ellipse 50% 24% at 50% 78%, #daa4333d, #b27a181a 50%, transparent 100%);
  }
}