@charset "UTF-8";

:root {
    --tatoa-primary: #5e379d;
    --tatoa-primary-dark: #28095b;
    --tatoa-accent: #5e379d;
    --tatoa-text: #181818;
    --tatoa-muted: #68616f;
    --tatoa-surface: #f7f7f7;
    --tatoa-border: #e8e2f0;
    --tatoa-footer: #181818;
    --tatoa-container: 1320px;
    --tatoa-white: #ffffff;
    --tatoa-ink-soft: #444444;
    --tatoa-danger: #a43c3c;
    --tatoa-success: #287052;
    --tatoa-shadow: 0 16px 42px rgba(24, 24, 24, 0.11);
    --tatoa-header-shadow: 0 8px 24px rgba(24, 24, 24, 0.08);
    --tatoa-radius: 4px;
    --tatoa-transition: 220ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
form {
    margin: 0;
}

body {
    min-width: 320px;
    background: var(--tatoa-white);
    color: var(--tatoa-text);
    font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

body.kmc-lock-scroll {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
    letter-spacing: 0;
}

button,
select {
    cursor: pointer;
}

button {
    border: 0;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

/* Swiper 8 no longer assigns overflow rules to the legacy container class. */
.swiper-container {
    position: relative;
    overflow: hidden;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--tatoa-accent);
    color: var(--tatoa-primary-dark);
}

:focus-visible {
    outline: 3px solid var(--tatoa-accent);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.kmc-shell,
.container-outer {
    width: min(calc(100% - 64px), var(--tatoa-container));
    margin-inline: auto;
}

.kmc-section {
    position: relative;
    padding: 104px 0;
    overflow: clip;
}

.kmc-section--light {
    background: var(--tatoa-surface);
}

.kmc-section--ink {
    background: var(--tatoa-primary-dark);
    color: var(--tatoa-white);
}

.kmc-section-heading {
    max-width: 760px;
    margin-bottom: 46px;
}

.kmc-section-heading > span,
.kmc-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 14px;
    color: var(--tatoa-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0;
}

.kmc-section-heading > span::before,
.kmc-eyebrow::before {
    width: 26px;
    height: 1px;
    margin-right: 12px;
    background: currentColor;
    content: "";
}

.kmc-section-heading h2 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

.kmc-section--ink .kmc-section-heading h2 {
    color: var(--tatoa-white);
}

.kmc-section-heading p {
    max-width: 680px;
    margin-top: 18px;
    color: var(--tatoa-muted);
    font-size: 16px;
}

.kmc-section--ink .kmc-section-heading p {
    color: rgba(255, 255, 255, 0.72);
}

.kmc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 50px;
    padding: 12px 24px;
    border: 1px solid var(--tatoa-primary);
    border-radius: var(--tatoa-radius);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    transition: background var(--tatoa-transition), border-color var(--tatoa-transition), color var(--tatoa-transition), transform var(--tatoa-transition);
}

.kmc-button:hover {
    border-color: var(--tatoa-accent);
    background: var(--tatoa-accent);
    color: var(--tatoa-primary-dark);
    transform: translateY(-2px);
}

.kmc-button--light {
    border-color: rgba(255, 255, 255, 0.75);
    background: var(--tatoa-white);
    color: var(--tatoa-primary-dark);
}

.kmc-button--light:hover {
    border-color: var(--tatoa-accent);
    background: var(--tatoa-accent);
}

.kmc-text-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tatoa-accent);
    color: var(--tatoa-primary);
    font-size: 14px;
    font-weight: 700;
}

.kmc-text-link span {
    transition: transform var(--tatoa-transition);
}

.kmc-text-link:hover span {
    transform: translateX(4px);
}

.kmc-section-link {
    margin-top: 38px;
}

.kmc-richtext {
    color: var(--tatoa-ink-soft);
    line-height: 1.9;
}

.kmc-richtext > * + * {
    margin-top: 16px;
}

.kmc-richtext img {
    margin: 30px auto;
}

.kmc-richtext a {
    color: var(--tatoa-primary);
    text-decoration: underline;
    text-decoration-color: var(--tatoa-accent);
    text-underline-offset: 4px;
}

/* Header */
.kmc-header {
    position: relative;
    z-index: 1000;
    background: var(--tatoa-white);
}

.kmc-utility {
    min-height: 34px;
    border-bottom: 0;
    background: var(--tatoa-white);
    color: #000;
    font-size: 11px;
    font-weight: 600;
}

.kmc-utility-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
}

.kmc-utility-brand {
    color: #000;
    font-size: 15px;
    line-height: 1;
}

.kmc-utility-links {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.kmc-utility-links > a,
.kmc-language-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 15px;
    border-left: 0;
    background: transparent;
    color: #000;
    font-size: 15px;
}

.kmc-language-trigger span {
    margin-left: 8px;
    color: #000;
    font-size: 14px;
}

.kmc-language-menu {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 30;
    min-width: 140px;
    padding: 8px;
    border: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
    box-shadow: var(--tatoa-header-shadow);
}

.kmc-language-menu button {
    display: block;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    font-size: 15px;
    text-align: left;
}

.kmc-language-menu button:hover {
    background: var(--tatoa-surface);
    color: var(--tatoa-primary);
}

.kmc-brand-row {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    min-height: 90px;
}

.kmc-naver-brand {
    position: absolute;
    top: 50%;
    left: -268px;
    display: block;
    width: 224px;
    transform: translateY(-50%);
}

.kmc-naver-brand img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1600px) {
    .kmc-naver-brand {
        left: 0;
        width: 180px;
    }
}

.kmc-brand {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: min(440px, 100%);
    min-height: 80px;
}

.kmc-brand img {
    width: auto;
    max-width: min(240px, 100%);
    height: 48px;
    object-fit: contain;
}

.kmc-brand-wordmark {
    display: block;
    color: var(--tatoa-primary-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
}

.kmc-brand-wordmark--dual {
    color: var(--tatoa-text);
}

.kmc-brand-wordmark--dual .is-accent {
    color: var(--tatoa-primary);
}

.kmc-brand-wordmark--dual .kmc-brand-suffix {
    display: inline-block;
    margin-left: 0.18em;
    color: var(--tatoa-text);
    font: inherit;
    letter-spacing: 0;
    white-space: nowrap;
}

.kmc-brand strong {
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kmc-menu-toggle {
    display: none;
}

.kmc-search-trigger {
    grid-column: 3;
    justify-self: end;
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid var(--tatoa-border);
    border-radius: 50%;
    background: transparent;
}

.kmc-search-trigger span,
.kmc-search-trigger span::after {
    position: absolute;
    display: block;
    content: "";
}

.kmc-search-trigger span {
    top: 12px;
    left: 12px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--tatoa-primary);
    border-radius: 50%;
}

.kmc-search-trigger span::after {
    top: 12px;
    left: 12px;
    width: 8px;
    height: 2px;
    background: var(--tatoa-primary);
    transform: rotate(45deg);
    transform-origin: left center;
}

.kmc-navigation {
    border-top: 1px solid var(--tatoa-border);
    border-bottom: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
}

.kmc-nav-list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 58px;
}

.kmc-nav-list li {
    position: relative;
}

.kmc-nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0 23px;
    color: var(--tatoa-text);
    font-size: 15px;
    font-weight: 650;
    white-space: nowrap;
}

.kmc-nav-list > li > a::after {
    position: absolute;
    right: 23px;
    bottom: -1px;
    left: 23px;
    height: 3px;
    background: var(--tatoa-accent);
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity var(--tatoa-transition), transform var(--tatoa-transition);
}

.kmc-nav-list > li:hover > a,
.kmc-nav-list > li:focus-within > a,
.kmc-nav-list > li.is-active > a {
    color: var(--tatoa-primary);
}

.kmc-nav-list > li:hover > a::after,
.kmc-nav-list > li:focus-within > a::after,
.kmc-nav-list > li.is-active > a::after {
    opacity: 1;
    transform: scaleX(1);
}

.kmc-submenu-toggle {
    display: none;
}

.kmc-nav-list ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 230px;
    padding: 10px 0;
    border: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
    box-shadow: var(--tatoa-header-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--tatoa-transition), transform var(--tatoa-transition), visibility var(--tatoa-transition);
}

.kmc-nav-list ul ul {
    top: -11px;
    left: 100%;
}

.kmc-nav-list li:hover > ul,
.kmc-nav-list li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.kmc-nav-list ul a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 38px 9px 20px;
    color: var(--tatoa-ink-soft);
    font-size: 14px;
    line-height: 1.45;
}

.kmc-nav-list ul a:hover,
.kmc-nav-list ul a:focus-visible {
    background: var(--tatoa-surface);
    color: var(--tatoa-primary);
}

.kmc-nav-list ul li:has(> ul) > a::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.kmc-mobile-nav-head,
.kmc-mobile-language,
.kmc-mobile-search,
.kmc-nav-backdrop {
    display: none;
}

.kmc-header.is-stuck .kmc-navigation {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: var(--tatoa-header-shadow);
}

/* Homepage header: layer the navigation over the opening image. */
.kmc-home .kmc-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    color: var(--tatoa-white);
    background: linear-gradient(180deg, rgba(20, 14, 30, 0.62) 0%, rgba(20, 14, 30, 0.35) 58%, rgba(20, 14, 30, 0.16) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

.kmc-home .kmc-utility,
.kmc-home .kmc-navigation {
    background: transparent;
}

.kmc-home .kmc-utility {
    color: var(--tatoa-white);
}

.kmc-home .kmc-utility-brand,
.kmc-home .kmc-utility-links > a,
.kmc-home .kmc-language-trigger,
.kmc-home .kmc-language-trigger span,
.kmc-home .kmc-nav-list > li > a {
    color: var(--tatoa-white);
}

.kmc-home .kmc-brand img {
    filter: brightness(0) invert(1);
}

.kmc-home .kmc-brand-wordmark,
.kmc-home .kmc-brand-wordmark--dual,
.kmc-home .kmc-brand-wordmark--dual .is-accent,
.kmc-home .kmc-brand-wordmark--dual .kmc-brand-suffix {
    color: var(--tatoa-white);
}

.kmc-home .kmc-search-trigger,
.kmc-home .kmc-menu-toggle {
    border-color: rgba(255, 255, 255, 0.58);
}

.kmc-home .kmc-search-trigger span {
    border-color: var(--tatoa-white);
}

.kmc-home .kmc-search-trigger span::after,
.kmc-home .kmc-menu-toggle span {
    background: var(--tatoa-white);
}

.kmc-home .kmc-navigation {
    border-color: rgba(255, 255, 255, 0.18);
}

.kmc-home .kmc-nav-list > li:hover > a,
.kmc-home .kmc-nav-list > li:focus-within > a,
.kmc-home .kmc-nav-list > li.is-active > a {
    color: var(--tatoa-white);
}

.kmc-home .kmc-nav-list > li > a::after {
    background: var(--tatoa-white);
}

.kmc-home .kmc-language-menu,
.kmc-home .kmc-nav-list ul {
    color: var(--tatoa-text);
    background: var(--tatoa-white);
}

.kmc-home .kmc-language-menu button,
.kmc-home .kmc-nav-list ul a {
    color: var(--tatoa-ink-soft);
}

@media (min-width: 961px) {
    .kmc-home .kmc-nav-list ul {
        color: var(--tatoa-white);
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(20, 14, 30, 0.76);
        box-shadow: 0 16px 34px rgba(12, 8, 20, 0.24);
        -webkit-backdrop-filter: blur(12px) saturate(118%);
        backdrop-filter: blur(12px) saturate(118%);
    }

    .kmc-home .kmc-language-menu {
        color: var(--tatoa-white);
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .kmc-home .kmc-language-menu button,
    .kmc-home .kmc-nav-list ul a {
        color: rgba(255, 255, 255, 0.92);
    }

    .kmc-home .kmc-language-menu button:hover,
    .kmc-home .kmc-language-menu button:focus-visible {
        background: transparent;
        color: var(--tatoa-white);
    }

    .kmc-home .kmc-nav-list ul a:hover,
    .kmc-home .kmc-nav-list ul a:focus-visible {
        background: rgba(94, 55, 157, 0.62);
        color: var(--tatoa-white);
    }
}

.kmc-home .kmc-header.is-stuck .kmc-navigation {
    background: rgba(24, 18, 34, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(15, 10, 24, 0.2);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
}

@media (min-width: 961px) {
    .kmc-home .kmc-header {
        box-shadow: none;
    }

    .kmc-home .kmc-navigation {
        --kmc-home-nav-line: rgba(255, 255, 255, 0.18);
        position: relative;
        border-color: transparent;
    }

    .kmc-home .kmc-header.is-stuck .kmc-navigation {
        --kmc-home-nav-line: rgba(255, 255, 255, 0.12);
        border-color: transparent;
    }

    .kmc-home .kmc-navigation::before,
    .kmc-home .kmc-navigation::after {
        position: absolute;
        right: 0;
        left: 0;
        z-index: 1;
        height: 1px;
        background: var(--kmc-home-nav-line);
        content: "";
        pointer-events: none;
        transform: scaleY(0.3);
    }

    .kmc-home .kmc-navigation::before {
        top: 0;
        transform-origin: center top;
    }

    .kmc-home .kmc-navigation::after {
        bottom: 0;
        transform-origin: center bottom;
    }
}

@media (max-width: 960px) {
    .kmc-home .kmc-header {
        background: rgba(20, 14, 30, 0.46);
    }

    .kmc-home .kmc-navigation,
    .kmc-home .kmc-navigation.is-open {
        color: var(--tatoa-text);
        background: var(--tatoa-white);
    }

    .kmc-home .kmc-navigation .kmc-nav-list > li > a {
        color: var(--tatoa-text);
    }

    .kmc-home .kmc-navigation .kmc-nav-list > li:hover > a,
    .kmc-home .kmc-navigation .kmc-nav-list > li:focus-within > a,
    .kmc-home .kmc-navigation .kmc-nav-list > li.is-active > a {
        color: var(--tatoa-primary);
    }
}

.kmc-search-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(52, 52, 56, 0.74);
}

.kmc-search-close {
    position: absolute;
    top: 30px;
    right: 34px;
    width: 48px;
    height: 48px;
    background: transparent;
    color: var(--tatoa-white);
    font-size: 36px;
    line-height: 1;
}

.kmc-search-dialog form {
    width: min(760px, 100%);
}

.kmc-search-dialog label {
    display: block;
    margin-bottom: 20px;
    color: var(--tatoa-white);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 30px;
}

.kmc-search-dialog form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.kmc-search-dialog input {
    width: 100%;
    height: 62px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--tatoa-white);
    font-size: 20px;
}

.kmc-search-dialog input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.kmc-search-dialog form button {
    background: var(--tatoa-accent);
    color: var(--tatoa-primary-dark);
    font-weight: 700;
}

/* Hero */
.kmc-hero,
.kmc-hero-swiper,
.kmc-hero-slide {
    position: relative;
    width: 100%;
}

.kmc-hero {
    background: var(--tatoa-primary-dark);
}

.kmc-hero-slide {
    min-height: clamp(560px, 67vh, 760px);
    overflow: hidden;
}

.kmc-hero--compact .kmc-hero-slide {
    min-height: 500px;
}

.kmc-hero-slide picture,
.kmc-hero-slide picture img,
.kmc-hero-slide > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kmc-hero-shade,
.kmc-feature-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(40, 9, 91, 0.38);
}

.kmc-hero-shade::after {
    position: absolute;
    inset: 0 54% 0 0;
    background: rgba(40, 9, 91, 0.42);
    content: "";
}

.kmc-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: clamp(560px, 67vh, 760px);
    padding-top: 56px;
    padding-bottom: 92px;
    color: var(--tatoa-white);
}

.kmc-hero-copy > span {
    margin-bottom: 18px;
    color: var(--tatoa-accent);
    font-size: 13px;
    font-weight: 700;
}

.kmc-hero-copy h1 {
    max-width: 760px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 1.18;
    text-wrap: balance;
}

.kmc-hero-copy p {
    max-width: 650px;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 17px;
}

.kmc-hero-copy .kmc-button {
    margin-top: 34px;
}

.kmc-hero .swiper-pagination {
    right: auto;
    bottom: 40px;
    left: max(32px, calc((100vw - min(calc(100vw - 64px), var(--tatoa-container))) / 2));
    width: auto;
    text-align: left;
}

.kmc-hero .swiper-pagination-bullet {
    width: 28px;
    height: 3px;
    margin: 0 5px !important;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.kmc-hero .swiper-pagination-bullet-active {
    background: var(--tatoa-accent);
}

.kmc-hero .swiper-button-prev,
.kmc-hero .swiper-button-next {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background-color: rgba(40, 9, 91, 0.2);
    background-size: 14px;
}

.kmc-hero .swiper-button-prev {
    left: 28px;
}

.kmc-hero .swiper-button-next {
    right: 28px;
}

/* Three-panel home hero. Kept fully scoped so existing hero variants stay unchanged. */
.kmc-hero--triptych {
    border-bottom: 8px solid #181818;
}

.kmc-hero--triptych .kmc-hero-swiper,
.kmc-hero--triptych .kmc-hero-slide,
.kmc-hero--triptych .kmc-hero-triptych-copy {
    min-height: clamp(560px, 70vh, 650px);
}

.kmc-hero--triptych .kmc-hero-slide {
    isolation: isolate;
}

.kmc-hero--triptych .kmc-hero-slide picture img {
    transition: transform 700ms ease;
}

.kmc-hero--triptych .kmc-hero-slide:hover picture img {
    transform: scale(1.025);
}

.kmc-hero--triptych .kmc-hero-shade {
    background: rgba(40, 9, 91, 0.5);
}

.kmc-hero--triptych .kmc-hero-shade::after {
    display: none;
}

.kmc-hero-triptych-copy {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    padding: 108px 34px 54px;
    flex-direction: column;
    align-items: center;
    color: var(--tatoa-white);
    text-align: center;
}

.kmc-hero-triptych-eyebrow {
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.kmc-hero-triptych-copy h1,
.kmc-hero-triptych-copy h2 {
    max-width: 100%;
    font-family: "Noto Sans KR", "Source Han Sans K", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 84px;
    font-weight: 400;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.kmc-hero-triptych-copy p {
    max-width: 420px;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.65;
}

.kmc-hero-triptych-action {
    display: inline-flex;
    margin-top: auto;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--tatoa-white);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.kmc-hero-triptych-action-mark {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    place-items: center;
    transition: background-color var(--tatoa-transition), border-color var(--tatoa-transition), color var(--tatoa-transition);
}

.kmc-hero-triptych-action-mark::before {
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.kmc-hero-triptych-action:hover .kmc-hero-triptych-action-mark,
.kmc-hero-triptych-action:focus-visible .kmc-hero-triptych-action-mark {
    border-color: var(--tatoa-white);
    background: var(--tatoa-white);
    color: var(--tatoa-primary-dark);
}

.kmc-hero--triptych .swiper-button-prev,
.kmc-hero--triptych .swiper-button-next {
    width: 44px;
    height: 44px;
    background-size: 12px;
}

/* Reference-style three-panel hero. The triptych is intentionally isolated
 * from the regular Swiper hero so the other homepage modules keep their
 * existing layout and autoplay behavior. */
.tatoa-triptych {
    position: relative;
    overflow: hidden;
    background: #181818;
}

.tatoa-triptych-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 850px;
}

.tatoa-triptych-panel {
    position: relative;
    min-width: 0;
    height: 100%;
    flex: 1 1 33.3333%;
    overflow: hidden;
    transition: flex-basis 800ms cubic-bezier(0.77, 0, 0.175, 1), width 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

.tatoa-triptych-panel.is-open {
    flex-basis: 100%;
}

.tatoa-triptych-panel.is-collapsed {
    flex-basis: 0;
}

.tatoa-triptych-state {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #181818;
}

.tatoa-triptych-state[hidden] {
    display: none !important;
}

.tatoa-triptych-media {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tatoa-triptych-panel--n1 .tatoa-triptych-state--closed .tatoa-triptych-media {
    background-image: var(--tatoa-triptych-off-1, url('../images/reference-triptych/off-1.png'));
}

.tatoa-triptych-panel--n2 .tatoa-triptych-state--closed .tatoa-triptych-media {
    background-image: var(--tatoa-triptych-off-2, url('../images/reference-triptych/off-2.png'));
}

.tatoa-triptych-panel--n3 .tatoa-triptych-state--closed .tatoa-triptych-media {
    background-image: var(--tatoa-triptych-off-3, url('../images/reference-triptych/off-3.png'));
}

.tatoa-triptych-panel--n1 .tatoa-triptych-state--open .tatoa-triptych-media {
    background-image: var(--tatoa-triptych-on-1, url('../images/reference-triptych/on-1.png'));
}

.tatoa-triptych-panel--n2 .tatoa-triptych-state--open .tatoa-triptych-media {
    background-image: var(--tatoa-triptych-on-2, url('../images/reference-triptych/on-2.png'));
}

.tatoa-triptych-panel--n3 .tatoa-triptych-state--open .tatoa-triptych-media {
    background-image: var(--tatoa-triptych-on-3, url('../images/reference-triptych/on-3.png'));
}

.tatoa-triptych-shade {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.08);
}

.tatoa-triptych-closed-copy {
    position: absolute;
    z-index: 2;
    top: calc(50% - 72px);
    left: 50%;
    width: 100%;
    padding: 24px;
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
}

.tatoa-triptych-eyebrow {
    display: block;
    margin-bottom: 12px;
    height: 1.35em;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
}

.tatoa-triptych-closed-copy h2 {
    margin: 0 0 66px;
    color: #fff;
    font-size: clamp(64px, 8vw, 130px);
    font-weight: 300;
    line-height: 0.95;
}

.tatoa-triptych-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
}

.tatoa-triptych-action img {
    display: block;
    width: 41px;
    height: 41px;
    margin-bottom: 18px;
}

.tatoa-triptych-action small {
    font-size: inherit;
}

.tatoa-triptych-state--closed {
    cursor: pointer;
}

.tatoa-triptych-state--closed:hover .tatoa-triptych-action img,
.tatoa-triptych-state--closed:focus-visible .tatoa-triptych-action img {
    transform: translateY(6px);
}

.tatoa-triptych-action img,
.tatoa-triptych-close img {
    transition: transform 300ms ease;
}

.tatoa-triptych-close {
    position: absolute;
    z-index: 4;
    top: 5%;
    right: 5%;
    width: 37px;
    height: 37px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tatoa-triptych-close img {
    display: block;
    width: 100%;
    height: 100%;
}

.tatoa-triptych-open-copy {
    position: relative;
    z-index: 3;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    color: #fff;
}

.tatoa-triptych-trust {
    display: flex;
    justify-content: space-between;
    padding-top: 130px;
    color: #fff;
}

.tatoa-triptych-trust-intro h2 {
    margin: -0.2em 0 140px;
    color: #fff;
    font-family: "Noto Sans KR", "Source Han Sans K", "Noto Sans SC", sans-serif;
    font-size: 130px;
    font-weight: 100;
    line-height: 1;
}

.tatoa-triptych-trust-intro h2 em {
    color: #01daff;
    font-style: normal;
    font-weight: 400;
}

.tatoa-triptych-trust-intro > p {
    color: #fff;
    font-family: "Noto Sans KR", "Source Han Sans K", "Noto Sans SC", sans-serif;
    font-size: 18px;
    line-height: 28px;
}

.tatoa-triptych-trust-list {
    min-width: 345px;
    text-align: left;
}

.tatoa-triptych-trust-list > div {
    display: flex;
    align-items: baseline;
}

.tatoa-triptych-trust-list > div:not(:last-child) {
    margin-bottom: 68px;
}

.tatoa-triptych-trust-list b {
    width: 70px;
    flex: 0 0 70px;
    color: #01daff;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-size: 90px;
    font-weight: 700;
    line-height: 0.73em;
}

.tatoa-triptych-trust-list p {
    display: inline-block;
    color: #fff;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-size: 30px;
    line-height: 0.73em;
}

.tatoa-triptych-trust-list span {
    display: block;
    margin-bottom: 5px;
    color: #b8f1fb;
    font-family: "Noto Sans KR", "Source Han Sans K", "Noto Sans SC", sans-serif;
    font-size: 18px;
    line-height: 1;
}

.tatoa-triptych-revolution {
    padding-top: 175px;
}

.tatoa-triptych-revolution-title {
    display: flex;
    align-items: flex-end;
    margin-bottom: 50px;
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}

.tatoa-triptych-revolution-title em {
    margin-left: -0.07em;
    padding-right: 40px;
    color: #70e0ff;
    font-size: 300px;
    font-style: normal;
    font-weight: 700;
    line-height: 0.73em;
}

.tatoa-triptych-revolution-title p {
    color: #fff;
    font-size: 100px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1;
}

.tatoa-triptych-revolution-text {
    color: #fff;
    font-family: "Noto Sans KR", "Source Han Sans K", "Noto Sans SC", sans-serif;
    font-size: 20px;
    letter-spacing: 0.37em;
    line-height: 1.45;
    mix-blend-mode: overlay;
}

.tatoa-triptych-panel--n3 .tatoa-triptych-state--open::before,
.tatoa-triptych-panel--n3 .tatoa-triptych-state--open::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 38%;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    content: "";
    transform: translateY(-50%);
}

.tatoa-triptych-panel--n3 .tatoa-triptych-state--open::before { left: 0; }
.tatoa-triptych-panel--n3 .tatoa-triptych-state--open::after { right: 0; }

.tatoa-triptych-sharing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
}

.tatoa-triptych-sharing-title {
    font-family: "Tenor Sans", Montserrat, "Helvetica Neue", sans-serif;
    letter-spacing: 0;
    line-height: 130px;
}

.tatoa-triptych-sharing-title p:first-child { font-size: 80px; }
.tatoa-triptych-sharing-title p:last-child { font-size: 120px; }

.tatoa-triptych-sharing-title span {
    color: #9d93f7;
    font-size: 120px;
}

.tatoa-triptych-sharing-text {
    color: #fff;
    font-family: "Noto Sans KR", "Source Han Sans K", "Noto Sans SC", sans-serif;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 28px;
}

.tatoa-triptych-mobile-break,
.tatoa-triptych-tablet-break {
    display: none;
}

/* Mother-site style campaign popup, kept outside the triptych so it does not
 * change the layout of the page below it. */
.tatoa-home-popup {
    position: absolute;
    z-index: 1050;
    top: 0;
    left: 50%;
    width: min(700px, calc(100% - 40px));
    transform: translateX(-50%);
}

.tatoa-home-popup[hidden] { display: none !important; }
.tatoa-home-popup a { display: block; }
.tatoa-home-popup img { display: block; width: 100%; height: auto; }
.tatoa-home-popup-close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media (max-width: 1200px) {
    .tatoa-triptych-open-copy { width: 800px; }

    .tatoa-triptych-tablet-break { display: block; }

    .tatoa-triptych-trust-intro h2 { font-size: 90px; }
    .tatoa-triptych-trust-list { min-width: 280px; }
    .tatoa-triptych-trust-list b { width: 50px; flex-basis: 50px; font-size: 70px; }

    .tatoa-triptych-revolution { text-align: center; }
    .tatoa-triptych-revolution-title em { font-size: 200px; }
    .tatoa-triptych-revolution-title p { font-size: 70px; text-align: left; }
    .tatoa-triptych-revolution-text { font-size: 16px; line-height: 1.7; }

    .tatoa-triptych-panel--n3 .tatoa-triptych-state--open::before,
    .tatoa-triptych-panel--n3 .tatoa-triptych-state--open::after { width: 30%; }
    .tatoa-triptych-sharing-title { line-height: 100px; }
    .tatoa-triptych-sharing-title p:first-child { font-size: 60px; }
    .tatoa-triptych-sharing-title p:last-child,
    .tatoa-triptych-sharing-title span { font-size: 90px; }
}

@media (max-width: 800px) {
    .kmc-naver-brand { display: none; }

    .tatoa-triptych-wrap {
        flex-direction: column;
        height: 100vh;
        min-height: 620px;
    }

    .tatoa-triptych-panel {
        width: 100%;
        height: 33.3333%;
        flex: 0 0 33.3333%;
        transition: flex-basis 800ms cubic-bezier(0.77, 0, 0.175, 1), height 800ms cubic-bezier(0.77, 0, 0.175, 1);
    }

    .tatoa-triptych-panel.is-open {
        height: 100%;
        flex-basis: 100%;
    }

    .tatoa-triptych-panel.is-collapsed {
        height: 0;
        flex-basis: 0;
    }

    .tatoa-triptych-closed-copy h2 { margin-bottom: 5vw; font-size: 10vw; }
    .tatoa-triptych-eyebrow { font-size: 3vw; }
    .tatoa-triptych-action img { width: 7vw; height: 7vw; margin-bottom: 2vw; }
    .tatoa-triptych-action small { font-size: 3vw; }
    .tatoa-triptych-open-copy { width: 90%; }
    .tatoa-triptych-mobile-break { display: block; }

    .tatoa-triptych-trust { flex-direction: column; justify-content: center; height: 100%; padding-top: 0; }
    .tatoa-triptych-trust-intro h2 { margin: 0 0 8vw; font-size: 12vw; }
    .tatoa-triptych-trust-intro > p { font-size: 3vw; line-height: 4.5vw; }
    .tatoa-triptych-trust-list { min-width: 0; margin-top: 2em; }
    .tatoa-triptych-trust-list > div:not(:last-child) { margin-bottom: 5vw; }
    .tatoa-triptych-trust-list b { width: 8vw; flex-basis: 8vw; font-size: 10vw; }
    .tatoa-triptych-trust-list p { font-size: 4vw; }
    .tatoa-triptych-trust-list span { margin-bottom: 1vw; font-size: 3vw; }

    .tatoa-triptych-revolution { padding-top: 22vw; }
    .tatoa-triptych-revolution-title { justify-content: center; margin-bottom: 6vw; }
    .tatoa-triptych-revolution-title em { padding-right: 5vw; font-size: 30vw; }
    .tatoa-triptych-revolution-title p { font-size: 7vw; }
    .tatoa-triptych-revolution-text { font-size: 3vw; }

    .tatoa-triptych-sharing { width: 100%; }
    .tatoa-triptych-sharing-title { line-height: 11vw; }
    .tatoa-triptych-sharing-title p:first-child { font-size: 8vw; }
    .tatoa-triptych-sharing-title p:last-child,
    .tatoa-triptych-sharing-title span { font-size: 10vw; }
    .tatoa-triptych-sharing-text { font-size: 3vw; line-height: 4.5vw; }

    .tatoa-triptych-close { top: auto; right: auto; bottom: 5%; left: 50%; transform: translateX(-50%); }
    .tatoa-home-popup { width: 90%; left: 50%; transform: translateX(-50%); }
    .tatoa-home-popup-close { width: 8vw; height: 8vw; }
}

/* Content modules */
.kmc-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    align-items: center;
    gap: 7.5%;
}

.kmc-intro--media_right .kmc-intro-media {
    grid-column: 2;
    grid-row: 1;
}

.kmc-intro--media_right .kmc-intro-copy {
    grid-column: 1;
    grid-row: 1;
}

.kmc-intro-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--tatoa-surface);
}

.kmc-intro--media_left .kmc-intro-media:has(> video) {
    border-radius: 8px;
}

.kmc-intro--media_left .kmc-intro-media:has(> video) > video {
    border-radius: inherit;
}

.kmc-intro-media::after {
    content: none;
    pointer-events: none;
}

.kmc-intro-media img,
.kmc-intro-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kmc-intro-copy .kmc-section-heading {
    margin-bottom: 26px;
}

.kmc-intro-copy .kmc-text-link {
    margin-top: 28px;
}

.kmc-home .kmc-quick-links {
    padding: 0;
}

.kmc-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--tatoa-border);
    border-left: 1px solid var(--tatoa-border);
}

.kmc-quick-links--four_column .kmc-quick-grid,
.kmc-quick-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kmc-quick-item {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-right: 1px solid var(--tatoa-border);
    border-bottom: 1px solid var(--tatoa-border);
    background: var(--tatoa-primary-dark);
    color: var(--tatoa-white);
}

.kmc-quick-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: opacity var(--tatoa-transition), transform 600ms ease;
}

.kmc-quick-item::after {
    position: absolute;
    inset: 0;
    background: rgba(40, 9, 91, 0.12);
    content: "";
}

.kmc-quick-item > div {
    position: absolute;
    right: 25px;
    bottom: 6px;
    left: 25px;
    z-index: 2;
}

.kmc-quick-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.kmc-quick-label--mixed .kmc-quick-latin,
.kmc-quick-label--mixed i {
    position: relative;
    top: 2px;
}

.kmc-quick-item h3 {
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
}

.kmc-quick-item p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.kmc-quick-item i {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-weight: 700;
    line-height: 1;
    font-style: normal;
}

.kmc-quick-item:hover img {
    opacity: 0.96;
    transform: scale(1.035);
}

.kmc-card-swiper {
    overflow: hidden;
    padding-bottom: 34px;
}

.kmc-card-swiper .swiper-wrapper {
    align-items: stretch;
}

.kmc-card-swiper .swiper-slide {
    height: auto;
}

.kmc-card-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--tatoa-surface);
}

.kmc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.kmc-card-copy {
    min-height: 138px;
    padding: 23px 4px 8px;
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-card-copy > span {
    color: var(--tatoa-accent);
    font-size: 11px;
    font-weight: 700;
}

.kmc-card-copy h3 {
    margin-top: 5px;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
}

.kmc-products .kmc-product-card .kmc-card-copy h3 {
    text-align: center;
}

.kmc-products .kmc-product-card .kmc-card-image {
    border-radius: 8px;
}

.kmc-products .kmc-product-card .kmc-card-copy {
    min-height: 74px;
    border-bottom: 0;
}

.kmc-products .kmc-section-link {
    margin-top: 20px;
}

.kmc-card-copy p {
    display: -webkit-box;
    margin-top: 9px;
    overflow: hidden;
    color: var(--tatoa-muted);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kmc-product-card:hover .kmc-card-image img {
    transform: scale(1.035);
}

.kmc-card-swiper .swiper-scrollbar {
    bottom: 0;
    height: 2px;
    border-radius: 0;
    background: var(--tatoa-border);
}

.kmc-card-swiper .swiper-scrollbar-drag {
    border-radius: 0;
    background: var(--tatoa-accent);
}

.kmc-feature {
    position: relative;
    display: grid;
    min-height: 520px;
    overflow: hidden;
    background-color: var(--tatoa-primary-dark);
    background-position: center;
    background-size: cover;
}

.kmc-feature-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 520px;
    color: var(--tatoa-white);
}

.kmc-feature-copy > span {
    color: var(--tatoa-accent);
    font-size: 12px;
    font-weight: 700;
}

.kmc-feature-copy h2 {
    max-width: 760px;
    margin-top: 12px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.25;
}

.kmc-feature-copy p {
    max-width: 600px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.8);
}

.kmc-feature-copy .kmc-button {
    margin-top: 32px;
}

.kmc-home .kmc-feature,
.kmc-home .kmc-feature-copy {
    min-height: 420px;
}

.kmc-process-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--tatoa-muted);
    border-left: 1px solid var(--tatoa-muted);
    background: var(--tatoa-white);
}

.kmc-process {
    padding: 52px 0;
}

.kmc-process .kmc-shell {
    width: min(calc(100% - 40px), 1200px);
}

.kmc-process .kmc-section-heading {
    margin-bottom: 24px;
}

.kmc-process-list[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.kmc-process-list[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kmc-process-list[data-columns="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kmc-process-list[data-columns="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kmc-process-step {
    position: relative;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    padding: 40px 24px 32px;
    border-right: 1px solid var(--tatoa-muted);
    border-bottom: 1px solid var(--tatoa-muted);
    background: var(--tatoa-white);
}

.kmc-process-step-number {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    color: var(--tatoa-accent);
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.kmc-process-step-content {
    margin-top: 52px;
}

.kmc-process-step-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--tatoa-muted);
    font-size: 11px;
    line-height: 1.4;
}

.kmc-process-step h3 {
    margin: 0;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.45;
}

.kmc-process-step-link {
    color: inherit;
}

.kmc-process-step-link::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
}

.kmc-process-step:focus-within {
    outline: 2px solid var(--tatoa-primary);
    outline-offset: -2px;
}

.kmc-process-step-link:focus-visible {
    outline: none;
}

.kmc-process-step.is-linked:hover h3 {
    color: var(--tatoa-primary);
}

.kmc-process-step p {
    margin-top: 10px;
    color: var(--tatoa-muted);
    font-size: 13px;
    line-height: 1.7;
}

/* Reference-style franchise journey. These rules are scoped so legacy
 * process_steps variants retain their existing numbered/timeline layout. */
.kmc-process--journey {
    --kmc-journey-gold: var(--tatoa-accent);
    --kmc-journey-ink: var(--tatoa-primary-dark);
    --kmc-journey-warm: #fcf8f2;
    --kmc-journey-line: #e5e5e5;
    --kmc-journey-ring: rgba(94, 55, 157, 0.15);
    padding: 80px 0;
    background: var(--tatoa-white);
}

.kmc-process--journey .kmc-shell {
    width: min(calc(100% - 40px), 1200px);
}

.kmc-journey-wrapper {
    display: flex;
    align-items: stretch;
    max-width: 1200px;
    min-height: 420px;
    margin: 0 auto;
    background: var(--tatoa-white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.kmc-journey-left {
    flex: 0 0 55%;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--tatoa-surface);
    font-size: 0;
}

.kmc-journey-left picture,
.kmc-journey-left img {
    display: block;
    width: 100%;
    height: 100%;
}

.kmc-journey-left img {
    min-height: 420px;
    object-fit: cover;
    opacity: 1;
    transition: opacity 400ms ease;
}

.kmc-journey-left img.is-changing {
    opacity: 0.25;
}

.kmc-journey-right {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.kmc-journey-top {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 50%;
    padding: 50px 40px 40px;
    text-align: right;
    flex-direction: column;
}

.kmc-journey-top h2 {
    margin: 0 0 10px;
    color: var(--kmc-journey-gold);
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.kmc-journey-top h3 {
    margin: 0 0 15px;
    color: var(--kmc-journey-ink);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 2px;
}

.kmc-journey-top p {
    margin: 0 0 25px;
    color: var(--tatoa-muted);
    font-size: 13px;
    line-height: 1.7;
}

.kmc-journey-top > a {
    display: inline-block;
    padding: 8px 35px;
    border: 1px solid var(--tatoa-muted);
    color: var(--tatoa-ink-soft);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color var(--tatoa-transition), background var(--tatoa-transition), color var(--tatoa-transition);
}

.kmc-journey-top > a:hover,
.kmc-journey-top > a:focus-visible {
    border-color: var(--kmc-journey-gold);
    background: var(--kmc-journey-gold);
    color: var(--kmc-journey-ink);
}

.kmc-journey-bottom {
    display: flex;
    min-height: 0;
    flex: 1;
    padding: 40px;
    background: var(--kmc-journey-warm);
    flex-direction: column;
    justify-content: center;
}

.kmc-journey-detail {
    position: relative;
    width: 100%;
}

.kmc-journey-detail h4 {
    margin: 0 0 15px;
    color: var(--tatoa-text);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
}

.kmc-journey-detail-link {
    color: inherit;
}

.kmc-journey-detail-link::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
}

.kmc-journey-detail:focus-within {
    outline: 2px solid var(--kmc-journey-gold);
    outline-offset: 8px;
}

.kmc-journey-detail-link:focus-visible {
    outline: none;
}

.kmc-journey-detail-link:hover {
    color: var(--kmc-journey-gold);
}

.kmc-journey-detail p,
.kmc-journey-detail .kmc-richtext {
    margin: 0;
    color: var(--tatoa-ink-soft);
    font-size: 13px;
    line-height: 1.8;
    text-align: justify;
}

.kmc-journey-timeline {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.kmc-journey-timeline-track {
    position: relative;
    display: flex;
    min-width: 100%;
    justify-content: space-between;
}

.kmc-journey-timeline-track::before {
    position: absolute;
    top: 10px;
    right: 10%;
    left: 10%;
    z-index: 0;
    height: 1px;
    background: var(--kmc-journey-line);
    content: "";
    pointer-events: none;
}

.kmc-journey-node {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tatoa-muted);
    cursor: pointer;
    flex: 1;
    align-items: center;
    flex-direction: column;
}

.kmc-journey-node:focus-visible {
    outline: none;
}

.kmc-journey-node:focus-visible .kmc-journey-label {
    outline: 2px solid var(--kmc-journey-gold);
    outline-offset: 4px;
}

.kmc-journey-dot {
    width: 21px;
    height: 21px;
    margin-bottom: 15px;
    border: 4px solid var(--kmc-journey-line);
    border-radius: 50%;
    background: var(--tatoa-white);
    transition: border-color var(--tatoa-transition), background var(--tatoa-transition), box-shadow var(--tatoa-transition);
}

.kmc-journey-node:hover .kmc-journey-dot,
.kmc-journey-node:focus-visible .kmc-journey-dot,
.kmc-journey-node.is-active .kmc-journey-dot {
    border-color: var(--kmc-journey-gold);
}

.kmc-journey-node.is-active .kmc-journey-dot {
    background: var(--kmc-journey-gold);
    box-shadow: 0 0 0 4px var(--kmc-journey-ring);
}

.kmc-journey-label {
    max-width: 180px;
    color: var(--tatoa-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
}

.kmc-journey-node:hover .kmc-journey-label,
.kmc-journey-node:focus-visible .kmc-journey-label,
.kmc-journey-node.is-active .kmc-journey-label {
    color: var(--kmc-journey-gold);
}

.kmc-journey-node.is-active .kmc-journey-label {
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .kmc-process--journey .kmc-journey-left img,
    .kmc-process--journey .kmc-journey-dot,
    .kmc-process--journey .kmc-journey-top > a {
        transition: none;
    }
}

/* 展开三联模块时避开网站抬头，并让内容在固定模块高度内完整排版。 */
@media (min-width: 801px) {
    .tatoa-triptych-open-copy {
        width: min(1200px, calc(100% - 80px));
        box-sizing: border-box;
    }

    .tatoa-triptych-close {
        top: 205px;
    }

    .tatoa-triptych-trust {
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        align-items: flex-start;
        gap: clamp(28px, 4vw, 80px);
        padding: 224px 0 24px;
    }

    .tatoa-triptych-trust-intro {
        min-width: 0;
        flex: 1 1 auto;
    }

    .tatoa-triptych-trust-intro h2 {
        margin: 0 0 72px;
        font-size: clamp(64px, 6.35vw, 112px);
        line-height: 0.95;
    }

    .tatoa-triptych-trust-intro > p {
        max-width: 100%;
        font-size: clamp(16px, 1.25vw, 18px);
        line-height: 1.55;
    }

    .tatoa-triptych-trust-list {
        width: clamp(260px, 28vw, 345px);
        min-width: 0;
        flex: 0 1 clamp(260px, 28vw, 345px);
    }

    .tatoa-triptych-trust-list > div:not(:last-child) {
        margin-bottom: 34px;
    }

    .tatoa-triptych-trust-list b {
        width: clamp(52px, 4.8vw, 70px);
        flex-basis: clamp(52px, 4.8vw, 70px);
        font-size: clamp(60px, 5vw, 72px);
    }

    .tatoa-triptych-trust-list p {
        font-size: clamp(22px, 2.1vw, 30px);
    }

    .tatoa-triptych-trust-list span {
        font-size: clamp(15px, 1.25vw, 18px);
    }

    .tatoa-triptych-revolution {
        box-sizing: border-box;
        max-width: 100%;
        padding-top: 215px;
    }
}

.kmc-store-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: var(--tatoa-primary-dark);
}

.kmc-store-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity var(--tatoa-transition), transform 500ms ease;
}

.kmc-store-card a::after {
    position: absolute;
    inset: 42% 0 0;
    background: rgba(40, 9, 91, 0.72);
    content: "";
}

.kmc-store-card a > div {
    position: absolute;
    right: 24px;
    bottom: 25px;
    left: 24px;
    z-index: 2;
    color: var(--tatoa-white);
}

.kmc-store-card span {
    color: var(--tatoa-accent);
    font-size: 11px;
}

.kmc-store-card h3 {
    margin-top: 5px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 23px;
    font-weight: 600;
}

.kmc-store-card p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.kmc-store-card:hover img {
    opacity: 0.86;
    transform: scale(1.025);
}

.kmc-expert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.kmc-expert-grid article {
    background: var(--tatoa-primary-dark);
}

.kmc-expert-photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--tatoa-primary);
}

.kmc-expert-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.7);
    transition: filter var(--tatoa-transition), transform 500ms ease;
}

.kmc-expert-grid article > div:last-child {
    min-height: 155px;
    padding: 24px;
}

.kmc-expert-grid span {
    color: var(--tatoa-accent);
    font-size: 11px;
}

.kmc-expert-grid h3 {
    margin-top: 4px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
}

.kmc-expert-grid p {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 13px;
}

.kmc-expert-grid article:hover img {
    filter: saturate(1);
    transform: scale(1.025);
}

.kmc-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.kmc-news-grid article {
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-news-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tatoa-surface);
}

.kmc-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.kmc-news-copy {
    min-height: 210px;
    padding: 22px 2px 24px;
}

.kmc-news-copy time {
    color: var(--tatoa-accent);
    font-size: 11px;
}

.kmc-news-copy h3 {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kmc-news-copy p {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    color: var(--tatoa-muted);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kmc-news-copy > span {
    display: inline-block;
    margin-top: 18px;
    color: var(--tatoa-primary);
    font-size: 12px;
    font-weight: 700;
}

.kmc-news-grid article:hover img {
    transform: scale(1.03);
}

.kmc-partner-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--tatoa-border);
    border-left: 1px solid var(--tatoa-border);
}

.kmc-partner-grid > a,
.kmc-partner-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 145px;
    padding: 24px;
    border-right: 1px solid var(--tatoa-border);
    border-bottom: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
}

.kmc-partner-grid img {
    width: 100%;
    max-width: 160px;
    height: 64px;
    object-fit: contain;
}

.kmc-partner-grid span {
    margin-top: 12px;
    color: var(--tatoa-muted);
    font-size: 12px;
}

.kmc-content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.kmc-content-grid--two_column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kmc-content-grid--four_column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kmc-content-grid article {
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-content-card {
    display: block;
    height: 100%;
    color: inherit;
}

.kmc-content-grid article img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.kmc-content-grid article .kmc-content-card > div {
    min-height: 150px;
    padding: 22px 2px;
}

.kmc-content-grid article.is-text-only {
    border-top: 2px solid var(--tatoa-primary);
    background: var(--tatoa-surface);
}

.kmc-content-grid article.is-text-only .kmc-content-card > div {
    min-height: 190px;
    padding: 28px 24px;
}

.kmc-content-grid article:focus-within {
    outline: 2px solid var(--tatoa-primary);
    outline-offset: 4px;
}

.kmc-content-grid article span {
    color: var(--tatoa-accent);
    font-size: 11px;
}

.kmc-content-grid article h3 {
    margin-top: 5px;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
}

.kmc-content-grid article p {
    margin-top: 9px;
    color: var(--tatoa-muted);
    font-size: 13px;
}

.kmc-timeline {
    position: relative;
    max-width: 980px;
    margin-inline: auto;
}

.kmc-timeline::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 180px;
    width: 1px;
    background: var(--tatoa-border);
    content: "";
}

.kmc-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 60px;
    padding: 0 0 48px;
}

.kmc-timeline li::before {
    position: absolute;
    top: 8px;
    left: 175px;
    width: 11px;
    height: 11px;
    border: 3px solid var(--tatoa-surface);
    border-radius: 50%;
    background: var(--tatoa-accent);
    box-shadow: 0 0 0 1px var(--tatoa-accent);
    content: "";
}

.kmc-timeline time {
    color: var(--tatoa-accent);
    font-family: Georgia, serif;
    font-size: 22px;
    text-align: right;
}

.kmc-timeline h3 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
}

.kmc-timeline p {
    margin-top: 8px;
    color: var(--tatoa-muted);
}

.kmc-timeline .kmc-richtext {
    margin-top: 12px;
}

.kmc-module-anchor,
.kmc-page [id^="module-item-"] {
    scroll-margin-top: 110px;
}

.kmc-page .kmc-timeline > li > div {
    min-width: 0;
}

.kmc-page .kmc-timeline .kmc-richtext {
    max-width: 900px;
    overflow-wrap: anywhere;
}

.kmc-page .kmc-timeline .kmc-richtext h2,
.kmc-page .kmc-timeline .kmc-richtext h3,
.kmc-page .kmc-timeline .kmc-richtext h4 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    line-height: 1.45;
    text-wrap: balance;
}

.kmc-page .kmc-timeline .kmc-richtext ul:not(.story-flow),
.kmc-page .kmc-timeline .kmc-richtext ol {
    padding-left: 1.35em;
}

.kmc-page .kmc-timeline .kmc-richtext table {
    max-width: 100%;
}

.kmc-timeline--brand-story .kmc-timeline {
    max-width: 1080px;
}

.kmc-timeline--brand-story .kmc-timeline li {
    padding-bottom: 58px;
}

.kmc-timeline--brand-story .kmc-timeline li:last-child {
    padding-bottom: 0;
}

.kmc-timeline--brand-story .kmc-richtext {
    color: var(--tatoa-ink-soft);
    font-size: 15px;
    line-height: 1.95;
}

.kmc-timeline--brand-story .kmc-richtext ul {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    padding-left: 1.25em;
    list-style: square;
}

/* 品牌故事列表优先自然占满一行，空间不足时按网页宽度正常换行。 */
.kmc-timeline--brand-story .kmc-richtext > ul:not(.story-flow) > li {
    display: block;
    grid-template-columns: none;
    gap: 0;
    white-space: normal;
}

/* 品牌故事正文列表：圆点放在每条文字末尾，避免继承时间轴节点定位而压到句中。 */
.kmc-timeline--brand-story .kmc-richtext > ul:not(.story-flow) > li::before {
    display: none;
    content: none;
}

.kmc-timeline--brand-story .kmc-richtext > ul:not(.story-flow) > li::after {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 8px;
    border: 3px solid var(--tatoa-surface);
    border-radius: 50%;
    background: var(--tatoa-accent);
    box-shadow: 0 0 0 1px var(--tatoa-accent);
    content: "";
    vertical-align: middle;
}

.kmc-timeline--brand-story .kmc-richtext h4 {
    margin-top: 26px;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.kmc-timeline--brand-story .kmc-richtext table {
    width: 100%;
    margin-top: 22px;
    border-collapse: collapse;
    background: var(--tatoa-white);
    font-size: 14px;
    line-height: 1.6;
}

.kmc-timeline--brand-story .kmc-richtext th,
.kmc-timeline--brand-story .kmc-richtext td {
    padding: 12px 14px;
    border: 1px solid rgba(40, 9, 91, 0.16);
    text-align: left;
    vertical-align: top;
}

.kmc-timeline--brand-story .kmc-richtext th {
    background: rgba(166, 127, 189, 0.12);
    color: var(--tatoa-primary-dark);
    font-weight: 700;
}

.kmc-timeline--brand-story .kmc-richtext .story-flow {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
    padding: 0;
    list-style: none;
    counter-reset: story-flow;
}

.kmc-timeline--brand-story .kmc-richtext .story-flow li {
    position: relative;
    min-height: 76px;
    padding: 13px 10px 10px;
    border-top: 2px solid var(--tatoa-accent);
    background: var(--tatoa-white);
    color: var(--tatoa-primary-dark);
    font-size: 13px;
    line-height: 1.5;
    counter-increment: story-flow;
}

.kmc-timeline--brand-story .kmc-richtext .story-flow li::before {
    display: block;
    margin-bottom: 4px;
    color: var(--tatoa-accent);
    content: "0" counter(story-flow);
    font-family: Georgia, serif;
    font-size: 12px;
}

.kmc-timeline--brand-story .kmc-richtext .story-flow li:not(:last-child)::after {
    position: absolute;
    top: 31px;
    right: -8px;
    z-index: 1;
    color: var(--tatoa-accent);
    content: "→";
    font-size: 16px;
}

.kmc-timeline--architecture .kmc-richtext .story-flow--nine {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

.kmc-timeline--architecture .kmc-richtext .story-flow--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.kmc-timeline--architecture .kmc-richtext blockquote {
    margin-top: 22px;
    padding: 20px 24px;
    border-left: 3px solid var(--tatoa-accent);
    background: rgba(166, 127, 189, 0.1);
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 16px;
    line-height: 1.8;
}

.kmc-timeline--architecture .kmc-richtext .story-history-table ul {
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kmc-timeline--architecture .kmc-richtext .story-history-table li {
    position: static;
    display: block;
    min-height: 0;
    padding: 0;
}

.kmc-timeline--architecture .kmc-richtext .story-history-table li::before {
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin-right: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--tatoa-accent);
    content: "•";
}

.kmc-statistics {
    padding: 64px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
}

.kmc-statistics dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kmc-statistics dl > div {
    position: relative;
    min-height: 120px;
    padding: 0 34px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.kmc-statistics dl > div.is-linked {
    cursor: pointer;
    transition: background-color var(--tatoa-transition);
}

.kmc-statistics dl > div.is-linked:hover {
    background: rgba(255, 255, 255, 0.08);
}

.kmc-statistics dl > div.is-linked:focus-within {
    outline: 2px solid var(--tatoa-accent);
    outline-offset: -2px;
}

.kmc-statistics-item-link {
    color: inherit;
}

.kmc-statistics-item-link::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
}

.kmc-statistics-item-link:focus-visible {
    outline: none;
}

.kmc-statistics dl > div:last-child {
    border-right: 0;
}

.kmc-statistics dt {
    color: var(--tatoa-accent);
    font-family: Georgia, serif;
    font-size: 38px;
    line-height: 1.2;
}

.kmc-statistics dd {
    margin-top: 8px;
    font-weight: 700;
}

.kmc-statistics p {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
}

.kmc-statistics--hero_metrics {
    padding: 58px 0 56px;
    border-top: 0;
    background: #ffffff;
    color: #181818;
}

.kmc-statistics--hero_metrics .kmc-shell {
    width: min(calc(100% - 64px), 1640px);
}

.kmc-statistics--hero_metrics dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.kmc-statistics--hero_metrics dl > div {
    display: flex;
    min-width: 0;
    min-height: 122px;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
    border-right: 1px solid #dedbe1;
}

.kmc-statistics--hero_metrics dt {
    color: #5e379d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

.kmc-statistics--hero_metrics dd {
    margin-top: 20px;
    color: #6b686f;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

.kmc-statistics--hero_metrics p {
    margin-top: 7px;
    color: #807b84;
    font-size: 13px;
}

.kmc-statistics--hero_metrics dl > div.is-linked:hover {
    background: rgba(94, 55, 157, 0.06);
}

@media (max-width: 960px) {
    .kmc-statistics.kmc-statistics--hero_metrics {
        padding: 38px 0;
    }

    .kmc-statistics.kmc-statistics--hero_metrics .kmc-shell {
        width: calc(100% - 32px);
    }

    .kmc-statistics.kmc-statistics--hero_metrics dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dl > div {
        min-height: 108px;
        padding: 18px 28px;
        border-right: 1px solid #dedbe1;
        border-bottom: 0;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dl > div:nth-child(2n) {
        border-right: 0;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dl > div:nth-child(-n + 2) {
        border-bottom: 1px solid #dedbe1;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dt {
        font-size: 34px;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dd {
        margin-top: 12px;
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .kmc-statistics.kmc-statistics--hero_metrics {
        padding: 26px 0;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dl > div {
        min-height: 98px;
        padding: 16px 14px;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dt {
        font-size: 29px;
    }

    .kmc-statistics.kmc-statistics--hero_metrics dd {
        margin-top: 10px;
        font-size: 13px;
    }
}

.kmc-contact-panel {
    background: var(--tatoa-surface);
}

.kmc-contact-panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: 9%;
}

.kmc-contact-panel .kmc-button {
    margin-top: 30px;
}

.kmc-contact-panel dl {
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-contact-panel dl > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 24px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-contact-panel dt {
    color: var(--tatoa-muted);
    font-size: 12px;
    font-weight: 700;
}

.kmc-contact-panel dd {
    overflow-wrap: anywhere;
    color: var(--tatoa-primary-dark);
    font-weight: 650;
}

.kmc-form-cta {
    padding: 68px 0;
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
}

.kmc-form-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.kmc-form-cta-inner > div {
    min-width: 0;
}

.kmc-form-cta span {
    color: var(--tatoa-accent);
    font-size: 11px;
    font-weight: 700;
}

.kmc-form-cta h2 {
    margin-top: 6px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.3;
}

.kmc-form-cta p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.7);
}

/* Inner pages */
.kmc-page-hero {
    position: relative;
    display: grid;
    min-height: 350px;
    overflow: hidden;
    background: var(--tatoa-primary-dark);
    color: var(--tatoa-white);
}

.kmc-page-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.kmc-page-hero::after {
    position: absolute;
    inset: 0;
    background: rgba(40, 9, 91, 0.48);
    content: "";
}

.kmc-page-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 350px;
    padding-top: 80px;
    padding-bottom: 58px;
}

.kmc-page-hero span {
    color: var(--tatoa-accent);
    font-size: 12px;
    font-weight: 700;
}

.kmc-page-hero h1 {
    margin-top: 10px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.25;
}

.kmc-breadcrumb-band {
    border-bottom: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
}

.kmc-breadcrumb {
    display: flex;
    align-items: center;
    min-height: 54px;
    overflow-x: auto;
    color: var(--tatoa-muted);
    font-size: 12px;
    white-space: nowrap;
}

.kmc-breadcrumb a:hover {
    color: var(--tatoa-primary);
}

.kmc-breadcrumb i {
    width: 1px;
    height: 12px;
    margin: 0 14px;
    background: var(--tatoa-border);
}

.kmc-subnav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 22px 0;
    scrollbar-width: thin;
}

.kmc-subnav a {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
    color: var(--tatoa-muted);
    font-size: 13px;
}

.kmc-subnav a:hover,
.kmc-subnav a.is-active {
    border-color: var(--tatoa-primary);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
}

.kmc-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 70px;
}

.kmc-page-layout--single {
    display: block;
    max-width: 1040px;
}

/* The resources directory spans the desktop page rail shown in the reference. */
@media (min-width: 1241px) {
    .kmc-page-layout--resources {
        width: calc(100% - 64px);
        max-width: none;
    }

    .kmc-page-layout--resources .kmc-partner-grid > a,
    .kmc-page-layout--resources .kmc-partner-grid > div {
        min-height: 180px;
        padding: 30px;
    }

    .kmc-page-layout--resources .kmc-partner-grid img {
        max-width: 265px;
        height: 110px;
    }

    .kmc-page-layout--resources .kmc-partner-grid span {
        margin-top: 16px;
        font-size: 14px;
    }
}

.kmc-page-sidebar {
    align-self: start;
    position: sticky;
    top: 90px;
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-page-sidebar h2 {
    padding: 22px 2px;
    border-bottom: 1px solid var(--tatoa-border);
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
}

.kmc-page-sidebar a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--tatoa-border);
    color: var(--tatoa-muted);
    font-size: 13px;
}

.kmc-page-sidebar a:hover,
.kmc-page-sidebar a.is-active {
    color: var(--tatoa-primary);
}

.kmc-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 28px;
}

.kmc-list-card {
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-list-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--tatoa-surface);
}

.kmc-list-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.kmc-list-card-copy {
    min-height: 170px;
    padding: 22px 1px 24px;
}

.kmc-list-card-copy > span,
.kmc-list-card-copy time {
    color: var(--tatoa-accent);
    font-size: 11px;
}

.kmc-list-card h2,
.kmc-list-card h3 {
    margin-top: 6px;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

.kmc-list-card p {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    color: var(--tatoa-muted);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.kmc-list-card:hover img {
    transform: scale(1.03);
}

.kmc-empty {
    min-height: 280px;
    padding: 70px 30px;
    border-top: 2px solid var(--tatoa-primary);
    border-bottom: 1px solid var(--tatoa-border);
    text-align: center;
}

.kmc-empty h2 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 25px;
    font-weight: 600;
}

.kmc-empty p {
    margin-top: 12px;
    color: var(--tatoa-muted);
}

.kmc-pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 52px;
}

.kmc-pagination a,
.kmc-pagination span,
.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--tatoa-border);
    color: var(--tatoa-muted);
    font-size: 12px;
}

.kmc-pagination .active,
.pagination .active span,
.pagination a:hover {
    border-color: var(--tatoa-primary);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
}

.kmc-article {
    max-width: 980px;
    margin-inline: auto;
}

.kmc-article-header {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--tatoa-border);
    text-align: center;
}

.kmc-article-header h1 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: balance;
}

.kmc-article-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    color: var(--tatoa-muted);
    font-size: 12px;
}

.kmc-article-cover {
    width: 100%;
    max-height: 650px;
    margin-top: 38px;
    object-fit: cover;
}

.kmc-article-body {
    margin-top: 42px;
    color: var(--tatoa-ink-soft);
    font-size: 16px;
    line-height: 2;
    overflow-wrap: anywhere;
}

.kmc-article-body > * + * {
    margin-top: 18px;
}

.kmc-article-body img,
.kmc-article-body video,
.kmc-article-body iframe {
    max-width: 100%;
    margin: 32px auto;
}

.kmc-article-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 62px;
    background: var(--tatoa-border);
    border: 1px solid var(--tatoa-border);
}

.kmc-article-nav a,
.kmc-article-nav span {
    min-height: 96px;
    padding: 22px;
    background: var(--tatoa-white);
    color: var(--tatoa-muted);
    font-size: 13px;
}

.kmc-article-nav strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--tatoa-primary-dark);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kmc-article-nav > :last-child {
    text-align: right;
}

.kmc-detail-panel {
    margin-top: 58px;
    padding-top: 30px;
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-detail-panel > h2 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 26px;
    font-weight: 600;
}

.kmc-detail-panel > .kmc-article-body {
    margin-top: 20px;
}

.kmc-download-list {
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-download-list > a {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    min-height: 76px;
    padding: 16px 46px 16px 4px;
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-download-list > a::after {
    position: absolute;
    right: 8px;
    color: var(--tatoa-accent);
    content: "\2193";
    font-size: 20px;
}

.kmc-download-list strong {
    color: var(--tatoa-primary-dark);
    font-size: 14px;
}

.kmc-download-list span {
    color: var(--tatoa-muted);
    font-size: 11px;
}

.kmc-accordion {
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-accordion section {
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-accordion section > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    padding: 15px 4px;
    background: transparent;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

.kmc-accordion section > button i {
    flex: 0 0 auto;
    margin-left: 20px;
    color: var(--tatoa-accent);
    font-family: sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
}

.kmc-accordion section > div {
    padding: 0 4px 28px;
}

.kmc-accordion .kmc-article-body {
    margin-top: 0;
    font-size: 14px;
}

.kmc-contact-fallback {
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-contact-fallback > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-contact-fallback dt {
    color: var(--tatoa-muted);
    font-size: 12px;
    font-weight: 700;
}

.kmc-contact-fallback dd {
    overflow-wrap: anywhere;
    color: var(--tatoa-primary-dark);
    font-weight: 650;
}

.kmc-search-page {
    background: var(--tatoa-surface);
}

.kmc-search-form {
    max-width: 820px;
    margin-inline: auto;
}

.kmc-search-form > label {
    display: block;
    margin-bottom: 14px;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

.kmc-search-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px;
    padding: 7px;
    border: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
    box-shadow: var(--tatoa-shadow);
}

.kmc-search-form input {
    min-width: 0;
    height: 50px;
    padding: 0 16px;
    border: 0;
    background: transparent;
}

.kmc-search-filter {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    margin-top: 40px;
    overflow-x: auto;
}

.kmc-search-filter a {
    flex: 0 0 auto;
    min-width: 116px;
    min-height: 43px;
    padding: 10px 16px;
    border: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
    color: var(--tatoa-muted);
    font-size: 12px;
    text-align: center;
}

.kmc-search-filter a span {
    margin-left: 5px;
    color: var(--tatoa-accent);
}

.kmc-search-filter a:hover,
.kmc-search-filter a.is-active {
    border-color: var(--tatoa-primary);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
}

.kmc-search-results {
    margin-top: 48px;
    border-top: 2px solid var(--tatoa-primary);
}

.kmc-search-result {
    border-bottom: 1px solid var(--tatoa-border);
}

.kmc-search-result a {
    position: relative;
    display: block;
    min-height: 142px;
    padding: 24px 68px 24px 4px;
}

.kmc-search-result span {
    color: var(--tatoa-accent);
    font-size: 11px;
    font-weight: 700;
}

.kmc-search-result h2 {
    margin-top: 5px;
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
}

.kmc-search-result p {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: var(--tatoa-muted);
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.kmc-search-result i {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--tatoa-accent);
    font-size: 22px;
    font-style: normal;
    transform: translateY(-50%);
}

/* Dynamic forms */
.kmc-form-page {
    background: var(--tatoa-surface);
}

.kmc-form-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: 7%;
    align-items: start;
}

.kmc-form-intro {
    position: sticky;
    top: 90px;
}

.kmc-form-intro h1 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.3;
}

.kmc-form-intro p {
    margin-top: 20px;
    color: var(--tatoa-muted);
}

.kmc-dynamic-form {
    padding: 44px;
    border-top: 3px solid var(--tatoa-primary);
    background: var(--tatoa-white);
    box-shadow: var(--tatoa-shadow);
}

.kmc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 22px;
}

.kmc-form-field {
    min-width: 0;
}

.kmc-form-field--wide,
.kmc-form-field--textarea,
.kmc-form-field--checkbox,
.kmc-form-field--radio,
.kmc-form-field--file,
.kmc-form-field--agreement {
    grid-column: 1 / -1;
}

.kmc-form-field label,
.kmc-form-legend {
    display: block;
    margin-bottom: 8px;
    color: var(--tatoa-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.kmc-required {
    margin-left: 4px;
    color: var(--tatoa-danger);
}

.kmc-form-field input[type="text"],
.kmc-form-field input[type="tel"],
.kmc-form-field input[type="email"],
.kmc-form-field input[type="number"],
.kmc-form-field input[type="file"],
.kmc-form-field select,
.kmc-form-field textarea,
.kmc-captcha-row input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--tatoa-border);
    border-radius: 2px;
    background: var(--tatoa-white);
    transition: border-color var(--tatoa-transition), box-shadow var(--tatoa-transition);
}

.kmc-form-field textarea {
    min-height: 145px;
    resize: vertical;
}

.kmc-form-field input:focus,
.kmc-form-field select:focus,
.kmc-form-field textarea:focus,
.kmc-captcha-row input:focus {
    border-color: var(--tatoa-accent);
    box-shadow: 0 0 0 3px rgba(94, 55, 157, 0.16);
    outline: 0;
}

.kmc-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.kmc-choice-list label,
.kmc-agreement-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: var(--tatoa-ink-soft);
    font-weight: 400;
}

.kmc-choice-list input,
.kmc-agreement-label input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--tatoa-primary);
}

.kmc-form-help {
    margin-top: 6px;
    color: var(--tatoa-muted);
    font-size: 11px;
}

.kmc-field-error {
    min-height: 18px;
    margin-top: 5px;
    color: var(--tatoa-danger);
    font-size: 11px;
}

.kmc-form-field.has-error input,
.kmc-form-field.has-error select,
.kmc-form-field.has-error textarea {
    border-color: var(--tatoa-danger);
}

.kmc-captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
}

.kmc-captcha-refresh {
    min-height: 50px;
    padding: 0;
    border: 1px solid var(--tatoa-border);
    background: var(--tatoa-white);
}

.kmc-captcha-refresh img {
    width: 100%;
    height: 48px;
    object-fit: contain;
}

.kmc-form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}

.kmc-form-actions .kmc-button[disabled] {
    cursor: wait;
    opacity: 0.58;
}

.kmc-form-status {
    min-height: 24px;
    color: var(--tatoa-muted);
    font-size: 13px;
}

.kmc-form-status.is-error {
    color: var(--tatoa-danger);
}

.kmc-form-status.is-success {
    color: var(--tatoa-success);
}

.kmc-form-success {
    padding: 58px 34px;
    border-top: 3px solid var(--tatoa-success);
    background: var(--tatoa-white);
    box-shadow: var(--tatoa-shadow);
    text-align: center;
}

.kmc-form-success h2 {
    color: var(--tatoa-primary-dark);
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
}

.kmc-form-success p {
    margin-top: 12px;
    color: var(--tatoa-muted);
}

/* Footer */
.kmc-footer {
    position: relative;
    padding: 78px 0 0;
    background: var(--tatoa-footer);
    color: var(--tatoa-white);
}

.kmc-footer-primary {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2.1fr);
    gap: 7%;
    padding-bottom: 58px;
}

.kmc-footer-brand img {
    max-width: 210px;
    height: 54px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}

.kmc-footer-brand .kmc-brand-wordmark {
    color: var(--tatoa-white);
    font-size: 42px;
}

.kmc-footer-brand h2 {
    margin-top: 20px;
    font-family: "Songti SC", "Noto Serif SC", Georgia, serif;
    font-size: 23px;
    font-weight: 600;
}

.kmc-footer-brand p {
    max-width: 330px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
}

.kmc-footer-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
}

.kmc-footer-heading {
    display: block;
    min-height: 39px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 700;
}

.kmc-footer-column ul {
    padding-top: 13px;
}

.kmc-footer-column li + li {
    margin-top: 7px;
}

.kmc-footer-column li a {
    color: rgba(255, 255, 255, 0.54);
    font-size: 14px;
}

.kmc-footer-column a:hover {
    color: var(--tatoa-accent);
}

.kmc-footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.kmc-footer-qrs {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 32px;
    margin: 0 auto;
}

.kmc-footer-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 72px;
    width: 72px;
    text-align: center;
}

.kmc-footer-qr img {
    display: block;
    margin: 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: var(--tatoa-white);
    object-fit: contain;
    overflow: hidden;
}

.kmc-footer-qr figcaption {
    display: block;
    width: auto;
    align-self: center;
    margin-top: 12px;
    color: var(--tatoa-white);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (min-width: 1241px) {
    .kmc-footer-qrs {
        gap: 50px;
    }

    .kmc-footer-qr {
        flex-basis: 100px;
        width: 100px;
    }

    .kmc-footer-qr figcaption {
        white-space: nowrap;
    }
}

.kmc-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 67px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--tatoa-white);
    font-size: 13px;
}

.kmc-footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.kmc-contact-rail {
    position: fixed;
    right: 18px;
    bottom: 28px;
    z-index: 900;
    display: grid;
    gap: 5px;
}

.kmc-contact-rail a,
.kmc-contact-rail button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
    box-shadow: 0 6px 18px rgba(24, 24, 24, 0.16);
    font-family: Georgia, serif;
    font-size: 13px;
}

.kmc-contact-rail a:hover,
.kmc-contact-rail button:hover {
    background: var(--tatoa-accent);
    color: var(--tatoa-primary-dark);
}

.kmc-to-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--tatoa-transition), transform var(--tatoa-transition), background var(--tatoa-transition), color var(--tatoa-transition);
}

.kmc-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Utility states */
.kmc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms ease, transform 560ms ease;
}

.kmc-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .kmc-reveal {
        opacity: 1;
        transform: none;
    }
}

/* Configurable expert profile carousel. */
.kmc-expert-carousel {
    --kmc-expert-transition-ms: 150ms;
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: radial-gradient(circle at center, #ffffff 0%, #eef1f5 100%);
}

.kmc-expert-carousel > .kmc-shell {
    width: min(1375px, calc(100% - 64px));
    max-width: none;
}

.kmc-expert-carousel-layout {
    display: flex;
    align-items: flex-end;
    gap: clamp(60px, 4.64vw, 95px);
    width: 100%;
    max-width: 1375px;
    min-width: 0;
    min-height: clamp(547px, 30.5vw, 625px);
    margin: 0 auto;
}

.kmc-expert-carousel-media {
    position: relative;
    display: grid;
    align-self: flex-end;
    flex: 0 0 clamp(433px, 38vw, 500px);
    width: clamp(433px, 38vw, 500px);
    height: auto;
    aspect-ratio: 4 / 5;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.kmc-expert-carousel-image {
    position: relative;
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 14px;
    transition: opacity var(--kmc-expert-transition-ms) ease;
}

.kmc-expert-carousel-image.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kmc-expert-carousel-image-backdrop,
.kmc-expert-carousel-image-foreground {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.kmc-expert-carousel-image-backdrop {
    transform: scale(1.08);
    filter: blur(16px);
}

.kmc-expert-carousel-image-foreground {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kmc-expert-carousel-image-backdrop img,
.kmc-expert-carousel-image-foreground img {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
}

.kmc-expert-carousel-image-backdrop img {
    object-fit: cover;
}

.kmc-expert-carousel-image-foreground img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 2%, #000000 6%, #000000 94%, rgba(0, 0, 0, 0.35) 98%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 2%, #000000 6%, #000000 94%, rgba(0, 0, 0, 0.35) 98%, transparent 100%);
}

.kmc-expert-edge-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

.kmc-expert-carousel-image.is-edge-extended .kmc-expert-carousel-image-backdrop,
.kmc-expert-carousel-image.is-edge-extended .kmc-expert-carousel-image-foreground,
.kmc-expert-carousel-thumb.is-edge-extended .kmc-expert-carousel-thumb-backdrop,
.kmc-expert-carousel-thumb.is-edge-extended .kmc-expert-carousel-thumb-foreground {
    opacity: 0;
}

.kmc-expert-carousel-detail {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: clamp(547px, 30.5vw, 625px);
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}

.kmc-expert-carousel-text-box {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 200px;
    margin-bottom: 20px;
}

.kmc-expert-carousel-slide {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--kmc-expert-transition-ms) ease;
}

.kmc-expert-carousel-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.kmc-expert-carousel-slide:not(.is-active) {
    height: 0;
    overflow: hidden;
}

.kmc-expert-carousel-slide h3 {
    max-width: 100%;
    margin-bottom: 12px;
    color: #333333;
    font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

.kmc-expert-carousel-role {
    display: block;
    max-width: 100%;
    margin-bottom: 25px;
    color: #d4b26a;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

/* Keep all expert roles at the same emphasized desktop size. */
@media (min-width: 769px) {
    .kmc-expert-carousel-role {
        font-size: 26px;
    }
}

.kmc-expert-carousel-bio {
    max-width: 620px;
    margin: 0;
    color: #888888;
    font-size: 13px;
    line-height: 2;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.kmc-expert-carousel-content {
    max-width: 620px;
    max-height: 210px;
    margin-top: 18px;
    padding-right: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #777777;
    font-size: 13px;
    line-height: 1.8;
    text-align: left;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: rgba(94, 55, 157, 0.35) transparent;
}

.kmc-expert-carousel-content > :first-child {
    margin-top: 0;
}

.kmc-expert-carousel-content > :last-child {
    margin-bottom: 0;
}

.kmc-expert-carousel-content ul,
.kmc-expert-carousel-content ol {
    padding-left: 1.4em;
}

.kmc-expert-carousel-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.kmc-expert-carousel-controls button {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dddddd;
    border-radius: 50%;
    background: var(--tatoa-white);
    color: #999999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s;
}

.kmc-expert-carousel-controls button:hover {
    border-color: var(--tatoa-primary);
    background: var(--tatoa-primary);
    color: var(--tatoa-white);
}

.kmc-expert-carousel-controls button:focus-visible {
    outline: 2px solid var(--tatoa-primary);
    outline-offset: 2px;
}

.kmc-expert-carousel-thumbs {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: clamp(20px, 1.8vw, 37px);
    min-width: 0;
}

@media (min-width: 1057px) {
    .kmc-expert-carousel-detail {
        flex: 0 0 min(771px, calc(100vw - 678px));
    }

    .kmc-expert-carousel-thumbs {
        flex: 0 0 auto;
        width: min(771px, calc(100vw - 678px));
        max-width: 100%;
    }
}

.kmc-expert-carousel-thumb {
    position: relative;
    display: block;
    flex: 1 1 0;
    width: auto;
    height: auto;
    aspect-ratio: 114 / 127;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    opacity: 0.5;
    transform: translateY(0);
    overflow: hidden;
    transition: opacity var(--tatoa-transition), border-color var(--tatoa-transition), box-shadow var(--tatoa-transition), transform var(--tatoa-transition);
}

.kmc-expert-carousel-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: transparent;
}

.kmc-expert-carousel-thumb-backdrop {
    object-fit: cover;
    transform: scale(1.12);
    filter: blur(8px);
}

.kmc-expert-carousel-thumb-foreground {
    z-index: 1;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 7%, #000000 17%, #000000 83%, rgba(0, 0, 0, 0.3) 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 7%, #000000 17%, #000000 83%, rgba(0, 0, 0, 0.3) 93%, transparent 100%);
}

.kmc-expert-carousel-thumb:hover,
.kmc-expert-carousel-thumb:focus-visible,
.kmc-expert-carousel-thumb.is-active {
    border-color: var(--tatoa-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    opacity: 1;
}

.kmc-expert-carousel-thumb.is-active {
    transform: none;
}

.kmc-expert-carousel[data-show-controls="0"] .kmc-expert-carousel-controls,
.kmc-expert-carousel[data-show-controls="false"] .kmc-expert-carousel-controls,
.kmc-expert-carousel[data-show-controls="off"] .kmc-expert-carousel-controls,
.kmc-expert-carousel[data-show-controls="no"] .kmc-expert-carousel-controls {
    display: none;
}

.kmc-expert-carousel[data-show-thumbnails="0"] .kmc-expert-carousel-thumbs,
.kmc-expert-carousel[data-show-thumbnails="false"] .kmc-expert-carousel-thumbs,
.kmc-expert-carousel[data-show-thumbnails="off"] .kmc-expert-carousel-thumbs,
.kmc-expert-carousel[data-show-thumbnails="no"] .kmc-expert-carousel-thumbs {
    display: none;
}

.kmc-expert-carousel-empty {
    min-height: 220px;
    color: var(--tatoa-muted);
    text-align: center;
}

/* 仅隐藏架构页流程列表中自动生成的 06、07、09 编号。 */
.kmc-timeline--architecture .kmc-richtext .story-flow > li:nth-child(6)::before,
.kmc-timeline--architecture .kmc-richtext .story-flow > li:nth-child(7)::before,
.kmc-timeline--architecture .kmc-richtext .story-flow > li:nth-child(9)::before {
    display: none;
}

/* 仅隐藏品牌故事页流程列表中自动生成的 07 编号。 */
.kmc-timeline--brand-story:not(.kmc-timeline--architecture) .kmc-richtext .story-flow > li:nth-child(7)::before {
    display: none;
}

/* 桌面端品牌故事的所有章节标签统一保持单行。 */
@media (min-width: 769px) {
    .kmc-timeline--brand-story:not(.kmc-timeline--architecture) .kmc-timeline > li > time {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kmc-expert-carousel-slide,
    .kmc-expert-carousel-controls button,
    .kmc-expert-carousel-thumb {
        transition-duration: 0.01ms !important;
    }
}