/* =====================================================
   GCC SETUP TIMELINE
===================================================== */
.gcc-timeline-section {
  padding: var(--n-section-padding) 0;
}

.gcc-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 2rem auto 0;
}

.gcc-timeline-line {
  position: absolute;
  top: 68px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 2px;
  background: var(--n-border);
  z-index: 0;
}

.gcc-timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gcc-timeline-duration {
  display: inline-block;
  font-family: var(--n-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-secondary);
  background: var(--n-bg-alt);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

.gcc-timeline-node {
  width: 52px;
  height: 52px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--n-primary);
  color: #fff;
  font-family: var(--n-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--n-shadow-sm);
  border: 4px solid #fff;
}

.gcc-timeline-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--n-navy);
  margin: 0 0 0.6rem;
}

.gcc-timeline-step p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--n-slate);
  max-width: 220px;
  margin: 0 auto;
}

.gcc-timeline-note {
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--n-slate-light);
  margin-top: 2.5rem;
}

@media (max-width: 860px) {
  .gcc-timeline { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; }
  .gcc-timeline-line { display: none; }
}

@media (max-width: 520px) {
  .gcc-timeline { grid-template-columns: 1fr; }
}


/* =====================================================
   WHAT DRIVES US — DISC-STYLE CARDS
===================================================== */
.card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.principle-card {
  background: #fff;
  border-radius: 14px;
  padding: 2.75rem 1.5rem 2rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(45, 45, 45, 0.07);
}

.badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.6rem;
}

.badge-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-line { height: 2px; width: 22px; flex-shrink: 0; }
.badge-letter { font-family: var(--n-font-display); font-size: 1.6rem; font-weight: 800; flex-shrink: 0; }

.principle-card .card-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.9rem; }
.principle-card p { font-size: 0.86rem; line-height: 1.65; color: var(--n-slate); margin: 0 0 1.4rem; }

.dot-row { display: flex; justify-content: center; gap: 6px; }
.dot-row span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.c-primary   .badge-circle{background:#3B4A6B;} .c-primary   .badge-line,.c-primary .badge-letter,.c-primary .card-title{color:#3B4A6B;} .c-primary .badge-line{background:#3B4A6B;} .c-primary .dot-row span{background:#3B4A6B;}
.c-secondary .badge-circle{background:#5B9A8B;} .c-secondary .badge-line,.c-secondary .badge-letter,.c-secondary .card-title{color:#5B9A8B;} .c-secondary .badge-line{background:#5B9A8B;} .c-secondary .dot-row span{background:#5B9A8B;}
.c-highlight .badge-circle{background:#E8998D;} .c-highlight .badge-line,.c-highlight .badge-letter,.c-highlight .card-title{color:#E8998D;} .c-highlight .badge-line{background:#E8998D;} .c-highlight .dot-row span{background:#E8998D;}
.c-heading   .badge-circle{background:#2D2D2D;} .c-heading   .badge-line,.c-heading .badge-letter,.c-heading .card-title{color:#2D2D2D;} .c-heading .badge-line{background:#2D2D2D;} .c-heading .dot-row span{background:#2D2D2D;}

@media (max-width: 900px) { .card-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .card-row { grid-template-columns: 1fr; } }