/* CSS-only photo-frame language for the site's primary content cards. */
:is(
    .service-card,
    .method-card,
    .ambition-value,
    .unified-service-card,
    .unified-capability,
    .journey article,
    .portfolio-card
  ) {
  --frame-corner: rgba(100, 90, 100, 0.72);
  position: relative;
  isolation: isolate;
  border-color: rgba(100, 90, 100, 0.34);
  box-shadow:
    0 16px 38px rgba(26, 26, 26, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Fine inner edge, similar to the matte inside a photographic frame. */
:is(
    .service-card,
    .method-card,
    .ambition-value,
    .unified-service-card,
    .unified-capability,
    .journey article,
    .portfolio-card
  )::before {
  position: absolute;
  z-index: 5;
  inset: 7px;
  border: 1px solid rgba(100, 90, 100, 0.15);
  border-radius: 5px;
  pointer-events: none;
  content: "";
}

/* Eight short strokes form four viewfinder corners; the top dot is a focus marker. */
:is(
    .service-card,
    .method-card,
    .ambition-value,
    .unified-service-card,
    .unified-capability,
    .journey article,
    .portfolio-card
  )::after {
  position: absolute;
  z-index: 6;
  inset: 11px;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 1px, var(--frame-corner) 0 2px, transparent 2.5px),
    linear-gradient(var(--frame-corner), var(--frame-corner)) left top / 22px 2px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) left top / 2px 22px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) right top / 22px 2px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) right top / 2px 22px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) left bottom / 22px 2px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) left bottom / 2px 22px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) right bottom / 2px 22px no-repeat;
  opacity: 0.68;
  transition: opacity 0.25s ease;
}

:is(
    .service-card,
    .method-card,
    .ambition-value,
    .unified-service-card,
    .unified-capability,
    .journey article,
    .portfolio-card
  ):hover {
  --frame-corner: var(--charcoal);
  border-color: rgba(100, 90, 100, 0.58);
  box-shadow:
    0 19px 44px rgba(26, 26, 26, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

:is(
    .service-card,
    .method-card,
    .ambition-value,
    .unified-service-card,
    .unified-capability,
    .journey article,
    .portfolio-card
  ):hover::after {
  opacity: 1;
}

/* Compact viewfinder frames for the four hero discipline boxes. */
.hero-disciplines > div {
  --frame-corner: rgba(100, 90, 100, 0.62);
  position: relative;
  isolation: isolate;
}

.hero-disciplines > div::before {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(100, 90, 100, 0.12);
  border-radius: 5px;
  pointer-events: none;
  content: "";
}

.hero-disciplines > div::after {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(var(--frame-corner), var(--frame-corner)) left top / 14px 1px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) left top / 1px 14px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) right bottom / 14px 1px no-repeat,
    linear-gradient(var(--frame-corner), var(--frame-corner)) right bottom / 1px 14px no-repeat;
  opacity: 0.64;
}

/* Premium camera-deck treatment for the disciplines section. */
.capabilities {
  position: relative;
  isolation: isolate;
  margin-block: 44px 18px;
  padding: clamp(30px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% -10%, rgba(255, 221, 0, 0.16), transparent 28%),
    linear-gradient(135deg, #1a1a1a 0%, #403641 58%, #645a64 100%);
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.17);
  color: var(--white);
}

.capabilities::before {
  position: absolute;
  z-index: 0;
  top: -170px;
  right: -100px;
  width: 360px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 221, 0, 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 40px rgba(255, 255, 255, 0.018),
    0 0 0 80px rgba(255, 255, 255, 0.012);
  pointer-events: none;
  content: "";
}

.capabilities::after {
  position: absolute;
  z-index: 0;
  left: 18px;
  bottom: 18px;
  width: 54px;
  height: 3px;
  background: var(--yellow);
  box-shadow: 66px 0 0 rgba(255, 255, 255, 0.3);
  pointer-events: none;
  content: "";
}

.capabilities h2 {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  margin-bottom: clamp(24px, 3vw, 34px);
  color: var(--white);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
}

.capabilities > div {
  position: relative;
  z-index: 1;
  gap: 16px;
}

.capabilities article {
  --discipline-corner: rgba(255, 255, 255, 0.48);
  position: relative;
  min-height: 190px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.capabilities article::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  pointer-events: none;
  content: "";
}

.capabilities article::after {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(var(--discipline-corner), var(--discipline-corner)) left top / 20px 2px no-repeat,
    linear-gradient(var(--discipline-corner), var(--discipline-corner)) left top / 2px 20px no-repeat,
    linear-gradient(var(--discipline-corner), var(--discipline-corner)) right bottom / 20px 2px no-repeat,
    linear-gradient(var(--discipline-corner), var(--discipline-corner)) right bottom / 2px 20px no-repeat;
}

.capabilities article:hover {
  --discipline-corner: var(--yellow);
  transform: translateY(-4px);
  border-color: rgba(255, 221, 0, 0.42);
  background: rgba(255, 255, 255, 0.11);
}

.capabilities .section-icon {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--yellow);
}

.capabilities h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  color: var(--white);
  font-size: 17px;
}

.capabilities p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12.5px;
  line-height: 1.8;
}

@media (max-width: 575px) {
  :is(
      .service-card,
      .method-card,
      .ambition-value,
      .unified-service-card,
      .unified-capability,
      .journey article,
      .portfolio-card
    )::before {
    inset: 6px;
  }

  :is(
      .service-card,
      .method-card,
      .ambition-value,
      .unified-service-card,
      .unified-capability,
      .journey article,
      .portfolio-card
    )::after {
    inset: 9px;
    background:
      radial-gradient(circle at 50% 1px, var(--frame-corner) 0 1.5px, transparent 2px),
      linear-gradient(var(--frame-corner), var(--frame-corner)) left top / 17px 2px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) left top / 2px 17px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) right top / 17px 2px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) right top / 2px 17px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) left bottom / 17px 2px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) left bottom / 2px 17px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) right bottom / 17px 2px no-repeat,
      linear-gradient(var(--frame-corner), var(--frame-corner)) right bottom / 2px 17px no-repeat;
  }

  .capabilities {
    margin-block: 30px 12px;
    padding: 26px 18px;
    border-radius: 14px;
  }

  .capabilities article {
    min-height: 0;
    padding: 23px 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
      .service-card,
      .method-card,
      .ambition-value,
      .unified-service-card,
      .unified-capability,
      .journey article,
      .portfolio-card
    )::after {
    transition: none;
  }

  .capabilities article {
    transition: none;
  }

  .capabilities article:hover {
    transform: none;
  }
}