/* =========================================================
   AG BODY SHOP — ABOUT PAGE
========================================================= */


/* =========================================================
   01 — FOUNDATION
========================================================= */

.ag-about,
.ag-about *,
.ag-about *::before,
.ag-about *::after {

    box-sizing:
        border-box;
}


.ag-about {

    --about-yellow:
        var(
            --color-yellow,
            #e7b900
        );

    --about-yellow-hover:
        var(
            --color-yellow-hover,
            #f2c600
        );

    --about-yellow-dark:
        #a78300;

    --about-ink:
        #171a1d;

    --about-text:
        #4d5358;

    --about-muted:
        #777e83;

    --about-dark:
        #0b0e11;

    --about-line:
        rgba(20, 24, 28, .13);

    --about-page-padding:

        clamp(
            28px,
            5vw,
            92px
        );

    width:
        100%;

    overflow:
        hidden;

    color:
        var(--about-ink);

    background:
        #ffffff;
}


.ag-about a {

    text-decoration:
        none;
}


.ag-about img {

    display:
        block;

    max-width:
        100%;
}


.ag-about-shell {

    position:
        relative;

    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


/* =========================================================
   02 — SHARED TYPOGRAPHY
========================================================= */

.ag-about-section-title {

    max-width:
        900px;

    margin:
        0;

    color:
        var(--about-ink);

    font-family:
        var(--font-title);

    font-size:

        clamp(
            38px,
            3vw,
            53px
        );

    font-weight:
        400;

    line-height:
        1.07;

    letter-spacing:
        -.35px;
}

.ag-about-story
.ag-about-section-title {

    font-size:
        clamp(
            31px,
            2.4vw,
            42px
        );
}

.ag-about-section-title--light {

    color:
        #ffffff;
}


.ag-about-section-title a {

    color:
        inherit;

    transition:
        color .22s ease;
}


.ag-about-section-title a:hover {

    color:
        var(--about-yellow);
}


.ag-about-section-title a:focus-visible {

    outline:

        2px solid
        var(--about-yellow);

    outline-offset:
        5px;
}


/* =========================================================
   03 — HERO
========================================================= */

.ag-about-hero {

    position:
        relative;

    min-height:
        680px;

    overflow:
        hidden;

    padding:

        30px
        var(--about-page-padding)
        clamp(60px, 7vh, 90px);

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 76% 36%,
            rgba(231, 185, 0, .11),
            transparent 29%
        ),

        radial-gradient(
            circle at 8% 90%,
            rgba(255, 255, 255, .045),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #181c20 0%,
            #0d1013 57%,
            #06080a 100%
        );

    isolation:
        isolate;
}


.ag-about-hero::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    opacity:
        .25;

    pointer-events:
        none;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, .028) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, .028) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    -webkit-mask-image:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, .8),
            transparent 78%
        );

    mask-image:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, .8),
            transparent 78%
        );
}


.ag-about-hero::after {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:

        inset
        0 0 115px
        rgba(0, 0, 0, .32);
}


.ag-about-hero__shell {

    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    min-height:
        570px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:

        minmax(0, .84fr)
        minmax(500px, 1.16fr);

    align-items:
        center;

    gap:

        clamp(
            50px,
            7vw,
            115px
        );
}


.ag-about-hero__content {

    position:
        relative;

    z-index:
        4;

    max-width:
        660px;
}


.ag-about-hero__title {

    max-width:
        720px;

    margin:
        0;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            36px,
            2.75vw,
            48px
        );

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.8px;
}


.ag-about-hero__description {

    max-width:
        620px;

    margin:

        28px
        0
        0;

    color:
        rgba(255, 255, 255, .70);

    font-family:
        var(--font-body);

    font-size:

        clamp(
            15px,
            1.05vw,
            17px
        );

    font-weight:
        300;

    line-height:
        1.7;
}


.ag-about-hero__actions {

    margin-top:
        38px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;
}


.ag-about-button {

    min-height:
        50px;

    padding:

        0
        25px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    border-radius:
        28px;

    font-family:
        var(--font-body);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

    transition:

        color .24s ease,
        background .24s ease,
        border-color .24s ease,
        transform .24s ease;
}


.ag-about-button svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .24s ease;
}


.ag-about-button--primary {

    color:
        #111416;

    background:
        var(--about-yellow);

    border:

        1px solid
        var(--about-yellow);
}


.ag-about-button--secondary {

    color:
        rgba(255, 255, 255, .87);

    background:
        rgba(255, 255, 255, .025);

    border:

        1px solid
        rgba(255, 255, 255, .22);
}


.ag-about-button:hover {

    transform:
        translateY(-2px);
}


.ag-about-button--primary:hover {

    color:
        #111416;

    background:
        var(--about-yellow-hover);

    border-color:
        var(--about-yellow-hover);
}


.ag-about-button--primary:hover svg {

    transform:
        translateX(5px);
}


.ag-about-button--secondary:hover {

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .08);

    border-color:
        rgba(255, 255, 255, .46);
}


.ag-about-button:focus-visible {

    outline:

        2px solid
        var(--about-yellow);

    outline-offset:
        4px;
}


.ag-about-hero__visual {

    position:
        relative;

    min-width:
        0;

    min-height:
        490px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.ag-about-hero__figure {

    position:
        relative;

    width:
        100%;

    height:
        500px;

    margin:
        0;

    overflow:
        hidden;

    clip-path:

        polygon(
            10% 0,
            100% 0,
            100% 90%,
            90% 100%,
            0 100%,
            0 10%
        );

    background:
        #15191d;

    box-shadow:

        0 34px 80px
        rgba(0, 0, 0, .35);
}


.ag-about-hero__figure::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(5, 8, 10, .30),
            transparent 48%
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .05),
            rgba(0, 0, 0, .32)
        );

    box-shadow:

        inset
        0 0 80px
        rgba(0, 0, 0, .25);
}


.ag-about-hero__image {

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    filter:

        brightness(.87)
        contrast(1.04)
        saturate(.84);

    transform:
        scale(1.015);
}


.ag-about-hero__placeholder {

    width:
        100%;

    height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    clip-path:

        polygon(
            10% 0,
            100% 0,
            100% 90%,
            90% 100%,
            0 100%,
            0 10%
        );

    color:
        rgba(255, 255, 255, .07);

    background:

        radial-gradient(
            circle at 70% 30%,
            rgba(231, 185, 0, .13),
            transparent 31%
        ),

        linear-gradient(
            145deg,
            #252a2f,
            #101316
        );

    font-family:
        var(--font-title);

    font-size:

        clamp(
            120px,
            14vw,
            220px
        );

    line-height:
        1;
}


/* =========================================================
   04 — STORY — ONE COLUMN
========================================================= */

.ag-about-story {

    position:
        relative;

    padding:

        clamp(
            75px,
            9vh,
            115px
        )

        var(--about-page-padding);

    background:
        #ffffff;
}


.ag-about-story__inner {

    width:

        min(
            1040px,
            100%
        );

    margin:
        0 auto;
}


.ag-about-story__content {

    width:

        min(
            920px,
            100%
        );

    margin-top:

        clamp(
            30px,
            4vh,
            44px
        );
}


.ag-about-richtext {

    color:
        var(--about-text);

    font-family:
        var(--font-body);

    font-size:

        clamp(
            15px,
            .98vw,
            17px
        );

    font-weight:
        300;

    line-height:
        1.78;
}


.ag-about-richtext > *:first-child {

    margin-top:
        0;
}


.ag-about-richtext > *:last-child {

    margin-bottom:
        0;
}


.ag-about-richtext p {

    margin:

        0
        0
        1.25em;
}


.ag-about-richtext h2,
.ag-about-richtext h3,
.ag-about-richtext h4 {

    margin:

        1.4em
        0
        .55em;

    color:
        var(--about-ink);

    font-family:
        var(--font-title);

    font-weight:
        400;

    line-height:
        1.15;
}


.ag-about-richtext h2 {

    font-size:
        34px;
}


.ag-about-richtext h3 {

    font-size:
        27px;
}


.ag-about-richtext ul,
.ag-about-richtext ol {

    margin:

        1em
        0;

    padding-left:
        1.25em;
}


.ag-about-richtext li + li {

    margin-top:
        .55em;
}


.ag-about-richtext a {

    color:
        var(--about-yellow-dark);

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


.ag-about-story__statement {

    position:
        relative;

    width:

        min(
            920px,
            100%
        );

    margin:

        clamp(
            36px,
            5vh,
            52px
        )

        0
        0;

    padding:

        clamp(
            26px,
            3vw,
            38px
        )

        clamp(
            25px,
            3.5vw,
            46px
        );

    background:
        #f5f5f2;

    border:
        0;

    border-left:

        3px solid
        var(--about-yellow);
}


.ag-about-story__statement p {

    max-width:
        820px;

    margin:
        0;

    color:
        #282d31;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            21px,
            1.7vw,
            28px
        );

    font-weight:
        400;

    line-height:
        1.5;
}


/* =========================================================
   05 — VALUES
========================================================= */

.ag-about-values {

    position:
        relative;

    padding:

        clamp(
            72px,
            8vh,
            102px
        )

        var(--about-page-padding);

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 13% 15%,
            rgba(231, 185, 0, .09),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #181c20,
            #090c0f 67%,
            #050709
        );
}


.ag-about-values::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    box-shadow:

        inset
        0 0 105px
        rgba(0, 0, 0, .26);
}


.ag-about-values
.ag-about-shell {

    z-index:
        2;
}


.ag-about-values__header {

    width:

        min(
            900px,
            100%
        );
}


.ag-about-values__intro {

    max-width:
        720px;

    margin:

        22px
        0
        0;

    color:
        rgba(255, 255, 255, .55);

    font-family:
        var(--font-body);

    font-size:
        14px;

    font-weight:
        300;

    line-height:
        1.7;
}


.ag-about-values__grid {

    margin-top:

        clamp(
            48px,
            6vh,
            70px
        );

    display:
        grid;

    grid-template-columns:

        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:

        1px solid
        rgba(255, 255, 255, .12);

    border-left:

        1px solid
        rgba(255, 255, 255, .12);
}


.ag-about-value {

    position:
        relative;

    min-height:
        300px;

    padding:

        36px
        clamp(23px, 2.3vw, 36px)
        34px;

    border-right:

        1px solid
        rgba(255, 255, 255, .12);

    border-bottom:

        1px solid
        rgba(255, 255, 255, .12);

    transition:

        background .28s ease,
        transform .28s ease;
}


.ag-about-value::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        -1px;

    width:
        0;

    height:
        2px;

    background:
        var(--about-yellow);

    transition:
        width .32s ease;
}


.ag-about-value:hover {

    z-index:
        2;

    background:
        rgba(255, 255, 255, .045);

    transform:
        translateY(-4px);
}


.ag-about-value:hover::before {

    width:
        100%;
}


.ag-about-value__icon {

    width:
        55px;

    height:
        55px;

    color:
        var(--about-yellow);
}


.ag-about-value__icon svg {

    display:
        block;

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.ag-about-value h3 {

    margin:

        30px
        0
        0;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            20px,
            1.45vw,
            25px
        );

    font-weight:
        400;

    line-height:
        1.1;
}


.ag-about-value p {

    margin:

        16px
        0
        0;

    color:
        rgba(255, 255, 255, .52);

    font-family:
        var(--font-body);

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        1.65;
}


/* =========================================================
   06 — WORKFLOW
========================================================= */

.ag-about-workflow {

    position:
        relative;

    padding:

        clamp(
            74px,
            8vh,
            105px
        )

        var(--about-page-padding);

    background:
        #ffffff;
}


.ag-about-workflow__header {

    width:

        min(
            900px,
            100%
        );
}


.ag-about-workflow__intro {

    max-width:
        720px;

    margin:

        22px
        0
        0;

    color:
        var(--about-muted);

    font-family:
        var(--font-body);

    font-size:
        14px;

    font-weight:
        300;

    line-height:
        1.7;
}


.ag-about-workflow__track {

    position:
        relative;

    margin-top:

        clamp(
            52px,
            6vh,
            72px
        );

    display:
        grid;

    grid-template-columns:

        repeat(
            4,
            minmax(0, 1fr)
        );
}


.ag-about-workflow__track::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        23px;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            var(--about-yellow),
            rgba(20, 24, 28, .13)
        );
}


.ag-about-workflow__item {

    position:
        relative;

    min-width:
        0;

    padding:

        0
        clamp(22px, 2.4vw, 38px)
        0
        0;
}


.ag-about-workflow__item:not(:first-child) {

    padding-left:

        clamp(
            22px,
            2.4vw,
            38px
        );
}


.ag-about-workflow__index {

    position:
        relative;

    z-index:
        2;

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--about-yellow);

    border-radius:
        50%;

    font-family:
        var(--font-body);

    font-size:
        10px;

    font-weight:
        700;

    box-shadow:

        0 0 0 8px
        #ffffff;
}


.ag-about-workflow__item h3 {

    margin:

        29px
        0
        0;

    color:
        var(--about-ink);

    font-family:
        var(--font-title);

    font-size:

        clamp(
            21px,
            1.45vw,
            25px
        );

    font-weight:
        400;

    line-height:
        1.1;
}


.ag-about-workflow__item p {

    max-width:
        260px;

    margin:

        13px
        0
        0;

    color:
        var(--about-muted);

    font-family:
        var(--font-body);

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        1.6;
}


/* =========================================================
   07 — PROJECTS
========================================================= */

.ag-about-projects {

    position:
        relative;

    padding:

        clamp(
            72px,
            8vh,
            102px
        )

        var(--about-page-padding);

    color:
        #ffffff;

    background:

        linear-gradient(
            145deg,
            #171b1f,
            #090c0f
        );
}


.ag-about-projects__header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;
}


.ag-about-projects__all {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    color:
        rgba(255, 255, 255, .64);

    font-family:
        var(--font-body);

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    transition:
        color .22s ease;
}


.ag-about-projects__all svg {

    width:
        58px;

    height:
        18px;

    fill:
        none;

    stroke:
        var(--about-yellow);

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.ag-about-projects__all:hover {

    color:
        #ffffff;
}


.ag-about-projects__all:hover svg {

    transform:
        translateX(7px);
}


.ag-about-projects__all:focus-visible {

    outline:

        2px solid
        var(--about-yellow);

    outline-offset:
        5px;
}


.ag-about-projects__grid {

    margin-top:

        clamp(
            44px,
            5.5vh,
            65px
        );

    display:
        grid;

    grid-template-columns:

        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:

        clamp(
            18px,
            2vw,
            30px
        );
}


.ag-about-project-card {

    min-width:
        0;
}


.ag-about-project-card__link {

    display:
        block;

    color:
        #ffffff;
}


.ag-about-project-card__media {

    position:
        relative;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    background:
        #20252a;
}


.ag-about-project-card__media::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent 48%,
            rgba(0, 0, 0, .43)
        );
}


.ag-about-project-card__image {

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    filter:

        brightness(.82)
        saturate(.82);

    transform:
        scale(1.015);

    transition:

        transform
        .65s
        cubic-bezier(.22, .76, .18, 1),

        filter
        .4s
        ease;
}


.ag-about-project-card__placeholder {

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(255, 255, 255, .07);

    background:

        radial-gradient(
            circle,
            rgba(231, 185, 0, .10),
            transparent 42%
        ),

        #20252a;

    font-family:
        var(--font-title);

    font-size:
        100px;
}


.ag-about-project-card__arrow {

    position:
        absolute;

    z-index:
        4;

    right:
        22px;

    bottom:
        20px;

    width:
        44px;

    height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--about-yellow);

    border-radius:
        50%;

    opacity:
        0;

    transform:
        translateY(8px);

    transition:

        opacity .28s ease,
        transform .28s ease;
}


.ag-about-project-card__arrow svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.ag-about-project-card__content {

    padding:

        23px
        2px
        0;
}


.ag-about-project-card h3 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            22px,
            1.6vw,
            28px
        );

    font-weight:
        400;

    line-height:
        1.15;

    transition:
        color .22s ease;
}


.ag-about-project-card p {

    margin:

        13px
        0
        0;

    color:
        rgba(255, 255, 255, .48);

    font-family:
        var(--font-body);

    font-size:
        13px;

    font-weight:
        300;

    line-height:
        1.58;
}


.ag-about-project-card__link:hover
.ag-about-project-card__image {

    transform:
        scale(1.065);

    filter:

        brightness(.94)
        saturate(.92);
}


.ag-about-project-card__link:hover
.ag-about-project-card__arrow {

    opacity:
        1;

    transform:
        translateY(0);
}


.ag-about-project-card__link:hover h3 {

    color:
        var(--about-yellow);
}


.ag-about-project-card__link:focus-visible {

    outline:

        2px solid
        var(--about-yellow);

    outline-offset:
        6px;
}


/* =========================================================
   08 — FINAL CTA
========================================================= */

.ag-about-cta {

    padding:

        clamp(
            54px,
            6vh,
            75px
        )

        var(--about-page-padding);

    background:
        #ffffff;
}


.ag-about-cta__panel {

    position:
        relative;

    min-height:
        190px;

    padding:

        clamp(
            32px,
            4vw,
            55px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    overflow:
        hidden;

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(231, 185, 0, .12),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #20252a,
            #0b0e11
        );
}


.ag-about-cta__panel::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        3px;

    height:
        100%;

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


.ag-about-cta h2 {

    max-width:
        760px;

    margin:
        0;

    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:

        clamp(
            33px,
            2.8vw,
            48px
        );

    font-weight:
        400;

    line-height:
        1.07;
}


/* =========================================================
   09 — LARGE TABLET
========================================================= */

@media(max-width:1180px) {

    .ag-about-hero__shell {

        grid-template-columns:

            minmax(0, .88fr)
            minmax(430px, 1.12fr);

        gap:
            45px;
    }


    .ag-about-hero__figure,
    .ag-about-hero__placeholder {

        height:
            450px;
    }


    .ag-about-values__grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .ag-about-value {

        min-height:
            280px;
    }

}


/* =========================================================
   10 — TABLET
========================================================= */

@media(max-width:980px) {

    .ag-about-hero {

        min-height:
            auto;
    }


    .ag-about-hero__shell {

        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            53px;
    }


    .ag-about-hero__content {

        max-width:
            760px;
    }


    .ag-about-hero__visual {

        min-height:
            440px;
    }


    .ag-about-hero__figure,
    .ag-about-hero__placeholder {

        height:
            440px;
    }


    .ag-about-workflow__track {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            45px 0;
    }


    .ag-about-workflow__track::before {

        display:
            none;
    }


    .ag-about-workflow__item,
    .ag-about-workflow__item:not(:first-child) {

        padding:

            0
            30px
            0
            0;
    }


    .ag-about-projects__grid {

        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .ag-about-project-card:last-child {

        grid-column:
            span 2;
    }


    .ag-about-project-card:last-child
    .ag-about-project-card__media {

        aspect-ratio:
            16 / 7;
    }

}


/* =========================================================
   11 — MOBILE
========================================================= */

@media(max-width:680px) {

    .ag-about {

        --about-page-padding:
            18px;
    }


    .ag-about-section-title {

        font-size:

            clamp(
                29px,
                8.4vw,
                38px
            );
    }


    .ag-about-hero {

        padding:

            24px
            var(--about-page-padding)
            54px;
    }


    .ag-about-hero__shell {

        gap:
            40px;
    }


    .ag-about-hero__title {

        font-size:

            clamp(
                33px,
                9.5vw,
                42px
            );
    }


    .ag-about-hero__description {

        font-size:
            14px;

        line-height:
            1.65;
    }


    .ag-about-hero__actions {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .ag-about-button {

        width:
            100%;
    }


    .ag-about-hero__visual {

        min-height:
            340px;
    }


    .ag-about-hero__figure,
    .ag-about-hero__placeholder {

        height:
            340px;

        clip-path:

            polygon(
                8% 0,
                100% 0,
                100% 92%,
                92% 100%,
                0 100%,
                0 8%
            );
    }


    .ag-about-story,
    .ag-about-values,
    .ag-about-workflow,
    .ag-about-projects {

        padding:

            64px
            var(--about-page-padding);
    }


    .ag-about-richtext {

        font-size:
            14.5px;

        line-height:
            1.72;
    }


    .ag-about-story__statement {

        padding:

            25px
            22px;
    }


    .ag-about-values__grid {

        grid-template-columns:
            1fr;
    }


    .ag-about-value {

        min-height:
            250px;
    }


    .ag-about-workflow__track {

        grid-template-columns:
            1fr;

        gap:
            34px;
    }


    .ag-about-workflow__item,
    .ag-about-workflow__item:not(:first-child) {

        min-height:
            120px;

        padding:

            0
            0
            0
            70px;
    }


    .ag-about-workflow__index {

        position:
            absolute;

        left:
            0;

        top:
            0;

        box-shadow:
            none;
    }


    .ag-about-workflow__item h3 {

        margin-top:
            0;
    }


    .ag-about-projects__header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .ag-about-projects__grid {

        grid-template-columns:
            1fr;
    }


    .ag-about-project-card:last-child {

        grid-column:
            auto;
    }


    .ag-about-project-card:last-child
    .ag-about-project-card__media {

        aspect-ratio:
            4 / 3;
    }


    .ag-about-project-card__arrow {

        opacity:
            1;

        transform:
            none;
    }


    .ag-about-cta {

        padding:

            40px
            var(--about-page-padding);
    }


    .ag-about-cta__panel {

        padding:

            31px
            25px;

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .ag-about-cta h2 {

        font-size:

            clamp(
                32px,
                9vw,
                40px
            );
    }

}


/* =========================================================
   12 — SMALL MOBILE
========================================================= */

@media(max-width:420px) {

    .ag-about-hero__figure,
    .ag-about-hero__placeholder {

        height:
            300px;
    }


    .ag-about-hero__visual {

        min-height:
            300px;
    }

}


/* =========================================================
   13 — REDUCED MOTION
========================================================= */

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

    .ag-about-button,
    .ag-about-button svg,
    .ag-about-value,
    .ag-about-value::before,
    .ag-about-projects__all,
    .ag-about-projects__all svg,
    .ag-about-project-card__image,
    .ag-about-project-card__arrow,
    .ag-about-project-card h3 {

        transition:
            none !important;
    }

}