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

  /* palette for circles */
  --yellow:  #f4d10e;
  --amber: #f4a63a;
  --coral: #e75661;
  --teal:  #1daaa0;
  --violet:#7d61d6;
  --green: #3aa55b;

  --ring: #cfd6e3;     /* outer ring arc */
}

/* section shell */
.core-values{
  background: #fff;
  color: var(--ink);
}
.cv__wrap{
  max-width: var(--cv-max);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--pad);
  text-align: center;
}
.cv__title{
  margin: 0 0 clamp(22px, 4vw, 40px);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: .2px;
}

/* horizontal track */
.cv-track{
  list-style: none;
  margin: 0;
  padding: clamp(6px, 1vw, 10px) 0;
  display: flex;
  gap: clamp(9px, 4vw, 24px);
  align-items: center;

  /* keep one row; allow horizontal scroll on small screens */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* faint connector line (visible on >= 900px) */
@media (min-width: 300px){
  .cv-track::before{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 2px;
    background: var(--line);
    transform: translateY(-50%);
    z-index: 0;
  }
}

/* each item */
.cv-item{
  position: relative;
  z-index: 1; /* above track line */
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 100px;      /* keeps size when track scrolls */

}


/* outer ring: only top half (arc) */
.cv-ring{
  width: clamp(120px, 18vw, 160px);
  height: clamp(120px, 18vw, 160px);
  border-radius: 50%;
  /* border: 3px solid var(--ring); */
  border: 1px solid black;
  border-bottom-color: transparent;   /* top arc only */
  display: grid;
  place-items: center;
  background: #fff;                 /* masks the track behind */
}

/* inner colored circle for the icon */
.cv-circle{
  width: clamp(90px, 14vw, 120px);
  height: clamp(90px, 14vw, 120px);
  border-radius: 50%;
  display: flex;
  place-items: center;
  box-shadow: 0 6px 16px rgba(16,24,40,.12) inset;
  border: 1px solid black;
  align-content: center;
  align-items: center;
}
.cv-circle img{
     width: 184%; 
     height: auto; 
     align-items: center;
     margin-left: 20px;
     margin-right: 15px;
}

/* label */
.cv-label{
  margin-top: 4px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(14px, 2.4vw, 18px);
  color: var(--ink);
}


@media (max-width: 900px){

}
/* color themes */
.cv--blue   .cv-circle{ background: var(--yellow); }
.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); }

/* soft reveal */
[data-reveal]{ opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease; }
[data-reveal].is-in{ opacity: 1; transform: none; }