/* --- MK About Brand: Design Tokens & System Mapping --- */
:root {
    --mk-color-primary: #2596be;
    --mk-color-surface: #ffffff;
    --mk-color-on-surface: #0b1c30;
    --mk-color-secondary: #565e74;
    --mk-color-outline: #bec8cf;
    --mk-font-main: 'Inter', sans-serif;
}

.mk-page-about-brand {
    background-color: var(--mk-color-surface);
    color: var(--mk-color-on-surface);
    font-family: var(--mk-font-main);
}

/* Hero Section */
.mk-hero-about { padding: clamp(4rem, 10vw, 10rem) 1rem; text-align: center; }
.mk-hero-about__logo img { max-width: 25rem; height: auto; margin: 0 auto; }
.mk-hero-about__content { max-width: 50rem; margin: 3rem auto 0; }
.mk-hero-about__text { 
    font-size: 1.25rem; 
    line-height: 1.6; 
    color: var(--mk-color-on-surface); 
    margin-bottom: 2rem; 
}
.mk-hero-about__text .mk-text-brand { color: var(--mk-color-primary); font-weight: 600; }
.mk-hero-about__signature { 
    margin-top: 3rem; 
    padding-top: 2.5rem; 
    border-top: 1px solid rgba(190, 200, 207, 0.3); 
    display: inline-block; 
}
.mk-hero-about__name { font-size: 1.25rem; font-weight: 600; color: var(--mk-color-primary); margin-bottom: 0.25rem; }
.mk-hero-about__role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--mk-color-secondary); }

/* Values Section */
.mk-values { padding: 4rem 1rem; }
.mk-values__grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); 
    gap: 3rem; 
    max-width: 80rem; 
    margin: 0 auto; 
}
.mk-values__item { text-align: center; }
.mk-values__icon { font-size: 2.5rem; color: var(--mk-color-primary); margin-bottom: 1.5rem; display: block; }
.mk-values__title { 
    font-size: 1.125rem; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    font-weight: 600; 
    margin-bottom: 1rem; 
}
.mk-values__desc { font-size: 0.875rem; color: rgba(11, 28, 48, 0.6); max-width: 17.5rem; margin: 0 auto; }