/* Code-native illustrations: sharp at any pixel density, no image downloads. */
.learning-areas .principle-grid{gap:20px;border:0;align-items:stretch}
.learning-areas .learning-card{--learning-accent:#276bba;--learning-tint:#eef5ff;padding:0;min-height:0;overflow:hidden;border:1px solid #dde5ee;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(7,20,42,.07),0 8px 24px #15365304;transition:transform .3s ease,box-shadow .3s ease}
.learning-areas .learning-card:last-child{border:1px solid #dde5ee}
.learning-areas .learning-business{--learning-accent:#b46a26;--learning-tint:#fff6eb}
.learning-areas .learning-data{--learning-accent:#7961c3;--learning-tint:#f4f1ff}
.learning-areas .learning-ethics{--learning-accent:#258775;--learning-tint:#edf8f3}
.learning-areas .learning-card:hover{background:#fff;color:#1b2735;transform:translateY(-6px);box-shadow:0 1px 2px rgba(7,20,42,.07),0 16px 36px #15365312}
.learning-art{position:relative;color:var(--learning-accent);background:var(--learning-tint);border-bottom:1px solid #15365308}
.learning-art svg{display:block;width:100%;height:auto;max-height:270px}
.learning-areas .learning-number{position:absolute;top:17px;left:20px;color:var(--learning-accent);font-size:.72rem;letter-spacing:.1em}
.learning-copy{padding:27px 25px 30px}
.learning-areas .learning-card h3{font-size:clamp(1.2rem,1.7vw,1.7rem);line-height:1.35;margin:0 0 14px;letter-spacing:-.025em}
.learning-areas .learning-card p,.learning-areas .learning-card:hover p{color:#5c6774;font-size:.98rem;line-height:1.8;margin:0}
/* Finite motion starts when the existing scroll observer reveals the card. */
.learning-card.visible .learning-float{animation:learning-float 2s ease-in-out 2}
.learning-card.visible .learning-delay{animation-delay:.25s}
.learning-card.visible .learning-flow{animation:learning-flow 3s ease-out 1}
.learning-card.visible .learning-bar{transform-box:fill-box;transform-origin:center bottom;animation:learning-grow 1.3s cubic-bezier(.2,.8,.2,1) both}
.learning-card.visible .learning-bar:nth-child(2){animation-delay:.15s}
.learning-card.visible .learning-bar:nth-child(3){animation-delay:.3s}
.learning-card.visible .learning-check{stroke-dasharray:50;animation:learning-check 1.4s ease-out both}
.learning-card.visible .learning-ring{animation:learning-ring 1.5s ease-out both}
@keyframes learning-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes learning-flow{from{stroke-dashoffset:56}to{stroke-dashoffset:0}}
@keyframes learning-grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes learning-check{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
@keyframes learning-ring{from{stroke-dasharray:0 158}to{stroke-dasharray:112 158}}
@media(max-width:1100px) and (min-width:901px){.learning-areas .principle-grid{gap:12px}.learning-copy{padding:24px 18px}}
@media(max-width:900px){.learning-areas .learning-card h3{font-size:1.65rem}.learning-art svg{max-height:250px}}
@media(max-width:600px){.learning-areas .principle-grid{gap:22px}.learning-copy{padding:24px}.learning-art svg{max-height:250px}.learning-areas .principles-title{margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){.learning-areas .learning-card,.learning-areas .learning-card *{animation:none!important;transition:none!important}.learning-areas .learning-card:hover{transform:none}}