/* ===== Senseng — About Us (carded, layered colors) ===== */
    .as{
      --ink:#0f172a; --muted:#667085; --line:#e5e7eb;
      --layer1:#ffffff; --layer2:#f3faf5; --layer3:#eef5ff; /* subtle color layers */
      --accent:#14532d; --shadow:0 10px 28px rgba(15,23,42,.08);
      font-family:inherit; color:var(--ink); background:var(--layer2); padding:42px 0;
    }
    .as-wrap{max-width:1100px;margin:0 auto;padding:0 16px}
    .as-hero{
      border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden;
      background:
        radial-gradient(140% 70% at -10% 0%, var(--layer3) 0%, transparent 60%),
        linear-gradient(180deg, var(--layer1) 0%, #f9fbff 100%);
      padding:22px 18px;
      position:relative;
    }
    .as-hero::before{
      content:""; position:absolute; inset:0 0 auto 0; height:4px;
      background:linear-gradient(90deg,#8fd3ff,#b6f3c7,#ffe29b,#8fd3ff);
      background-size:300% 100%; animation:as-ribbon 12s linear infinite;
    }
    @keyframes as-ribbon{0%{background-position:0% 50%}100%{background-position:100% 50%}}
    .as h1#about-title{margin:6px 0 8px;font-size:30px;line-height:1.2;color:#0f3e2f}
    .as-lead{color:#1b3f36;font-size:16px;margin:0}
    .as-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid #0f3e2f;
         background:#0f3e2f;color:#fff;text-decoration:none;font-size:14px}
    .btn.alt{background:#fff;color:#0f3e2f}
    .as-nav{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
    .as-nav a{font-size:12px;text-decoration:none;color:#0f3e2f;background:#e7f5ec;border:1px solid #cfeade;border-radius:999px;padding:6px 10px}

    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
    .card{grid-column:span 6;background:#fff;border:1px solid var(--line);
          border-radius:16px;box-shadow:var(--shadow);padding:16px}
    @media (max-width:860px){.card{grid-column:span 12}}
    .card h2{font-size:22px;margin:0 0 6px;color:var(--accent)}
    .card p{margin:6px 0;color:#334155}
    .card ul{margin:8px 0 0;padding-left:18px;color:#334155}
    .media{display:flex;gap:12px;align-items:flex-start}
    .meta{font-size:13px;color:#6b7280}

    /* Chips */
    .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .chip{font-size:12px;background:#f2f5f7;border:1px solid #e5eaee;border-radius:999px;padding:6px 10px}

    /* Badges (linked) */
    .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .b{font-size:12px;border-radius:999px;padding:6px 10px;border:1px solid;text-decoration:none}
    .b.gots{background:#eaf7ef;color:#126a39;border-color:#cfeedd}
    .b.ocs{background:#e6f5f7;color:#0d6672;border-color:#cfe8eb}
    .b.lab{background:#eaf1ff;color:#1343a1;border-color:#d4e3ff}
    .b.cpc{background:#fff4cf;color:#8a5a00;border-color:#ffe29b}
    .b.oeko{background:#e6f0ff;color:#1343a1;border-color:#cfe0ff}

    /* timeline */
    .timeline{display:grid;gap:8px;margin-top:8px}
    .t{background:#fcfcfd;border:1px solid #eef0f4;border-radius:12px;padding:10px}
    .t strong{color:#0f2940}

    .note{margin-top:16px;background:#f8fafc;border:1px dashed #e5e7eb;border-radius:14px;padding:12px;font-size:13px;color:#334155}

    /* small helper */
    .as-callout{margin-top:12px;background:#f8fafc;border:1px dashed #e5e7eb;border-radius:12px;padding:10px}