/* Homepage Impact cover — an editorial chapter opener using TLH's Cape Town
   image. Kept separate from the destination page's own inner-page masthead. */

.home-page .what-index-coda::after {
  background:
    linear-gradient(90deg, rgba(7, 25, 41, .34) 0%, rgba(7, 25, 41, .1) 45%, rgba(7, 25, 41, .02) 75%),
    linear-gradient(180deg, rgba(8, 25, 39, .06) 45%, rgba(8, 22, 34, .28) 100%);
}
.home-page .what-index-coda > img {
  object-position: 50% 50%;
  filter: saturate(.84) contrast(1.02) brightness(.78) blur(calc(var(--impact-hero-progress, 0) * 13px));
}
.home-page .what-index-coda figcaption {
  display: block;
  padding: 0;
  text-align: left;
}
.home-page .what-index-coda figcaption .what-index-eyebrow {
  position: absolute;
  top: clamp(4.5rem, 9.5vh, 7rem);
  left: max(1.35rem, 4.8vw);
  margin: 0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: clamp(.58rem, .72vw, .76rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: .36em;
  text-transform: uppercase;
}
.home-page .what-index-coda figcaption h2 {
  position: absolute;
  top: 25%;
  left: max(1.35rem, 4.8vw);
  max-width: none;
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 8.333333vw;
  font-weight: 220;
  line-height: .9;
  letter-spacing: -.02em;
  text-align: left;
  text-shadow: 0 1px 30px rgba(4, 19, 31, .28);
}
.home-page .what-index-section .what-index-chrome {
  opacity: calc(var(--what-chrome, 1) * (1 - var(--what-coda-reveal, 0)) * (1 - var(--impact-handoff, 0)));
}
.home-page .what-index-coda figcaption h2 > span {
  display: block;
  width: max-content;
  line-height: 1;
}
.home-page .what-index-coda blockquote {
  position: absolute;
  top: 69%;
  left: max(1.35rem, 4.8vw);
  width: min(30rem, 43vw);
  max-width: none;
  margin: 0;
  color: #fff;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(.95rem, 1.16vw, 1.28rem);
  font-weight: 400;
  line-height: 1.14;
  text-shadow: 0 1px 12px rgba(4, 19, 31, .45);
}
.home-page .what-index-coda .what-index-coordinates {
  position: absolute;
  right: max(1.35rem, 4.8vw);
  bottom: clamp(2.75rem, 6.2vh, 4.5rem);
  color: #fff;
  font: 500 clamp(.58rem, .68vw, .72rem)/1 var(--font-ui);
  letter-spacing: .22em;
  /* Lift away with the rest of the caption as the plate flies into the card.
     The eyebrow, heading and quote were already tied to this progress and the
     coordinates were not, so they were the one thing left sitting on the
     photograph while everything around them cleared — which read as them
     appearing rather than the others leaving. Faded harder than the rest so
     they are gone almost as soon as the shrink begins. */
  opacity: clamp(0, calc(1 - var(--impact-hero-progress, 0) * 4.5), 1);
  transform: translate3d(0, calc(var(--impact-hero-progress, 0) * -2.5rem), 0);
}

@media (max-width: 899px) {
  .home-page .what-index-coda > img { object-position: 58% 50%; }
  /* The plate is a photograph on its own on a phone. On a wide screen the
     eyebrow, the giant OUR IMPACT and the quote sit in the frame and still
     leave the picture readable; at 393px the type fills it and the photograph
     becomes a backdrop to a title card. The caption goes and the picture
     carries the handover by itself. Desktop is untouched.

     It has to be set here rather than in what-we-do.css: this file loads later
     and its own `.home-page .what-index-coda figcaption { display: block }`
     (0-2-1) beat the plain `.what-index-coda figcaption` rule (0-1-1) there.
     The selector also catches .impact-bridge.what-index-coda, the flying clone
     appended to the body, so the plate stays bare through the flight too. */
  .home-page .what-index-coda figcaption { display: none; }

  /* And the plate itself goes. With the bridge off below 900px (impact-bridge.js)
     it never flies anywhere, so it is a full screen of photograph to scroll past
     between the What We Do cards and the impact section — the same dead plate
     that was removed once before, for the same reason. What We Do now runs
     straight into the case studies, and the film card is simply present there
     with its play button rather than being revealed by an animation. */
  .home-page .what-index-coda { display: none; }
}