.ksl-visual-image { display: block;width: 100%;height: auto; }
body[class] :is(.ksl-home-scene, .ksl-hero-art, .ksl-contact-scene) { position: absolute;inset: 0;pointer-events: none;overflow: hidden; }
body[class] :is(.ksl-home-scene, .ksl-hero-art, .ksl-contact-scene) .ksl-visual-image { width: 100%;height: 100%;object-fit: cover; }
body[class] main.hj-home .hj-hero { background: #102d43; }
body[class] main.hj-home .hj-hero::before, body[class] main.hj-home .hj-hero::after { display: none;animation: none; }
body[class] .ksl-home-scene { z-index: -1; }
body[class] .ksl-home-scene::after { content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #102d43ef 0%, #102d43d9 38%, #102d436b 74%, #102d4342 100%), linear-gradient(0deg, #102d4370, transparent 60%); }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] { position: relative;isolation: isolate;overflow: hidden;background: #fff;border: 0;color: #102d43;min-height: 420px;border-bottom: 1px solid #dce3e8}
body[class] .ksl-visual-hero .ksl-hero-art { z-index: -1; }
body[class] .ksl-visual-hero .ksl-hero-art::after { content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #f4f8fcf5 0%, #f0f5faeb 31%, #edf3f9c4 47%, #edf3f930 68%, transparent 100%); }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class]::before, body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class]::after { display: none; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner { position: relative;z-index: 1; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner > * { order: 0; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner > p { margin-top: 16px; }
body[class] main .ksl-visual-hero .inner > .dg-button { margin-top: 20px; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(h1, .cases-title, .cases-title > span) { max-width: 720px;color: #102d43; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(p, .hero-desc, .pasan-hero-desc, .cases-desc) { max-width: 580px;color: #344653;text-shadow: none; }
body[class] main .ksl-visual-hero :is(.cases-hero-link, .dg-button, .btn-primary) { position: relative;z-index: 1; }
body[class] .ksl-philosophy-visual { margin: 28px 0 0;overflow: hidden;border-radius: 8px;background: #fff; }
body[class] .ksl-philosophy-visual img { aspect-ratio: 1.65;object-fit: cover;object-position: 72% center; }
body[class] main.hj-home .ksl-process-visual { margin: 24px 0 0;border-radius: 8px;overflow: hidden; }
body[class] main.hj-home .ksl-process-visual img { aspect-ratio: 2.6;object-fit: cover;object-position: right 57%; }
body[class] .ksl-subpage-hero.fq-hero[class] > .inner { position: relative;max-width: var(--ksl-layout-max);padding-right: 340px; }
body[class] .ksl-faq-visual { position: absolute;width: 260px;right: var(--ksl-page-gutter);top: 50%;transform: translateY(-50%);margin: 0;border-radius: 12px;overflow: hidden; }
body[class] .ksl-faq-visual img { aspect-ratio: 1.4;object-fit: cover;object-position: right center; }
body[class] main.hj-home .ksl-home-faq-visual { position: absolute;right: -12px;top: 8px;width: 170px;margin: 0;border-radius: 10px;overflow: hidden;pointer-events: none; }
body[class] main.hj-home .ksl-home-faq-visual img { aspect-ratio: 1.4;object-fit: cover;object-position: right center; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] { min-height: 420px;background: #fff;color: #102d43;border-bottom: 1px solid #dce3e8}
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] > .ksl-subpage-tool-inner { display: grid;grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);gap: 64px;align-items: center;max-width: var(--ksl-layout-max); }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] h1 { color: #102d43; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] .ksl-selfcheck-start-desc { margin: 20px 0 0;color: #344653;font-size: 17px;line-height: 1.8; }
body[class] .ksl-selfcheck-visual { margin: 0;overflow: hidden;border-radius: 12px; }
body[class] .ksl-selfcheck-visual img { aspect-ratio: 1.4;object-fit: cover;object-position: right center; }
body[class] .ksl-selfcheck-start { display: inline-flex;align-items: center;justify-content: center;gap: 24px;min-height: 52px;margin-top: 28px;padding: 14px 24px;border: 1px solid #102d43;border-radius: 5px;background: #102d43;color: #fff;font: 650 16px/1.5 var(--font-sans); }
body[class].ksl-selfcheck-intro { padding-bottom: 0 !important; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero.is-started[class] { min-height: 0;padding-block: 28px; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero.is-started[class] > .ksl-subpage-tool-inner { display: block; }
body[class] .ksl-selfcheck-hero.is-started .ksl-selfcheck-start-desc { display: none; }
body[class] .ksl-contact-scene { z-index: -1; }
body[class] .ksl-contact-scene img { object-position: center 52%; }
body[class] .ksl-contact-scene::after { content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #102d43f2, #102d43bf 45%, #102d432b); }
body[class] main.cs-main .cs-hero :is(h1, p) { position: relative;z-index: 1;max-width: 620px; }
body[class] main.cs-main .contact-form { background: #fff; }
body[class] .ksl-location-visual { position: absolute;right: var(--ksl-page-gutter);top: 50%;transform: translateY(-50%);width: 180px;margin: 0;border-radius: 10px;overflow: hidden; }
body[class] .ksl-location-visual img { aspect-ratio: 1.5;object-fit: cover;object-position: right center; }
body[class] main .location-map-fallback h3 { color: #fff; }
body[class] main .location-map-fallback :is(p, ol, li) { color: #dce7f0; }
body[class] main .location-map-fallback a { color: #e2c486; }
@media (max-width: 1100px) {
body[class] main.hj-home .ksl-home-faq-visual { right: 0;top: -68px;width: 120px; }
}
@media (max-width: 768px) {
body[class] .ksl-home-scene .ksl-visual-image { object-position: 62% center; }
body[class] .ksl-home-scene::after { background: linear-gradient(90deg, #102d43ed, #102d43bf); }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] { display: flex;flex-direction: column;gap: 28px;min-height: 0;padding-block: 40px 0; }
body[class] main .ksl-visual-hero .ksl-hero-art { position: relative;z-index: 0;order: 2;inset: auto;flex: none;width: 100%;height: auto; }
body[class] main .ksl-visual-hero .ksl-hero-art img { width: 100%;height: auto;aspect-ratio: 16/9;object-fit: cover;object-position: right center; }
body[class] main .ksl-visual-hero .ksl-hero-art::after { display: none; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] > .inner { order: 1;flex: none;align-self: start;width: 100%; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(h1, .cases-title) { font-size: 29px; }
body[class]:not(.ksl-page-index) main .ksl-subpage-hero.ksl-visual-hero[class] :is(p, .pasan-hero-desc, .cases-desc) { font-size: 16px; }
body[class] .ksl-philosophy-visual { max-width: 460px;margin-top: 22px; }
body[class] main.hj-home .ksl-process-visual { max-width: 420px;margin-top: 20px; }
body[class] main.hj-home .ksl-process-visual img { aspect-ratio: 3.2; }
body[class] .ksl-subpage-hero.fq-hero[class] > .inner { padding-right: var(--ksl-page-gutter); }
body[class] .ksl-faq-visual { position: static;float: right;width: 120px;transform: none;margin: 12px 0 12px 16px; }
body[class] .fq-search { clear: both; }
body[class] main.hj-home .ksl-home-faq-visual { width: 70px;top: 32px;right: 12px;z-index: 2; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] > .ksl-subpage-tool-inner { grid-template-columns: minmax(0, 1fr);gap: 24px; }
body[class] .ksl-selfcheck-visual { width: 100%;max-width: 380px;justify-self: center; }
body[class] .ksl-selfcheck-visual img { aspect-ratio: 2;object-position: right 48%; }
body[class] .ksl-subpage-hero.ksl-selfcheck-hero[class] .ksl-selfcheck-start-desc { font-size: 16px; }
body[class] .ksl-selfcheck-start { margin-top: 22px; }
body[class] main.cs-main .ksl-contact-scene { position: relative;z-index: 0;order: 2;inset: auto;width: 100%; }
body[class] main.cs-main .ksl-contact-scene img { height: auto;aspect-ratio: 16/9;object-fit: cover; }
body[class] .ksl-contact-scene::after { display: none; }
body[class] .ksl-location-visual { position: static;transform: none;grid-column: 1;grid-row: 3;width: 140px;margin: 0; }
}
