@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');

.kame-about-us,
.kame-about-us * {
    box-sizing: border-box;
}

.kame-about-us {
    position: relative;
    overflow: hidden;
    padding: var(--kame-about-pt) 24px var(--kame-about-pb);
    background: radial-gradient(circle at 12% 10%, rgba(217,183,120,.12), transparent 34%), radial-gradient(circle at 86% 25%, rgba(94,137,156,.12), transparent 36%), var(--kame-about-bg);
    color: var(--kame-about-text);
    font-family: var(--kame-about-font), Montserrat, Arial, sans-serif;
    isolation: isolate;
}

.kame-about--stretch-row,
.kame-about--stretch-row_content,
.kame-about--stretch-full_bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.kame-about--stretch-row .kame-about__inner,
.kame-about--stretch-row .kame-about__facts,
.kame-about--stretch-row .kame-about__values,
.kame-about--stretch-row .kame-about__timeline {
    max-width: var(--kame-about-max);
}

.kame-about--stretch-row_content .kame-about__inner,
.kame-about--stretch-row_content .kame-about__facts,
.kame-about--stretch-row_content .kame-about__values,
.kame-about--stretch-row_content .kame-about__timeline,
.kame-about--stretch-full_bleed .kame-about__inner,
.kame-about--stretch-full_bleed .kame-about__facts,
.kame-about--stretch-full_bleed .kame-about__values,
.kame-about--stretch-full_bleed .kame-about__timeline {
    max-width: min(1560px, calc(100vw - 48px));
}

.kame-about__bg,
.kame-about__shade {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.kame-about__bg {
    background-size: cover;
    background-position: center;
    opacity: .36;
    filter: saturate(.85) contrast(1.06);
}

.kame-about__shade {
    z-index: -1;
    background: linear-gradient(90deg, rgba(7,16,21,var(--kame-about-overlay)) 0%, rgba(7,16,21,.84) 42%, rgba(7,16,21,.68) 100%);
}

.kame-about__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--kame-about-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
    gap: clamp(34px, 6vw, 86px);
    align-items: center;
}

.kame-about--image-left .kame-about__media {
    order: -1;
}

.kame-about--image-left .kame-about__content {
    order: 2;
}

.kame-about__media {
    position: relative;
    min-height: 440px;
}

.kame-about__image {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--kame-about-image-radius);
    border: 1px solid var(--kame-about-border);
    background: rgba(255,255,255,.04);
    box-shadow: 0 28px 90px rgba(0,0,0,.46);
}

.kame-about__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0,0,0,.42));
    pointer-events: none;
}

.kame-about__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.72,.19,1), filter .7s ease;
}

.kame-about__image--main {
    width: 88%;
    height: 520px;
    margin-left: auto;
}

.kame-about__image--second {
    position: absolute;
    left: 0;
    bottom: -42px;
    width: 44%;
    height: 240px;
    z-index: 3;
}

.kame-about__image--placeholder {
    height: 520px;
    display: grid;
    place-items: center;
}

.kame-about__placeholder {
    letter-spacing: .28em;
    color: var(--kame-about-accent);
    opacity: .78;
    font-size: 12px;
    font-weight: 700;
}

.kame-about__badge {
    position: absolute;
    right: 18px;
    bottom: 20px;
    z-index: 5;
    padding: 12px 16px;
    border: 1px solid var(--kame-about-border);
    border-radius: 999px;
    color: var(--kame-about-accent);
    background: rgba(7,16,21,.76);
    backdrop-filter: blur(14px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.kame-about__content {
    position: relative;
    z-index: 2;
}

.kame-about--align-center .kame-about__content,
.kame-about--align-center .kame-about__description,
.kame-about--align-center .kame-about__subtitle {
    text-align: center;
}

.kame-about--align-center .kame-about__line,
.kame-about--align-center .kame-about__actions {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.kame-about--align-right .kame-about__content,
.kame-about--align-right .kame-about__description,
.kame-about--align-right .kame-about__subtitle {
    text-align: right;
}

.kame-about--align-right .kame-about__line,
.kame-about--align-right .kame-about__actions {
    margin-left: auto;
    justify-content: flex-end;
}

.kame-about__eyebrow {
    margin-bottom: 18px;
    color: var(--kame-about-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.kame-about__title {
    margin: 0;
    color: var(--kame-about-text);
    font-family: var(--kame-about-font), Montserrat, Arial, sans-serif;
    font-size: var(--kame-about-title);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 700;
}

.kame-about__line {
    width: 92px;
    height: 1px;
    margin: 28px 0;
    background: linear-gradient(90deg, var(--kame-about-accent), transparent);
}

.kame-about__subtitle {
    max-width: 760px;
    margin: 0 0 18px;
    color: var(--kame-about-text);
    font-size: var(--kame-about-subtitle);
    line-height: 1.54;
    font-weight: 500;
    opacity: .92;
}

.kame-about__description {
    max-width: 760px;
    color: var(--kame-about-muted);
    font-size: var(--kame-about-body);
    line-height: 1.86;
    font-weight: 400;
}

.kame-about__description p {
    margin: 0 0 16px;
}

.kame-about__quote {
    margin: 28px 0 0;
    padding: 22px 24px;
    border-left: 2px solid var(--kame-about-accent);
    border-radius: 0 var(--kame-about-radius) var(--kame-about-radius) 0;
    background: var(--kame-about-card);
    color: var(--kame-about-muted);
}

.kame-about__quote p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.75;
}

.kame-about__quote cite {
    display: block;
    color: var(--kame-about-accent);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.kame-about__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.kame-about__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform .35s ease, border-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}

.kame-about__btn--gold_solid {
    background: linear-gradient(135deg, #f0d49b, var(--kame-about-accent));
    color: #071015 !important;
    box-shadow: 0 16px 40px rgba(217,183,120,.22);
}

.kame-about__btn--gold_outline {
    border: 1px solid var(--kame-about-border);
    color: var(--kame-about-accent) !important;
    background: rgba(255,255,255,.02);
}

.kame-about__btn--glass {
    border: 1px solid rgba(255,255,255,.14);
    color: var(--kame-about-text) !important;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
}

.kame-about__btn--text_arrow {
    padding-left: 0;
    padding-right: 0;
    color: var(--kame-about-accent) !important;
    background: transparent;
}

.kame-about__btn--text_arrow::after {
    content: "→";
    margin-left: 10px;
}

.kame-about__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 54px rgba(0,0,0,.35), 0 0 36px rgba(217,183,120,.16);
}

.kame-about__facts,
.kame-about__values,
.kame-about__timeline {
    width: 100%;
    max-width: var(--kame-about-max);
    margin: clamp(52px, 7vw, 86px) auto 0;
    position: relative;
    z-index: 2;
}

.kame-about__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kame-about__fact,
.kame-about__value,
.kame-about__step {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--kame-about-border);
    border-radius: var(--kame-about-radius);
    background: var(--kame-about-card);
    backdrop-filter: blur(16px);
    transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease, background .45s ease;
}

.kame-about__fact::before,
.kame-about__value::before,
.kame-about__step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kame-about-accent), transparent);
    opacity: .55;
}

.kame-about__fact {
    padding: 28px;
}

.kame-about__fact-icon,
.kame-about__value-icon {
    color: var(--kame-about-accent);
    font-size: 18px;
    line-height: 1;
    margin-bottom: 16px;
}

.kame-about__fact-number {
    color: var(--kame-about-text);
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1;
}

.kame-about__fact h3,
.kame-about__value h3,
.kame-about__step h3 {
    margin: 12px 0 8px;
    color: var(--kame-about-text);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
}

.kame-about__fact p,
.kame-about__value p,
.kame-about__step p {
    margin: 0;
    color: var(--kame-about-muted);
    font-size: 14px;
    line-height: 1.72;
}

.kame-about__values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kame-about__value {
    padding: 30px;
}

.kame-about__value-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--kame-about-border);
    background: rgba(217,183,120,.08);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.kame-about__timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.kame-about__step {
    padding: 32px;
}

.kame-about__step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--kame-about-border);
    color: var(--kame-about-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}

.kame-about--hover-zoom_lift .kame-about__image:hover img,
.kame-about--hover-zoom_lift .kame-about__media:hover .kame-about__image--main img {
    transform: scale(1.055);
}

.kame-about--hover-grayscale .kame-about__image img {
    filter: grayscale(1) contrast(1.08);
}

.kame-about--hover-grayscale .kame-about__image:hover img,
.kame-about--hover-grayscale .kame-about__media:hover img {
    filter: grayscale(0) contrast(1.05);
}

.kame-about--hover-shine .kame-about__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -85%;
    z-index: 2;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg);
    transition: left .72s ease;
}

.kame-about--hover-shine .kame-about__image:hover::before,
.kame-about--hover-shine .kame-about__media:hover .kame-about__image::before {
    left: 135%;
}

.kame-about--hover-glow .kame-about__fact:hover,
.kame-about--hover-glow .kame-about__value:hover,
.kame-about--hover-glow .kame-about__step:hover,
.kame-about--hover-zoom_lift .kame-about__fact:hover,
.kame-about--hover-zoom_lift .kame-about__value:hover,
.kame-about--hover-zoom_lift .kame-about__step:hover {
    transform: translateY(-7px);
    border-color: rgba(217,183,120,.58);
    box-shadow: 0 26px 70px rgba(0,0,0,.36), 0 0 44px rgba(217,183,120,.12);
}

/* Layout variations */
.kame-about--editorial_dark .kame-about__inner {
    grid-template-columns: .95fr 1.05fr;
    align-items: end;
}

.kame-about--editorial_dark .kame-about__content {
    padding: clamp(30px, 5vw, 60px);
    border: 1px solid var(--kame-about-border);
    border-radius: var(--kame-about-radius);
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
}

.kame-about--image_stack .kame-about__media {
    min-height: 560px;
}

.kame-about--image_stack .kame-about__image--main {
    width: 74%;
    height: 470px;
}

.kame-about--image_stack .kame-about__image--second {
    width: 52%;
    height: 300px;
    bottom: 0;
}

.kame-about--story_timeline .kame-about__timeline,
.kame-about--values_grid .kame-about__values {
    margin-top: 46px;
}

.kame-about--story_timeline .kame-about__facts,
.kame-about--story_timeline .kame-about__values,
.kame-about--values_grid .kame-about__facts,
.kame-about--values_grid .kame-about__timeline {
    display: none;
}

.kame-about--founder_note .kame-about__quote {
    padding: 32px;
    border-left-width: 0;
    border-top: 2px solid var(--kame-about-accent);
    border-radius: var(--kame-about-radius);
}

.kame-about--full_bleed {
    min-height: 78vh;
    display: flex;
    align-items: center;
}

.kame-about--full_bleed .kame-about__inner {
    grid-template-columns: minmax(0, 760px);
}

.kame-about--full_bleed .kame-about__media {
    display: none;
}

.kame-about--full_bleed .kame-about__content {
    padding: clamp(34px, 6vw, 70px);
    border: 1px solid var(--kame-about-border);
    border-radius: var(--kame-about-radius);
    background: rgba(7,16,21,.58);
    backdrop-filter: blur(18px);
}

.kame-about--full_bleed .kame-about__facts,
.kame-about--full_bleed .kame-about__values,
.kame-about--full_bleed .kame-about__timeline {
    display: none;
}

/* Reveal animations */
.kame-about-us [data-kame-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.72,.19,1), filter .8s ease, clip-path .9s ease;
}

.kame-about-us.is-visible [data-kame-reveal],
.kame-about-us [data-kame-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
}

.kame-about--anim-none [data-kame-reveal] {
    opacity: 1;
    transform: none;
}

.kame-about--anim-zoom_in [data-kame-reveal] {
    transform: scale(.96);
}

.kame-about--anim-blur_reveal [data-kame-reveal] {
    filter: blur(14px);
}

.kame-about--anim-luxury_mask [data-kame-reveal] {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .kame-about-us {
        padding-left: 20px;
        padding-right: 20px;
    }

    .kame-about__inner {
        grid-template-columns: 1fr;
    }

    .kame-about--image-left .kame-about__media,
    .kame-about--image-left .kame-about__content {
        order: initial;
    }

    .kame-about__title {
        font-size: var(--kame-about-title-tablet);
    }

    .kame-about__media {
        min-height: auto;
    }

    .kame-about__image--main {
        width: 100%;
        height: 460px;
    }

    .kame-about__image--second {
        width: 42%;
        height: 210px;
        bottom: -30px;
        left: 20px;
    }

    .kame-about__facts,
    .kame-about__values,
    .kame-about__timeline {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .kame-about-us {
        padding-left: 16px;
        padding-right: 16px;
    }

    .kame-about__title {
        font-size: var(--kame-about-title-mobile);
        letter-spacing: -.035em;
    }

    .kame-about__subtitle {
        font-size: calc(var(--kame-about-subtitle) * .86);
    }

    .kame-about__image--main {
        height: 360px;
    }

    .kame-about__image--second {
        position: relative;
        width: 72%;
        height: 210px;
        bottom: auto;
        left: auto;
        margin-top: 16px;
    }

    .kame-about__badge {
        left: 14px;
        right: auto;
        bottom: 14px;
        max-width: calc(100% - 28px);
    }

    .kame-about__facts,
    .kame-about__values,
    .kame-about__timeline {
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .kame-about__fact,
    .kame-about__value,
    .kame-about__step,
    .kame-about--editorial_dark .kame-about__content,
    .kame-about--full_bleed .kame-about__content {
        padding: 24px;
    }

    .kame-about__actions {
        align-items: stretch;
    }

    .kame-about__btn {
        width: 100%;
    }
}