/* ==========================================
   LAYOUT: Sections, Containers, Grids
   Mercury-inspired refinement
   ========================================== */

/* --- SECTIONS --- */

.section {
  padding: var(--section-padding-y) 0;
  position: relative;
}

.section--white {
  background-color: var(--color-white);
}

.section--alt {
  background-color: var(--color-off-white);
}

#personas {
}

.section--dark {
  background: var(--color-navy-900);
}

/* --- CONTAINER OVERRIDE --- */

.container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

/* Content-width container for most sections */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-content);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Card container — contained background with rounded corners.
   Add a bg-card-* class to set the color. */
.container--card {
  border-radius: var(--radius-lg);
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  /* Use auto width so margin-left/right create inset from viewport edges */
  width: auto;
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

@media (min-width: 1200px) {
  .container--card {
    /* Once max-width kicks in, auto margins center it */
    margin-left: auto;
    margin-right: auto;
  }
}

.bg-card-alt  { background-color: var(--color-off-white); }
.bg-card-tan   { background-color: var(--color-bg-tan); }
.bg-card-white { background-color: var(--color-white); }
.bg-card-dark         { background-color: var(--color-navy-900); }
.bg-card-medium-blue  { background-color: var(--color-bg-medium-blue); }
.bg-card-navy  { background-color: #1f2857; }
.bg-card-pillars {
  background: url('../assets/img/metrics_gradation.webp') center / cover no-repeat;
}
.bg-card-tech-security {
  background: url('../assets/img/TechnologyGradation2.webp') center / cover no-repeat;
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Full-width container for edge-to-edge sections */
.container--full {
  max-width: var(--container-max);
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

/* --- INTEGRATION GRID (replaced by logo-marquee in components.css) --- */

/* --- PILLARS ROW (4 columns) --- */

.pillars-row {
  margin-bottom: var(--space-9)
}

/* --- METRICS ROW (4 columns w/ separators) --- */

.metrics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-4) 0;
}

/* --- SUCCESS LAYOUT (2 columns) --- */

.success-layout {
  align-items: center;
}

/* --- PLATFORM THUMBNAILS --- */

.platform-thumbnails {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-9);
}

/* --- AWARDS ROW --- */

.awards-row {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

/* --- AWARDS PUBLICATIONS --- */

.awards-publications {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-9);
}

/* --- FOOTER GRID --- */

.footer-grid {
  row-gap: var(--space-6);
}

/* --- TESTIMONIAL GRID (CSS Columns masonry) --- */

.testimonial-grid {
  columns: 3;
  column-gap: var(--space-5);
}

.testimonial-grid--hidden {
  display: none;
  margin-top: var(--space-5);
}

.testimonial-grid--hidden.expanded {
  display: block;
}

/* --- LOGO BAR ROW --- */

.logo-bar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  flex-wrap: wrap;
}

/* --- CTA BUTTONS ROW --- */

.cta-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

/* --- HERO CTAs --- */

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  margin-top:-40px;
  position: relative;
  z-index: 5;
}