/* Preserve the supplied logo artwork in its original colours on the dark footer. */
.footer-brand img {
  background: #fff !important;
  border-radius: 8px;
  filter: none !important;
  padding: 7px;
}

/* Keep the full transparent logo visible rather than cropping its artwork. */
.brand {
  width: 240px;
  height: 66px;
  overflow: visible;
}
.brand img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: none;
  content: url('../images/noventra-logo-header.png');
}

.nav-shell { height: 126px; }
.brand { width: 190px; height: 116px; }

/* A grid keeps the platform relationships readable at every viewport size. */
.platform-map {
  min-height: 0;
  max-width: 1120px;
  padding: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: radial-gradient(circle at 50% 0%, rgba(33, 212, 243, .16), transparent 34%), #f8faff;
}
.platform-map::before,
.platform-map::after { display: none; }
.map-core,
.map-node {
  position: static;
  inset: auto;
  margin: 0;
}
.map-core {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  min-height: 116px;
  border-radius: 16px;
  flex-direction: row;
  gap: 12px;
  box-shadow: 0 14px 32px rgba(50, 81, 228, .18);
}
.map-core small { font-size: .72rem; }
.map-node {
  min-width: 0;
  min-height: 104px;
  padding: 22px;
  border: 1px solid #dce6f7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(8, 11, 47, .04);
  font-size: .92rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.map-node:hover { transform: translateY(-3px); box-shadow: 0 14px 25px rgba(8, 11, 47, .09); }
.map-node i { flex: 0 0 auto; width: 36px; height: 36px; font-size: .68rem; }

/* Complete the illustrative dashboard with legible hierarchy and chart context. */
.report-card { padding: 30px; background: linear-gradient(145deg, #fff, #f9fbff); }
.report-head { padding-bottom: 19px; border-bottom: 1px solid #e4eaf4; }
.chart { height: 255px; margin: 26px 0 17px; padding-top: 27px; }
.chart::before { content: "Illustrative monthly operating trend"; position: absolute; top: 0; left: 0; color: #64718c; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chart::after { content: "Jan     Feb     Mar     Apr     May     Jun"; position: absolute; bottom: -2px; left: 0; right: 0; display: flex; justify-content: space-between; color: #8791a8; font-size: .68rem; letter-spacing: .04em; white-space: pre; }
.report-metrics > div { min-height: 68px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #e5ebf5; }
.report-metrics b { color: var(--navy); }

/* Use a clear security lock, not a decorative star. */
.security-panel:first-child .panel-symbol { font-size: 0; }
.security-panel:first-child .panel-symbol::before { content: ""; display: block; width: 26px; height: 26px; background: url('../images/icon-lock.svg') center / contain no-repeat; }

/* Centre the supplied logo and its accompanying copy within the footer brand area. */
.footer-brand { text-align: center; }
.footer-brand img { content: url('../images/noventra-logo-header.png'); width: 230px; height: 140px; margin: 0 auto; object-fit: contain; }
.footer-brand p { margin-left: auto; margin-right: auto; }

@media (max-width: 760px) {
  .nav-shell { height: 88px; }
  .primary-nav { top: 88px; }
  .brand { width: 126px; height: 77px; }
  .platform-map { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 17px; gap: 10px; }
  .map-core { min-height: 94px; }
  .map-node { min-height: 90px; padding: 15px; font-size: .78rem; }
  .map-node i { width: 30px; height: 30px; }
  .chart { height: 225px; }
}

@media (max-width: 390px) {
  .brand { width: 112px; height: 68px; }
  .platform-map { grid-template-columns: 1fr; }
  .map-node { min-height: 74px; }
  .chart::after { font-size: .56rem; }
}

/* Make photography a true edge-to-edge layer inside every media frame. */
.image-frame {
  position: relative;
  background: #fff;
}
.image-frame > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  object-position: center;
}

@media (min-width: 761px) {
  .footer-grid { grid-template-columns: 2fr 1fr; }
}