/* ==========================================================================
   CUCSR — index.html specific styles
   ========================================================================== */

.hero {
  padding-block: var(--sp-7) var(--sp-8);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-7);
  align-items: center;
}
.hero-copy p.hero-sub { margin-block: var(--sp-4) var(--sp-5); }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero-stats.stat-row { margin-top: var(--sp-6); }
.hero-visual { display: flex; justify-content: center; }
.hero-graphic { width: 100%; max-width: 420px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 260px; margin-inline: auto; }
}

/* grids */
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .grid-6, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-6, .grid-3 { grid-template-columns: 1fr; } }

/* audience */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.audience-card {
  padding: var(--sp-4);
  border-left: 2px solid var(--color-amber);
  background: var(--color-white);
}
@media (max-width: 900px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .audience-grid { grid-template-columns: 1fr; } }

.approach-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  background: var(--color-navy-800);
  color: rgba(255,255,255,0.85);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.approach-banner h3 { color: var(--color-white); margin-bottom: var(--sp-2); }
.approach-banner p { color: rgba(255,255,255,0.7); max-width: 56ch; }
@media (max-width: 760px) { .approach-banner { flex-direction: column; align-items: flex-start; } }

/* why-partner */
.why-partner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-7);
}
.side-note {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  align-self: start;
  position: sticky;
  top: 110px;
}
.side-note h4 { margin-bottom: var(--sp-2); }
.side-note p { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
@media (max-width: 900px) { .why-partner-grid { grid-template-columns: 1fr; } .side-note { position: static; } }

/* split section (For Employers) */
.split-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }

/* final cta */
.final-cta {
  background: linear-gradient(135deg, var(--color-navy-900), var(--color-navy-700));
  padding-block: var(--sp-7);
  text-align: left;
}
.final-cta-inner h2 { color: var(--color-white); max-width: 20ch; }
.final-cta-inner p { color: rgba(255,255,255,0.7); max-width: 56ch; margin-block: var(--sp-3) var(--sp-5); }