/* Matrix page variations layered over the proven Axon service-page system. */
.matrix-page {
  --matrix-rule: rgba(19, 20, 21, 0.2);
}

.matrix-page .axon-hero__title {
  max-width: 11.4ch;
  font-size: clamp(42px, 3.85vw, 70px);
}

.matrix-page .axon-hero__media-inner {
  opacity: 0.35;
  filter: brightness(0.58) saturate(0.8) contrast(1.08);
}

.matrix-page .axon-hero__media-inner img,
.matrix-page .axon-hero__panel img {
  object-position: 50% 50%;
}

.matrix-page .axon-hero__panel-reveal {
  display: block;
  overflow: visible;
}

.matrix-page .axon-hero__panel {
  position: absolute;
  min-width: 0;
  border-radius: 2px;
  background: rgba(21, 23, 25, 0.82);
  box-shadow:
    0 34px 78px rgba(3, 5, 7, calc(var(--panel-edge-opacity, 1) * 0.62)),
    0 1px 0 rgba(255, 255, 255, calc(var(--panel-edge-opacity, 1) * 0.24)) inset,
    0 0 0 1px rgba(255, 255, 255, calc(var(--panel-edge-opacity, 1) * 0.16)) inset;
}

.matrix-page .axon-hero__panel::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.22), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(3, 7, 10, 0.17));
  opacity: calc(0.14 + var(--panel-edge-opacity, 1) * 0.36);
}

.matrix-page .axon-hero__panel::after {
  opacity: calc(var(--panel-edge-opacity, 1) * 0.28);
}

.matrix-page .axon-hero__panel img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.matrix-page .axon-hero__shade {
  background: linear-gradient(90deg, rgba(17, 18, 19, 0.62), transparent 27%, transparent 76%, rgba(17, 18, 19, 0.08));
}

.matrix-joints { display: none; }

.matrix-page .axon-intro {
  background-image:
    linear-gradient(rgba(19, 20, 21, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 20, 21, 0.024) 1px, transparent 1px);
  background-size: 80px 80px;
}

.matrix-page .axon-intro__copy h2 { max-width: 10ch; }
.matrix-page .axon-material-strip article { min-height: 318px; }
.matrix-page .axon-material-strip__mark { color: rgba(19, 20, 21, 0.72); }

.matrix-page .axon-proof__primary img { object-position: 51% 44%; }
.matrix-page .axon-proof__side .axon-image-frame img { object-position: 52% 42%; }
.matrix-page .axon-details__head {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.54fr);
  gap: clamp(48px, 5.5vw, 88px);
}

.matrix-page .axon-details__head h2 {
  max-width: 10.5ch;
  font-size: clamp(52px, 6.15vw, 88px);
  line-height: 0.92;
}

.matrix-page .axon-details__head p { min-width: 0; }

.matrix-page .axon-applications__image { min-height: 720px; }
.matrix-page .axon-applications__image img { object-position: 53% 42%; }

.matrix-page .axon-perspectives__figure--lead img { object-position: 50% 50%; }
.matrix-page .axon-perspectives__media--elevation img { object-position: 55% 44%; }
.matrix-page .axon-perspectives__media--junction img { object-position: 50% 46%; }

@media (min-width: 861px) {
  .matrix-page .axon-perspectives__grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.82fr);
    gap: clamp(30px, 3.4vw, 54px);
  }

  .matrix-page .axon-perspectives__figure--lead .axon-perspectives__media {
    aspect-ratio: 2400 / 1343;
    background: #d8d4ca;
  }

  .matrix-page .axon-perspectives__figure--lead .axon-perspectives__media img,
  .matrix-page .axon-perspectives__figure--lead:hover .axon-perspectives__media img {
    object-fit: contain;
    transform: none;
    will-change: auto;
  }

  .matrix-page .axon-perspectives__side {
    gap: clamp(32px, 3.6vw, 52px);
    padding-top: 0;
  }

  .matrix-page .axon-perspectives__side .axon-perspectives__media { aspect-ratio: 16 / 9; }

  .matrix-page .axon-perspectives__side .axon-perspectives__figure figcaption {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 16px;
  }

  .matrix-page .axon-perspectives__side .axon-perspectives__index { padding-top: 0; }
  .matrix-page .axon-perspectives__side .axon-perspectives__figure h3 { font-size: clamp(20px, 1.55vw, 25px); }
  .matrix-page .axon-perspectives__side .axon-perspectives__figure p { font-size: 14px; line-height: 1.52; }
}

@media (max-width: 1100px) {
  .matrix-page .axon-hero__title { font-size: clamp(38px, 4.3vw, 54px); }

  .matrix-page .axon-details__head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .matrix-page .axon-details__head .axon-kicker {
    grid-column: auto;
    margin-bottom: 0;
  }

  .matrix-page .axon-details__head h2 { max-width: 11ch; }
}

@media (max-width: 860px) {
  .matrix-page .axon-hero { height: 208svh; min-height: 1500px; }
  .matrix-page .axon-hero__stage { grid-template-rows: minmax(0, 0.93fr) minmax(0, 1.07fr); }
  .matrix-page .axon-hero__title { font-size: clamp(34px, 7.3vw, 51px); max-width: 12ch; }
  .matrix-page .axon-hero__media-inner img,
  .matrix-page .axon-hero__panel img { object-position: 50% 50%; }
  .matrix-page .axon-hero__panel::after { display: none; }
  .matrix-page .axon-applications__image { min-height: 68svh; }

  .matrix-page .axon-perspectives__figure--lead .axon-perspectives__media {
    aspect-ratio: 2400 / 1343;
    background: #d8d4ca;
  }

  .matrix-page .axon-perspectives__figure--lead .axon-perspectives__media img,
  .matrix-page .axon-perspectives__figure--lead:hover .axon-perspectives__media img {
    object-fit: contain;
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 560px) {
  .matrix-page .axon-hero { min-height: 1420px; }
  .matrix-page .axon-hero__stage { grid-template-rows: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .matrix-page .axon-hero__title { font-size: clamp(31px, 8.8vw, 39px); }
  .matrix-page .axon-hero__lead { max-width: 38ch; }
  .matrix-page .axon-applications__image { min-height: 58svh; }
  .matrix-page .axon-details__head h2 { max-width: 100%; font-size: clamp(38px, 10vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-page .axon-hero__panel-reveal { display: none; }
  .matrix-page .axon-hero__media-inner { opacity: 1 !important; filter: none !important; }
}