/* Post-launch visual polish. Loaded after the main refinement stack. */

/* Shared placeholder language: calm, image-ready panels without explanatory copy. */
.c-hero--top .c-command-visual,
.c-page-hero .c-command-visual,
.c-hero--services .c-system-map {
  position: relative;
  display: grid;
  min-height: 420px;
  padding: 28px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(46, 173, 255, 0.18), transparent 28%),
    radial-gradient(circle at 20% 82%, rgba(0, 104, 189, 0.08), transparent 30%),
    linear-gradient(145deg, #f8fbff 0%, #edf5fb 54%, #f7fafc 100%);
  border: 1px solid rgba(12, 49, 85, 0.14);
}

.c-hero--top .c-command-visual > *,
.c-page-hero .c-command-visual > *,
.c-hero--services .c-system-map > * {
  display: none !important;
}

.c-hero--top .c-command-visual::before,
.c-page-hero .c-command-visual::before,
.c-hero--services .c-system-map::before {
  position: relative;
  inset: auto;
  display: block;
  width: min(100%, 510px);
  aspect-ratio: 4 / 3;
  -webkit-mask-image: none;
  mask-image: none;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(0, 104, 189, 0.08) 7% 8%, transparent 8% 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 0 20%, rgba(0, 104, 189, 0.08) 20% 21%, rgba(255,255,255,0) 21% 100%),
    linear-gradient(90deg, rgba(0, 104, 189, 0.14) 0 18%, transparent 18% 24%, rgba(39,177,220,0.13) 24% 48%, transparent 48% 54%, rgba(0,104,189,0.09) 54% 88%, transparent 88%),
    linear-gradient(180deg, transparent 0 58%, rgba(0, 104, 189, 0.10) 58% 59%, transparent 59%),
    radial-gradient(circle at 20% 32%, rgba(0, 104, 189, 0.96) 0 6px, transparent 7px),
    radial-gradient(circle at 48% 48%, rgba(39, 177, 220, 0.92) 0 7px, transparent 8px),
    radial-gradient(circle at 76% 35%, rgba(0, 104, 189, 0.72) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(255,255,255,0.99), rgba(239,247,252,0.97));
  border: 1px solid rgba(12, 49, 85, 0.16);
  box-shadow:
    0 24px 55px rgba(7, 42, 76, 0.10),
    -24px 28px 0 -18px rgba(0, 104, 189, 0.07),
    22px -22px 0 -17px rgba(39, 177, 220, 0.08);
  content: "";
}

.c-hero--top .c-command-visual::after,
.c-page-hero .c-command-visual::after,
.c-hero--services .c-system-map::after {
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 82px;
  height: 8px;
  background: linear-gradient(90deg, #0068bd 0 28%, #27b1dc 28% 58%, #dbeaf5 58% 100%);
  content: "";
}

/* Resource cards reserve an obvious image area so final thumbnails can be inserted later. */
.c-resource-showcase a {
  align-content: start;
}

.c-resource-showcase a::before {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 18px;
  background:
    linear-gradient(135deg, rgba(0, 104, 189, 0.13), rgba(65, 196, 214, 0.06)),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 104, 189, 0.06) 46px 47px),
    #f7fbff;
  border: 1px solid rgba(12, 49, 85, 0.12);
  content: "";
}

.c-resource-showcase a:nth-child(2)::before {
  background:
    radial-gradient(circle at 35% 48%, rgba(0, 104, 189, 0.18) 0 12%, transparent 13%),
    radial-gradient(circle at 63% 39%, rgba(39, 177, 220, 0.17) 0 15%, transparent 16%),
    #f7fbff;
}

.c-resource-showcase a:nth-child(3)::before {
  background:
    linear-gradient(180deg, transparent 0 66%, rgba(0, 104, 189, 0.08) 66% 68%, transparent 68%),
    linear-gradient(90deg, rgba(0, 104, 189, 0.12) 18%, transparent 18% 32%, rgba(39, 177, 220, 0.12) 32% 55%, transparent 55% 68%, rgba(0, 104, 189, 0.08) 68% 88%, transparent 88%),
    #f7fbff;
}

/* Case cards: reserve editorial image space instead of presenting three text-only blocks. */
body.page-template-page-cases .c-service-system__item {
  align-content: start;
}

body.page-template-page-cases .c-service-system__item::before {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(0,104,189,0.10), rgba(39,177,220,0.05)),
    linear-gradient(90deg, transparent 0 12%, rgba(0,104,189,0.08) 12% 13%, transparent 13% 100%),
    linear-gradient(180deg, transparent 0 70%, rgba(0,104,189,0.08) 70% 72%, transparent 72%),
    #f8fbfd;
  border: 1px solid rgba(12,49,85,0.12);
  content: "";
}

body.page-template-page-cases .c-service-system__item:nth-child(2)::before {
  background:
    radial-gradient(circle at 30% 40%, rgba(39,177,220,0.18) 0 11%, transparent 12%),
    radial-gradient(circle at 67% 56%, rgba(0,104,189,0.15) 0 15%, transparent 16%),
    #f8fbfd;
}

body.page-template-page-cases .c-service-system__item:nth-child(3)::before {
  background:
    linear-gradient(90deg, rgba(0,104,189,0.10) 0 16%, transparent 16% 23%, rgba(39,177,220,0.09) 23% 45%, transparent 45% 54%, rgba(0,104,189,0.08) 54% 84%, transparent 84%),
    #f8fbfd;
}

/* Solution overview: give the featured solution an image slot before the copy. */
body.page-template-page-solutions .c-service-detail-card.is-featured::before {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 8;
  margin-bottom: 24px;
  background:
    radial-gradient(circle at 20% 50%, rgba(0,104,189,0.17) 0 9%, transparent 10%),
    linear-gradient(90deg, transparent 0 32%, rgba(39,177,220,0.11) 32% 52%, transparent 52%),
    linear-gradient(135deg, #f5fbff, #eef6fa);
  border: 1px solid rgba(12,49,85,0.12);
  content: "";
}

/* About page: reserve a future team / office / brand image while keeping the mission copy. */
body.page-template-page-about .c-batch-brand-panel::before {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(0,104,189,0.10), rgba(39,177,220,0.04)),
    repeating-linear-gradient(135deg, transparent 0 34px, rgba(0,104,189,0.05) 34px 35px),
    #f8fbfd;
  border: 1px solid rgba(12,49,85,0.12);
  content: "";
}

/* Keep dense hero copy from competing with imagery on medium/large screens. */
@media (min-width: 981px) {
  .c-hero--top .c-hero__content,
  .c-page-hero .c-hero__content,
  .c-hero--services .c-hero__content {
    max-width: 620px;
  }

  .c-hero--top .c-hero__lead,
  .c-page-hero .c-page-hero__lead,
  .c-hero--services .c-hero__lead {
    max-width: 590px;
  }
}

@media (max-width: 980px) {
  .c-hero--top .c-command-visual,
  .c-page-hero .c-command-visual,
  .c-hero--services .c-system-map {
    min-height: 330px;
  }
}

@media (max-width: 620px) {
  .c-hero--top .c-command-visual,
  .c-page-hero .c-command-visual,
  .c-hero--services .c-system-map {
    min-height: 250px;
    padding: 18px;
  }

  .c-hero--top .c-command-visual::after,
  .c-page-hero .c-command-visual::after,
  .c-hero--services .c-system-map::after {
    right: 18px;
    bottom: 16px;
    width: 62px;
  }

  body.page-template-page-solutions .c-service-detail-card.is-featured::before,
  body.page-template-page-about .c-batch-brand-panel::before {
    aspect-ratio: 16 / 9;
  }
}