/* Lightflow v0.3.2 — single locked hero correction over v0.3.1. */

/* Match the photo clipping frame to the blue backdrop, then crop below—not at the heads. */
.hero-photo-frame-trio {
  inset: -12px -150px -12px 0;
}

.hero-photo-frame-trio img {
  width: 108%;
  height: 100%;
  object-position: center top;
  transform: translate(3%, 4.5%) scale(1);
  transform-origin: center top;
}

.hero-photo-frame-trio:hover img {
  transform: translate(3%, 4.5%) scale(1.01);
}

/* The curve remains a graphic element; the repeated motto is intentionally removed. */
.hero-blue-sweep span {
  display: none;
}

/* File-safe triangle fields: direct SVG backgrounds instead of CSS masks. */
.hero-triangle-field {
  width: 760px;
  height: 720px;
  background: url("assets/signature/triangles.svg") center / 920px auto no-repeat;
  -webkit-mask: none;
  mask: none;
  opacity: .24;
}

.hero-triangle-field-left {
  top: -70px;
  left: -210px;
}

.hero-triangle-field-right {
  top: 10px;
  right: -155px;
  opacity: .2;
}

/* Keep the triangular signature visible throughout the homepage. */
.services {
  background:
    url("assets/signature/triangles.svg") right -90px top 90px / 650px auto no-repeat,
    #fff;
}

.brand-panel {
  background:
    url("assets/signature/triangles.svg") right -145px bottom -80px / 590px auto no-repeat,
    #fff;
}

.coverage-signature {
  top: -45px;
  left: -65px;
  width: 680px;
  height: 560px;
  background-size: 760px auto;
  opacity: .24;
}

.operations {
  background:
    url("assets/signature/triangles.svg") right -105px center / 680px auto no-repeat,
    radial-gradient(circle at 12% 90%, rgba(12, 164, 223, .08), transparent 30%),
    #fff;
}

.operations-photo-triangles {
  opacity: .36;
}

.workspace-pattern {
  top: 16px;
  right: 18px;
  width: 470px;
  height: 350px;
  background-size: 680px auto;
  opacity: .25;
}

.company {
  background:
    url("assets/signature/triangles.svg") left -110px top 170px / 650px auto no-repeat,
    #fff;
}

.insight {
  background:
    url("assets/signature/triangles.svg") right -95px bottom 10px / 650px auto no-repeat,
    #fff;
}

.motto-triangles {
  top: -50px;
  left: -95px;
  width: 620px;
  height: 500px;
  background-size: 760px auto;
  opacity: .25;
}

.contact {
  background:
    url("assets/signature/triangles.svg") right -100px top -55px / 650px auto no-repeat,
    url("assets/signature/wave.svg") -230px 120% / 720px auto no-repeat,
    linear-gradient(180deg, #f4faff, #fff);
}

@media (max-width: 900px) {
  .hero-photo-frame-trio {
    inset: -8px -80px -18px 4%;
  }

  .hero-photo-frame-trio img,
  .hero-photo-frame-trio:hover img {
    width: 106%;
    height: 100%;
    transform: translate(2%, 4%) scale(1);
  }

  .hero-triangle-field {
    opacity: .2;
  }
}

@media (max-width: 620px) {
  .hero-photo-frame-trio {
    inset: 0 -35px -12px 0;
  }

  .hero-photo-frame-trio img,
  .hero-photo-frame-trio:hover img {
    width: 105%;
    height: 100%;
    transform: translate(1%, 3.5%) scale(1);
  }

  .hero-triangle-field {
    opacity: .17;
  }

  .services,
  .company,
  .insight {
    background-size: 520px auto;
  }
}