/* ===================================================================
   IMAGERY SYSTEM — duotone photography with dissolved edges
   -------------------------------------------------------------------
   Photos are desaturated, re-tinted into the brand palette, then
   masked so their edges dissolve into --bg-page instead of ending on
   a hard rectangle. Nothing here is a plain framed photo.

   Layer order inside .imgfx:
     img          grayscale base
     __tint       emerald -> indigo, mix-blend-mode:color  (the duotone)
     __shade      radial multiply, sinks the corners into the page
     __grid       micro grid, ties photos to the site's line language
     __frame      optional hairline + corner ticks
   =================================================================== */

.imgfx {
  position: relative;
  overflow: hidden;
  isolation: isolate;            /* keeps blend modes off the page bg */
  background: var(--bg-page);
}

.imgfx__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(0.92);
  transform: scale(1.02);        /* hides mask edge shimmer */
}

.imgfx__tint,
.imgfx__shade,
.imgfx__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The duotone. `color` blending keeps the photo's luminosity and takes
   hue + saturation from the gradient, so highlights stay bright. */
.imgfx__tint {
  background: linear-gradient(140deg,
    #34D399 0%,
    #0E7C5E 38%,
    #2F3C7E 74%,
    #4C4FA8 100%);
  mix-blend-mode: color;
  opacity: 0.92;
}

/* Sinks the frame edges toward --bg-page so nothing reads as a box. */
.imgfx__shade {
  background: radial-gradient(ellipse 78% 72% at 50% 42%,
    transparent 0%,
    rgba(6, 6, 8, 0.42) 62%,
    rgba(6, 6, 8, 0.88) 88%,
    #060608 100%);
  mix-blend-mode: multiply;
}

.imgfx__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 10%, transparent 75%);
}

/* ==================================================
   HERO BACKDROP — sits under existing hero content
   ================================================== */
.imgfx--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  /* per-page intensity: source photos vary a lot in base luminance */
  opacity: var(--imgfx-opacity, 0.42);
  mask-image: radial-gradient(ellipse 92% 82% at 50% 38%,
    #000 0%, rgba(0,0,0,0.55) 55%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 38%,
    #000 0%, rgba(0,0,0,0.55) 55%, transparent 86%);
}

.imgfx--hero .imgfx__img {
  filter: grayscale(1) contrast(var(--imgfx-contrast, 1.2)) brightness(var(--imgfx-bright, 0.72));
  /* per-page focal point: keeps bright areas out from behind the headline */
  object-position: var(--imgfx-pos, 50% 50%);
}

/* Text scrim. Darkens the centre band the copy sits in while leaving the
   outer frame visible, so photos never cost headline legibility. */
.imgfx--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 48% at 50% 48%,
    rgba(6, 6, 8, 0.78) 0%,
    rgba(6, 6, 8, 0.46) 52%,
    rgba(6, 6, 8, 0.12) 76%,
    transparent 88%);
}

/* Everything the hero already renders must stay above the photo. */
.hero__bg, .hero__overlay,
.services-hero__bg, .services-hero__grid-lines, .services-hero__overlay,
.fcmo-hero__bg, .fcmo-hero__overlay,
.pr-hero__bg,
.ai-hero__bg, .ai-hero__grid-lines, .ai-hero__overlay,
.zoho-hero__bg, .zoho-hero__grid-lines, .zoho-hero__overlay { z-index: 1; }

.services-hero__content, .fcmo-hero__content, .pr-hero__content,
.ai-hero__content, .zoho-hero__content,
.audit-hero__content, .careers-hero .container,
.hero .container { position: relative; z-index: 2; }

/* ==================================================
   APERTURE — circular crop, for centred subjects
   ================================================== */
.imgfx--aperture {
  aspect-ratio: 1;
  border-radius: 50%;
  mask-image: radial-gradient(circle at 50% 50%,
    #000 52%, rgba(0,0,0,0.45) 72%, transparent 88%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    #000 52%, rgba(0,0,0,0.45) 72%, transparent 88%);
}

.imgfx--aperture::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(52, 211, 153, 0.22);
  box-shadow:
    0 0 60px rgba(52, 211, 153, 0.10) inset,
    0 0 40px rgba(52, 211, 153, 0.06);
  pointer-events: none;
}

/* Slow orbit ring — the only motion in the system. */
.imgfx--aperture .imgfx__ring {
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  animation: imgfxOrbit 64s linear infinite;
  pointer-events: none;
}

@keyframes imgfxOrbit { to { transform: rotate(360deg); } }

/* ==================================================
   PANEL — asymmetric feature image beside copy
   ================================================== */
.imgfx--panel {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  mask-image: linear-gradient(115deg,
    #000 0%, #000 62%, rgba(0,0,0,0.5) 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(115deg,
    #000 0%, #000 62%, rgba(0,0,0,0.5) 84%, transparent 100%);
}

.imgfx--panel .imgfx__img { transition: transform 1.2s var(--ease-out); }
.imgfx--panel:hover .imgfx__img { transform: scale(1.06); }

/* Hairline + corner ticks, drawn only at the corners. */
.imgfx__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.imgfx__frame::before,
.imgfx__frame::after {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgba(52, 211, 153, 0.45);
  border-style: solid;
}

.imgfx__frame::before {
  top: 18px; left: 18px;
  border-width: 1px 0 0 1px;
  border-top-left-radius: 6px;
}

.imgfx__frame::after {
  bottom: 18px; right: 18px;
  border-width: 0 1px 1px 0;
  border-bottom-right-radius: 6px;
}

/* ==================================================
   BAND — wide cinematic strip between sections
   ================================================== */
.imgfx-band {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--bg-page);
}

.imgfx-band .imgfx {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
}

.imgfx-band__rule {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(52, 211, 153, 0.35) 20%, rgba(52, 211, 153, 0.35) 80%, transparent);
}

.imgfx-band__label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 22px;
  background: var(--bg-page);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ==================================================
   CREDIT
   ================================================== */
.imgfx-credit {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-dim);
}

.imgfx-credit a { color: var(--text-muted); }
.imgfx-credit a:hover { color: var(--accent-green); }

/* ==================================================
   RESPONSIVE / MOTION
   ================================================== */
@media (max-width: 768px) {
  .imgfx--hero { opacity: 0.3; }
  .imgfx--panel { aspect-ratio: 16 / 10; }
  .imgfx-band { height: 220px; }
  .imgfx__grid { background-size: 38px 38px; }
  .imgfx__frame::before, .imgfx__frame::after { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .imgfx--aperture .imgfx__ring { animation: none; }
  .imgfx--panel .imgfx__img { transition: none; }
  .imgfx--panel:hover .imgfx__img { transform: scale(1.02); }
}

/* Blend modes degrade to a flat grey wash where unsupported. */
@supports not (mix-blend-mode: color) {
  .imgfx__tint { opacity: 0.35; mix-blend-mode: normal; }
}

/* Aperture sized for the fractional-CMO audience column */
.fcmo-audience__aperture {
  margin-top: 44px;
  max-width: 340px;
  width: 100%;
}

@media (max-width: 1024px) {
  .fcmo-audience__aperture { margin: 36px auto 0; max-width: 260px; }
}

/* Footer credit row */
.footer__credits {
  padding: 18px 0 4px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
}

/* Panel in the careers application column */
.careers-apply__panel { margin-top: 40px; }

@media (max-width: 1024px) {
  .careers-apply__panel { display: none; }
}