:root{
  --cv-max: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --ink: #0f172a;
  --line: #d6dbe5;

  --blue:  #628ecb;
  --amber:   #f4a63a;
  --coral:   #e75661;
  --teal:    #1daaa0;
  --violet:  #7d61d6;
  --green:   #3aa55b;

  --ring: rgba(0,0,0,.55);
}

/* section shell */
.core-values{
  background: #d7dde6;   /* matches your screenshot bg */
  color: var(--ink);
  overflow: visible;
}

.cv__wrap{
  max-width: var(--cv-max);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--pad);
  text-align: center;
  overflow: visible;
}

.cv__title{
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 54px);
  letter-spacing: .2px;
  color: #0b1b2f;
}

/* GRID instead of horizontal scroll */
.cv-track{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 28px);
  align-items: start;
  justify-items: center;

  position: relative;
  overflow: visible;
}

/* faint connector line across middle on large screens */
@media (min-width: 980px){
  .cv-track::before{
    content: "";
    position: absolute;
    left: 0; right: 0;

    /* better alignment across different sizes */
    top: clamp(56px, 6vw, 76px);

    height: 2px;
    background: var(--line);
    z-index: 0;
  }
}

/* each item */
.cv-item{
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
}

/* outer ring arc */
.cv-ring{
  width: clamp(120px, 12vw, 160px);
  height: clamp(120px, 12vw, 160px);
  border-radius: 50%;

  border: 2px solid var(--ring);
  border-bottom-color: transparent; /* top arc only */
  display: grid;
  place-items: center;

  background: #d7dde6; /* masks connector line behind */
}

/* inner colored circle */
.cv-circle{
  width: clamp(90px, 9vw, 120px);
  height: clamp(90px, 9vw, 120px);
  border-radius: 50%;
  display: grid;
  place-items: center;

  border: 2px solid rgba(0,0,0,.65);
  box-shadow: 0 6px 16px rgba(16,24,40,.10) inset;
}

/* icon sizing (fix your old 184% problem) */
.cv-circle img{
  width: 52%;
  height: auto;
  display: block;
}

/* label */
.cv-label{
  margin-top: 2px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(14px, 1.6vw, 20px);
  color: #0b1b2f;
  text-align: center;
}

/* color themes (MATCH YOUR HTML CLASSES) */
.cv--blue   .cv-circle{ background: var(--blue); }
.cv--amber  .cv-circle{ background: var(--amber); }
.cv--coral  .cv-circle{ background: var(--coral); }
.cv--teal   .cv-circle{ background: var(--teal); }
.cv--violet .cv-circle{ background: var(--violet); }
.cv--green  .cv-circle{ background: var(--green); }

/* optional hover */
.cv-item:hover .cv-circle{
  transform: translateY(-2px);
  transition: transform .2s ease;
}

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

/* 3 per row */
@media (max-width: 1100px){
  .cv-track{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cv-track::before{ display:none; }
}

/* 2 per row */
@media (max-width: 680px){
  .cv-track{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* 1 per row */
@media (max-width: 420px){
  .cv-track{
    grid-template-columns: 1fr;
  }
}