/* =============================================================
   cards.css — Service, value-prop, industry, mission cards
   ============================================================= */
.card{position:relative;background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out)}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-steel);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out);z-index:2}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-steel-300)}
.card:hover::after{transform:scaleX(1)}

.card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.card:hover .card__media img{transform:scale(1.05)}
.card__index{position:absolute;top:var(--space-16);left:var(--space-16);font-family:var(--font-mono);
  font-size:.75rem;color:#fff;background:rgba(11,14,17,.55);border-radius:var(--radius-pill);
  padding:var(--space-4) var(--space-12);letter-spacing:.1em}
.card__body{padding:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12);flex:1}
.card__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
.card__text{color:var(--text-secondary);font-size:var(--fs-body-sm);flex:1}
.card__link{margin-top:var(--space-8);align-self:flex-start;display:inline-flex;align-items:center;
  gap:var(--space-8);font-weight:var(--fw-semibold);color:var(--text-brand)}
.card__link svg{transition:transform var(--dur-fast) var(--ease-out)}
.card__link:hover svg{transform:translateX(4px)}

/* Value prop */
.vprop{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-24) 0;cursor:default}
.vprop__icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:var(--color-steel-100);color:var(--color-steel-600);
  transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.vprop__icon svg{width:28px;height:28px}
.vprop:hover .vprop__icon{transform:translateY(-4px) scale(1.05);background:var(--grad-steel);
  color:#fff;box-shadow:var(--shadow-md)}
.vprop__title{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.vprop__text{color:var(--text-secondary);font-size:var(--fs-body-sm)}

/* Mission / vision cards (dark) */
.mvcard{background:var(--bg-inverse);color:#fff;border-radius:var(--radius-lg);
  padding:var(--space-48);position:relative;overflow:hidden}
.mvcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-steel)}
.mvcard--eco::before{background:var(--grad-metal)}
.mvcard h3{color:#fff;margin-bottom:var(--space-16)}
.mvcard p{color:rgba(244,246,248,.78)}

/* Industry card */
.icard{background:var(--bg-surface);border:var(--border-hairline);border-radius:var(--radius-md);
  padding:var(--space-32);display:flex;flex-direction:column;gap:var(--space-12);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out)}
.icard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-steel-300)}
.icard__icon{width:46px;height:46px;color:var(--color-steel-600);
  transition:transform var(--dur-base) var(--ease-out),color var(--dur-base)}
.icard:hover .icard__icon{transform:scale(1.12) rotate(-4deg);color:var(--color-steel-500)}
.icard__title{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
.icard__text{color:var(--text-secondary);font-size:var(--fs-body-sm)}

/* Group company card */
.gcard{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);
  padding:var(--space-24);border:var(--border-hairline);border-radius:var(--radius-md);
  background:var(--bg-surface);transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out)}
.gcard:hover{border-color:var(--color-steel-300);transform:translateY(-2px)}
.gcard__name{font-weight:var(--fw-semibold);color:var(--text-primary)}
.gcard__arrow{color:var(--text-brand)}