/* Parallax hero scrollytelling */
/* ===== Solutions: Parallax Story section ===== */
#solutions-parallax {
  --vh: 100svh;
  --frames: 4;                /* JS updates this */
  height: calc(var(--frames) * var(--vh));
  background-color: #f2f3f4;       /* page tone */
}

#solutions-parallax .meta {
  mix-blend-mode: difference; /* crisp on any image */
}

#solutions-parallax .frame .img {
  cursor: pointer;
}

#solutions-parallax .frame * { cursor: inherit; }

.page-dim {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page-dim.is-visible {
  opacity: 1;
}

/* 3×2 grid */
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:2rem;
  background-color: #f2f3f4;
}
@media (max-width:1025px) and (min-width:641px){ .solutions-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .solutions-grid{grid-template-columns:1fr;} }

/* Make existing .a-card tiles clean + compact (no bg image) */
.solutions-grid .a-card{
  background-color: #fff !important; /* overrides inline bg-color */
  background-image:none !important;           /* overrides inline bg-image */
  min-height:180px; max-height:220px;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0, 0, 0, 0.206);
  position:relative; overflow:hidden;
  padding:1.25rem;
}

/* Use existing overlay block as the content area, left-aligned */
.solutions-grid .a-card .a-card__overlay--top-left{
  position:relative;
  display:flex; flex-direction:column;
 padding:0; margin:0;
}

/* Title + helper text */
.solutions-grid .a-card .a-card__text{
  display:block; margin:0 0 .25rem 0; color:#456; font-size:.9rem;
}
.solutions-grid .a-card .a-card__title{
  margin:0; font-size:1.15rem; font-weight:600; color:#0a2e55;
  display:flex; align-items:center; gap:.75rem;
}
.solutions-grid .a-card .a-card__plus{
  background:#fff;
  color:#0a2e55;
}

.solutions-grid .a-card:hover .app-icon svg { stroke: #d0b81c; }

/* Optional: smaller modal height when these cards expand */
.solutions-grid ~ .a-card-expanded .a-card-expanded-content{ max-height:80vh; }
#videoSection_solution{
  background-color: #ffffff;
}

#expand1-benefits,
.info-box {
  width: 100%;
  max-width: none;
  margin: 2rem 0;
  box-sizing: border-box;
  font-size: 1.2rem;
}
#expand1-benefits .info-box__left {
  flex: 1 1 0;
  min-width: 0;
}
#expand1-benefits .info-box__image {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cardGrid_solution{
  background-color: #fff;
}