/* Resonance visibility fix.
   Preserve all existing backgrounds and layout. Only correct foreground colours
   and add image-local dark fades where text overlaps photography. */

/* The Resonance page uses a dark navy canvas for its editorial sections. */
.resonance-landing :is(h1,h2,h3,p,a,span,strong,blockquote,figcaption) {
  color: #fff !important;
  opacity: 1 !important;
}

/* Keep the gold editorial labels. */
.resonance-landing .overline,
.resonance-landing .resonance-method__number,
.resonance-landing .resonance-platform .overline {
  color: #d8b06b !important;
}

/* The six-stage strip and case-study cards are cream/light surfaces. */
.resonance-landing .resonance-half-life__stage,
.resonance-landing .resonance-half-life__stage :is(span,strong),
.resonance-landing .client-wordmark,
.resonance-landing .client-wordmark :is(span,strong) {
  color: #151515 !important;
  opacity: 1 !important;
}

/* Light buttons must keep dark labels. */
.resonance-landing .button--paper,
.resonance-landing .studio2-button--light,
.resonance-landing .button--paper :is(span,strong),
.resonance-landing .studio2-button--light :is(span,strong) {
  color: #151515 !important;
}

/* Make body copy fully visible on all dark Resonance sections. */
.resonance-intro,
.resonance-principles,
.resonance-offer,
.resonance-platform,
.resonance-image-story {
  color: #fff !important;
}

.resonance-intro :is(h2,p,span),
.resonance-principles :is(h2,p,span),
.resonance-offer :is(h2,h3,p,span,strong),
.resonance-platform :is(h2,p,a,span),
.resonance-image-story :is(h2,p,span) {
  color: #fff !important;
  opacity: 1 !important;
}

/* Integrate the paired equipment imagery with the text column. */
.resonance-image-story {
  align-items: center;
  gap: clamp(28px, 4vw, 72px) !important;
}

.resonance-image-story__image,
.resonance-image-story__panel {
  position: relative;
  overflow: hidden;
}

.resonance-image-story__image--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 500px;
}

.resonance-image-story__panel {
  min-height: 500px;
}

.resonance-image-story__panel img {
  object-fit: cover;
}

.resonance-image-story__panel:first-child img {
  object-position: 50% 50%;
}

.resonance-image-story__panel:last-child img {
  object-position: 56% 50%;
}

/* Fade only the image edge nearest the text, matching the home-page language. */
.resonance-image-story__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,18,28,0) 0%, rgba(12,18,28,.04) 55%, rgba(12,18,28,.52) 82%, rgba(12,18,28,.9) 100%),
    linear-gradient(180deg, rgba(12,18,28,.08) 0%, rgba(12,18,28,0) 22%, rgba(12,18,28,.18) 100%);
}

.resonance-image-story__copy {
  position: relative;
  z-index: 2;
  margin-left: clamp(-54px, -3vw, -24px);
  padding: 32px 0 32px 18px;
}

.resonance-image-story__copy h2 {
  max-width: 720px;
}

/* Remove the previous generated section wash. */
.resonance-image-story::before {
  content: none !important;
}

@media (max-width: 900px) {
  .resonance-image-story__image--pair {
    min-height: 380px;
    gap: 8px;
  }

  .resonance-image-story__panel {
    min-height: 380px;
  }

  .resonance-image-story__image::after {
    background: linear-gradient(180deg, rgba(12,18,28,0) 0%, rgba(12,18,28,.18) 58%, rgba(12,18,28,.9) 100%);
  }

  .resonance-image-story__copy {
    margin: -52px 0 0;
    padding: 24px 8px 0;
  }
}

@media (max-width: 620px) {
  .resonance-image-story__image--pair {
    min-height: 310px;
  }

  .resonance-image-story__panel {
    min-height: 310px;
  }
}