/* v3 shared: quadrant principles with ink icons that fill as the group arrives, hover lift, organic brush dividers. */
.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kh-principle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.principle{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .5s var(--ease)}
.principle:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
/* Icon: solid, no fill-in. Hover only lightly lifts the icon. */
.concept-wrap{position:relative;display:block;width:48px;height:48px;margin-bottom:6px}
.concept-ghost{display:none}
.concept-ink{position:absolute;top:0;left:0;width:48px;height:48px;display:block}
.principle:hover .concept-ink{transform:scale(1.04);transition:transform .6s var(--ease)}
/* Brush divider: an organic stroke that wipes in as it arrives */
.brush-divider{position:relative;height:clamp(56px,6vw,84px);pointer-events:none;overflow:hidden}
.brush-divider::before{content:"";position:absolute;left:4vw;right:4vw;top:50%;height:100%;transform:translateY(-50%);background:var(--art) center/100% 100% no-repeat}
.js-motion .brush-divider::before{clip-path:inset(0 100% 0 0);transition:clip-path 4.6s cubic-bezier(.3,.1,.2,1)}
.js-motion .brush-divider.is-in::before{clip-path:inset(0 0 0 0)}
@media (max-width:900px){
  .kh-principle-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .principle{transition:none}
  .principle:hover{transform:none}
  .js-motion .brush-divider::before{clip-path:none;transition:none}
  .js-motion .concept-ink{clip-path:none;transition:none}
}