/**
 * KKI Design System -- Editorial polish (consolidated)
 *
 * Merged from 4 polish files (~1200 lines total) into a single
 * always-on stylesheet. Page-scoped rules use body.home / body.page-id-N
 * selectors, so they're harmless on non-matching pages.
 *
 * Sections (in cascade order):
 *   1. Global hygiene             (was components-global-polish.css)
 *   2. Home minimal-luxury polish (was components-home-polish.css)
 *   3. Listings polish            (was components-listings-polish.css)
 *   4. Pages polish               (was components-pages-polish.css)
 */


/* =============================================================
 * Section: global hygiene (site-wide)
 * Merged from: components-global-polish.css
 * ============================================================= */

/*
 * KKI Design System — Global editorial polish (site-wide)
 *
 * Universal refinements applied on EVERY page after the per-section
 * stylesheets load. Adopts the ui-ux-pro-max recommendations as
 * sitewide hygiene without touching brand colors:
 *
 *   - Smooth scroll behavior + scroll padding
 *   - Universal CTA pill polish (any .wp-block-button__link or *-cta-btn)
 *   - Universal card refinement (any `kki-*__card` family)
 *   - Universal eyebrow uniformity (any `*__eyebrow`)
 *   - Universal section H2 editorial typography (any `kki-*__h`)
 *   - Smooth transitions on links/buttons (220-380ms range)
 *   - Visible focus rings for keyboard navigation (a11y CRITICAL)
 *   - prefers-reduced-motion respected
 *
 * Loaded by KKI_DS_Loader::enqueue_assets as always-on (every page).
 */

/* ── 1. Smooth scroll + scroll padding for fixed nav ─────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ── 2. Universal focus ring — accessibility CRITICAL ────────────────── */
*:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 3px !important;
}

/* ── 3. Universal CTA pill polish ────────────────────────────────────── */
/* Apply to ANY gold/primary button across the site (Gutenberg buttons,
 * custom CTAs, hero buttons). Targets the standard WordPress button
 * markup + KKI-specific CTA buttons. */
.kki-pf-cta__btn,
.kki-pf-cta a,
.kki-svc__cta-btn,
.kki-fp__more,
.kki-tr__cta-btn,
.kki-mb__link,
.kki-ri__all,
.kki-fp__all,
.kki-dev-slider__cta {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    letter-spacing: 0.16em !important;
    transition: transform 280ms ease, background 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease !important;
}

/* Hover lift on all primary CTAs */
.kki-pf-cta__btn:hover,
.kki-svc__cta-btn:hover,
.kki-tr__cta-btn:hover {
    transform: translateY(-2px) !important;
}

/* ── 4. Universal eyebrow uniformity ─────────────────────────────────── */
/* Every `*__eyebrow` across the site now reads with the canonical
 * brand pattern: Poppins, gold, 0.22em tracking, uppercase. */
.kki-fp__eyebrow,
.kki-st__eyebrow,
.kki-mb__eyebrow,
.kki-tr__eyebrow,
.kki-ri__eyebrow,
.kki-svc__eyebrow,
.kki-ir__eyebrow,
.kki-fn__eyebrow,
.kki-dev-slider__eyebrow,
.kki-pf-block__eyebrow,
.kki-m2-hero__eyebrow,
.kki-m2__eyebrow,
.kki-s2-hero__eyebrow,
.kki-s2__eyebrow,
.kki-a2-hero__eyebrow,
.kki-a2__eyebrow,
.kki-cx__eyebrow {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    opacity: 0.92 !important;
}

/* ── 5. Universal smooth link transitions ────────────────────────────── */
a:not(.no-polish-transition) {
    transition: color 220ms ease, border-color 220ms ease, opacity 220ms ease !important;
}

/* ── 6. Card hover lift — any kki-*__card family ─────────────────────── */
/* Targets every card-style component that doesn't have a specific
 * page-level override. Uses smooth ease-out cubic-bezier for luxury feel. */
.kki-fp__card:not([data-no-lift]),
.kki-ri__card:not([data-no-lift]),
.kki-ir-slider__slide:not([data-no-lift]) {
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 380ms ease,
                box-shadow 380ms ease !important;
}

/* ── 7. Section heading editorial Cormorant — universal h2 fallback ──── */
/* Any h2 inside .kki-* sections that doesn't have its own font rule
 * picks up the editorial pattern. Lower specificity than page-specific
 * overrides so it doesn't conflict. */
[class*="kki-"] h2:not([class*="footer"]):not([class*="consent"]):not(.kki-ml-h1-injected) {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.022em;
}

/* ── 8. Universal mobile menu polish ─────────────────────────────────── */
@media (max-width: 1024px) {
    .kki-ml-mobile-menu a,
    .kki-ml-mobile-menu .menu-item {
        font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif;
        letter-spacing: 0.04em;
    }
}

/* ── 9. Universal reduced-motion safety ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .kki-pf-cta__btn:hover,
    .kki-svc__cta-btn:hover,
    .kki-fp__card:hover,
    .kki-ri__card:hover {
        transform: none !important;
    }
}

/* ── 10. Image rendering crispness ───────────────────────────────────── */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* ── 11. Selection style — gold highlight on text selection ──────────── */
::selection {
    background: rgba(216, 189, 118, 0.32);
    color: var(--color-foreground);
}
::-moz-selection {
    background: rgba(216, 189, 118, 0.32);
    color: var(--color-foreground);
}

/* ── 12. Scrollbar — subtle gold accent (Chromium) ───────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--color-background);
}
::-webkit-scrollbar-thumb {
    background: rgba(216, 189, 118, 0.22);
    border-radius: 999px;
    border: 2px solid var(--color-background);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 189, 118, 0.42);
}

/* =============================================================
 * Section: home page minimal-luxury polish
 * Merged from: components-home-polish.css
 * ============================================================= */

/*
 * KKI Design System — Home page editorial polish
 *
 * Applies the "Minimal Single Column + Exaggerated Minimalism" recommendations
 * from the ui-ux-pro-max skill to the KORKAIIDEA home, adapted to the brand's
 * existing navy + gold + Cormorant Garamond identity (we keep the brand
 * palette, only adopt the typography drama + whitespace + hierarchy rules).
 *
 * Page-scoped via body.home + body.page-id-4122 (EN) + body.page-id-4519 (TH).
 *
 * Order of refinements:
 *   1. Hero typography — bigger, tighter, more editorial
 *   2. Section breathing room — massive whitespace between sections
 *   3. Eyebrow polish — uniform Poppins eyebrow across sections
 *   4. Pullquote drama — oversize the editorial "every investor outcome" quote
 *   5. CTA hierarchy — primary CTA emphasized, secondary CTAs de-emphasized
 *   6. Card refinement — subtle border + shadow tightening
 *   7. Footer / trust strip restraint
 */

/* ── 1. Hero typography — bigger + tighter ─────────────────────────────── */
body.home .hero-title,
body.page-id-4122 .hero-title,
body.page-id-4519 .hero-title {
    font-size: clamp(48px, 7.5vw, 110px) !important;
    letter-spacing: -0.028em !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    color: var(--color-foreground) !important;
}

body.home .hero-subtitle,
body.page-id-4122 .hero-subtitle,
body.page-id-4519 .hero-subtitle {
    font-size: clamp(15px, 1.32vw, 19px) !important;
    line-height: 1.55 !important;
    letter-spacing: 0.04em !important;
    color: rgba(247, 240, 223, 0.78) !important;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* ── 2. Section breathing room — massive whitespace ──────────────────── */
body.home .kki-fp,
body.home .kki-st,
body.home .kki-mb,
body.home .kki-ri,
body.home .kki-final,
body.home .kki-svc,
body.home .kki-ir,
body.home .kki-dev-slider,
body.page-id-4122 .kki-fp,
body.page-id-4122 .kki-st,
body.page-id-4122 .kki-mb,
body.page-id-4122 .kki-ri,
body.page-id-4122 .kki-final,
body.page-id-4122 .kki-svc,
body.page-id-4122 .kki-ir,
body.page-id-4122 .kki-dev-slider,
body.page-id-4519 .kki-fp,
body.page-id-4519 .kki-st,
body.page-id-4519 .kki-mb,
body.page-id-4519 .kki-ri,
body.page-id-4519 .kki-final,
body.page-id-4519 .kki-svc,
body.page-id-4519 .kki-ir,
body.page-id-4519 .kki-dev-slider {
    padding-top: clamp(80px, 10vw, 160px) !important;
    padding-bottom: clamp(80px, 10vw, 160px) !important;
}

/* ── 3. Eyebrow uniformity — Poppins, gold, generous tracking ────────── */
body.home .kki-fp__eyebrow,
body.home .kki-st__eyebrow,
body.home .kki-mb__eyebrow,
body.home .kki-ri__eyebrow,
body.home .kki-svc__eyebrow,
body.home .kki-ir__eyebrow,
body.home .kki-dev-slider__eyebrow,
body.page-id-4122 .kki-fp__eyebrow,
body.page-id-4122 .kki-st__eyebrow,
body.page-id-4122 .kki-mb__eyebrow,
body.page-id-4122 .kki-ri__eyebrow,
body.page-id-4122 .kki-svc__eyebrow,
body.page-id-4122 .kki-ir__eyebrow,
body.page-id-4122 .kki-dev-slider__eyebrow,
body.page-id-4519 .kki-fp__eyebrow,
body.page-id-4519 .kki-st__eyebrow,
body.page-id-4519 .kki-mb__eyebrow,
body.page-id-4519 .kki-ri__eyebrow,
body.page-id-4519 .kki-svc__eyebrow,
body.page-id-4519 .kki-ir__eyebrow,
body.page-id-4519 .kki-dev-slider__eyebrow {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    margin-bottom: 16px !important;
    opacity: 0.92 !important;
}

/* ── 4. Section H2 — editorial Cormorant uniformity ──────────────────── */
body.home .kki-fp__h,
body.home .kki-st__h,
body.home .kki-mb__h,
body.home .kki-ri__h,
body.home .kki-svc__h,
body.home .kki-ir__h,
body.home .kki-dev-slider__h,
body.page-id-4122 .kki-fp__h,
body.page-id-4122 .kki-st__h,
body.page-id-4122 .kki-mb__h,
body.page-id-4122 .kki-ri__h,
body.page-id-4122 .kki-svc__h,
body.page-id-4122 .kki-ir__h,
body.page-id-4122 .kki-dev-slider__h,
body.page-id-4519 .kki-fp__h,
body.page-id-4519 .kki-st__h,
body.page-id-4519 .kki-mb__h,
body.page-id-4519 .kki-ri__h,
body.page-id-4519 .kki-svc__h,
body.page-id-4519 .kki-ir__h,
body.page-id-4519 .kki-dev-slider__h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(36px, 4.5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
    margin: 0 0 clamp(20px, 2.4vw, 36px) !important;
}

/* ── 5. Section sub/lede — narrow column, Poppins, breathable ────────── */
body.home .kki-fp__sub,
body.home .kki-st__sub,
body.home .kki-mb__lead,
body.home .kki-ri__sub,
body.home .kki-svc__lede,
body.home .kki-ir__lede,
body.page-id-4122 .kki-fp__sub,
body.page-id-4122 .kki-st__sub,
body.page-id-4122 .kki-mb__lead,
body.page-id-4122 .kki-ri__sub,
body.page-id-4122 .kki-svc__lede,
body.page-id-4122 .kki-ir__lede,
body.page-id-4519 .kki-fp__sub,
body.page-id-4519 .kki-st__sub,
body.page-id-4519 .kki-mb__lead,
body.page-id-4519 .kki-ri__sub,
body.page-id-4519 .kki-svc__lede,
body.page-id-4519 .kki-ir__lede {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
    color: rgba(247, 240, 223, 0.72) !important;
    max-width: 56ch;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 6. Section header alignment — center for editorial impact ───────── */
body.home .kki-fp__header,
body.home .kki-st__header,
body.home .kki-mb__header,
body.home .kki-ri__header,
body.home .kki-svc__header,
body.home .kki-ir__header,
body.page-id-4122 .kki-fp__header,
body.page-id-4122 .kki-st__header,
body.page-id-4122 .kki-mb__header,
body.page-id-4122 .kki-ri__header,
body.page-id-4122 .kki-svc__header,
body.page-id-4122 .kki-ir__header,
body.page-id-4519 .kki-fp__header,
body.page-id-4519 .kki-st__header,
body.page-id-4519 .kki-mb__header,
body.page-id-4519 .kki-ri__header,
body.page-id-4519 .kki-svc__header,
body.page-id-4519 .kki-ir__header {
    text-align: center !important;
    margin-bottom: clamp(40px, 5vw, 80px) !important;
}

/* ── 7. Pullquote drama — oversize the "every investor outcome" quote ── */
body.home .kki-fn__text,
body.home .kki-fn__quote,
body.page-id-4122 .kki-fn__text,
body.page-id-4122 .kki-fn__quote,
body.page-id-4519 .kki-fn__text,
body.page-id-4519 .kki-fn__quote {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(28px, 4.2vw, 56px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.018em !important;
    color: var(--color-foreground) !important;
    max-width: 22ch;
    margin: 0 auto !important;
    text-align: center;
}

/* ── 8. Card refinement — tighter border, gentler shadow ─────────────── */
body.home .kki-fp__card,
body.page-id-4122 .kki-fp__card,
body.page-id-4519 .kki-fp__card {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.22) !important;
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.92) 0%, rgba(11, 16, 26, 0.94) 100%) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease, box-shadow 380ms ease !important;
}
body.home .kki-fp__card:hover,
body.page-id-4122 .kki-fp__card:hover,
body.page-id-4519 .kki-fp__card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(216, 189, 118, 0.48) !important;
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.42) !important;
}

/* ── 9. CTA hierarchy — primary CTA emphasized ───────────────────────── */
body.home .kki-svc__cta-btn,
body.home .kki-final a.wp-block-button__link,
body.page-id-4122 .kki-svc__cta-btn,
body.page-id-4122 .kki-final a.wp-block-button__link,
body.page-id-4519 .kki-svc__cta-btn,
body.page-id-4519 .kki-final a.wp-block-button__link {
    padding: clamp(16px, 1.6vw, 22px) clamp(36px, 3.6vw, 56px) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    background: var(--color-primary) !important;
    color: var(--color-primary-foreground) !important;
    border: 1px solid var(--color-primary) !important;
    transition: transform 280ms ease, background 280ms ease, box-shadow 280ms ease !important;
    box-shadow: 0 12px 32px rgba(216, 189, 118, 0.22) !important;
}
body.home .kki-svc__cta-btn:hover,
body.home .kki-final a.wp-block-button__link:hover,
body.page-id-4122 .kki-svc__cta-btn:hover,
body.page-id-4122 .kki-final a.wp-block-button__link:hover,
body.page-id-4519 .kki-svc__cta-btn:hover,
body.page-id-4519 .kki-final a.wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    background: var(--color-primary-hover) !important;
    box-shadow: 0 18px 42px rgba(216, 189, 118, 0.32) !important;
}

/* ── 10. Stats — larger numbers, editorial restraint ─────────────────── */
body.home .kki-st__num,
body.page-id-4122 .kki-st__num,
body.page-id-4519 .kki-st__num {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(48px, 6vw, 88px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: var(--color-primary) !important;
}
body.home .kki-st__label,
body.page-id-4122 .kki-st__label,
body.page-id-4519 .kki-st__label {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(247, 240, 223, 0.78) !important;
    margin-top: 12px !important;
}
body.home .kki-st__desc,
body.page-id-4122 .kki-st__desc,
body.page-id-4519 .kki-st__desc {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: rgba(247, 240, 223, 0.55) !important;
    margin-top: 6px !important;
}

/* ── 11. Reduced-motion — disable transforms when requested ─────────── */
@media (prefers-reduced-motion: reduce) {
    body.home .kki-fp__card,
    body.home .kki-svc__cta-btn,
    body.home .kki-final a.wp-block-button__link,
    body.page-id-4122 .kki-fp__card,
    body.page-id-4519 .kki-fp__card {
        transition: none !important;
    }
    body.home .kki-fp__card:hover,
    body.home .kki-svc__cta-btn:hover,
    body.page-id-4122 .kki-fp__card:hover,
    body.page-id-4519 .kki-fp__card:hover {
        transform: none !important;
    }
}

/* ── 12. Mobile — reduce hero + section padding gracefully ───────────── */
@media (max-width: 768px) {
    body.home .hero-title,
    body.page-id-4122 .hero-title,
    body.page-id-4519 .hero-title {
        font-size: clamp(40px, 9vw, 56px) !important;
        letter-spacing: -0.024em !important;
    }
    body.home .kki-fn__text,
    body.home .kki-fn__quote,
    body.page-id-4122 .kki-fn__text,
    body.page-id-4519 .kki-fn__text {
        font-size: clamp(24px, 6vw, 36px) !important;
    }
    body.home .kki-st__num,
    body.page-id-4122 .kki-st__num,
    body.page-id-4519 .kki-st__num {
        font-size: clamp(40px, 11vw, 64px) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
 * Round 2 — addressing rough edges from band-by-band capture
 * ════════════════════════════════════════════════════════════════════ */

/* ── 13. Hero CTAs — primary gold pill + secondary outline ─────────── */
body.home #hero-footer a,
body.page-id-4122 #hero-footer a,
body.page-id-4519 #hero-footer a {
    padding: clamp(14px, 1.4vw, 18px) clamp(28px, 3vw, 44px) !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    transition: transform 280ms ease, background 280ms ease, border-color 280ms ease, box-shadow 280ms ease !important;
}

/* ── 14. KORKAIIDEA DAILY — article card refinement ───────────────── */
body.home .kki-ri__card,
body.home .kki-ri__card,
body.page-id-4122 .kki-ri__card,
body.page-id-4519 .kki-ri__card {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.18) !important;
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.85) 0%, rgba(11, 16, 26, 0.88) 100%) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
    padding: clamp(24px, 2.4vw, 36px) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease, box-shadow 380ms ease !important;
}
body.home .kki-ri__card:hover,
body.page-id-4122 .kki-ri__card:hover,
body.page-id-4519 .kki-ri__card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(216, 189, 118, 0.42) !important;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.38) !important;
}

/* Article date + category badge spacing fix */
body.home .kki-ri__meta,
body.home .kki-ri__meta,
body.page-id-4122 .kki-ri__meta,
body.page-id-4519 .kki-ri__meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
}

/* Article title — Cormorant restraint, no caps */
body.home .kki-ri__card-h,
body.page-id-4122 .kki-ri__card-h,
body.page-id-4519 .kki-ri__card-h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(20px, 1.6vw, 26px) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.012em !important;
    text-transform: none !important;
    color: var(--color-foreground) !important;
    margin: 0 0 14px !important;
}

body.home .kki-ri__excerpt,
body.page-id-4122 .kki-ri__excerpt,
body.page-id-4519 .kki-ri__excerpt {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    color: rgba(247, 240, 223, 0.7) !important;
    margin: 0 0 18px !important;
}

body.home .kki-ri__read,
body.home .kki-ri__read,
body.page-id-4122 .kki-ri__read,
body.page-id-4519 .kki-ri__read {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(216, 189, 118, 0.42) !important;
    padding-bottom: 4px !important;
    transition: color 220ms ease, border-color 220ms ease !important;
}

/* ── 15. KORKAIIDEA PARTNERS — refined roman numeral cards ─────────── */
body.home .kki-mb__num,
body.page-id-4122 .kki-mb__num,
body.page-id-4519 .kki-mb__num {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-size: clamp(28px, 2.6vw, 36px) !important;
    color: var(--color-primary) !important;
    opacity: 0.85 !important;
    margin-bottom: 14px !important;
    display: block !important;
}
body.home .kki-mb__stage-h,
body.page-id-4122 .kki-mb__stage-h,
body.page-id-4519 .kki-mb__stage-h {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--color-foreground) !important;
    margin: 0 0 6px !important;
}
body.home .kki-mb__stage-b,
body.page-id-4122 .kki-mb__stage-b,
body.page-id-4519 .kki-mb__stage-b {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.8125rem !important;
    color: rgba(247, 240, 223, 0.62) !important;
    letter-spacing: 0.02em !important;
}
body.home .kki-mb__link,
body.page-id-4122 .kki-mb__link,
body.page-id-4519 .kki-mb__link {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(216, 189, 118, 0.42) !important;
    padding-bottom: 4px !important;
    margin-top: clamp(32px, 4vw, 56px) !important;
    display: inline-block !important;
    transition: color 220ms ease, border-color 220ms ease !important;
}

/* ── 16. FULL SERVICE icon grid — refined card treatment ───────────── */
body.home .kki-svc-grid__item,
body.page-id-4122 .kki-svc-grid__item,
body.page-id-4519 .kki-svc-grid__item {
    padding: clamp(20px, 2.2vw, 32px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.14) !important;
    background: rgba(11, 16, 26, 0.45) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease, background 380ms ease !important;
}
body.home .kki-svc-grid__item:hover,
body.page-id-4122 .kki-svc-grid__item:hover,
body.page-id-4519 .kki-svc-grid__item:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(216, 189, 118, 0.34) !important;
    background: rgba(22, 31, 44, 0.75) !important;
}
body.home .kki-svc-grid__step,
body.page-id-4122 .kki-svc-grid__step,
body.page-id-4519 .kki-svc-grid__step {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    opacity: 0.78 !important;
    margin-bottom: 6px !important;
    display: block !important;
}
body.home .kki-svc-grid__name,
body.page-id-4122 .kki-svc-grid__name,
body.page-id-4519 .kki-svc-grid__name {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(17px, 1.3vw, 20px) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
    color: var(--color-foreground) !important;
    margin: 0 0 8px !important;
}
body.home .kki-svc-grid__desc,
body.page-id-4122 .kki-svc-grid__desc,
body.page-id-4519 .kki-svc-grid__desc {
    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;
}

/* ── 17. TRUSTED DEVELOPERS slider — subtle logo treatment ─────────── */
body.home .kki-dev-slider__logo,
body.page-id-4122 .kki-dev-slider__logo,
body.page-id-4519 .kki-dev-slider__logo {
    opacity: 0.55 !important;
    filter: grayscale(1) brightness(1.4) contrast(0.9) !important;
    transition: opacity 380ms ease, filter 380ms ease !important;
}
body.home .kki-dev-slider__logo:hover,
body.page-id-4122 .kki-dev-slider__logo:hover,
body.page-id-4519 .kki-dev-slider__logo:hover {
    opacity: 0.92 !important;
    filter: grayscale(0) brightness(1) contrast(1) !important;
}
body.home .kki-dev-slider__h,
body.page-id-4122 .kki-dev-slider__h,
body.page-id-4519 .kki-dev-slider__h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(28px, 3.6vw, 48px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
    text-align: center !important;
    margin: 0 0 clamp(40px, 5vw, 72px) !important;
}

/* ── 18. Reviews section — refined testimonial cards ───────────────── */
body.home .kki-ir-slider__slide,
body.page-id-4122 .kki-ir-slider__slide,
body.page-id-4519 .kki-ir-slider__slide {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.18) !important;
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.82) 0%, rgba(11, 16, 26, 0.86) 100%) !important;
    padding: clamp(28px, 2.8vw, 44px) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

/* ── 19. Round-2 reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.home .kki-ri__card,
    body.home .kki-svc-grid__item,
    body.home .kki-dev-slider__logo,
    body.page-id-4122 .kki-ri__card,
    body.page-id-4519 .kki-ri__card,
    body.page-id-4122 .kki-svc-grid__item,
    body.page-id-4519 .kki-svc-grid__item {
        transition: none !important;
    }
}

/* =============================================================
 * Section: projects + portfolio listings polish
 * Merged from: components-listings-polish.css
 * ============================================================= */

/*
 * KKI Design System — Listings editorial polish
 *
 * Applies the same Minimal-Luxury + Exaggerated Minimalism refinements that
 * components-home-polish.css ships, but page-scoped to the listing pages:
 *
 *   - /projects/    (page IDs 4777 EN, 4778 TH)
 *   - /portfolio/   (page IDs 4788 EN, 4789 TH)
 *
 * These pages reuse the same kki-fp grid + card shell as the home page's
 * "KORKAIIDEA Selected" section, so the card refinement transfers cleanly.
 * They DO NOT have the kki-st/kki-mb/kki-ri/kki-svc/kki-ir sections that
 * are home-only, so we focus on:
 *
 *   1. Eyebrow + section heading uniformity (canonical pattern)
 *   2. Sub/lede column width + typography
 *   3. Card refinement (radius, border, hover lift, smooth transition)
 *   4. View Details CTA polish (the per-card link)
 *   5. Grid breathing room
 *   6. Mobile graceful scaling
 *
 * Loaded conditionally via KKI_DS_Loader on the projects + portfolio pages.
 */

/* ── 1. Eyebrow uniformity ──────────────────────────────────────────── */
body.page-id-4777 .kki-fp__eyebrow,
body.page-id-4778 .kki-fp__eyebrow,
body.page-id-4788 .kki-fp__eyebrow,
body.page-id-4789 .kki-fp__eyebrow {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    margin-bottom: 16px !important;
    opacity: 0.92 !important;
}

/* ── 2. Section H2 — editorial Cormorant uniformity ─────────────────── */
body.page-id-4777 .kki-fp__h,
body.page-id-4778 .kki-fp__h,
body.page-id-4788 .kki-fp__h,
body.page-id-4789 .kki-fp__h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(36px, 4.5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
    margin: 0 0 clamp(20px, 2.4vw, 36px) !important;
}

/* ── 3. Sub — narrow editorial column ───────────────────────────────── */
body.page-id-4777 .kki-fp__sub,
body.page-id-4778 .kki-fp__sub,
body.page-id-4788 .kki-fp__sub,
body.page-id-4789 .kki-fp__sub {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
    color: rgba(247, 240, 223, 0.72) !important;
    max-width: 56ch;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 4. Section header — centered with breathing room ──────────────── */
body.page-id-4777 .kki-fp__header,
body.page-id-4778 .kki-fp__header,
body.page-id-4788 .kki-fp__header,
body.page-id-4789 .kki-fp__header {
    text-align: center !important;
    margin-bottom: clamp(40px, 5vw, 80px) !important;
}

/* ── 5. Section padding — massive whitespace ───────────────────────── */
body.page-id-4777 .kki-fp,
body.page-id-4778 .kki-fp,
body.page-id-4788 .kki-fp,
body.page-id-4789 .kki-fp {
    padding-top: clamp(80px, 10vw, 160px) !important;
    padding-bottom: clamp(80px, 10vw, 160px) !important;
}

/* ── 6. Card refinement — tighter border, smooth hover lift ────────── */
body.page-id-4777 .kki-fp__card,
body.page-id-4778 .kki-fp__card,
body.page-id-4788 .kki-fp__card,
body.page-id-4789 .kki-fp__card {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.22) !important;
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.92) 0%, rgba(11, 16, 26, 0.94) 100%) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease, box-shadow 380ms ease !important;
    overflow: hidden;
}
body.page-id-4777 .kki-fp__card:hover,
body.page-id-4778 .kki-fp__card:hover,
body.page-id-4788 .kki-fp__card:hover,
body.page-id-4789 .kki-fp__card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(216, 189, 118, 0.48) !important;
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.42) !important;
}

/* ── 7. Grid spacing — slightly looser gutter ──────────────────────── */
body.page-id-4777 .kki-fp__grid,
body.page-id-4778 .kki-fp__grid,
body.page-id-4788 .kki-fp__grid,
body.page-id-4789 .kki-fp__grid {
    gap: clamp(24px, 2.4vw, 36px) !important;
}

/* ── 8. View Details / View Case CTA — gold underline accent ───────── */
body.page-id-4777 .kki-fp__more,
body.page-id-4778 .kki-fp__more,
body.page-id-4788 .kki-fp__more,
body.page-id-4789 .kki-fp__more {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(216, 189, 118, 0.42) !important;
    padding-bottom: 4px !important;
    transition: color 220ms ease, border-color 220ms ease !important;
}
body.page-id-4777 .kki-fp__more:hover,
body.page-id-4778 .kki-fp__more:hover,
body.page-id-4788 .kki-fp__more:hover,
body.page-id-4789 .kki-fp__more:hover {
    color: var(--color-foreground) !important;
    border-bottom-color: var(--color-foreground) !important;
}

/* ── 9. Card title — Cormorant italic restraint ─────────────────────── */
body.page-id-4777 .kki-fp__title,
body.page-id-4778 .kki-fp__title,
body.page-id-4788 .kki-fp__title,
body.page-id-4789 .kki-fp__title {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(20px, 1.6vw, 26px) !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.012em !important;
    color: var(--color-foreground) !important;
    margin: 0 0 8px !important;
}

/* ── 10. Card developer / property line — tracked sans ─────────────── */
body.page-id-4777 .kki-fp__dev,
body.page-id-4778 .kki-fp__dev,
body.page-id-4788 .kki-fp__dev,
body.page-id-4789 .kki-fp__dev {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(247, 240, 223, 0.68) !important;
    margin: 0 0 4px !important;
}

/* ── 11. Card location + why excerpt — readable body ────────────────── */
body.page-id-4777 .kki-fp__loc,
body.page-id-4778 .kki-fp__loc,
body.page-id-4788 .kki-fp__loc,
body.page-id-4789 .kki-fp__loc,
body.page-id-4777 .kki-fp__why,
body.page-id-4778 .kki-fp__why,
body.page-id-4788 .kki-fp__why,
body.page-id-4789 .kki-fp__why {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    color: rgba(247, 240, 223, 0.66) !important;
}

/* ── 12. Status pill / service pill — gentle refinement ─────────────── */
body.page-id-4777 .kki-fp__status,
body.page-id-4778 .kki-fp__status,
body.page-id-4788 .kki-pf-pill,
body.page-id-4789 .kki-pf-pill {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ── 13. Reduced-motion — disable transforms when requested ─────────── */
@media (prefers-reduced-motion: reduce) {
    body.page-id-4777 .kki-fp__card,
    body.page-id-4778 .kki-fp__card,
    body.page-id-4788 .kki-fp__card,
    body.page-id-4789 .kki-fp__card {
        transition: none !important;
    }
    body.page-id-4777 .kki-fp__card:hover,
    body.page-id-4778 .kki-fp__card:hover,
    body.page-id-4788 .kki-fp__card:hover,
    body.page-id-4789 .kki-fp__card:hover {
        transform: none !important;
    }
}

/* ── 14. Mobile — graceful scaling ──────────────────────────────────── */
@media (max-width: 768px) {
    body.page-id-4777 .kki-fp__h,
    body.page-id-4778 .kki-fp__h,
    body.page-id-4788 .kki-fp__h,
    body.page-id-4789 .kki-fp__h {
        font-size: clamp(28px, 7.5vw, 40px) !important;
        letter-spacing: -0.02em !important;
    }
    body.page-id-4777 .kki-fp__title,
    body.page-id-4778 .kki-fp__title,
    body.page-id-4788 .kki-fp__title,
    body.page-id-4789 .kki-fp__title {
        font-size: 1.125rem !important;
    }
    body.page-id-4777 .kki-fp__grid,
    body.page-id-4778 .kki-fp__grid,
    body.page-id-4788 .kki-fp__grid,
    body.page-id-4789 .kki-fp__grid {
        gap: 20px !important;
    }
}

/* =============================================================
 * Section: methodology/services/about/insights/contact polish
 * Merged from: components-pages-polish.css
 * ============================================================= */

/*
 * KKI Design System — Per-page editorial polish for Methodology / Services /
 * About / Insights / Contact
 *
 * Applies the same minimal-luxury rhythm we shipped on home + projects +
 * portfolio to the remaining content pages. Each page has its own family
 * prefix (kki-m2-* / kki-s2-* / kki-a2-* / etc.), so we scope per-family.
 *
 * Loaded by KKI_DS_Loader conditional on page IDs:
 *   Methodology — 4481 EN, 4520 TH
 *   Services    — 4482 EN, 4521 TH
 *   About       — 2711 EN, 4516 TH
 *   Insights    — 4487 EN, 4523 TH
 *   Contact     — 2713 EN, 4522 TH
 */

/* ════════════════════════════════════════════════════════════════════
 * Methodology page (kki-m2-* family)
 * ════════════════════════════════════════════════════════════════════ */

body.page-id-4481 .kki-m2-h2,
body.page-id-4520 .kki-m2-h2 {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(36px, 4.5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
}

body.page-id-4481 .kki-m2-path__h,
body.page-id-4520 .kki-m2-path__h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(20px, 1.8vw, 26px) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.012em !important;
    color: var(--color-foreground) !important;
}

body.page-id-4481 .kki-m2-path__badge,
body.page-id-4520 .kki-m2-path__badge {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-weight: 500 !important;
    background: var(--color-background) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    transition: transform 280ms ease, background 280ms ease !important;
}

body.page-id-4481 .kki-m2-path__cta,
body.page-id-4520 .kki-m2-path__cta {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    letter-spacing: 0.18em !important;
    border-bottom: 1.5px solid var(--color-primary) !important;
    transition: color 220ms ease, border-color 220ms ease !important;
}

/* Methodology sections — breathing room */
body.page-id-4481 [class*="kki-m2"],
body.page-id-4520 [class*="kki-m2"] {
    padding-top: clamp(60px, 8vw, 120px);
    padding-bottom: clamp(60px, 8vw, 120px);
}

/* ════════════════════════════════════════════════════════════════════
 * Services page (kki-s2-* family)
 * ════════════════════════════════════════════════════════════════════ */

body.page-id-4482 .kki-s2-h2,
body.page-id-4521 .kki-s2-h2 {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(36px, 4.5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
}

body.page-id-4482 .kki-s2-phase,
body.page-id-4521 .kki-s2-phase {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.18) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease !important;
}

body.page-id-4482 .kki-s2-phase:hover,
body.page-id-4521 .kki-s2-phase:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(216, 189, 118, 0.42) !important;
}

body.page-id-4482 .kki-s2-fee,
body.page-id-4521 .kki-s2-fee {
    border-radius: 12px !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * About page (kki-a2-* family)
 * ════════════════════════════════════════════════════════════════════ */

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-size: clamp(36px, 4.5vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
}

body.page-id-2711 .kki-a2-value-card,
body.page-id-4516 .kki-a2-value-card,
body.page-id-2711 .kki-a2-team-card,
body.page-id-4516 .kki-a2-team-card {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.18) !important;
    background: linear-gradient(180deg, rgba(22, 31, 44, 0.82) 0%, rgba(11, 16, 26, 0.86) 100%) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease, box-shadow 380ms ease !important;
}

body.page-id-2711 .kki-a2-value-card:hover,
body.page-id-4516 .kki-a2-value-card:hover,
body.page-id-2711 .kki-a2-team-card:hover,
body.page-id-4516 .kki-a2-team-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(216, 189, 118, 0.42) !important;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.38) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Insights page (4487 EN, 4523 TH)
 * ════════════════════════════════════════════════════════════════════ */

body.page-id-4487 #main-page-content h2,
body.page-id-4523 #main-page-content h2 {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-foreground) !important;
    margin: clamp(40px, 5vw, 64px) 0 clamp(20px, 2.4vw, 32px) !important;
}

body.page-id-4487 article,
body.page-id-4523 article {
    border-radius: 12px !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), border-color 380ms ease !important;
}

body.page-id-4487 article:hover,
body.page-id-4523 article:hover {
    transform: translateY(-3px) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Contact page (2713 EN, 4522 TH) — kki-cx-* family
 * ════════════════════════════════════════════════════════════════════ */

body.page-id-2713 .kki-cx__hero h1,
body.page-id-2713 #kki-cx-hero-h,
body.page-id-4522 .kki-cx__hero h1,
body.page-id-4522 #kki-cx-hero-h {
    font-family: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(40px, 5vw, 72px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.018em !important;
    text-transform: none !important;
    color: var(--color-foreground) !important;
}

body.page-id-2713 .kki-cx__btn,
body.page-id-4522 .kki-cx__btn {
    font-family: "Poppins", "IBM Plex Sans Thai", Sarabun, system-ui, sans-serif !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding: clamp(14px, 1.4vw, 18px) clamp(28px, 3vw, 44px) !important;
    transition: transform 280ms ease, background 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease !important;
}

body.page-id-2713 .kki-cx__btn--gold,
body.page-id-4522 .kki-cx__btn--gold {
    background: var(--color-primary) !important;
    color: var(--color-primary-foreground) !important;
    border: 1px solid var(--color-primary) !important;
    box-shadow: 0 12px 32px rgba(216, 189, 118, 0.22) !important;
}

body.page-id-2713 .kki-cx__btn--gold:hover,
body.page-id-4522 .kki-cx__btn--gold:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 42px rgba(216, 189, 118, 0.32) !important;
}

body.page-id-2713 .kki-cx__btn--ghost,
body.page-id-4522 .kki-cx__btn--ghost {
    background: transparent !important;
    color: var(--color-foreground) !important;
    border: 1px solid rgba(216, 189, 118, 0.42) !important;
}

body.page-id-2713 .kki-cx__btn--ghost:hover,
body.page-id-4522 .kki-cx__btn--ghost:hover {
    transform: translateY(-2px) !important;
    border-color: var(--color-primary) !important;
    background: rgba(216, 189, 118, 0.08) !important;
}

body.page-id-2713 .kki-cx__signal,
body.page-id-4522 .kki-cx__signal {
    border-radius: 12px !important;
    border: 1px solid rgba(216, 189, 118, 0.22) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Universal reduced-motion safety for per-page hovers
 * ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.page-id-4482 .kki-s2-phase:hover,
    body.page-id-4521 .kki-s2-phase:hover,
    body.page-id-2711 .kki-a2-value-card:hover,
    body.page-id-4516 .kki-a2-value-card:hover,
    body.page-id-4487 article:hover,
    body.page-id-4523 article:hover,
    body.page-id-2713 .kki-cx__btn:hover,
    body.page-id-4522 .kki-cx__btn:hover {
        transform: none !important;
    }
}

/* =============================================
 * Section: kki-v2-global-cleanup.php (wp_head priority 99)
 *
 * Touch-target a11y (44px nav/footer/CTAs, 32px in-body links),
 * 19px stray-offset compensation for Harington's body-level meta nodes,
 * mobile contact-fab visibility, single-post sidebar hide.
 * ============================================= */

@media (min-width: 1025px) {
	header nav .flexnav > li > a {
		align-items: center !important;
		display: inline-flex !important;
		min-height: 44px !important;
	}
	header nav .flexnav > li > a .before-span,
	header nav .flexnav > li > a .before-span span {
		display: inline-flex !important;
		line-height: 1 !important;
		overflow: visible !important;
		transform: none !important;
	}
	header nav .flexnav > li > a .before-span span::before,
	header nav .flexnav > li > a .before-span span::after {
		content: none !important;
		display: none !important;
	}
}
.kki-ml-consent__body a {
	align-items: center;
	display: inline-flex;
	min-height: 32px;
}
.kki-ml-footer a,
.kki-ml-footer__contact-item,
.kki-ib-btn,
.kki-dm__btn {
	align-items: center !important;
	display: inline-flex !important;
	min-height: 44px !important;
}
.kki-ml-footer a {
	min-width: 44px !important;
}
.kki-ml-footer__contact-item {
	min-width: 44px !important;
	width: auto !important;
}
.kki-fp__title a {
	align-items: center !important;
	display: inline-flex !important;
	min-height: 44px !important;
}
.kki-ins-card a,
.kki-ins-card__cta,
a[href$="/portfolio/"],
a[href$="/insights/"] {
	align-items: center !important;
	display: inline-flex !important;
	min-height: 44px !important;
}
a[href*="youtube.com/watch"],
.entry-meta a,
.post-categories a {
	align-items: center !important;
	display: inline-flex !important;
	min-height: 44px !important;
}
.entry-content a,
.post-content a,
.wp-block-post-content a,
.article-content a {
	align-items: center;
	display: inline-flex;
	min-height: 32px;
}
#main-page-content p a[href^="mailto:"],
#main-page-content p a[href*="pdpc.or.th"],
#main-page-content p a[href*="/contact/"],
#post-content p a[href*="/contact/"],
#post-content p a[href*="/services/legal-tax-structuring/"] {
	align-items: center !important;
	display: inline-flex !important;
	min-height: 32px !important;
}

/* 19px stray-offset compensation: Harington emits stray TITLE/META/LINK
 * nodes inside <body> (instead of <head>); whitespace text-nodes between
 * them render as anonymous inline boxes (~19px). Pull main wrapper back
 * up so #hero sits flush with viewport top. */
body > .cd-main-content {
	margin-top: -19px !important;
}

@media (max-width: 620px) {
	.kki-ml-fab-stack {
		display: flex !important;
	}
	body.kki-v2-menu-open #kkiMlConsent {
		display: none !important;
	}
	#hero-caption {
		box-sizing: border-box !important;
		max-width: 100vw !important;
		width: 100% !important;
	}
	.single-harington_portfolio #hero-caption .inner,
	.single-harington_portfolio #hero-caption .hero-title,
	.single-harington_portfolio #hero-caption .hero-title span {
		box-sizing: border-box !important;
		max-width: calc(100vw - 40px) !important;
		overflow-wrap: anywhere !important;
		width: calc(100vw - 40px) !important;
	}
	.kki-cmp__btn {
		box-sizing: border-box !important;
		max-width: 100% !important;
		white-space: normal !important;
		width: 100% !important;
	}
}
.single-post #sidebar,
.single-post #open-sidebar-nav {
	display: none !important;
}