/**
* Mislens About Us V2
*
* 文件位置：
* /wp-content/themes/mislens-theme-v2/modules/about-mislens/about-mislens.css
*
* 页面结构：
* 01 Hero
* 02 The Mislens Approach
* 03 Mislens in the Market
* 04 The Company Behind Mislens
* 05 Behind the Products
* 06 Work with Mislens
*
* CSS 组织原则：
* - 每个模块包含自身 Desktop / Tablet / Mobile / Small Mobile
* - 避免响应式规则分散在文件不同位置
* - 便于后续按模块整体替换和维护
* - 复用 Mislens 当前站点整体视觉语言
* - 不把 6 个模块做成相同卡片模板
* - 真实图片承担主要品牌与信任证明
* - PC / Tablet / Mobile 完整响应
*/


/* ==========================================================================
00. PAGE BASE
========================================================================== */

.mislens-about {
    --about-container: 1200px;
    --about-text: #171717;
    --about-body: #5f6368;
    --about-muted: #85898f;
    --about-border: #e7e7e7;
    --about-soft: #f7f7f7;
    --about-soft-warm: #faf9f7;
    --about-white: #ffffff;

    width: 100%;
    color: var(--about-text);
    background: var(--about-white);
}

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

.mislens-about img {
    display: block;
    max-width: 100%;
    height: auto;
}

.mislens-about figure {
    margin: 0;
}

.mislens-about p {
    margin-top: 0;
}

.mislens-about a {
    text-decoration: none;
}


/* ==========================================================================
00.1 SHARED TYPOGRAPHY
========================================================================== */

.mislens-about-hero__eyebrow,
.mislens-about-approach__eyebrow,
.mislens-about-market__eyebrow,
.mislens-about-company__eyebrow,
.mislens-about-supply__eyebrow,
.mislens-about-cta__eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--about-muted);
}

.mislens-about-approach__heading,
.mislens-about-market__heading,
.mislens-about-company__heading,
.mislens-about-supply__heading,
.mislens-about-cta__heading {
    margin: 0;
    color: var(--about-text);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 650;
}

.mislens-about-approach__copy,
.mislens-about-market__body,
.mislens-about-company__body,
.mislens-about-supply__body,
.mislens-about-cta__body {
    color: var(--about-body);
    font-size: 16px;
    line-height: 1.8;
}


/* ==========================================================================
00.2 SHARED BUTTONS
========================================================================== */

.mislens-about-hero__button,
.mislens-about-supply__button,
.mislens-about-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 13px 22px;
    border: 1px solid var(--about-text);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 650;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.mislens-about-hero__button,
.mislens-about-cta__button--primary {
    color: #ffffff;
    background: var(--about-text);
}

.mislens-about-supply__button,
.mislens-about-cta__button--secondary {
    color: var(--about-text);
    background: transparent;
}

.mislens-about-hero__button:hover,
.mislens-about-cta__button--primary:hover {
    color: #ffffff;
    background: #333333;
    border-color: #333333;
    transform: translateY(-1px);
}

.mislens-about-supply__button:hover,
.mislens-about-cta__button--secondary:hover {
    color: #ffffff;
    background: var(--about-text);
    transform: translateY(-1px);
}

.mislens-about-hero__button-arrow,
.mislens-about-supply__button-arrow,
.mislens-about-cta__button-arrow {
    font-size: 17px;
    line-height: 1;
}


/* ==========================================================================
01. HERO — DESKTOP
========================================================================== */

.mislens-about-hero {
    position: relative;
    overflow: hidden;
    background: var(--about-soft-warm);
}

.mislens-about-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(50px, 7vw, 100px);
    width: min(
        calc(100% - 48px),
        var(--about-container)
    );
    min-height: 650px;
    margin: 0 auto;
    padding: 100px 0;
}

.mislens-about-hero__content {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.mislens-about-hero__heading {
    margin: 0;
    max-width: 620px;
    color: var(--about-text);
    font-size: clamp(40px, 4.15vw, 59px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 650;
}

.mislens-about .mislens-about-hero__body {
    max-width: 540px;
    margin: 36px 0 0;
    color: var(--about-body);
    font-size: 17px;
    line-height: 1.8;
}

.mislens-about-hero__actions {
    margin-top: 34px;
}

.mislens-about-hero__visual {
    position: relative;
    min-height: 500px;
}

.mislens-about-hero__image {
    width: 100%;
    height: 500px;
    object-fit: contain;
    object-position: center;
}

.mislens-about-hero__visual--empty {
    min-height: 500px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #f1efec 0%,
            #faf9f7 100%
        );
}


/* 01. HERO — TABLET */

@media (max-width: 1024px) {

    .mislens-about-hero__inner {
        gap: 48px;
        min-height: 590px;
    }

    .mislens-about-hero__visual,
    .mislens-about-hero__visual--empty {
        min-height: 430px;
    }

    .mislens-about-hero__image {
        height: 430px;
    }
}


/* 01. HERO — MOBILE */

@media (max-width: 767px) {

    .mislens-about-hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        width: min(
            calc(100% - 32px),
            var(--about-container)
        );
        min-height: 0;
        padding: 54px 0 46px;
    }

    .mislens-about-hero__content {
        max-width: none;
    }

    .mislens-about-hero__heading {
        font-size: clamp(33px, 9.6vw, 43px);
        line-height: 1.05;
    }

    .mislens-about .mislens-about-hero__body {
        margin-top: 30px;
        font-size: 16px;
    }

    .mislens-about-hero__actions {
        margin-top: 28px;
    }

    .mislens-about-hero__visual,
    .mislens-about-hero__visual--empty {
        min-height: 330px;
    }

    .mislens-about-hero__image {
        height: 330px;
    }
}


/* 01. HERO — SMALL MOBILE */

@media (max-width: 480px) {

    .mislens-about-hero__heading {
        font-size: 33px;
    }
}


/* ==========================================================================
02. THE MISLENS APPROACH — DESKTOP
========================================================================== */

.mislens-about-approach {
    padding: 90px 0;
    background: #ffffff;
}

.mislens-about-approach__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(60px, 8vw, 110px);
    width: min(
        calc(100% - 48px),
        var(--about-container)
    );
    margin: 0 auto;
}

.mislens-about-approach__content {
    max-width: 500px;
}

.mislens-about-approach__copy {
    margin-top: 28px;
}

.mislens-about-approach__copy p {
    margin-bottom: 18px;
}

.mislens-about-approach__copy p:last-child {
    margin-bottom: 0;
}

.mislens-about-approach__brand-line {
    margin: 30px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--about-border);
    color: var(--about-text);
    font-size: 22px;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.mislens-about-approach__visual {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 14px;
    min-width: 0;
}

.mislens-about-approach__secondary-media {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-width: 0;
}

.mislens-about-approach__media {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 22px;
    background: var(--about-soft);
}

.mislens-about-approach__media--primary {
    min-height: 590px;
}

.mislens-about-approach__media--detail,
.mislens-about-approach__media--development {
    min-height: 288px;
}

.mislens-about-approach__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mislens-about-approach__media--empty {
    background:
        linear-gradient(
            145deg,
            #eeeeee 0%,
            #f8f8f8 100%
        );
}


/* 02. THE MISLENS APPROACH — TABLET */

@media (max-width: 1024px) {

    .mislens-about-approach__inner {
        gap: 48px;
    }

    .mislens-about-approach__media--primary {
        min-height: 500px;
    }

    .mislens-about-approach__media--detail,
    .mislens-about-approach__media--development {
        min-height: 243px;
    }
}


/* 02. THE MISLENS APPROACH — MOBILE */

@media (max-width: 767px) {

    .mislens-about-approach {
        padding: 80px 0;
    }

    .mislens-about-approach__inner {
        grid-template-columns: 1fr;
        gap: 45px;
        width: min(
            calc(100% - 32px),
            var(--about-container)
        );
    }

    .mislens-about-approach__content {
        max-width: none;
    }

    .mislens-about-approach__heading {
        font-size: clamp(32px, 10vw, 42px);
    }

    .mislens-about-approach__visual {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mislens-about-approach__media--primary {
        min-height: 430px;
    }

    .mislens-about-approach__secondary-media {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        gap: 12px;
    }

    .mislens-about-approach__media--detail,
    .mislens-about-approach__media--development {
        min-height: 220px;
    }
}


/* 02. THE MISLENS APPROACH — SMALL MOBILE */

@media (max-width: 480px) {

    .mislens-about-approach__heading {
        font-size: 34px;
    }

    .mislens-about-approach__secondary-media {
        grid-template-columns: 1fr;
    }

    .mislens-about-approach__media--detail,
    .mislens-about-approach__media--development {
        min-height: 300px;
    }
}


/* ==========================================================================
03. MISLENS IN THE MARKET — DESKTOP
========================================================================== */

.mislens-about-market {
    padding: 110px 0;
    background: var(--about-soft);
}

.mislens-about-market__inner {
    width: min(
        calc(100% - 48px),
        var(--about-container)
    );
    margin: 0 auto;
}

.mislens-about-market__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.75fr);
    gap: 60px;
    align-items: end;
}

.mislens-about-market__eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -30px;
}

.mislens-about-market__body {
    margin: 0;
    max-width: 520px;
}


/* 03.1 PROOFS */

.mislens-about-market__proofs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 65px;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.mislens-about-market-proof {
    min-width: 0;
    padding: 28px 24px;
    border-right: 1px solid #dddddd;
}

.mislens-about-market-proof:first-child {
    padding-left: 0;
}

.mislens-about-market-proof:last-child {
    padding-right: 0;
    border-right: 0;
}

.mislens-about-market-proof__value {
    color: var(--about-text);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    font-weight: 650;
    letter-spacing: -0.035em;
}

.mislens-about-market-proof__label {
    margin-top: 9px;
    color: var(--about-body);
    font-size: 13px;
    line-height: 1.5;
}


/* 03.2 MEDIA */

.mislens-about-market__media {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 42px;
}

.mislens-about-market__media-item {
    position: relative;
    flex: 0 1 auto;
    height: 390px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 20px;
    background: #ffffff;
}

.mislens-about-market__media-item--1 {
    width: auto;
    aspect-ratio: 800 / 604;
}

.mislens-about-market__media-item--2,
.mislens-about-market__media-item--3 {
    width: auto;
    aspect-ratio: 607 / 754;
}

.mislens-about-market__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mislens-about-market__media-item--empty {
    background:
        linear-gradient(
            145deg,
            #e9e9e9 0%,
            #f4f4f4 100%
        );
}

.mislens-about-market__note {
    margin: 14px 0 0;
    color: var(--about-muted);
    font-size: 12px;
    line-height: 1.6;
}


/* 03. MISLENS IN THE MARKET — TABLET */

@media (max-width: 1024px) {

    .mislens-about-market__header {
        gap: 40px;
    }

    .mislens-about-market__proofs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mislens-about-market-proof {
        border-bottom: 1px solid #dddddd;
    }

    .mislens-about-market-proof:nth-child(2) {
        border-right: 0;
    }

    .mislens-about-market-proof:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .mislens-about-market-proof:nth-child(3) {
        padding-left: 0;
    }

    .mislens-about-market__media {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .mislens-about-market__media-item {
        width: 100%;
        height: auto;
    }

    .mislens-about-market__media-item--1 {
        grid-column: 1 / -1;
        aspect-ratio: 800 / 604;
    }

    .mislens-about-market__media-item--2,
    .mislens-about-market__media-item--3 {
        aspect-ratio: 607 / 754;
    }
}


/* 03. MISLENS IN THE MARKET — MOBILE */

@media (max-width: 767px) {

    .mislens-about-market {
        padding: 80px 0 72px;
    }

    .mislens-about-market__inner {
        width: min(
            calc(100% - 32px),
            var(--about-container)
        );
    }

    .mislens-about-market__header {
        display: block;
    }

    .mislens-about-market__eyebrow {
        margin-bottom: 18px;
    }

    .mislens-about-market__heading {
        font-size: clamp(32px, 10vw, 42px);
    }

    .mislens-about-market__body {
        margin-top: 24px;
    }

    .mislens-about-market__proofs {
        grid-template-columns: 1fr 1fr;
        margin-top: 45px;
    }

    .mislens-about-market-proof {
        padding: 22px 16px;
    }

    .mislens-about-market-proof:first-child,
    .mislens-about-market-proof:nth-child(3) {
        padding-left: 0;
    }

    .mislens-about-market-proof:nth-child(2),
    .mislens-about-market-proof:nth-child(4) {
        padding-right: 0;
    }

    .mislens-about-market-proof__value {
        font-size: 28px;
    }

    .mislens-about-market__media {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 36px;
    }

    .mislens-about-market__media-item {
        width: 100%;
        height: auto;
        min-height: 0;
        border: 1px solid #dddddd;
        border-radius: 16px;
        background: #ffffff;
    }

    .mislens-about-market__media-item--1 {
        grid-column: 1 / -1;
        aspect-ratio: 800 / 604;
    }

    .mislens-about-market__media-item--2,
    .mislens-about-market__media-item--3 {
        grid-column: auto;
        aspect-ratio: 607 / 754;
    }

    .mislens-about-market__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* 03. MISLENS IN THE MARKET — SMALL MOBILE */

@media (max-width: 480px) {

    .mislens-about-market__heading {
        font-size: 34px;
    }

    .mislens-about-market__proofs {
        grid-template-columns: 1fr;
    }

    .mislens-about-market-proof {
        padding: 20px 0;
        border-right: 0;
        border-bottom: 1px solid #dddddd;
    }

    .mislens-about-market-proof:nth-last-child(-n + 2) {
        border-bottom: 1px solid #dddddd;
    }

    .mislens-about-market-proof:last-child {
        border-bottom: 0;
    }

    .mislens-about-market__media {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 32px;
    }

    .mislens-about-market__media-item {
        border-radius: 14px;
    }

    .mislens-about-market__media-item--1 {
        grid-column: 1 / -1;
    }

    .mislens-about-market__media-item--2,
    .mislens-about-market__media-item--3 {
        grid-column: auto;
    }
}


/* ==========================================================================
04. THE COMPANY BEHIND MISLENS — DESKTOP
========================================================================== */

.mislens-about-company {
    padding: 100px 0;
    background: #ffffff;
}

.mislens-about-company__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(60px, 8vw, 110px);

    width: min(
        calc(100% - 48px),
        var(--about-container)
    );

    margin: 0 auto;
}


/* 04.1 LEFT VISUAL AREA */

.mislens-about-company__visual {
    display: flex;
    flex-direction: column;

    gap: 22px;

    min-width: 0;

    background: transparent;
}

.mislens-about-company__visual-main {
    position: relative;

    overflow: hidden;

    width: 100%;
    min-height: 430px;

    border-radius: 24px;

    background: var(--about-soft);
}

.mislens-about .mislens-about-company__image {
    width: 100%;
    height: 430px;

    object-fit: cover;
    object-position: center;
}

.mislens-about-company__image-placeholder {
    width: 100%;
    min-height: 430px;

    background:
        linear-gradient(
            145deg,
            #eeeeee 0%,
            #f8f8f8 100%
        );
}


/* 04.2 GROUP BRANDS */

.mislens-about-company__brands {
    padding-top: 4px;
}

.mislens-about-company__brands-heading {
    margin: 0 0 14px;

    color: var(--about-muted);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.mislens-about-company__brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.mislens-about-company__brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 76px;

    padding: 14px 12px;

    border: 1px solid var(--about-border);
    border-radius: 14px;

    background: #ffffff;
}

.mislens-about-company__brand-logo-image {
    width: auto;
    max-width: 100%;
    max-height: 42px;

    object-fit: contain;
    object-position: center;
}


/* 04.3 RIGHT CONTENT AREA */

.mislens-about-company__content {
    max-width: 540px;
}

.mislens-about-company__logo {
    margin-bottom: 26px;
}

.mislens-about-company__logo-image {
    width: auto;
    max-width: 150px;
    max-height: 52px;

    object-fit: contain;
    object-position: left center;
}

.mislens-about-company__body {
    margin: 28px 0 0;
}


/* 04.4 SUPPORT FACTS */

.mislens-about-company__facts {
    margin-top: 36px;

    border-top: 1px solid var(--about-border);
}

.mislens-about-company-fact {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);

    gap: 24px;

    padding: 20px 0;

    border-bottom: 1px solid var(--about-border);
}

.mislens-about-company-fact__title {
    margin: 0;

    color: var(--about-text);

    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
}

.mislens-about-company-fact__body {
    margin: 0;

    color: var(--about-body);

    font-size: 14px;
    line-height: 1.65;
}


/* 04.5 GROUP BROCHURE CTA */

.mislens-about-company__actions {
    margin-top: 30px;
}

.mislens-about-company__brochure-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 13px 22px;

    border: 1px solid var(--about-text);
    border-radius: 999px;

    color: var(--about-text);
    background: transparent;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 650;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.mislens-about-company__brochure-button:hover {
    color: #ffffff;

    background: var(--about-text);

    transform: translateY(-1px);
}

.mislens-about-company__brochure-arrow {
    font-size: 17px;
    line-height: 1;
}


/* 04. THE COMPANY BEHIND MISLENS — TABLET */

@media (max-width: 1024px) {

    .mislens-about-company__inner {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 48px;
    }

    .mislens-about-company__visual-main,
    .mislens-about-company__image-placeholder {
        min-height: 390px;
    }

    .mislens-about .mislens-about-company__image {
        height: 390px;
    }

    .mislens-about-company__brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mislens-about-company-fact {
        grid-template-columns: 130px minmax(0, 1fr);
    }
}


/* 04. THE COMPANY BEHIND MISLENS — MOBILE */

@media (max-width: 767px) {

    .mislens-about-company {
        padding: 80px 0;
    }

    .mislens-about-company__inner {
        grid-template-columns: 1fr;

        gap: 44px;

        width: min(
            calc(100% - 32px),
            var(--about-container)
        );
    }

    .mislens-about-company__heading {
        font-size: clamp(32px, 10vw, 42px);
    }

    .mislens-about-company__content {
        order: 1;

        max-width: none;
    }

    .mislens-about-company__visual {
        order: 2;

        gap: 20px;
    }

    .mislens-about-company__visual-main {
        min-height: 360px;

        border-radius: 18px;
    }

    .mislens-about .mislens-about-company__image {
        height: 360px;
    }

    .mislens-about-company__image-placeholder {
        min-height: 360px;
    }

    .mislens-about-company__logo {
        margin-bottom: 22px;
    }

    .mislens-about-company__facts {
        margin-top: 32px;
    }

    .mislens-about-company-fact {
        display: block;

        padding: 19px 0;
    }

    .mislens-about-company-fact__body {
        margin-top: 5px;
    }

    .mislens-about-company__actions {
        margin-top: 26px;
    }

    .mislens-about-company__brand-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 8px;
    }

    .mislens-about-company__brand-logo {
        min-height: 68px;

        padding: 12px 9px;

        border-radius: 12px;
    }

    .mislens-about-company__brand-logo-image {
        max-height: 36px;
    }
}


/* 04. THE COMPANY BEHIND MISLENS — SMALL MOBILE */

@media (max-width: 480px) {

    .mislens-about-company__heading {
        font-size: 34px;
    }

    .mislens-about-company__brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mislens-about-company__brand-logo {
        min-height: 72px;
    }

    .mislens-about-company__brochure-button {
        width: 100%;
    }
}


/* ==========================================================================
05. BEHIND THE PRODUCTS — DESKTOP
========================================================================== */

.mislens-about-supply {
    padding: 115px 0;
    background: var(--about-soft-warm);
}

.mislens-about-supply__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(60px, 8vw, 110px);
    width: min(
        calc(100% - 48px),
        var(--about-container)
    );
    margin: 0 auto;
}

.mislens-about-supply__content {
    max-width: 520px;
}

.mislens-about-supply__body {
    margin: 28px 0 0;
}

.mislens-about-supply__items {
    margin-top: 38px;
}

.mislens-about-supply-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--about-border);
}

.mislens-about-supply-item:last-child {
    border-bottom: 1px solid var(--about-border);
}

.mislens-about-supply-item__number {
    padding-top: 2px;
    color: var(--about-muted);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.mislens-about-supply-item__title {
    margin: 0;
    color: var(--about-text);
    font-size: 17px;
    line-height: 1.4;
    font-weight: 650;
}

.mislens-about-supply-item__body {
    margin: 7px 0 0;
    color: var(--about-body);
    font-size: 14px;
    line-height: 1.7;
}

.mislens-about-supply__button {
    margin-top: 32px;
}

.mislens-about-supply__visual {
    overflow: hidden;
    min-height: 600px;
    border-radius: 24px;
    background: #eeeeee;
}

.mislens-about-supply__image {
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.mislens-about-supply__image-placeholder {
    width: 100%;
    min-height: 600px;
    background:
        linear-gradient(
            145deg,
            #e8e6e3 0%,
            #f5f3f0 100%
        );
}


/* 05. BEHIND THE PRODUCTS — TABLET */

@media (max-width: 1024px) {

    .mislens-about-supply__inner {
        gap: 48px;
    }

    .mislens-about-supply__visual,
    .mislens-about-supply__image-placeholder {
        min-height: 520px;
    }

    .mislens-about-supply__image {
        height: 520px;
    }
}


/* 05. BEHIND THE PRODUCTS — MOBILE */

@media (max-width: 767px) {

    .mislens-about-supply {
        padding: 80px 0;
    }

    .mislens-about-supply__inner {
        grid-template-columns: 1fr;
        gap: 44px;
        width: min(
            calc(100% - 32px),
            var(--about-container)
        );
    }

    .mislens-about-supply__heading {
        font-size: clamp(32px, 10vw, 42px);
    }

    .mislens-about-supply__content {
        max-width: none;
    }

    .mislens-about-supply__visual,
    .mislens-about-supply__image-placeholder {
        min-height: 420px;
        border-radius: 18px;
    }

    .mislens-about-supply__image {
        height: 420px;
    }
}


/* 05. BEHIND THE PRODUCTS — SMALL MOBILE */

@media (max-width: 480px) {

    .mislens-about-supply__heading {
        font-size: 34px;
    }
}


/* ==========================================================================
06. WORK WITH MISLENS — DESKTOP
========================================================================== */

.mislens-about-cta {
    padding: 95px 0;
    color: #ffffff;
    background: #171717;
}

.mislens-about-cta__inner {
    width: min(
        calc(100% - 48px),
        920px
    );
    margin: 0 auto;
}

.mislens-about-cta__content {
    text-align: center;
}

.mislens-about-cta__eyebrow {
    color: #a9a9a9;
}

.mislens-about-cta__heading {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    color: #ffffff;
}

.mislens-about-cta__body {
    max-width: 650px;
    margin: 26px auto 0;
    color: #bdbdbd;
}

.mislens-about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
}

.mislens-about-cta__button--primary {
    color: #171717;
    background: #ffffff;
    border-color: #ffffff;
}

.mislens-about-cta__button--primary:hover {
    color: #171717;
    background: #eeeeee;
    border-color: #eeeeee;
}

.mislens-about-cta__button--secondary {
    color: #ffffff;
    background: transparent;
    border-color: #555555;
}

.mislens-about-cta__button--secondary:hover {
    color: #171717;
    background: #ffffff;
    border-color: #ffffff;
}


/* 06. WORK WITH MISLENS — MOBILE */

@media (max-width: 767px) {

    .mislens-about-cta {
        padding: 80px 0;
    }

    .mislens-about-cta__inner {
        width: min(
            calc(100% - 32px),
            920px
        );
    }

    .mislens-about-cta__heading {
        font-size: clamp(32px, 10vw, 42px);
    }

    .mislens-about-cta__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 360px;
        margin: 30px auto 0;
    }

    .mislens-about-cta__button {
        width: 100%;
    }
}


/* 06. WORK WITH MISLENS — SMALL MOBILE */

@media (max-width: 480px) {

    .mislens-about-cta__heading {
        font-size: 34px;
    }
}


/* ==========================================================================
ACCESSIBILITY
========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .mislens-about-hero__button,
    .mislens-about-supply__button,
    .mislens-about-cta__button,
    .mislens-about-company__brochure-button {
        transition: none;
    }
}