/* ============ Responsible: governance sequence ============ */
    .responsible{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
    .quote{padding:38px;border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--ink),#2a2a34);color:#fff;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.28;position:relative;overflow:hidden}
    .quote::before{content:"“";position:absolute;top:-30px;left:20px;font-size:180px;color:rgba(255,200,61,.16);font-family:Georgia,serif}
    .quote::after{content:"";position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(84,89,209,.3),transparent 70%)}
    .principles{display:grid;gap:14px;counter-reset:principle}
    .principle{padding:20px 22px 20px 68px;border:1px solid var(--line);border-radius:14px;background:#fff;position:relative;counter-increment:principle}
    .principle::before{content:counter(principle,decimal-leading-zero);position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:13px}
    .principle svg{color:var(--brand);position:absolute;right:20px;top:22px}
    .principle h3{margin-bottom:4px;font-size:16px}
    .principle p{font-size:14px;margin-bottom:0}

@media(max-width:1024px){.responsible{grid-template-columns:1fr;gap:40px}}
@media(max-width:760px){.principles{grid-template-columns:1fr}}