/* ============================================================
   CARDS — the four reasons (.cards4) and the three classes (.classes)
   ============================================================ */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.45);margin-top:clamp(38px,5vw,62px)}
.cell{padding:clamp(26px,2.6vw,38px);transition:.5s var(--ease);position:relative}
.cell::before{content:"";position:absolute;left:0;top:0;height:5px;width:0;background:var(--turq);transition:width .5s var(--ease)}
.cell:nth-child(2)::before{background:var(--pink)}
.cell:nth-child(3)::before{background:var(--yellow)}
.cell:nth-child(4)::before{background:var(--turq)}
.cell:hover::before{width:100%}
.cell .glyph{width:30px;height:30px;margin-bottom:1.5rem;color:var(--turq-deep)}
.cell h3{font-size:1.22rem;margin-bottom:.6rem}
.cell p{font-size:.93rem;color:var(--tx-muted);margin:0}

/* --- class cards ---
   data-shape ties each card to a ribbon personality in js/enso.js and
   picks the --accent colour used by the top bar, tag dot and divider */
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px);margin-top:clamp(40px,5vw,66px)}
.card{position:relative;overflow:hidden;border-radius:4px;
  transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:3;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card:hover{box-shadow:0 26px 60px -34px rgba(20,32,30,.45)}
.card[data-shape="0"]{--accent:var(--yellow-fluo)}
.card[data-shape="1"]{--accent:var(--turq)}
.card[data-shape="2"]{--accent:var(--pink)}
.card-img{aspect-ratio:4/3.4;overflow:hidden;background:#eee}
.card-img--mono img{filter:grayscale(1)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:clamp(20px,2vw,28px)}
.tags{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin:.55rem 0 .9rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;color:var(--tx)}
.tags::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.card p{font-size:.94rem;color:var(--tx-muted)}

/* --- the "meer over…" disclosure --- */
.more{margin-top:1.1rem;background:none;border:0;padding:0;cursor:pointer;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:.55rem;color:var(--tx)}
.more .plus{position:relative;width:11px;height:11px}
.more .plus::before,.more .plus::after{content:"";position:absolute;background:var(--tx);transition:.4s var(--ease)}
.more .plus::before{left:0;top:5px;width:11px;height:2px}
.more .plus::after{top:0;left:5px;height:11px;width:2px}
.card.open .more .plus::after{transform:rotate(90deg);opacity:0}
.reveal{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.reveal-inner{padding-top:1rem;font-size:.9rem;color:var(--tx-muted);border-top:3px solid var(--accent);margin-top:1.1rem}
.card.open .reveal{max-height:360px}

@media (max-width:1000px){
  .cards4{grid-template-columns:1fr 1fr}
  .classes{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cards4{grid-template-columns:1fr}
}