/*
 * KKI Design System — About page (kki-a2-*) harmony
 * Page-scoped to /about/ and /th/about/ (post 2711, 4516).
 * Applies the unified dark-navy theme across all About sections,
 * matching the methodology + services harmony.
 *
 * Spec: openspec/specs/v2-component-styles/spec.md
 *       "About unified dark theme"
 */

/* ── Why we exist ───────────────────────────────────────────────────────── */
body.page-id-2711 .kki-a2-why,
body.page-id-4516 .kki-a2-why {
    background:
        radial-gradient(circle at 14% 0%, rgba(216, 189, 118, 0.10), transparent 32%),
        linear-gradient(180deg, var(--color-background) 0%, var(--primitive-color-navy-900) 100%) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.20) !important;
    box-shadow: none !important;
}
body.page-id-2711 .kki-a2-why .kki-a2-eyebrow,
body.page-id-4516 .kki-a2-why .kki-a2-eyebrow {
    color: var(--color-primary) !important;
    opacity: 1 !important;
}
body.page-id-2711 .kki-a2-why .kki-a2-h2,
body.page-id-4516 .kki-a2-why .kki-a2-h2 {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-why p,
body.page-id-4516 .kki-a2-why p {
    color: rgba(247, 240, 223, 0.86) !important;
}

/* Pull-quote card */
body.page-id-2711 .kki-a2-quote,
body.page-id-4516 .kki-a2-quote {
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96)) !important;
    border: 1px solid rgba(216, 189, 118, 0.34) !important;
    border-left: 4px solid var(--color-primary) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important;
}
body.page-id-2711 .kki-a2-quote__mark,
body.page-id-4516 .kki-a2-quote__mark {
    color: var(--color-primary) !important;
}
body.page-id-2711 .kki-a2-quote__txt,
body.page-id-4516 .kki-a2-quote__txt {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-quote__cite,
body.page-id-4516 .kki-a2-quote__cite {
    color: rgba(216, 189, 118, 0.86) !important;
}

/* ── Believe (5 principles + 6th referral) ──────────────────────────────── */
body.page-id-2711 .kki-a2-believe,
body.page-id-4516 .kki-a2-believe {
    background:
        radial-gradient(circle at 86% 0%, rgba(216, 189, 118, 0.10), transparent 32%),
        linear-gradient(180deg, var(--primitive-color-navy-900) 0%, var(--color-background) 100%) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.20) !important;
    box-shadow: none !important;
}
body.page-id-2711 .kki-a2-believe .kki-a2-eyebrow,
body.page-id-4516 .kki-a2-believe .kki-a2-eyebrow,
body.page-id-2711 .kki-a2-believe .kki-a2-eyebrow--center,
body.page-id-4516 .kki-a2-believe .kki-a2-eyebrow--center {
    color: var(--color-primary) !important;
    opacity: 1 !important;
}
body.page-id-2711 .kki-a2-believe .kki-a2-h2,
body.page-id-4516 .kki-a2-believe .kki-a2-h2 {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-believe .kki-a2-sub,
body.page-id-4516 .kki-a2-believe .kki-a2-sub {
    color: rgba(240, 238, 233, 0.86) !important;
}

/* Belief cards */
body.page-id-2711 .kki-a2-bel,
body.page-id-4516 .kki-a2-bel {
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96)) !important;
    border: 1px solid rgba(216, 189, 118, 0.34) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important;
}
body.page-id-2711 .kki-a2-bel:hover,
body.page-id-4516 .kki-a2-bel:hover {
    border-color: rgba(216, 189, 118, 0.62) !important;
    box-shadow: 0 26px 48px rgba(0, 0, 0, 0.40) !important;
}
body.page-id-2711 .kki-a2-bel__num,
body.page-id-4516 .kki-a2-bel__num {
    color: var(--color-primary) !important;
}
body.page-id-2711 .kki-a2-bel__h,
body.page-id-4516 .kki-a2-bel__h {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-bel__b,
body.page-id-4516 .kki-a2-bel__b {
    color: rgba(247, 240, 223, 0.82) !important;
}

/* 6th referral card (already styled w/ inline var(--color-surface) — refine border) */
body.page-id-2711 .kki-a2-bel[style*="background:var(--color-surface)"],
body.page-id-4516 .kki-a2-bel[style*="background:var(--color-surface)"] {
    background: linear-gradient(180deg, rgba(36, 48, 70, 0.96), rgba(17, 25, 39, 0.96)) !important;
    border-color: rgba(216, 189, 118, 0.62) !important;
    border-style: solid !important;
}

/* ── Fit (accept / avoid) ────────────────────────────────────────────── */
body.page-id-2711 .kki-a2-fit,
body.page-id-4516 .kki-a2-fit {
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 189, 118, 0.08), transparent 36%),
        linear-gradient(180deg, var(--color-background) 0%, var(--primitive-color-navy-950) 100%) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.20) !important;
}
body.page-id-2711 .kki-a2-fit .kki-a2-h2,
body.page-id-4516 .kki-a2-fit .kki-a2-h2 {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-fit__sub,
body.page-id-4516 .kki-a2-fit__sub {
    color: rgba(240, 238, 233, 0.78) !important;
}

/* Accept/avoid columns */
body.page-id-2711 .kki-a2-fitcol,
body.page-id-4516 .kki-a2-fitcol {
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96)) !important;
    border: 1px solid rgba(216, 189, 118, 0.32) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important;
}
body.page-id-2711 .kki-a2-fitcol--yes,
body.page-id-4516 .kki-a2-fitcol--yes {
    border-top: 3px solid #7eb88a !important;
}
body.page-id-2711 .kki-a2-fitcol--no,
body.page-id-4516 .kki-a2-fitcol--no {
    border-top: 3px solid #eb9788 !important;
}
body.page-id-2711 .kki-a2-fitcol--yes .kki-a2-fitcol__tag,
body.page-id-4516 .kki-a2-fitcol--yes .kki-a2-fitcol__tag {
    color: #7eb88a !important;
}
body.page-id-2711 .kki-a2-fitcol--no .kki-a2-fitcol__tag,
body.page-id-4516 .kki-a2-fitcol--no .kki-a2-fitcol__tag {
    color: #eb9788 !important;
}
body.page-id-2711 .kki-a2-fitcol__h,
body.page-id-4516 .kki-a2-fitcol__h {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-fitcol li,
body.page-id-4516 .kki-a2-fitcol li {
    color: rgba(247, 240, 223, 0.82) !important;
    border-bottom-color: rgba(216, 189, 118, 0.10) !important;
}

/* ── Numbers (4 stat cards) ────────────────────────────────────────── */
body.page-id-2711 .kki-a2-numbers,
body.page-id-4516 .kki-a2-numbers {
    background:
        radial-gradient(circle at 18% 0%, rgba(216, 189, 118, 0.10), transparent 34%),
        linear-gradient(180deg, var(--primitive-color-navy-900) 0%, var(--color-background) 100%) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.20) !important;
    box-shadow: none !important;
}
body.page-id-2711 .kki-a2-numbers .kki-a2-eyebrow,
body.page-id-4516 .kki-a2-numbers .kki-a2-eyebrow,
body.page-id-2711 .kki-a2-numbers .kki-a2-eyebrow--center,
body.page-id-4516 .kki-a2-numbers .kki-a2-eyebrow--center {
    color: var(--color-primary) !important;
    opacity: 1 !important;
}
body.page-id-2711 .kki-a2-numbers .kki-a2-h2,
body.page-id-4516 .kki-a2-numbers .kki-a2-h2 {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-numbers .kki-a2-sub,
body.page-id-4516 .kki-a2-numbers .kki-a2-sub {
    color: rgba(240, 238, 233, 0.86) !important;
}
body.page-id-2711 .kki-a2-numbers__note,
body.page-id-4516 .kki-a2-numbers__note {
    color: rgba(240, 238, 233, 0.68) !important;
}

/* Stat cards */
body.page-id-2711 .kki-a2-stat,
body.page-id-4516 .kki-a2-stat {
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96)) !important;
    border: 1px solid rgba(216, 189, 118, 0.34) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.30) !important;
}
body.page-id-2711 .kki-a2-stat__label,
body.page-id-4516 .kki-a2-stat__label {
    color: var(--color-primary) !important;
}
body.page-id-2711 .kki-a2-stat__num,
body.page-id-4516 .kki-a2-stat__num {
    color: var(--color-foreground) !important;
    text-shadow: 0 0 24px rgba(216, 189, 118, 0.32), 0 14px 36px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: -0.02em !important;
}
body.page-id-2711 .kki-a2-stat__b,
body.page-id-4516 .kki-a2-stat__b {
    color: rgba(247, 240, 223, 0.82) !important;
}

/* ── CTA refinement ────────────────────────────────────────────────── */
body.page-id-2711 .kki-a2-cta,
body.page-id-4516 .kki-a2-cta {
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 189, 118, 0.11), transparent 36%),
        linear-gradient(180deg, #18233a 0%, #111927 100%) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.45) !important;
}
body.page-id-2711 .kki-a2-cta h2,
body.page-id-4516 .kki-a2-cta h2 {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-cta p,
body.page-id-4516 .kki-a2-cta p {
    color: rgba(240, 238, 233, 0.86) !important;
}
body.page-id-2711 .kki-a2-cta__btn,
body.page-id-4516 .kki-a2-cta__btn {
    background: var(--color-primary) !important;
    color: var(--primitive-color-navy-950) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 14px 32px rgba(216, 189, 118, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
body.page-id-2711 .kki-a2-cta__link,
body.page-id-4516 .kki-a2-cta__link {
    color: var(--color-primary) !important;
    border-bottom-color: rgba(216, 189, 118, 0.55) !important;
}
body.page-id-2711 .kki-a2-cta__link:hover,
body.page-id-4516 .kki-a2-cta__link:hover {
    color: var(--color-foreground) !important;
    border-bottom-color: var(--color-foreground) !important;
}


/* ============================================================
 * v11.18.0 — About balance pass (migrated from kki-v2-about-balance.php)
 * Adds darker grounding gradient + content rhythm.
 * ============================================================ */
body.page-id-2711 .kki-a2-hero,
body.page-id-4516 .kki-a2-hero,
body.page-id-2711 .kki-a2-why,
body.page-id-4516 .kki-a2-why,
body.page-id-2711 .kki-a2-believe,
body.page-id-4516 .kki-a2-believe,
body.page-id-2711 .kki-a2-fit,
body.page-id-4516 .kki-a2-fit,
body.page-id-2711 .kki-a2-numbers,
body.page-id-4516 .kki-a2-numbers {
    background:
        radial-gradient(circle at 14% 0%, rgba(216, 189, 118, 0.08), transparent 32%),
        linear-gradient(180deg, var(--color-background) 0%, var(--primitive-color-navy-900) 100%) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.18) !important;
    color: var(--primitive-color-cream-warm) !important;
}

body.page-id-2711 .kki-a2-hero__inner,
body.page-id-4516 .kki-a2-hero__inner,
body.page-id-2711 .kki-a2-why__inner,
body.page-id-4516 .kki-a2-why__inner,
body.page-id-2711 .kki-a2-believe__inner,
body.page-id-4516 .kki-a2-believe__inner,
body.page-id-2711 .kki-a2-fit__inner,
body.page-id-4516 .kki-a2-fit__inner,
body.page-id-2711 .kki-a2-numbers__inner,
body.page-id-4516 .kki-a2-numbers__inner,
body.page-id-2711 .kki-a2-cta__inner,
body.page-id-4516 .kki-a2-cta__inner {
    max-width: 1160px !important;
}

body.page-id-2711 .kki-a2-hero,
body.page-id-4516 .kki-a2-hero {
    padding: clamp(72px, 7vw, 108px) 24px !important;
    margin-top: 0 !important;
}
body.page-id-2711 .kki-a2-eyebrow,
body.page-id-4516 .kki-a2-eyebrow,
body.page-id-2711 .kki-a2-eyebrow--center,
body.page-id-4516 .kki-a2-eyebrow--center {
    color: var(--color-primary) !important;
    opacity: 1 !important;
}
body.page-id-2711 .kki-a2-hero h1,
body.page-id-4516 .kki-a2-hero h1,
body.page-id-2711 .kki-a2-h2,
body.page-id-4516 .kki-a2-h2,
body.page-id-2711 .kki-a2-cta h2,
body.page-id-4516 .kki-a2-cta h2 {
    color: var(--color-foreground) !important;
    text-shadow: 0 18px 46px rgba(0, 0, 0, 0.3) !important;
}
body.page-id-2711 .kki-a2-hero h1,
body.page-id-4516 .kki-a2-hero h1 {
    max-width: 940px !important;
    font-size: clamp(2.35rem, 4.8vw, 4.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
}
body.page-id-2711 .kki-a2-hero__lede,
body.page-id-4516 .kki-a2-hero__lede,
body.page-id-2711 .kki-a2-sub,
body.page-id-4516 .kki-a2-sub,
body.page-id-2711 .kki-a2-fit__sub,
body.page-id-4516 .kki-a2-fit__sub,
body.page-id-2711 .kki-a2-cta p,
body.page-id-4516 .kki-a2-cta p {
    color: rgba(240, 238, 233, 0.82) !important;
}
body.page-id-2711 .kki-a2-pill,
body.page-id-4516 .kki-a2-pill {
    background: rgba(216, 189, 118, 0.14) !important;
    border-color: rgba(216, 189, 118, 0.42) !important;
    color: rgba(255, 247, 232, 0.88) !important;
}
body.page-id-2711 .kki-a2-pill strong,
body.page-id-4516 .kki-a2-pill strong {
    color: var(--color-foreground) !important;
}

body.page-id-2711 .kki-a2-why,
body.page-id-4516 .kki-a2-why,
body.page-id-2711 .kki-a2-believe,
body.page-id-4516 .kki-a2-believe,
body.page-id-2711 .kki-a2-fit,
body.page-id-4516 .kki-a2-fit,
body.page-id-2711 .kki-a2-numbers,
body.page-id-4516 .kki-a2-numbers {
    padding: clamp(74px, 7vw, 106px) 24px !important;
}
body.page-id-2711 .kki-a2-why__inner,
body.page-id-4516 .kki-a2-why__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
    gap: clamp(34px, 5vw, 74px) !important;
    align-items: center !important;
}
body.page-id-2711 .kki-a2-why__body p,
body.page-id-4516 .kki-a2-why__body p {
    color: rgba(240, 238, 233, 0.84) !important;
}
body.page-id-2711 .kki-a2-quote,
body.page-id-4516 .kki-a2-quote,
body.page-id-2711 .kki-a2-bel,
body.page-id-4516 .kki-a2-bel,
body.page-id-2711 .kki-a2-fitcol,
body.page-id-4516 .kki-a2-fitcol,
body.page-id-2711 .kki-a2-stat,
body.page-id-4516 .kki-a2-stat {
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.98), rgba(9, 16, 26, 0.96)) !important;
    border: 1px solid rgba(216, 189, 118, 0.28) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
body.page-id-2711 .kki-a2-quote,
body.page-id-4516 .kki-a2-quote {
    padding: clamp(30px, 4vw, 46px) !important;
    border-left: 4px solid var(--color-primary) !important;
}
body.page-id-2711 .kki-a2-quote__txt,
body.page-id-4516 .kki-a2-quote__txt,
body.page-id-2711 .kki-a2-quote__cite,
body.page-id-4516 .kki-a2-quote__cite {
    color: rgba(255, 247, 232, 0.9) !important;
}

body.page-id-2711 .kki-a2-believe__head,
body.page-id-4516 .kki-a2-believe__head,
body.page-id-2711 .kki-a2-fit__inner > .kki-a2-eyebrow,
body.page-id-4516 .kki-a2-fit__inner > .kki-a2-eyebrow,
body.page-id-2711 .kki-a2-fit .kki-a2-h2,
body.page-id-4516 .kki-a2-fit .kki-a2-h2,
body.page-id-2711 .kki-a2-fit__sub,
body.page-id-4516 .kki-a2-fit__sub,
body.page-id-2711 .kki-a2-numbers__head,
body.page-id-4516 .kki-a2-numbers__head {
    text-align: center !important;
}
body.page-id-2711 .kki-a2-believe__head,
body.page-id-4516 .kki-a2-believe__head,
body.page-id-2711 .kki-a2-numbers__head,
body.page-id-4516 .kki-a2-numbers__head {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(34px, 4vw, 52px) !important;
}
body.page-id-2711 .kki-a2-believe__grid,
body.page-id-4516 .kki-a2-believe__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
}
body.page-id-2711 .kki-a2-bel,
body.page-id-4516 .kki-a2-bel {
    min-height: 300px !important;
    padding: 34px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
body.page-id-2711 .kki-a2-bel__num,
body.page-id-4516 .kki-a2-bel__num,
body.page-id-2711 .kki-a2-stat__label,
body.page-id-4516 .kki-a2-stat__label {
    color: var(--color-primary) !important;
}
body.page-id-2711 .kki-a2-bel__h,
body.page-id-4516 .kki-a2-bel__h,
body.page-id-2711 .kki-a2-fitcol__h,
body.page-id-4516 .kki-a2-fitcol__h {
    color: var(--color-foreground) !important;
}
body.page-id-2711 .kki-a2-bel__b,
body.page-id-4516 .kki-a2-bel__b,
body.page-id-2711 .kki-a2-fitcol li,
body.page-id-4516 .kki-a2-fitcol li,
body.page-id-2711 .kki-a2-stat__b,
body.page-id-4516 .kki-a2-stat__b {
    color: rgba(240, 238, 233, 0.82) !important;
}

body.page-id-2711 .kki-a2-fit__grid,
body.page-id-4516 .kki-a2-fit__grid {
    max-width: 980px !important;
    margin: 36px auto 0 !important;
    gap: 24px !important;
}
body.page-id-2711 .kki-a2-fitcol,
body.page-id-4516 .kki-a2-fitcol {
    padding: clamp(30px, 4vw, 42px) !important;
}
body.page-id-2711 .kki-a2-fitcol ul,
body.page-id-4516 .kki-a2-fitcol ul {
    margin-top: 22px !important;
}
body.page-id-2711 .kki-a2-fitcol li,
body.page-id-4516 .kki-a2-fitcol li {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body.page-id-2711 .kki-a2-numbers__grid,
body.page-id-4516 .kki-a2-numbers__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
body.page-id-2711 .kki-a2-stat,
body.page-id-4516 .kki-a2-stat {
    min-height: 250px !important;
    padding: 32px 28px !important;
}
body.page-id-2711 .kki-a2-stat__num,
body.page-id-4516 .kki-a2-stat__num {
    color: var(--color-foreground) !important;
    font-size: clamp(2.1rem, 3.4vw, 3.4rem) !important;
}
body.page-id-2711 .kki-a2-numbers__note,
body.page-id-4516 .kki-a2-numbers__note {
    display: block !important;
    max-width: 860px !important;
    margin: 26px auto 0 !important;
    color: rgba(240, 238, 233, 0.64) !important;
    text-align: center !important;
}

body.page-id-2711 .kki-a2-cta,
body.page-id-4516 .kki-a2-cta {
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 189, 118, 0.12), transparent 36%),
        linear-gradient(180deg, #18233a 0%, #111927 100%) !important;
    padding: clamp(72px, 7vw, 106px) 24px !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    body.page-id-2711 .kki-a2-why__inner,
    body.page-id-4516 .kki-a2-why__inner,
    body.page-id-2711 .kki-a2-fit__grid,
    body.page-id-4516 .kki-a2-fit__grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.page-id-2711 .kki-a2-believe__grid,
    body.page-id-4516 .kki-a2-believe__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.page-id-2711 .kki-a2-numbers__grid,
    body.page-id-4516 .kki-a2-numbers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    body.page-id-2711 .kki-a2-hero,
    body.page-id-4516 .kki-a2-hero,
    body.page-id-2711 .kki-a2-why,
    body.page-id-4516 .kki-a2-why,
    body.page-id-2711 .kki-a2-believe,
    body.page-id-4516 .kki-a2-believe,
    body.page-id-2711 .kki-a2-fit,
    body.page-id-4516 .kki-a2-fit,
    body.page-id-2711 .kki-a2-numbers,
    body.page-id-4516 .kki-a2-numbers,
    body.page-id-2711 .kki-a2-cta,
    body.page-id-4516 .kki-a2-cta {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body.page-id-2711 .kki-a2-hero h1,
    body.page-id-4516 .kki-a2-hero h1 {
        font-size: clamp(2.05rem, 11vw, 3rem) !important;
        max-width: 100% !important;
    }
    body.page-id-2711 .kki-a2-pills,
    body.page-id-4516 .kki-a2-pills {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        max-width: 260px !important;
    }
    body.page-id-2711 .kki-a2-pill,
    body.page-id-4516 .kki-a2-pill {
        justify-content: center !important;
    }
    body.page-id-2711 .kki-a2-believe__grid,
    body.page-id-4516 .kki-a2-believe__grid,
    body.page-id-2711 .kki-a2-numbers__grid,
    body.page-id-4516 .kki-a2-numbers__grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.page-id-2711 .kki-a2-bel,
    body.page-id-4516 .kki-a2-bel,
    body.page-id-2711 .kki-a2-stat,
    body.page-id-4516 .kki-a2-stat {
        min-height: 0 !important;
        padding: 28px 24px !important;
    }
    body.page-id-2711 .kki-ml-fab-stack,
    body.page-id-4516 .kki-ml-fab-stack {
        right: 8px !important;
        bottom: 14px !important;
        transform: scale(.84) !important;
        transform-origin: right bottom !important;
    }
}

/* ====================================================================
 * MERGED FROM components-a2-late.css (formerly emitted inline by KKI_DS_*_Late)
 *
 * Was inline <style> at wp_head priority 105 to beat mu-plugin
 * inline styles. With the relevant kki-v2-* mu-plugins decommissioned,
 * the inline trick is obsolete; these rules now load as part of the
 * regular <link> stylesheet, with components-balance-overrides.css
 * loading LAST to preserve the original cascade winner.
 * ====================================================================
 */

/* ============================================================
 * About page — Minimal Luxury (single coherent design)
 *
 * Same approach as methodology/services/portfolio: single dark
 * navy canvas, italic serif Cormorant Garamond, uppercase
 * letter-spaced gold labels, hairline gold dividers, no chrome.
 *
 * Emit via wp_head priority 105 to win cascade against
 * mu-plugin inline styles (priority 99). Conditional on About
 * page IDs (EN 2711, TH 4516).
 * ============================================================ */

body.page-id-2711,
body.page-id-4516 {
    background: #07111b !important;
}

body.page-id-2711 .kki-a2-hero,
body.page-id-2711 .kki-a2-why,
body.page-id-2711 .kki-a2-believe,
body.page-id-2711 .kki-a2-fit,
body.page-id-2711 .kki-a2-numbers,
body.page-id-2711 .kki-a2-cta,
body.page-id-4516 .kki-a2-hero,
body.page-id-4516 .kki-a2-why,
body.page-id-4516 .kki-a2-believe,
body.page-id-4516 .kki-a2-fit,
body.page-id-4516 .kki-a2-numbers,
body.page-id-4516 .kki-a2-cta {
    background:
        linear-gradient(180deg, rgba(255, 247, 232, 0.025), rgba(255, 247, 232, 0) 22%),
        #07111b !important;
}

/* === Universal chrome reset === */
body.page-id-2711 .kki-a2-bel,
body.page-id-2711 .kki-a2-fitcol,
body.page-id-2711 .kki-a2-stat,
body.page-id-2711 .kki-a2-pill,
body.page-id-2711 .kki-a2-quote,
body.page-id-4516 .kki-a2-bel,
body.page-id-4516 .kki-a2-fitcol,
body.page-id-4516 .kki-a2-stat,
body.page-id-4516 .kki-a2-pill,
body.page-id-4516 .kki-a2-quote {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    text-shadow: none !important;
    min-height: 0 !important;
}

body.page-id-2711 .kki-a2-bel:hover,
body.page-id-2711 .kki-a2-fitcol:hover,
body.page-id-4516 .kki-a2-bel:hover,
body.page-id-4516 .kki-a2-fitcol:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* === Typography baseline === */
body.page-id-2711 .kki-a2-h2,
body.page-id-4516 .kki-a2-h2 {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin: 0 0 18px 0 !important;
}

body.page-id-2711 .kki-a2-eyebrow,
body.page-id-4516 .kki-a2-eyebrow {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    margin: 0 0 14px 0 !important;
    font-style: normal !important;
}

body.page-id-2711 .kki-a2-sub,
body.page-id-2711 .kki-a2-fit__sub,
body.page-id-4516 .kki-a2-sub,
body.page-id-4516 .kki-a2-fit__sub {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    color: rgba(247, 240, 223, 0.72) !important;
    max-width: 60ch !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
}

/* === Section spacing === */
body.page-id-2711 .kki-a2-hero,
body.page-id-4516 .kki-a2-hero {
    padding: clamp(80px, 9vw, 120px) clamp(20px, 4vw, 40px) clamp(56px, 6vw, 84px) !important;
    text-align: center !important;
}

body.page-id-2711 .kki-a2-why,
body.page-id-2711 .kki-a2-believe,
body.page-id-2711 .kki-a2-fit,
body.page-id-2711 .kki-a2-numbers,
body.page-id-4516 .kki-a2-why,
body.page-id-4516 .kki-a2-believe,
body.page-id-4516 .kki-a2-fit,
body.page-id-4516 .kki-a2-numbers {
    padding: clamp(72px, 8vw, 112px) clamp(20px, 4vw, 40px) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.10) !important;
    border-bottom: 0 !important;
}

body.page-id-2711 .kki-a2-cta,
body.page-id-4516 .kki-a2-cta {
    padding: clamp(80px, 9vw, 120px) clamp(20px, 4vw, 40px) !important;
    border-top: 1px solid rgba(216, 189, 118, 0.18) !important;
}

/* === Hero === */
body.page-id-2711 .kki-a2-hero__inner,
body.page-id-4516 .kki-a2-hero__inner {
    max-width: 920px !important;
    margin: 0 auto !important;
}

body.page-id-2711 .kki-a2-hero h1,
body.page-id-4516 .kki-a2-hero h1 {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin: 12px 0 24px 0 !important;
}

body.page-id-2711 .kki-a2-hero__lede,
body.page-id-4516 .kki-a2-hero__lede {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: rgba(247, 240, 223, 0.78) !important;
    font-weight: 400 !important;
    max-width: 720px !important;
    margin: 0 auto 36px auto !important;
}

body.page-id-2711 .kki-a2-pills,
body.page-id-4516 .kki-a2-pills {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 32px !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
}

body.page-id-2711 .kki-a2-pill,
body.page-id-4516 .kki-a2-pill {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 0 !important;
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(247, 240, 223, 0.72) !important;
    font-weight: 700 !important;
}

body.page-id-2711 .kki-a2-pill strong,
body.page-id-4516 .kki-a2-pill strong {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: 1.5rem !important;
    color: rgba(216, 189, 118, 0.72) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1 !important;
}

/* === Why section: 2-col body + quote === */
body.page-id-2711 .kki-a2-why__inner,
body.page-id-4516 .kki-a2-why__inner {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.4fr 1fr !important;
    gap: 56px !important;
    align-items: start !important;
}

@media (max-width: 880px) {
    body.page-id-2711 .kki-a2-why__inner,
    body.page-id-4516 .kki-a2-why__inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

body.page-id-2711 .kki-a2-why__body,
body.page-id-4516 .kki-a2-why__body {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.page-id-2711 .kki-a2-why__body p,
body.page-id-4516 .kki-a2-why__body p {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    color: rgba(247, 240, 223, 0.78) !important;
    margin: 0 0 16px 0 !important;
    font-weight: 400 !important;
}

/* Quote: editorial pull-quote with gold border-left */
body.page-id-2711 .kki-a2-quote,
body.page-id-4516 .kki-a2-quote {
    border-left: 2px solid rgba(216, 189, 118, 0.45) !important;
    padding: 4px 0 4px 28px !important;
    margin: 0 !important;
}

body.page-id-2711 .kki-a2-quote__mark,
body.page-id-4516 .kki-a2-quote__mark {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: 3rem !important;
    color: rgba(216, 189, 118, 0.45) !important;
    line-height: 0.8 !important;
    display: block !important;
    margin: 0 0 4px 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.page-id-2711 .kki-a2-quote__txt,
body.page-id-4516 .kki-a2-quote__txt {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: 1.375rem !important;
    line-height: 1.4 !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    margin: 0 0 18px 0 !important;
}

body.page-id-2711 .kki-a2-quote__cite,
body.page-id-4516 .kki-a2-quote__cite {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(216, 189, 118, 0.72) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    font-style: normal !important;
}

/* === Believe section: 5 principles editorial grid === */
body.page-id-2711 .kki-a2-believe__inner,
body.page-id-4516 .kki-a2-believe__inner {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
}

body.page-id-2711 .kki-a2-believe__head,
body.page-id-4516 .kki-a2-believe__head {
    text-align: center !important;
    margin: 0 auto 48px auto !important;
    max-width: 720px !important;
}

body.page-id-2711 .kki-a2-believe__grid,
body.page-id-4516 .kki-a2-believe__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 56px !important;
}

@media (max-width: 720px) {
    body.page-id-2711 .kki-a2-believe__grid,
    body.page-id-4516 .kki-a2-believe__grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

body.page-id-2711 .kki-a2-bel,
body.page-id-4516 .kki-a2-bel {
    border-left: 2px solid rgba(216, 189, 118, 0.38) !important;
    padding: 8px 0 8px 24px !important;
    display: grid !important;
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
}

body.page-id-2711 .kki-a2-bel__num,
body.page-id-4516 .kki-a2-bel__num {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: 1.625rem !important;
    color: rgba(216, 189, 118, 0.62) !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding-top: 4px !important;
    margin: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

body.page-id-2711 .kki-a2-bel__h,
body.page-id-4516 .kki-a2-bel__h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: 1.25rem !important;
    line-height: 1.32 !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin: 0 0 8px 0 !important;
}

body.page-id-2711 .kki-a2-bel__b,
body.page-id-4516 .kki-a2-bel__b {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: rgba(247, 240, 223, 0.72) !important;
    margin: 0 !important;
}

/* === Fit section: ACCEPT vs AVOID 2-col === */
body.page-id-2711 .kki-a2-fit__inner,
body.page-id-4516 .kki-a2-fit__inner {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
}

body.page-id-2711 .kki-a2-fit__grid,
body.page-id-4516 .kki-a2-fit__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin-top: 48px !important;
    text-align: left !important;
}

@media (max-width: 720px) {
    body.page-id-2711 .kki-a2-fit__grid,
    body.page-id-4516 .kki-a2-fit__grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

body.page-id-2711 .kki-a2-fitcol,
body.page-id-4516 .kki-a2-fitcol {
    border-left: 1px solid rgba(216, 189, 118, 0.20) !important;
    padding: 4px 32px !important;
}

body.page-id-2711 .kki-a2-fit__grid > .kki-a2-fitcol:first-child,
body.page-id-4516 .kki-a2-fit__grid > .kki-a2-fitcol:first-child {
    border-left: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 720px) {
    body.page-id-2711 .kki-a2-fitcol,
    body.page-id-4516 .kki-a2-fitcol {
        border-left: 0 !important;
        border-top: 1px solid rgba(216, 189, 118, 0.20) !important;
        padding: 28px 0 0 0 !important;
        margin-top: 28px !important;
    }
    body.page-id-2711 .kki-a2-fit__grid > .kki-a2-fitcol:first-child,
    body.page-id-4516 .kki-a2-fit__grid > .kki-a2-fitcol:first-child {
        border-top: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

body.page-id-2711 .kki-a2-fitcol__tag,
body.page-id-4516 .kki-a2-fitcol__tag {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

body.page-id-2711 .kki-a2-fitcol--yes .kki-a2-fitcol__tag,
body.page-id-4516 .kki-a2-fitcol--yes .kki-a2-fitcol__tag {
    color: #7eb88a !important;
}

body.page-id-2711 .kki-a2-fitcol--no .kki-a2-fitcol__tag,
body.page-id-4516 .kki-a2-fitcol--no .kki-a2-fitcol__tag {
    color: #eb9788 !important;
}

body.page-id-2711 .kki-a2-fitcol__h,
body.page-id-4516 .kki-a2-fitcol__h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: 1.25rem !important;
    line-height: 1.32 !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin: 0 0 18px 0 !important;
}

body.page-id-2711 .kki-a2-fitcol ul,
body.page-id-4516 .kki-a2-fitcol ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-id-2711 .kki-a2-fitcol li,
body.page-id-4516 .kki-a2-fitcol li {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: rgba(247, 240, 223, 0.72) !important;
    padding: 10px 0 !important;
    border-top: 1px solid rgba(216, 189, 118, 0.12) !important;
    margin: 0 !important;
    list-style: none !important;
}

body.page-id-2711 .kki-a2-fitcol li::before,
body.page-id-4516 .kki-a2-fitcol li::before {
    display: none !important;
    content: none !important;
}

body.page-id-2711 .kki-a2-fitcol li:first-child,
body.page-id-4516 .kki-a2-fitcol li:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* === Numbers section: stats grid === */
body.page-id-2711 .kki-a2-numbers__inner,
body.page-id-4516 .kki-a2-numbers__inner {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
}

body.page-id-2711 .kki-a2-numbers__head,
body.page-id-4516 .kki-a2-numbers__head {
    text-align: center !important;
    margin: 0 auto 48px auto !important;
    max-width: 720px !important;
}

body.page-id-2711 .kki-a2-numbers__grid,
body.page-id-4516 .kki-a2-numbers__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    text-align: left !important;
}

@media (max-width: 880px) {
    body.page-id-2711 .kki-a2-numbers__grid,
    body.page-id-4516 .kki-a2-numbers__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px 0 !important;
    }
    body.page-id-2711 .kki-a2-numbers__grid > .kki-a2-stat:nth-child(odd),
    body.page-id-4516 .kki-a2-numbers__grid > .kki-a2-stat:nth-child(odd) {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 480px) {
    body.page-id-2711 .kki-a2-numbers__grid,
    body.page-id-4516 .kki-a2-numbers__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    body.page-id-2711 .kki-a2-numbers__grid > .kki-a2-stat,
    body.page-id-4516 .kki-a2-numbers__grid > .kki-a2-stat {
        border-left: 0 !important;
        border-top: 1px solid rgba(216, 189, 118, 0.20) !important;
        padding: 20px 0 0 0 !important;
    }
    body.page-id-2711 .kki-a2-numbers__grid > .kki-a2-stat:first-child,
    body.page-id-4516 .kki-a2-numbers__grid > .kki-a2-stat:first-child {
        border-top: 0 !important;
        padding-top: 0 !important;
    }
}

body.page-id-2711 .kki-a2-stat,
body.page-id-4516 .kki-a2-stat {
    border-left: 1px solid rgba(216, 189, 118, 0.20) !important;
    padding: 4px 24px !important;
}

body.page-id-2711 .kki-a2-numbers__grid > .kki-a2-stat:first-child,
body.page-id-4516 .kki-a2-numbers__grid > .kki-a2-stat:first-child {
    border-left: 0 !important;
    padding-left: 0 !important;
}

body.page-id-2711 .kki-a2-stat__num,
body.page-id-4516 .kki-a2-stat__num {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(1.875rem, 3.4vw, 2.625rem) !important;
    line-height: 1 !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

body.page-id-2711 .kki-a2-stat__label,
body.page-id-4516 .kki-a2-stat__label {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(216, 189, 118, 0.72) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 0 0 8px 0 !important;
}

body.page-id-2711 .kki-a2-stat__b,
body.page-id-4516 .kki-a2-stat__b {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
    color: rgba(247, 240, 223, 0.62) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

body.page-id-2711 .kki-a2-numbers__note,
body.page-id-4516 .kki-a2-numbers__note {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
    color: rgba(247, 240, 223, 0.62) !important;
    text-align: center !important;
    margin: 36px auto 0 auto !important;
    max-width: 60ch !important;
    font-style: italic !important;
}

/* === Final CTA === */
body.page-id-2711 .kki-a2-cta__inner,
body.page-id-4516 .kki-a2-cta__inner {
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

body.page-id-2711 .kki-a2-cta h2,
body.page-id-2711 .kki-a2-cta .kki-a2-h2,
body.page-id-4516 .kki-a2-cta h2,
body.page-id-4516 .kki-a2-cta .kki-a2-h2 {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
    line-height: 1.2 !important;
    color: var(--color-foreground) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    margin: 0 0 18px 0 !important;
    letter-spacing: -0.01em !important;
}

body.page-id-2711 .kki-a2-cta p,
body.page-id-4516 .kki-a2-cta p {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    max-width: 56ch !important;
    margin: 0 auto !important;
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
    color: rgba(247, 240, 223, 0.78) !important;
    font-weight: 400 !important;
}

body.page-id-2711 .kki-a2-cta__row,
body.page-id-4516 .kki-a2-cta__row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
    flex-wrap: wrap !important;
    margin-top: 36px !important;
}

body.page-id-2711 .kki-a2-cta__btn,
body.page-id-4516 .kki-a2-cta__btn {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    background: var(--color-primary) !important;
    color: var(--primitive-color-navy-950) !important;
    border: 0 !important;
    padding: 14px 32px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
}

body.page-id-2711 .kki-a2-cta__btn:hover,
body.page-id-4516 .kki-a2-cta__btn:hover {
    background: var(--color-foreground) !important;
    color: var(--primitive-color-navy-950) !important;
}

body.page-id-2711 .kki-a2-cta__link,
body.page-id-4516 .kki-a2-cta__link {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(216, 189, 118, 0.4) !important;
    padding: 0 0 4px 0 !important;
}

body.page-id-2711 .kki-a2-cta__link:hover,
body.page-id-4516 .kki-a2-cta__link:hover {
    border-bottom-color: rgba(216, 189, 118, 0.85) !important;
    color: var(--color-foreground) !important;
}

/* Ensure body bg flows continuously */
body.page-id-2711 #main,
body.page-id-2711 #main-content,
body.page-id-2711 #main-page-content,
body.page-id-4516 #main,
body.page-id-4516 #main-content,
body.page-id-4516 #main-page-content {
    background: transparent !important;
}

/* Fix .kki-a2-bel grid: num spans 2 rows, h+b in col 2 */
body.page-id-2711 .kki-a2-bel,
body.page-id-4516 .kki-a2-bel {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
}

body.page-id-2711 .kki-a2-bel__num,
body.page-id-4516 .kki-a2-bel__num {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}

body.page-id-2711 .kki-a2-bel__h,
body.page-id-4516 .kki-a2-bel__h {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

body.page-id-2711 .kki-a2-bel__b,
body.page-id-4516 .kki-a2-bel__b {
    grid-column: 2 !important;
    grid-row: 2 !important;
}