.kpi-page { padding: 11rem 0 5rem; overflow: clip; }
.kpi-container { width: calc(83.333333% - 30px); max-width: 1280px; margin: 0 auto; }
.kpi-detail section { padding: 0; }
.kpi-hero { position: relative; isolation: isolate; padding: 1.5rem 0 4rem; }
.kpi-hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 360px; height: 450px; right: -230px; top: -50px; background: url('../images/bg/tyrsak_right_bg.webp') right center / contain no-repeat; opacity: .55; }
.kpi-lead { color: #2B78AD; font-size: 1.15rem; font-weight: 600; margin-bottom: 1.25rem; }
.kpi-detail h1 { max-width: 850px; font-size: clamp(2.4rem, 4.5vw, 4.25rem); line-height: 1.1; margin-bottom: 1.75rem; }
.kpi-intro { max-width: 740px; font-size: 1.25rem; line-height: 1.7; margin: 0; }
:where(.kpi-detail) h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.2; margin: 0 0 1rem; }
.kpi-section-heading { margin-bottom: 2rem; }
.kpi-section-heading p { margin: 0; line-height: 1.65; }
.kpi-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.kpi-stat { padding: clamp(1.5rem, 2.2vw, 2rem); border-radius: 20px; background: #fff; box-shadow: 0 20px 64px rgba(24,20,51,.08); transition: box-shadow .3s ease; }
.kpi-stat__number { color: #181433; font-size: clamp(3rem, 5vw, 5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 1.5rem; }
.kpi-stat__unit { font-size: .55em; letter-spacing: -.02em; }
.kpi-stat p { line-height: 1.65; margin: 0; }
.kpi-stat:nth-child(4) { background: linear-gradient(135deg, #c5ddf5 0%, #c3edf0 55%, #e5f8f5 100%); }
.kpi-approach { margin-top: 5rem; }
.kpi-approach h2 { margin-bottom: 1.5rem; }
.kpi-copy { max-width: 900px; }
:where(.kpi-copy) p { font-size: 1.125rem; line-height: 1.8; margin-bottom: 1.5rem; }
.kpi-copy p:last-child { margin: 0; }
.kpi-detail .service-faq { margin-top: 4rem; }
@media (hover: hover) { .kpi-stat:hover { box-shadow: 0 24px 70px rgba(24,20,51,.13); } }
@media (max-width: 991px) {
    .kpi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .kpi-stat { padding: 1.5rem; }
    .kpi-approach { margin-top: 3.5rem; }
}
@media (max-width: 767px) {
    .kpi-page { padding: 8rem 0 3rem; }
    .kpi-container { width: auto; margin: 0 24px; }
    .kpi-hero { padding: .5rem 0 2.5rem; }
    .kpi-hero::after { width: 180px; height: 250px; right: -140px; opacity: .3; }
    .kpi-detail h1 { font-size: 2.25rem; }
    .kpi-lead { font-size: 1rem; }
    .kpi-intro { font-size: 1.125rem; }
    .kpi-stats { grid-template-columns: 1fr; gap: 16px; }
    .kpi-stat { display: flex; align-items: center; gap: 1.25rem; }
    .kpi-stat__number { font-size: 3.5rem; min-width: 106px; margin: 0; }
    .kpi-stat p { font-size: 1rem; }
    :where(.kpi-copy) p { font-size: 1rem; }
    .kpi-detail .service-faq { margin-top: 2.5rem; }
}
@media (max-width: 374px) { .kpi-stat { display: block; } .kpi-stat__number { margin-bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .kpi-stat { transition: none; } }
/* The same edge-to-edge ink artwork used on the homepage. */
.kpi-container { --kpi-edge: calc((100vw - 100%) / -2); }
.kpi-hero::after { right: calc(var(--kpi-edge) - 80px); top: -50px; width: clamp(380px, 40vw, 600px); height: 480px; background-image: url('../images/bg/events2_bg.webp'); opacity: 1; }
.kpi-data { position: relative; isolation: isolate; }
.kpi-data::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: var(--kpi-edge); top: 70px; width: clamp(260px, 30vw, 430px); bottom: -24px; background: url('../images/bg/tyrsak_left_bg.webp') left center / contain no-repeat; }
.kpi-detail .service-faq::before { right: var(--kpi-edge); }
@media (max-width: 991px) {
    .kpi-hero::after { right: calc(var(--kpi-edge) - 50px); width: 290px; height: 330px; top: -40px; opacity: .65; }
}
@media (max-width: 767px) {
    .kpi-container { --kpi-edge: -24px; }
    .kpi-hero::after { right: calc(var(--kpi-edge) - 35px); top: -25px; width: 180px; height: 190px; opacity: .35; }
    .kpi-data::before { top: 125px; width: 230px; bottom: -24px; }
}

/* Reuse the blog editor's box-highlight paragraph styling. */
.kpi-detail .kpi-closing-wrap { width: 100%; max-width: none; margin: 2rem 0 0; }
.kpi-closing-wrap .kpi-closing { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.6; }
@media (max-width: 767px) {
    .kpi-closing-wrap { margin-top: 2rem; }
    .kpi-closing-wrap .kpi-closing { font-size: 1.125rem; }
}

/* Standalone FAQ shares the established page and accordion styles. */
.faq-detail .kpi-hero { padding-bottom: 1rem; }
.faq-detail .service-faq { margin-top: 2rem; }
.faq-detail .kpi-hero::after { opacity: .55; }