/* =========================================================
   VIDA AI — ABOUT PAGE
   Page-specific composition and responsive behaviour
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.about-page {
    color: var(--vida-blue);
    background: var(--vida-gallery);
}

.about-page .site {
    min-height: 100vh;
    color: var(--vida-blue);
    background: var(--vida-gallery);
}


/* =========================================================
   OPENING COMPOSITION
   ========================================================= */

.about-vision {
    padding:
        calc(var(--nav-height) + clamp(100px, 10vw, 160px))
        var(--page-gutter)
        clamp(150px, 17vw, 270px);

    background: var(--vida-gallery);
}

.about-vision__inner {
    width: min(100%, 1320px);
    margin-inline: auto;
}

.about-vision__title {
    max-width: none;
    margin: 0;

    color: var(--vida-blue);

    font-size: clamp(2.2rem, 3.8vw, 4.4rem);
    font-weight: 200;
    line-height: 1.08;

    letter-spacing: 0.17em;
    word-spacing: 0.22em;

    text-transform: uppercase;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   STAGGERED PRINCIPLES
   --------------------------------------------------------- */

.about-vision__sequence {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: clamp(54px, 6vw, 90px);

    width: 100%;
    margin-top: clamp(110px, 13vw, 200px);
}

.about-page .about-vision__line {
    margin: 0;

    color: var(--vida-blue);

    font-size: clamp(0.95rem, 1.35vw, 1.35rem);
    font-weight: 200;
    line-height: 1.5;

    letter-spacing: 0.12em;
    word-spacing: 0.08em;

    text-transform: uppercase;
}

.about-page .about-vision__line .about-vision__emphasis {
    display: inline-block;
    margin-right: 0.16em;

    color: inherit;

    font-size: 1.65em;
    font-weight: 200;
    line-height: 0.9;

    letter-spacing: 0.1em;
}

.about-vision__line--identity {
    grid-column: 7 / 12;
}

.about-vision__line--consistency {
    grid-column: 2 / 7;
}

.about-vision__line--care {
    grid-column: 6 / 11;
}

.about-vision__line--craft {
    grid-column: 3 / 8;
}

.about-vision__line--experience {
    grid-column: 6 / 13;
}

.about-vision__line--technology {
    grid-column: 1 / 6;
}

.about-vision__line--vida {
    display: flex;

    grid-column: 8 / 13;
    grid-row: 7;

    align-items: center;
gap: clamp(48px, 5vw, 80px);

    padding-top: clamp(40px, 5vw, 70px);

    font-size: clamp(1.15rem, 1.75vw, 1.8rem);
}

.about-vision__logo {
    display: block;
    flex: 0 0 auto;

    width: clamp(220px, 20vw, 340px);
    height: auto;
}


/* =========================================================
   TRANSITION STATEMENT
   ========================================================= */

.about-transition {
    padding:
        clamp(140px, 15vw, 240px)
        var(--page-gutter);

    background: var(--vida-canvas);
}

.about-transition__inner {
    width: min(100%, 1320px);
    margin-inline: auto;
}

.about-transition__statement {
    max-width: 1180px;
    margin-left: 8rem;

    color: var(--vida-blue);

    font-size: var(--editorial-h2-size);
    font-weight: 200;
    line-height: 1.5;

    letter-spacing: var(--editorial-line-tracking);
    word-spacing: normal;

    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
}

.about-transition__statement span {
    display: block;
}

.about-transition__statement span + span {
    width: fit-content;
    margin-top: 2rem;
    margin-left: auto;

    text-align: right;
}

/* =========================================================
   STORY
   ========================================================= */

.about-story {
    padding:
        clamp(120px, 14vw, 220px)
        var(--page-gutter)
        clamp(145px, 16vw, 250px);

    background: var(--vida-light);
}

.about-story__inner {
    width: min(100%, 1180px);

    margin-inline: auto;
}

.about-story__content {
    width: min(100%, 760px);

    margin-inline: auto;
}

.about-story__title {
    margin: 0;

    color: var(--vida-blue);

    font-size: clamp(1.8rem, 2.7vw, 3rem);
    font-weight: 200;
    line-height: 1.08;

    letter-spacing: 0.18em;
    word-spacing: 0.22em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   STORY COPY
   --------------------------------------------------------- */

.about-story__copy {
    max-width: 720px;

    margin-top: clamp(56px, 6vw, 86px);

    display: flow-root;
}

.about-story__copy p {
    margin: 0 0 26px;

    color: var(--text-secondary);

    font-size: clamp(0.84rem, 0.95vw, 0.98rem);
    font-weight: 400;
    line-height: 1.9;

    letter-spacing: 0.08em;
    word-spacing: 0.05em;
}

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




/* ---------------------------------------------------------
   STORY ILLUSTRATION — SHAPED TEXT WRAP
   --------------------------------------------------------- */

.about-story__media {
    float: left;

    width: clamp(170px, 18vw, 250px);

    margin:
        8px
        22px
        24px
        0;

    /*
       Approximate the actual right-hand silhouette
       of the two figures so the text follows the drawing
       instead of the rectangular image box.
    */
    shape-outside: polygon(
        0% 0%,
        58% 0%,
        66% 8%,
        72% 16%,
        79% 25%,
        84% 36%,
        88% 48%,
        91% 61%,
        94% 74%,
        91% 87%,
        84% 100%,
        0% 100%
    );

    shape-margin: 14px;
}

.about-story__media img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

/* ---------------------------------------------------------
   STORY PRINCIPLES
   --------------------------------------------------------- */

.about-story__principles {
    clear: both;

    margin-top: clamp(70px, 8vw, 118px);
}

.about-story__principles p {
    margin: 0 0 11px;

    color: var(--vida-blue);

    font-size: clamp(0.9rem, 1.05vw, 1.08rem);
    font-weight: 200;
    line-height: 1.55;

    letter-spacing: 0.08em;
    word-spacing: 0.05em;
}

.about-story__principles-heading {
    margin-bottom: 32px;

    font-size: clamp(1rem, 1.2vw, 1.2rem);
}
/* =========================================================
   CALL TO ACTION
   ========================================================= */

.about-cta {
    width: 100%;

    padding:
        clamp(150px, 17vw, 270px)
        var(--page-gutter)
        clamp(175px, 19vw, 300px);

    background: var(--vida-gallery);
}


.about-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(100%, 1220px);

    margin-inline: auto;

    text-align: center;
}


.about-cta__title {
    margin:
        0
        0
        clamp(70px, 8vw, 120px);

    color: var(--vida-blue);

    font-size: clamp(1.8rem, 3.5vw, 4.2rem);
    font-weight: 200;
    line-height: 1.04;

    letter-spacing: 0.17em;
    word-spacing: 0.25em;

    text-transform: uppercase;
    text-wrap: balance;
}


.about-cta .contact-cta__button {
    width: auto;

    min-width: 190px;
}

/* =========================================================
   ABOUT PAGE — TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .about-vision {
        padding:
            calc(var(--nav-height) + 100px)
            var(--page-gutter)
            150px;
    }

    .about-vision__title {
        white-space: normal;
    }

    .about-vision__sequence {
        row-gap: 54px;

        margin-top: 100px;
    }

    .about-vision__line--identity {
        grid-column: 6 / 12;
    }

    .about-vision__line--consistency {
        grid-column: 2 / 8;
    }

    .about-vision__line--care {
        grid-column: 5 / 11;
    }

    .about-vision__line--craft {
        grid-column: 2 / 8;
    }

    .about-vision__line--experience {
        grid-column: 5 / 13;
    }

    .about-vision__line--technology {
        grid-column: 1 / 7;
    }

    .about-vision__line--vida {
        grid-column: 6 / 13;

        gap: 36px;
    }

    .about-transition__statement {
        margin-left: 0;
    }
}


/* =========================================================
   ABOUT PAGE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .about-page,
    .about-page .site,
    .about-page main {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       OPENING
       ----------------------------------------------------- */

    .about-vision {
        width: 100%;

        padding:
            calc(var(--nav-height) + 70px)
            var(--page-gutter)
            110px;
    }

    .about-vision__inner {
        width: 100%;
        max-width: 100%;
    }

    .about-vision__title {
        width: 100%;
        max-width: 100%;

        font-size:
            clamp(2.1rem, 10vw, 3.2rem);
        line-height: 1.08;

        letter-spacing: 0.09em;
        word-spacing: 0.08em;

        white-space: normal;

        overflow-wrap: normal;
        word-break: normal;
    }


    /* -----------------------------------------------------
       PRINCIPLES
       ----------------------------------------------------- */

    .about-vision__sequence {
        display: flex;
        flex-direction: column;

        gap: 38px;

        width: 100%;

        margin-top: 80px;
    }

    .about-page .about-vision__line,
    .about-vision__line--identity,
    .about-vision__line--consistency,
    .about-vision__line--care,
    .about-vision__line--craft,
    .about-vision__line--experience,
    .about-vision__line--technology,
    .about-vision__line--vida {
        width: 100%;

        margin: 0;

        font-size:
            clamp(0.9rem, 3.7vw, 1.1rem);

        line-height: 1.5;

        letter-spacing: 0.08em;
        word-spacing: 0.04em;

        text-align: left;
    }

    .about-page
    .about-vision__line
    .about-vision__emphasis {
        display: inline;

        margin-right: 0.12em;

        font-size: 1.45em;
        line-height: 1;
    }

    .about-vision__line--vida {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        padding-top: 30px;
    }

    .about-vision__logo {
        width: min(240px, 72vw);
    }


    /* -----------------------------------------------------
       TRANSITION
       ----------------------------------------------------- */

    .about-transition {
        padding:
            100px
            var(--page-gutter);
    }

    .about-transition__inner {
        width: 100%;
    }

    .about-transition__statement {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size:
            clamp(1.8rem, 8vw, 2.6rem);
        line-height: 1.35;

        letter-spacing: 0.08em;

        text-align: left;

        overflow-wrap: normal;
        word-break: normal;
    }

    .about-transition__statement span {
        display: block;

        width: 100%;
    }

    .about-transition__statement span + span {
        width: 100%;

        margin-top: 34px;
        margin-left: 0;

        text-align: left;
    }


    /* -----------------------------------------------------
       STORY
       ----------------------------------------------------- */

    .about-story {
        padding:
            100px
            var(--page-gutter)
            120px;
    }

    .about-story__inner,
    .about-story__content {
        width: 100%;
        max-width: 100%;
    }

    .about-story__title {
        font-size:
            clamp(1.8rem, 8vw, 2.5rem);

        letter-spacing: 0.12em;
        word-spacing: 0.1em;
    }

    .about-story__copy {
        width: 100%;
        max-width: 100%;

        margin-top: 50px;
    }


    /* Remove desktop text wrapping around illustration */

    .about-story__media {
        float: none;

        width: min(72vw, 280px);

        margin:
            0
            auto
            46px;

        shape-outside: none;
    }

    .about-story__media img {
        width: 100%;
        height: auto;
    }

    .about-story__copy p {
        width: 100%;

        margin-bottom: 24px;

        font-size:
            clamp(0.9rem, 3.5vw, 1rem);

        line-height: 1.85;

        letter-spacing: 0.055em;
        word-spacing: 0.03em;
    }


    /* -----------------------------------------------------
       PRINCIPLES
       ----------------------------------------------------- */

    .about-story__principles {
        margin-top: 62px;
    }

    .about-story__principles-heading {
        margin-bottom: 26px;
    }

    .about-story__principles p {
        font-size:
            clamp(0.9rem, 3.6vw, 1rem);

        line-height: 1.5;

        letter-spacing: 0.055em;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .about-cta {
        padding:
            110px
            var(--page-gutter)
            120px;
    }

    .about-cta__inner {
        width: 100%;
    }

    .about-cta__title {
        width: 100%;
        max-width: 100%;

        margin-bottom: 60px;

        font-size:
            clamp(2rem, 9vw, 3rem);

        line-height: 1.08;

        letter-spacing: 0.1em;
        word-spacing: 0.1em;

        text-wrap: balance;
    }
}


/* =========================================================
   ABOUT PAGE — SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .about-vision {
        padding:
            calc(var(--nav-height) + 54px)
            var(--page-gutter)
            90px;
    }

    .about-vision__title {
        font-size:
            clamp(1.9rem, 9.8vw, 2.65rem);

        letter-spacing: 0.07em;
    }

    .about-vision__sequence {
        gap: 32px;

        margin-top: 68px;
    }

    .about-transition {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .about-transition__statement {
        font-size:
            clamp(1.6rem, 7.8vw, 2.2rem);

        line-height: 1.4;
    }

    .about-story {
        padding-top: 84px;
        padding-bottom: 96px;
    }

    .about-story__media {
        width: min(78vw, 250px);

        margin-bottom: 38px;
    }

    .about-story__copy {
        margin-top: 42px;
    }

    .about-cta {
        padding-top: 90px;
        padding-bottom: 96px;
    }

    .about-cta__title {
        margin-bottom: 50px;

        font-size:
            clamp(1.8rem, 8.5vw, 2.5rem);
    }
}
/* =========================================================
   ABOUT — CONTEXTUAL LINKS
   ========================================================= */

.about-contextual-link {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: inherit;
    transition: opacity 0.2s ease;
}

.about-contextual-link:hover,
.about-contextual-link:focus-visible {
    opacity: 0.6;
}