/* Shared approved-media layer. Unmapped shot IDs keep their explicit placeholders. */
html { background: #172225; }
body {
  opacity: 0;
  animation: site-ready-fallback .01s linear 1.2s forwards;
}
html.site-ready body {
  opacity: 1;
  animation: none;
  transition: opacity .24s ease-out;
}

@keyframes site-ready-fallback {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation-delay: 0s; }
  html.site-ready body { transition: none; }
}

.placeholder-bg.has-media::before {
  background-image: var(--media-image);
  background-position: center;
  background-size: cover;
}

.placeholder-bg.has-media::after {
  content: "";
  background: linear-gradient(90deg, #071012d9 0%, #07101273 52%, #071012c9 100%);
}

.brand-hero.has-media::before { background-position: center 46%; }
.business-hero.has-media::before { background-position: center 52%; }

.solution-card .art.has-media {
  background-image: linear-gradient(135deg, #101a1c2e, #071012a6), var(--media-image);
  background-position: center;
  background-size: cover;
}

.solution-card .art.has-media::after { display: none; }

.product-tile.has-media {
  background-image: linear-gradient(135deg, #14222573, #071012d1), var(--media-image);
  background-position: center;
  background-size: cover;
}

.product-tile.has-media:hover,
.product-tile.has-media.active {
  background-image: linear-gradient(135deg, #263a3d52, #071012b8), var(--media-image);
}

.project-stage.has-media::before {
  background-image: var(--media-image);
  background-position: center;
  background-size: cover;
}

.project-card.has-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(180deg, #0b141638 0%, #0b1416e8 100%), var(--media-image);
  background-position: center;
  background-size: cover;
}

.project-card.has-media:hover {
  background-image: linear-gradient(180deg, #0b14161f 0%, #0b1416cf 100%), var(--media-image);
}

.project-card.has-media > * {
  position: relative;
  z-index: 1;
}

.project-visual-tile.has-media,
.capability-slide.has-media,
.home-flow-scene.has-media,
.product-wall-item.has-media {
  background-image: linear-gradient(135deg, #1321242e, #07101299), var(--media-image) !important;
  background-position: center;
  background-size: cover;
}

.product-wall-item.has-media::after,
.product-focus-image.has-media::after,
.capability-slide.has-media::after,
.project-visual-tile.has-media::after,
.home-flow-scene.has-media::after {
  content: "";
}

.flow-step { min-height: 176px; }

.flow-step.media-process-slot::before {
  background-image: var(--media-image, var(--process-placeholder));
  background-position: center;
  background-size: cover;
  filter: saturate(.72) contrast(1.08);
}

.flow-step.media-f01 { --process-placeholder: radial-gradient(circle at 22% 64%, #96a5a2 0 2%, #3d5558 2.5% 18%, transparent 19%), linear-gradient(135deg, #678084 0 23%, #1d2a2d 23% 58%, #8c9d99 58% 60%, #213235 60% 100%); }
.flow-step.media-f02 { --process-placeholder: linear-gradient(114deg, #101b1d 0 35%, #789093 35% 38%, #203034 38% 60%, #93a39f 60% 62%, #172427 62% 100%); }
.flow-step.media-f03 { --process-placeholder: linear-gradient(135deg, #1a272a 0 42%, #acbbb6 42% 44%, #314448 44% 100%), repeating-linear-gradient(0deg, transparent 0 14px, #e5edea20 15px 16px); }
.flow-step.media-f04 { --process-placeholder: radial-gradient(ellipse at 61% 47%, #dce1d8 0 5%, #657a7b 5.5% 18%, #1b292c 18.5% 36%, transparent 36.5%), linear-gradient(145deg, #637b7e, #152225 66%, #7c8e8d); }
.flow-step.media-f05 { --process-placeholder: radial-gradient(circle at 47% 50%, #eef1e9 0 3%, #597073 3.5% 15%, #1a282a 15.5% 37%, transparent 37.5%), linear-gradient(135deg, #526a6d, #182426); }
.flow-step.media-f06 { --process-placeholder: linear-gradient(138deg, #132124 0 38%, #8da09e 38% 40%, #203236 40% 100%), repeating-linear-gradient(90deg, transparent 0 30px, #e4efec18 31px 32px); }

.process-shot-label {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 12px;
  color: #e5efecb3;
  font: 500 7px var(--mono);
  letter-spacing: .1em;
  opacity: 0;
  transition: opacity .28s ease;
  font-style: normal;
  pointer-events: none;
}

.flow-step.active .process-shot-label { opacity: 1; }
.flow-step.has-media .process-shot-label { display: none; }

@media (max-width: 760px) {
  .placeholder-bg.has-media::before { background-position: center; }
  .flow-step { min-height: 166px; }
  .flow-step span { font-size: 14px; line-height: 1.4; }
}

.quick-menu {
  width: min(292px, calc(100vw - 24px));
  color: #f4f7f5;
  border: 1px solid #536568;
  background: #172629;
}

.quick-menu a {
  display: block;
  color: #f4f7f5;
  background: #172629;
  line-height: 1.45;
  transition: color .2s ease, background .2s ease;
}

.quick-menu a:hover,
.quick-menu a:focus-visible {
  color: #fff;
  background: #2d4144;
  outline: none;
}