/* ===== Halaman OEM & ODM ===== */
.dian-oh, .dian-ob, .dian-op, .dian-oa, .dian-oc { overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-oh { background: #dfe8da; }
.dian-ob, .dian-op { background: #f3efe6; }
.dian-oa { background: #7b9a80; }
.dian-oc { background: #3d5f48; }
.dian-oh-stage, .dian-ob-stage, .dian-op-stage, .dian-oa-stage, .dian-oc-stage { position: relative; container-type: inline-size; aspect-ratio: 1671 / 941; }
.dian-oh-picture, .dian-ob-picture, .dian-op-picture, .dian-oa-picture, .dian-oc-picture { display: contents; }
.dian-oh-bg, .dian-ob-bg, .dian-op-bg, .dian-oa-bg, .dian-oc-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-oh br, .dian-ob br, .dian-op br, .dian-oa br, .dian-oc br { display: block; content: ''; }
.dian-oh svg, .dian-oc svg, .dian-op-btn svg, .dian-oa-btn svg { flex: none; }
.dian-ob-photo, .dian-op-photo, .dian-oa-photo { display: none; }

/* ---------- 1. hero ---------- */
.dian-oh-copy { position: absolute; left: 5.09%; top: 15.73%; width: 41.293cqw; color: #2b2d2a; }
.dian-oh-eyebrow { position: relative; padding-bottom: 0.958cqw; font-size: 0.838cqw; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: #3f4a3f; }
.dian-oh-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.471cqw; height: 1.5px; background: #6f8a72; }
.dian-oh-heading { margin: 1.436cqw 0 1.197cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.950cqw; font-weight: 700; line-height: .98; letter-spacing: -.03em; color: #1c1f1c; }
.dian-oh-heading .g { color: #4b6650; }
.dian-oh-heading .d { color: #2b4234; }
.dian-oh-p1 { width: 39.497cqw; margin: 0 0 0.958cqw; font-size: 1.346cqw; line-height: 1.22; color: #353932; }
.dian-oh-p2 { width: 38.899cqw; margin: 0; font-size: 0.946cqw; line-height: 1.28; color: #3f433b; }
.dian-oh-btn { position: absolute; left: 5.21%; top: 72.58%; width: 29.14%; height: 7.01%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.317cqw; border-radius: 999px; background: #4b6650; color: #fff; font-size: 1.317cqw; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-oh-btn:hover { background: #3f5b47; color: #fff; transform: translateY(-1px); }
.dian-oh-btn svg { width: 1.197cqw; height: 1.197cqw; }
.dian-oh-note { position: absolute; left: 5.21%; top: 81.30%; width: 33.513cqw; margin: 0; font-size: 1.041cqw; line-height: 1.3; color: #3f433b; }

/* ---------- 2. perbedaan (overview) ---------- */
.dian-ob-intro { position: absolute; left: 5.57%; top: 3.61%; width: 93.357cqw; color: #2b2d2a; }
.dian-ob-eyebrow { position: relative; padding-bottom: 0.838cqw; font-size: 0.838cqw; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: #3f4a3f; }
.dian-ob-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.753cqw; height: 1.5px; background: #6f8a72; }
.dian-ob-heading { margin: 0.838cqw 0 0.479cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.710cqw; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: #1c1f1c; }
.dian-ob-intro p { width: 93.357cqw; max-width: 100%; margin: 0; font-size: 1.113cqw; line-height: 1.34; color: #353932; }
.dian-ob-intro p strong { font-weight: 700; color: #1c1f1c; }
.dian-ob-col { display: contents; }
.dian-ob-text { position: absolute; top: 31.03%; isolation: isolate; }
.dian-ob-text::before { content: ''; position: absolute; z-index: -1; inset: -0.838cqw -3.591cqw -0.598cqw -1.436cqw; border-radius: 1.436cqw; background: linear-gradient(90deg, rgba(240,238,228,.9) 0%, rgba(240,238,228,.78) 62%, rgba(240,238,228,0) 100%); }
.dian-ob-oem .dian-ob-text { left: 21.07%; width: 19.150cqw; }
.dian-ob-odm .dian-ob-text { left: 57.81%; width: 17.953cqw; }
.dian-ob-text h3 { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 2.992cqw; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #2f4736; }
.dian-ob-text h4 { position: relative; margin: 0.479cqw 0 0; padding-bottom: 0.718cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.436cqw; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #2f4736; }
.dian-ob-text h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.035cqw; height: 1px; background: #8a9c87; }
.dian-ob-text p { margin: 0.718cqw 0 0; font-size: 0.934cqw; line-height: 1.3; color: #3f433b; }
.dian-ob-ind { margin: 0; padding: 0; list-style: none; }
.dian-ob-ind li { position: absolute; top: 80.13%; display: flex; align-items: center; height: 3.830cqw; margin-top: -1.915cqw; font-size: max(0.694cqw, 9.5px); line-height: 1.22; color: #2f4736; }
.dian-ob-ind .ic { display: none; }
.dian-ob-oem .dian-ob-ind li:nth-child(1) { left: 6.46%; width: 5.386cqw; }
.dian-ob-oem .dian-ob-ind li:nth-child(2) { left: 18.55%; width: 5.266cqw; }
.dian-ob-oem .dian-ob-ind li:nth-child(3) { left: 29.44%; width: 5.266cqw; }
.dian-ob-oem .dian-ob-ind li:nth-child(4) { left: 40.39%; width: 8.977cqw; }
.dian-ob-odm .dian-ob-ind li:nth-child(1) { left: 60.56%; width: 4.788cqw; }
.dian-ob-odm .dian-ob-ind li:nth-child(2) { left: 71.39%; width: 5.206cqw; }
.dian-ob-odm .dian-ob-ind li:nth-child(3) { left: 82.17%; width: 5.087cqw; }
.dian-ob-odm .dian-ob-ind li:nth-child(4) { left: 92.82%; width: 5.984cqw; }
.dian-ob-mid { position: absolute; left: 45.24%; top: 43.78%; width: 9.575cqw; text-align: center; }
.dian-ob-mid h4 { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.017cqw; font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: #2f4736; }
.dian-ob-mid h4::after { content: ''; display: block; width: 1.915cqw; height: 1px; margin: 0.838cqw auto 0; background: #8a9c87; }
.dian-ob-mid p { margin: 1.077cqw 0 0; font-size: 0.838cqw; line-height: 1.36; color: #3f433b; }
.dian-ob-bar { position: absolute; left: 11.73%; top: 89.05%; width: 83.782cqw; height: 7.01%; margin: 0; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; font-size: 0.993cqw; line-height: 1.3; color: #3a3f37; }
.dian-ob-bar strong { margin-right: .3em; font-weight: 800; color: #1c1f1c; }

/* ---------- 3. oem atau odm? ---------- */
.dian-op-intro { position: absolute; left: 5.80%; top: 2.13%; width: 59.246cqw; color: #2b2d2a; }
.dian-op-eyebrow { position: relative; padding-bottom: 0.838cqw; font-size: 0.808cqw; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: #3f4a3f; }
.dian-op-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 1.915cqw; height: 1.5px; background: #6f8a72; }
.dian-op-heading { margin: 0.479cqw 0 0.359cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.232cqw; font-weight: 700; line-height: 1.02; letter-spacing: -.03em; color: #1c1f1c; }
.dian-op-heading .g { color: #3f5b47; }
.dian-op-intro p { margin: 0; font-size: 0.993cqw; line-height: 1.26; color: #353932; }
.dian-op-side { position: absolute; left: 66.31%; top: 11.90%; width: 28.725cqw; margin: 0; padding-left: 0; font-size: 1.017cqw; line-height: 1.3; color: #3f433b; }
.dian-op-cards, .dian-op-card { display: contents; margin: 0; padding: 0; list-style: none; }
.dian-op-body { position: absolute; color: #2b2d2a; }
.dian-op-body .no { position: absolute; font-size: 1.137cqw; font-weight: 800; line-height: 1; color: #2f4736; }
.dian-op-body h3 { position: absolute; margin: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.137cqw; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #2b2d2a; }
.dian-op-body .tag { position: absolute; display: grid; place-items: center; width: 4.668cqw; height: 2.095cqw; border-radius: 999px; background: #6b8a6e; color: #fff; font-size: 1.137cqw; font-weight: 600; }
.dian-op-body p { position: absolute; margin: 0; font-size: 0.922cqw; line-height: 1.3; color: #3f433b; }
.dian-op-card.c1 .dian-op-body, .dian-op-card.c3 .dian-op-body { left: 3.41%; }
.dian-op-card.c2 .dian-op-body, .dian-op-card.c4 .dian-op-body { left: 51.77%; }
.dian-op-card.c1 .dian-op-body, .dian-op-card.c2 .dian-op-body { top: 30.29%; }
.dian-op-card.c3 .dian-op-body, .dian-op-card.c4 .dian-op-body { top: 56.11%; }
.dian-op-card.c1 .no, .dian-op-card.c2 .no, .dian-op-card.c3 .no, .dian-op-card.c4 .no { left: 0; top: 0.419cqw; }
.dian-op-card.c1 h3, .dian-op-card.c3 h3 { left: 2.394cqw; top: 0; width: 15.081cqw; }
.dian-op-card.c2 h3, .dian-op-card.c4 h3 { left: 2.992cqw; top: 0; width: 15.679cqw; }
.dian-op-card.c1 .tag { left: 17.834cqw; top: -0.180cqw; }
.dian-op-card.c2 .tag { left: 19.031cqw; top: -0.239cqw; }
.dian-op-card.c3 .tag { left: 17.834cqw; top: -0.180cqw; }
.dian-op-card.c4 .tag { left: 19.988cqw; top: -0.120cqw; }
.dian-op-card.c1 p, .dian-op-card.c3 p { left: 2.394cqw; top: 5.506cqw; width: 14.961cqw; }
.dian-op-card.c2 p, .dian-op-card.c4 p { left: 2.992cqw; top: 5.506cqw; width: 15.260cqw; }
.dian-op-card.c5 .dian-op-body { left: 31.72%; top: 84.48%; }
.dian-op-card.c5 .no { left: 0; top: 0.359cqw; font-size: 1.137cqw; }
.dian-op-card.c5 h3 { left: 3.232cqw; top: 2.274cqw; width: 16.457cqw; font-size: 1.197cqw; }
.dian-op-card.c5 p { left: 20.048cqw; top: -0.120cqw; width: 20.646cqw; font-size: 0.910cqw; }
.dian-op-btn { position: absolute; left: 75.94%; top: 85.02%; width: 20.47%; height: 6.91%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.077cqw; border-radius: 999px; background: #6b8a6e; color: #fff; font-size: 1.047cqw; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-op-btn:hover { background: #587a5c; color: #fff; transform: translateY(-1px); }
.dian-op-btn svg { width: 1.077cqw; height: 1.077cqw; }

/* ---------- 4. dari ide ke produksi ---------- */
.dian-oa-intro { position: absolute; left: 5.33%; top: 3.61%; width: 89.767cqw; color: #fff; }
.dian-oa-eyebrow { position: relative; padding-bottom: 0.838cqw; font-size: 0.808cqw; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.dian-oa-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.471cqw; height: 1.5px; background: rgba(255, 255, 255, .7); }
.dian-oa-heading { margin: 0.958cqw 0 0.838cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.232cqw; font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: #f1f5ea; }
.dian-oa-heading span { color: #1f3a2a; }
.dian-oa-intro .p1 { width: 75.404cqw; margin: 0 0 0.479cqw; font-size: 1.167cqw; line-height: 1.26; color: #fff; }
.dian-oa-intro .p2 { margin: 0; font-size: 0.934cqw; line-height: 1.3; color: rgba(255, 255, 255, .92); }
.dian-oa-steps, .dian-oa-steps li { display: contents; margin: 0; padding: 0; list-style: none; }
.dian-oa-step { position: absolute; top: 38.04%; color: #fff; }
.dian-oa-step .no { display: block; margin-bottom: 0.479cqw; font-size: 1.496cqw; font-weight: 400; line-height: 1; color: #eef3e6; }
.dian-oa-step h3 { margin: 0 0 0.479cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.167cqw; font-weight: 700; line-height: 1.2; color: #fff; }
.dian-oa-step p { margin: 0; font-size: 0.934cqw; line-height: 1.3; color: rgba(255, 255, 255, .94); }
.dian-oa-steps .s1 .dian-oa-step { left: 5.33%; width: 19.749cqw; }
.dian-oa-steps .s2 .dian-oa-step { left: 30.88%; width: 17.953cqw; }
.dian-oa-steps .s3 .dian-oa-step { left: 56.07%; width: 17.953cqw; }
.dian-oa-steps .s4 .dian-oa-step { left: 80.19%; width: 13.285cqw; }
.dian-oa-btn { position: absolute; left: 27.89%; top: 87.99%; width: 25.25%; height: 7.23%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.317cqw; border-radius: 999px; background: #f6f1e7; color: #1f3a2a; font-size: 1.197cqw; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.dian-oa-btn:hover { background: #fff; color: #1f3a2a; transform: translateY(-1px); }
.dian-oa-btn svg { width: 1.257cqw; height: 1.257cqw; }
.dian-oa-note { position: absolute; left: 56.31%; top: 89.90%; width: 28.725cqw; margin: 0; font-size: 0.934cqw; line-height: 1.38; color: rgba(255, 255, 255, .94); }
.dian-oa-note strong { font-weight: 700; color: #fff; }

/* ---------- 5. cta ---------- */
.dian-oc-copy { position: absolute; left: 5.39%; top: 10.63%; width: 50.269cqw; color: #eef3e6; }
.dian-oc-eyebrow { position: relative; padding-bottom: 1.077cqw; font-size: 0.808cqw; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: rgba(238, 243, 230, .92); }
.dian-oc-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.471cqw; height: 1.5px; background: rgba(238, 243, 230, .7); }
.dian-oc-heading { margin: 2.035cqw 0 1.676cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.591cqw; font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: #eef3e6; }
.dian-oc-heading span { color: #cfe3c0; }
.dian-oc-copy p { width: 46.679cqw; margin: 0; font-size: 1.227cqw; line-height: 1.32; color: rgba(238, 243, 230, .96); }
.dian-oc-btn { position: absolute; left: 5.63%; top: 57.49%; width: 28.49%; height: 8.18%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.317cqw; border-radius: 999px; background: #f6f1e7; color: #1f3a2a; font-size: 1.376cqw; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.dian-oc-btn:hover { background: #fff; color: #1f3a2a; transform: translateY(-1px); }
.dian-oc-btn svg { width: 1.436cqw; height: 1.436cqw; }
.dian-oc-link { position: absolute; left: 5.63%; top: 68.54%; padding-bottom: 0.299cqw; border-bottom: 1px solid rgba(238, 243, 230, .85); font-size: 1.017cqw; color: #eef3e6; text-decoration: none; }
.dian-oc-link:hover { color: #fff; border-color: #fff; }
.dian-oc-people { position: absolute; left: 5.86%; top: 78.64%; display: flex; align-items: center; gap: 1.436cqw; padding-top: 0; color: #eef3e6; }
.dian-oc-people svg { width: 3.112cqw; height: 3.112cqw; }
.dian-oc-people p { width: 28.725cqw; margin: 0; font-size: 1.017cqw; line-height: 1.38; color: rgba(238, 243, 230, .95); }

/* ---------- tablet & hp ---------- */
@media (max-width: 1180px) {
    .dian-oh-stage, .dian-ob-stage, .dian-op-stage, .dian-oa-stage, .dian-oc-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; }
    .dian-oh-copy, .dian-oh-btn, .dian-oh-note, .dian-ob-intro, .dian-ob-text, .dian-ob-mid, .dian-ob-bar, .dian-op-intro, .dian-op-side, .dian-op-btn,
    .dian-oa-intro, .dian-oa-btn, .dian-oa-note, .dian-oc-copy, .dian-oc-btn, .dian-oc-link, .dian-oc-people { position: static; width: auto; height: auto; }
    .dian-oh-bg, .dian-oc-bg { position: relative; order: 9; display: block; width: calc(100% + 2 * clamp(20px, 5.74vw, 120px)); height: auto; margin: 28px calc(-1 * clamp(20px, 5.74vw, 120px)) -44px; max-height: 520px; }
    .dian-oh-bg { aspect-ratio: 1031 / 851; }
    .dian-oc-bg { aspect-ratio: 792 / 901; }
    .dian-ob-bg, .dian-op-bg, .dian-oa-bg { display: none; }
    .dian-oh-stage { background: #dfe8da; }
    .dian-ob-stage, .dian-op-stage { background: #f3efe6; }

    .dian-oh-eyebrow, .dian-ob-eyebrow, .dian-op-eyebrow, .dian-oa-eyebrow, .dian-oc-eyebrow { margin-bottom: 14px; padding-bottom: 14px; font-size: 12px; letter-spacing: .24em; }
    .dian-oh-eyebrow::after, .dian-ob-eyebrow::after, .dian-op-eyebrow::after, .dian-oa-eyebrow::after, .dian-oc-eyebrow::after { width: 44px; }
    .dian-oh-heading, .dian-ob-heading, .dian-op-heading, .dian-oa-heading, .dian-oc-heading { margin: 0 0 14px; font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.1; }
    .dian-oh-heading br, .dian-op-heading br, .dian-oa-heading br, .dian-oc-heading br, .dian-op-side br, .dian-oa-note br { display: none; }
    .dian-oh-heading span, .dian-oa-heading span, .dian-oc-heading span { display: inline; }
    .dian-oh-p1, .dian-oh-p2, .dian-ob-intro p, .dian-op-intro p, .dian-oa-intro .p1, .dian-oa-intro .p2, .dian-oc-copy p { width: auto; margin-bottom: 14px; font-size: 1rem; line-height: 1.55; }
    .dian-oh-btn, .dian-oc-btn, .dian-op-btn, .dian-oa-btn { justify-content: space-between; margin-top: 8px; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-oh-btn svg, .dian-oc-btn svg, .dian-op-btn svg, .dian-oa-btn svg { width: 18px; height: 18px; }
    .dian-oh-note, .dian-op-side, .dian-oa-note { margin-top: 16px; font-size: .95rem; line-height: 1.55; }

    .dian-ob-col { display: block; overflow: hidden; margin-top: 22px; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-ob-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: right center; }
    .dian-ob-oem .dian-ob-text, .dian-ob-odm .dian-ob-text { left: auto; top: auto; width: auto; padding: 22px 22px 6px; }
    .dian-ob-text::before { display: none; }
    .dian-ob-text h3 { font-size: 2.4rem; }
    .dian-ob-text h4 { margin-top: 8px; padding-bottom: 12px; font-size: 1.25rem; }
    .dian-ob-text h4 br { display: none; }
    .dian-ob-text p { margin-top: 12px; font-size: .95rem; line-height: 1.55; }
    .dian-ob-ind { display: grid; gap: 12px; padding: 14px 22px 24px; }
    .dian-ob-ind li, .dian-ob-oem .dian-ob-ind li, .dian-ob-odm .dian-ob-ind li { position: static; width: auto; height: auto; gap: 14px; font-size: .93rem; line-height: 1.4; }
    .dian-ob-ind .ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #8aa088; color: #fff; }
    .dian-ob-mid { order: 0; margin: 22px 0 0; padding: 18px 22px; border-radius: 18px; background: #e8eddf; text-align: left; }
    .dian-ob-mid h4 { font-size: 1.05rem; }
    .dian-ob-mid p { margin-top: 8px; font-size: .93rem; line-height: 1.55; }
    .dian-ob-oem { order: 0; }
    .dian-ob-stage > .dian-ob-oem { order: 1; }
    .dian-ob-stage > .dian-ob-mid { order: 2; }
    .dian-ob-stage > .dian-ob-odm { order: 3; }
    .dian-ob-stage > .dian-ob-bar { order: 4; margin-top: 22px; padding: 18px 22px; border-radius: 18px; background: #e3e8d8; font-size: .95rem; line-height: 1.55; display: block; height: auto; }

    .dian-op-side { padding: 18px 22px; border-radius: 18px; background: #e8eddf; margin-bottom: 4px; }
    .dian-op-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 20px 0 0; padding: 0; list-style: none; }
    .dian-op-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-op-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: right center; }
    .dian-op-body { position: static !important; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; padding: 20px 22px 6px; }
    .dian-op-body .no, .dian-op-body h3, .dian-op-body .tag, .dian-op-body p { position: static !important; width: auto !important; }
    .dian-op-body .no { grid-row: 1; font-size: 1.3rem; padding-top: 2px; }
    .dian-op-body h3 { grid-column: 2; grid-row: 1; font-size: 1.15rem; line-height: 1.3; }
    .dian-op-body .tag { grid-column: 2; grid-row: 2; justify-self: start; width: auto !important; height: auto; padding: 6px 16px; font-size: .85rem; }
    .dian-op-body p { grid-column: 1 / -1; font-size: .95rem; line-height: 1.55; }
    .dian-op-card.c5 .dian-op-body p { grid-row: 2; }
    .dian-op-card.c5 .no { left: auto; top: auto; font-size: 1.3rem; }
    .dian-op-card.c5 h3 { left: auto; top: auto; font-size: 1.15rem; line-height: 1.3; }
    .dian-op-card.c5 .dian-op-body p { left: auto; top: auto; font-size: .95rem; line-height: 1.55; }
    .dian-op-card .dian-op-body { left: auto !important; top: auto !important; }
    .dian-op-card.c5 .dian-op-btn { margin: 8px 22px 22px; }

    .dian-oa-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
    .dian-oa-steps li { display: block; overflow: hidden; border-radius: 22px; background: rgba(255, 255, 255, .14); }
    .dian-oa-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    .dian-oa-step { position: static !important; width: auto !important; padding: 18px 22px 22px; }
    .dian-oa-step .no { margin-bottom: 6px; font-size: 1.3rem; }
    .dian-oa-step h3 { font-size: 1.15rem; }
    .dian-oa-step p { font-size: .95rem; line-height: 1.55; }
    .dian-oa-btn { margin-top: 22px; background: #f6f1e7; }
    .dian-oc-link { display: inline-block; align-self: flex-start; margin-top: 18px; font-size: .95rem; }
    .dian-oc-people { margin-top: 24px; gap: 16px; }
    .dian-oc-people svg { width: 40px; height: 40px; }
    .dian-oc-people p { width: auto; font-size: .92rem; }
}

@media (min-width: 700px) and (max-width: 1180px) {
    .dian-op-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dian-op-card.c5 { grid-column: 1 / -1; }
    .dian-oa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}