:root{
  --obj-max: 1280px;
  --pad: clamp(16px, 4vw, 40px);
  --ink: #0e1220;
  --muted: #6b7280;

  /* Accent pairs (fill, darker for fold/number) */
  --purple: #8c60d6;
  --purple-d: #764fc3;

  --amber:  #f0c033;
  --amber-d:#d8a41e;

  --orange: #f0653a;
  --orange-d:#d44f26;

  --teal:   #21b69c;
  --teal-d: #169a83;

  --blue:   #3a7bfd;
  --blue-d: #2a63d8;

  --shadow: 0 24px 50px rgba(16, 24, 40, .08);
}

/* Section */
.objectives{
  background: #fff;
  color: var(--ink);
}
.obj__wrap{
  max-width: var(--obj-max);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--pad) clamp(36px, 8vw, 96px);
}
.obj__title{
  margin: 0 0 clamp(18px, 3vw, 32px);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: .2px;
  text-align: center;
}

/* Grid auto-fits up to five if space allows */
.obj__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

/* Card column */
.obj-card{
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 22px 18px 24px;
  display: grid;
  justify-items: center;
  gap: 16px;
  border: 1px solid grey;
}

/* Icon */
/* .obj-card__icon img,
.obj-card__icon svg{
  width: clamp(56px, 8vw, 84px);
  height: auto;
  display: block;
} */

/* Ribbon block (centered) */
.obj-ribbon{
  position: relative;
  width: clamp(180px, 60%, 240px);
  height: 62px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

/* left ribbon fill */
.obj-rib-fill{
  grid-column: 1 / 2;
  border-radius: 6px 0 0 6px;
}

/* right number box */
.obj-num{
  grid-column: 2 / 3;
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(16px, 2.4vw, 22px);
  border-radius: 0 6px 6px 0;
}

/* small folded corner under ribbon (left) */
.obj-fold{
  position: absolute;
  left: 10px;
  top: 100%;
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-top: 12px solid;       /* color per accent */
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.08));
}

/* Content */
.obj-body{
  text-align: left;
  width: 100%;
  max-width: 32ch;
}
.obj-heading{
  margin: 6px 0 6px;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(16px, 2.4vw, 20px);
}
.obj-text{
  margin: 0;
  color: var(--muted);
  /* font-size: clamp(13px, 1.8vw, 14px); */
  font-size: 18px;
  font-family: sans-serif;
  line-height: 1.8;
}

/* Accent variants */
.obj-card--purple .obj-rib-fill{ background: var(--purple); }
.obj-card--purple .obj-num{ background: var(--purple-d); }
.obj-card--purple .obj-fold{ border-top-color: var(--purple-d); }

.obj-card--amber  .obj-rib-fill{ background: var(--amber); }
.obj-card--amber  .obj-num{ background: var(--amber-d); }
.obj-card--amber  .obj-fold{ border-top-color: var(--amber-d); }

.obj-card--orange .obj-rib-fill{ background: var(--orange); }
.obj-card--orange .obj-num{ background: var(--orange-d); }
.obj-card--orange .obj-fold{ border-top-color: var(--orange-d); }

.obj-card--teal   .obj-rib-fill{ background: var(--teal); }
.obj-card--teal   .obj-num{ background: var(--teal-d); }
.obj-card--teal   .obj-fold{ border-top-color: var(--teal-d); }

.obj-card--blue   .obj-rib-fill{ background: var(--blue); }
.obj-card--blue   .obj-num{ background: var(--blue-d); }
.obj-card--blue   .obj-fold{ border-top-color: var(--blue-d); }

/* Reveal (optional) */
[data-reveal]{ opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in{ opacity: 1; transform: none; }


@media (max-width: 900px) {
    .obj__grid{
        display: grid;
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }
    
}

@media (max-width: 500px) {
    .obj__grid{
        display: grid;
        grid-template-columns: repeat(1, minmax(230px, 1fr));
    }
    
}