/* ================================================================
   Approach / Principles — Animated canvas background
   ================================================================ */
.approach{position:relative;background:var(--ink);overflow:hidden}
.approach-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.approach-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(247,92,54,.12),transparent 70%),radial-gradient(50% 40% at 80% 100%,rgba(252,142,0,.08),transparent 70%)}
.approach-content{position:relative;z-index:2}
.approach .sec-label{color:var(--coral)}
.approach .sec-label .idx{color:rgba(250,246,239,.4)}
.approach-statement{color:var(--paper);max-width:900px}

.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:60px}
.principle{background:rgba(250,246,239,.04);border:1px solid rgba(250,246,239,.08);border-radius:16px;padding:38px 30px 46px;min-height:280px;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.principle:hover{background:rgba(250,246,239,.07);border-color:rgba(247,92,54,.3);transform:translateY(-4px)}
.principle .pn{font-family:var(--fd);font-style:italic;font-weight:500;font-size:1.8rem;color:var(--coral);line-height:1}
.principle h4{font-family:var(--fd);font-weight:600;font-size:1.5rem;line-height:1.02;letter-spacing:-.03em;margin-top:86px;color:var(--paper)}
.principle p{font-size:14.5px;color:rgba(250,246,239,.5);margin-top:12px;line-height:1.55}

@media(max-width:1000px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.principles{grid-template-columns:1fr}}