/* =========================================================
   FOUNDAM FRAMEWORK v0.1
   SECTION STYLES
   ========================================================= */


/* =========================================================
   HEADER 01 — EDITORIAL
   ========================================================= */


/* -------------------------
   GeneratePress override
   ------------------------- */

.site-header,
.main-navigation {
    display: none;
}


/* -------------------------
   Header shell
   ------------------------- */

.fm-site-header {
    position: sticky;
    top: 0;

    z-index: 9999;

    width: 100%;

    background: rgba(243, 241, 236, 0.96);

    border-bottom: 1px solid transparent;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.admin-bar .fm-site-header {
    top: 32px;
}

.fm-header-scrolled {
    background: rgba(243, 241, 236, 0.98);

    border-bottom-color: var(--fm-color-line);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.035);
}

.fm-header-inner {
    width: min(
        calc(100% - 48px),
        var(--fm-container-wide)
    );

    min-height: 82px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 50px;
}


/* -------------------------
   Brand / logo
   ------------------------- */

.fm-header-brand {
    display: flex;
    align-items: center;
}

.fm-logo {
    display: inline-flex;
    align-items: center;

    color: var(--fm-color-ink);

    text-decoration: none;

    line-height: 1;
}

.fm-logo:hover,
.fm-logo:focus {
    color: var(--fm-color-ink);
}

.fm-logo-text {
    display: block;

    font-size: 19px;
    font-weight: 750;

    letter-spacing: 0.12em;
}

.fm-logo-image {
    display: block;

    width: auto;

    max-width: 145px;
    max-height: 34px;

    object-fit: contain;
}


/* -------------------------
   Desktop navigation
   ------------------------- */

.fm-desktop-nav {
    display: flex;
    justify-content: flex-end;
}

.fm-menu {
    display: flex;
    align-items: center;

    gap: 34px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.fm-menu > li {
    position: relative;

    margin: 0;
    padding: 0;
}

.fm-menu > li > a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 82px;

    color: #30302e;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: -0.01em;

    transition:
        color 0.2s ease;
}

.fm-menu > li > a:hover,
.fm-menu > li.current-menu-item > a,
.fm-menu > li.current-menu-ancestor > a {
    color: #000;
}


/* navigation underline */

.fm-menu > li > a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 22px;

    height: 1px;

    background: var(--fm-color-ink);

    transition:
        right 0.25s ease;
}

.fm-menu > li > a:hover::after,
.fm-menu > li.current-menu-item > a::after,
.fm-menu > li.current-menu-ancestor > a::after {
    right: 0;
}


/* -------------------------
   Desktop dropdown
   ------------------------- */

.fm-menu .sub-menu {
    position: absolute;

    top: calc(100% - 8px);
    left: -25px;

    z-index: 20;

    width: 290px;

    margin: 0;
    padding: 12px;

    list-style: none;

    background: var(--fm-color-dark);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.12);
}

.fm-menu li:hover > .sub-menu,
.fm-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

.fm-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.fm-menu .sub-menu a {
    display: block;

    padding: 14px 15px;

    color: #c6c7c3;

    text-decoration: none;

    font-size: 14px;
    line-height: 1.35;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.fm-menu .sub-menu a:hover,
.fm-menu .sub-menu a:focus {
    background: #262826;
    color: #fff;
}


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

.fm-header-cta {
    display: flex;
    align-items: center;
}

.fm-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 46px;

    padding: 0 19px;

    background: var(--fm-color-ink);

    color: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 650;

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

.fm-header-button span {
    transition:
        transform 0.2s ease;
}

.fm-header-button:hover,
.fm-header-button:focus {
    background: #343434;

    color: #fff;

    transform:
        translateY(-1px);
}

.fm-header-button:hover span {
    transform:
        translateX(4px);
}


/* -------------------------
   Mobile toggle
   ------------------------- */

.fm-menu-toggle {
    display: none;

    position: relative;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.fm-toggle-line {
    position: absolute;

    left: 10px;

    width: 26px;
    height: 1.5px;

    background: var(--fm-color-ink);

    transition:
        transform 0.25s ease,
        top 0.25s ease;
}

.fm-toggle-line:first-child {
    top: 18px;
}

.fm-toggle-line:last-child {
    top: 27px;
}

.fm-menu-open .fm-toggle-line:first-child {
    top: 23px;

    transform:
        rotate(45deg);
}

.fm-menu-open .fm-toggle-line:last-child {
    top: 23px;

    transform:
        rotate(-45deg);
}


/* -------------------------
   Mobile nav base
   ------------------------- */

.fm-mobile-nav {
    display: none;
}

body.fm-nav-open {
    overflow: hidden;
}


/* -------------------------
   Accessibility
   ------------------------- */

.fm-site-header a:focus-visible,
.fm-site-header button:focus-visible {
    outline:
        2px solid
        var(--fm-color-ink);

    outline-offset: 4px;
}

.fm-mobile-nav a:focus-visible {
    outline-color: #fff;
}


/* =========================================================
   HEADER 01 — TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

    .fm-header-inner {
        width: min(
            calc(100% - 36px),
            var(--fm-container-wide)
        );

        min-height: 72px;

        grid-template-columns:
            1fr
            auto;

        gap: 20px;
    }


    .fm-desktop-nav,
    .fm-header-cta {
        display: none;
    }


    .fm-menu-toggle {
        display: block;
    }


    .fm-logo-text {
        font-size: 17px;
    }


    .fm-logo-image {
        max-width: 130px;
        max-height: 30px;
    }


    /* Mobile navigation panel */

    .fm-mobile-nav {
        position: fixed;

        top: 72px;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;

        background:
            var(--fm-color-dark);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-10px);

        pointer-events: none;

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease;

        overflow-y: auto;
    }


    .admin-bar .fm-mobile-nav {
        top: 104px;
    }


    .fm-menu-open .fm-mobile-nav {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(0);

        pointer-events: auto;
    }


    .fm-mobile-nav-inner {
        width: min(
            calc(100% - 36px),
            var(--fm-container-wide)
        );

        min-height: 100%;

        margin: 0 auto;

        padding:
            42px
            0
            36px;

        display: flex;
        flex-direction: column;
    }


    /* Main mobile links */

    .fm-mobile-menu {
        margin: 0;
        padding: 0;

        list-style: none;
    }


    .fm-mobile-menu > li {
        border-bottom:
            1px solid
            #323532;
    }


    .fm-mobile-menu > li > a {
        display: block;

        padding:
            19px
            0;

        color:
            #f5f4f0;

        text-decoration: none;

        font-size:
            clamp(
                27px,
                8vw,
                40px
            );

        line-height: 1.05;

        letter-spacing:
            -0.04em;

        font-weight: 500;
    }


    .fm-mobile-menu > li > a:hover {
        color: #fff;
    }


    /* WordPress-generated submenu */

    .fm-mobile-menu .sub-menu {
        margin: 0;

        padding:
            0
            0
            var(--fm-space-5);

        list-style: none;
    }


    .fm-mobile-menu .sub-menu li {
        margin: 0;
        padding: 0;
    }


    .fm-mobile-menu .sub-menu a {
        display: block;

        padding:
            var(--fm-space-2)
            0;

        color:
            #999d99;

        text-decoration: none;

        font-size:
            var(--fm-text-sm);

        line-height: 1.4;
    }


    .fm-mobile-menu .sub-menu a:hover {
        color: #fff;
    }


    /* Mobile CTA */

    .fm-mobile-cta {
        margin-top: auto;

        padding-top: 45px;
    }


    .fm-mobile-project-button {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        padding:
            20px
            0;

        border-top:
            1px solid
            #454845;

        color:
            #f5f4f0;

        text-decoration: none;

        font-size: 17px;
        font-weight: 600;
    }


    .fm-mobile-project-button span {
        font-size: 22px;
    }

}


/* =========================================================
   HEADER 01 — SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .fm-header-inner {
        width:
            calc(100% - 30px);
    }


    .fm-mobile-nav-inner {
        width:
            calc(100% - 30px);
    }

}


/* =========================================================
   HEADER 01 — WORDPRESS ADMIN BAR
   ========================================================= */

@media screen and (max-width: 782px) {

    .admin-bar .fm-site-header {
        top: 46px;
    }


    .admin-bar .fm-mobile-nav {
        top: 118px;
    }

}

/* =========================================================
   CTA 01 — DARK EDITORIAL
   ========================================================= */

.fm-cta--01 {
    position: relative;

    padding-block: var(--fm-space-section);

    background: var(--fm-color-dark-soft);
    color: var(--fm-color-on-dark);

    overflow: hidden;
}


/* Signature lime device */

.fm-cta--01::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 72px;
    height: 6px;

    background: var(--fm-color-lime);
}


/* Layout */

.fm-cta__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.7fr);

    gap: var(--fm-space-grid);

    align-items: end;
}


/* Heading area */

.fm-cta__heading {
    max-width: 720px;
}


/* Content area */

.fm-cta__content {
    max-width: 500px;
}


.fm-cta__copy {
    margin:
        0
        0
        var(--fm-space-6);

    color: var(--fm-color-on-dark-muted);

    font-size: var(--fm-text-lg);
    line-height: var(--fm-leading-body);
}


/* =========================================================
   CTA 01 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .fm-cta__grid {
        display: block;
    }


    .fm-cta__content {
        margin-top: var(--fm-space-7);
    }


    .fm-cta--01::before {
        width: 48px;
    }

}


/* =========================================================
   FOOTER 01 — EDITORIAL CORPORATE
   ========================================================= */

.site-footer {
    display: none;
}


.fm-footer-01 {
    padding:
        var(--fm-space-10)
        0
        var(--fm-space-5);

    background:
        var(--fm-color-dark);

    color:
        var(--fm-color-on-dark);
}


.fm-footer-top {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        0.8fr
        1fr;

    gap:
        var(--fm-space-grid);

    padding-bottom:
        var(--fm-space-9);
}


.fm-footer-brand {
    max-width: 380px;
}


.fm-footer-logo {
    display: inline-block;

    color:
        var(--fm-color-on-dark);

    text-decoration: none;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.fm-footer-statement {
    max-width: 340px;

    margin:
        var(--fm-space-6)
        0
        0;

    color:
        var(--fm-color-on-dark-muted);

    font-size:
        var(--fm-text-base);

    line-height:
        var(--fm-leading-body);
}


.fm-footer-label {
    margin-bottom:
        var(--fm-space-5);

    color:
        #777b76;

    font-size:
        var(--fm-text-xs);

    font-weight:
        var(--fm-weight-bold);

    letter-spacing:
        var(--fm-tracking-label);

    text-transform:
        uppercase;
}


.fm-footer-menu {
    margin: 0;
    padding: 0;

    list-style: none;
}


.fm-footer-menu li {
    margin:
        0
        0
        var(--fm-space-3);
}


.fm-footer-menu a {
    color:
        #c7cac5;

    text-decoration: none;

    font-size:
        var(--fm-text-sm);

    transition:
        color 0.2s ease;
}


.fm-footer-menu a:hover {
    color:
        #fff;
}


.fm-footer-project-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--fm-space-5);

    padding:
        var(--fm-space-4)
        0;

    border-top:
        1px solid
        var(--fm-color-line-dark);

    border-bottom:
        1px solid
        var(--fm-color-line-dark);

    color:
        var(--fm-color-on-dark);

    text-decoration: none;

    font-size:
        var(--fm-text-base);

    font-weight:
        var(--fm-weight-semibold);
}


.fm-footer-project-link span {
    transition:
        transform 0.2s ease;
}


.fm-footer-project-link:hover span {
    transform:
        translate(3px, -3px);
}


.fm-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap:
        var(--fm-space-5);

    padding-top:
        var(--fm-space-5);

    border-top:
        1px solid
        var(--fm-color-line-dark);

    color:
        #777b76;

    font-size:
        var(--fm-text-xs);
}


.fm-footer-legal {
    display: flex;

    gap:
        var(--fm-space-5);
}


.fm-footer-legal a {
    color:
        inherit;

    text-decoration:
        none;
}


.fm-footer-legal a:hover {
    color:
        var(--fm-color-on-dark);
}


@media (max-width: 900px) {

    .fm-footer-top {
        grid-template-columns:
            1fr
            1fr;

        row-gap:
            var(--fm-space-8);
    }

}


@media (max-width: 600px) {

    .fm-footer-01 {
        padding-top:
            var(--fm-space-8);
    }


    .fm-footer-top {
        display:
            block;
    }


    .fm-footer-column,
    .fm-footer-project {
        margin-top:
            var(--fm-space-8);
    }


    .fm-footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

}

/* =========================================================
   PREMIUM FOUNDAM HERO
   ========================================================= */

.fm-hero {
    position: relative;

    min-height: 780px;

    padding: 95px 0 110px;

    background: var(--fm-color-bg);

    overflow: hidden;
}


/*
 * subtle editorial rule running behind the hero
 */

.fm-hero::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: calc(50% + 160px);

    width: 1px;

    background: rgba(23, 23, 23, 0.07);

    pointer-events: none;
}


.fm-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.83fr)
        minmax(500px, 1.17fr);

    align-items: center;

    gap: 45px;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.fm-hero-content {
    position: relative;
    z-index: 5;

    padding-top: 12px;
}


.fm-hero-kicker {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 47px;

    color: #686864;

    font-size: 10px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.14em;
}


.fm-kicker-line {
    display: inline-block;

    width: 46px;
    height: 1px;

    background: #99968f;
}


.fm-hero h1 {
    position: relative;

    width: 760px;
    max-width: none;

    margin: 0;

    font-size: clamp(66px, 6.2vw, 100px);
    line-height: 0.88;

    letter-spacing: -0.065em;

    font-weight: 540;
}


/*
 * Slightly editorial treatment.
 * If Instrument Serif is eventually loaded,
 * it will be picked up automatically.
 */

.fm-hero-serif {
    display: block;

    margin-top: 8px;

    font-family:
        "Instrument Serif",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.06em;
    font-weight: 400;
    font-style: italic;

    letter-spacing: -0.055em;
}


.fm-hero-lower {
    max-width: 570px;

    margin-top: 46px;
}


.fm-lead {
    max-width: 555px;

    margin: 0;

    color: var(--fm-color-muted);

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


.fm-actions {
    display: flex;
    align-items: center;

    gap: 30px;

    margin-top: 36px;
}


/* =========================================================
   HERO VISUAL SHELL
   ========================================================= */

.fm-hero-visual {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 610px;

    margin-right: -9vw;
}


.fm-hero-art-shell {
    position: relative;

    width: min(760px, 57vw);

    margin-left: auto;
}


/* =========================================================
   SIGNATURE LIME RAIL
   ========================================================= */

.fm-lime-rail {
    position: absolute;

    top: -18px;
    left: -34px;

    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 28px;
}


.fm-lime-dot {
    display: block;

    width: 10px;
    height: 10px;

    background: var(--fm-accent);
}


.fm-lime-line {
    display: block;

    width: 2px;
    height: 154px;

    margin-top: 10px;

    background: var(--fm-accent);
}


.fm-lime-index {
    display: block;

    margin-top: 12px;

    color: var(--fm-color-ink);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.15em;

    writing-mode: vertical-rl;
}


/* =========================================================
   OVERSIZED HERO ART
   ========================================================= */

.fm-project-art {
    position: relative;

    width: 100%;

    aspect-ratio: 1.02 / 1;

    background: #151715;

    overflow: hidden;

    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.08);
}


/*
 * soft grid detail
 */

.fm-project-art::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    pointer-events: none;
}


/*
 * secondary lime graphic element
 */

.fm-project-art::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 12px;

    right: 40px;
    bottom: 36px;

    background: var(--fm-color-accent);
}


/* =========================================================
   VISUAL META
   ========================================================= */

.fm-project-art-meta {
    position: absolute;

    top: 27px;
    left: 30px;
    right: 30px;

    z-index: 9;

    display: flex;
    justify-content: space-between;

    color: #c1c3bf;

    font-size: 9px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.14em;
}


/* =========================================================
   ART SHEETS
   ========================================================= */

.fm-art-sheet {
    position: absolute;

    box-sizing: border-box;
}


/* back sheet */

.fm-art-sheet-one {
    width: 51%;
    height: 67%;

    left: 8%;
    bottom: -5%;

    padding: 29px;

    background: #f3efe5;

    transform:
        rotate(-7deg)
        translateY(5px);

    box-shadow:
        0 28px 45px rgba(0, 0, 0, 0.17);
}


.fm-sheet-small {
    color: #181818;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.18em;
}


.fm-sheet-rule {
    width: 38px;
    height: 2px;

    margin-top: 38px;

    background: #161816;
}


.fm-sheet-caption {
    position: absolute;

    left: 29px;
    bottom: 35px;

    color: #171717;

    font-size: clamp(17px, 1.8vw, 26px);
    line-height: 1.05;

    letter-spacing: -0.04em;
}


/* lime front sheet */

.fm-art-sheet-two {
    width: 54%;
    height: 73%;

    right: 7%;
    top: 14%;

    z-index: 4;

    padding: 38px 36px;

    background: var(--fm-accent);

    color: #121212;

    transform:
        rotate(5deg)
        translateX(10px);

    box-shadow:
        0 35px 60px rgba(0, 0, 0, 0.24);
}


.fm-art-number {
    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.fm-art-sheet-two strong {
    position: absolute;

    left: 36px;
    top: 31%;

    display: block;

    font-size: clamp(45px, 4.3vw, 70px);
    line-height: 0.84;

    letter-spacing: -0.07em;

    font-weight: 620;
}


.fm-art-footer {
    position: absolute;

    left: 36px;
    bottom: 34px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.11em;
}


/* small warm block */

.fm-art-sheet-three {
    width: 26%;
    height: 27%;

    right: 35%;
    bottom: 2%;

    z-index: 6;

    background: #c8bbaa;

    transform: rotate(-4deg);

    box-shadow:
        0 18px 30px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   FLOATING ART DIRECTION DETAILS
   ========================================================= */

.fm-art-floating-copy {
    position: absolute;

    right: 25px;
    top: 50%;

    z-index: 7;

    display: flex;
    flex-direction: column;

    gap: 7px;

    color: rgba(255,255,255,0.62);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.17em;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin: right center;
}


.fm-art-side-note {
    position: absolute;

    right: 0;
    bottom: -30px;

    color: #6d6c67;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =========================================================
   HERO MICRO INTERACTION
   ========================================================= */

.fm-art-sheet-one,
.fm-art-sheet-two,
.fm-art-sheet-three {
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


.fm-project-art:hover .fm-art-sheet-one {
    transform:
        rotate(-8deg)
        translate(-4px, 7px);
}


.fm-project-art:hover .fm-art-sheet-two {
    transform:
        rotate(4deg)
        translate(6px, -5px);
}


.fm-project-art:hover .fm-art-sheet-three {
    transform:
        rotate(-5deg)
        translateY(-5px);
}


/* =========================================================
   HERO TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .fm-hero-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(430px, 1.1fr);

        gap: 30px;
    }

    .fm-hero h1 {
        width: 660px;

        font-size: clamp(62px, 6vw, 84px);
    }

    .fm-hero-art-shell {
        width: min(650px, 56vw);
    }

}


/* =========================================================
   HERO MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .fm-hero {
        min-height: auto;

        padding: 55px 0 70px;
    }


    .fm-hero::before {
        display: none;
    }


    .fm-hero-grid {
        display: block;
    }


    .fm-hero-content {
        padding-top: 0;
    }


    .fm-hero-kicker {
        flex-wrap: wrap;

        gap: 10px;

        margin-bottom: 31px;

        font-size: 9px;
    }


    .fm-kicker-line {
        width: 27px;
    }


    .fm-hero h1 {
        width: auto;

        font-size: clamp(55px, 16vw, 78px);
        line-height: 0.9;
    }


    .fm-hero-serif {
        margin-top: 6px;
    }


    .fm-hero-lower {
        margin-top: 32px;
    }


    .fm-lead {
        font-size: 17px;
        line-height: 1.62;
    }


    .fm-actions {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        margin-top: 31px;
    }


    .fm-hero-visual {
        min-height: auto;

        margin:
            60px
            -18px
            0
            20px;
    }


    .fm-hero-art-shell {
        width: 100%;
    }


    .fm-project-art {
        aspect-ratio: 0.9 / 1;
    }


    .fm-lime-rail {
        top: -20px;
        left: -18px;
    }


    .fm-lime-line {
        height: 95px;
    }


    .fm-art-sheet-one {
        width: 57%;
        height: 62%;

        left: 4%;

        padding: 21px;
    }


    .fm-art-sheet-two {
        width: 59%;
        height: 70%;

        right: 3%;

        padding: 26px 24px;
    }


    .fm-art-sheet-two strong {
        left: 24px;

        font-size: clamp(38px, 12vw, 54px);
    }


    .fm-art-footer {
        left: 24px;
        bottom: 23px;

        font-size: 6px;
    }


    .fm-art-sheet-three {
        width: 27%;
        height: 23%;

        right: 36%;
    }


    .fm-project-art-meta {
        top: 20px;
        left: 20px;
        right: 20px;

        font-size: 7px;
    }


    .fm-art-floating-copy {
        display: none;
    }


    .fm-art-side-note {
        right: 5px;
        bottom: -26px;

        font-size: 7px;
    }

}

/* =========================================================
   CAPABILITY STRIP 01
   ========================================================= */

.fm-strip--01,
.fm-strip {
    border-top:
        var(--fm-border-default);

    border-bottom:
        var(--fm-border-default);
}


.fm-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--fm-space-6);

    min-height:
        84px;

    font-size:
        var(--fm-text-sm);

    font-weight:
        var(--fm-weight-semibold);
}


.fm-strip-inner i {
    flex:
        0
        0
        auto;

    width:
        4px;

    height:
        4px;

    background:
        var(--fm-color-ink);

    border-radius:
        var(--fm-radius-full);
}


@media (max-width: 767px) {

    .fm-strip-inner {
        flex-wrap:
            wrap;

        justify-content:
            flex-start;

        gap:
            var(--fm-space-3);

        padding:
            var(--fm-space-5)
            0;
    }


    .fm-strip-inner i {
        display:
            none;
    }


    .fm-strip-inner span {
        width:
            100%;
    }

}

/* =========================================================
   SERVICES 01
   ========================================================= */

.fm-services--01 .fm-section-heading {
    max-width: 820px;
}


.fm-service-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top:
        var(--fm-space-9);

    border-top:
        var(--fm-border-default);
}


/* =========================================================
   WORK 01
   ========================================================= */

.fm-work {
    background:
        #e8e5de;
}


.fm-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap:
        var(--fm-space-grid);

    margin-bottom:
        var(--fm-space-9);
}


.fm-heading-row h2 {
    max-width: 760px;
}


/* =========================================================
   PROCESS 01
   ========================================================= */

.fm-dark-section {
    padding-block:
        var(--fm-space-section);

    background:
        var(--fm-color-dark);

    color:
        var(--fm-color-on-dark);
}


.fm-dark-heading {
    max-width: 800px;

    margin-bottom:
        var(--fm-space-10);
}


.fm-dark-heading .fm-heading {
    color:
        var(--fm-color-on-dark);
}


.fm-process-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        var(--fm-border-dark);
}


/* =========================================================
   SERVICES / WORK / PROCESS RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .fm-service-grid {
        display: block;

        margin-top:
            var(--fm-space-8);
    }


    .fm-heading-row {
        display: block;

        margin-bottom:
            var(--fm-space-8);
    }


    .fm-heading-row > .fm-text-link {
        margin-top:
            var(--fm-space-5);
    }


    .fm-process-grid {
        display: block;
    }

}

/* =========================================================
   LEGACY HOMEPAGE HEADING BRIDGE
   Temporary until live homepage uses framework template
   ========================================================= */

.foundam-home .fm-section-intro {
    max-width: 820px;
}


.foundam-home .fm-section-intro h2,
.foundam-home .fm-heading-row h2,
.foundam-home .fm-dark-heading h2,
.foundam-home .fm-capability-copy h2,
.foundam-home .fm-about h2,
.foundam-home .fm-cta h2 {
    margin: 0;

    font-family:
        var(--fm-font-sans);

    font-size:
        var(--fm-text-h2);

    line-height:
        var(--fm-leading-heading);

    letter-spacing:
        var(--fm-tracking-heading);

    font-weight:
        var(--fm-weight-medium);
}


.foundam-home .fm-section-intro > p {
    max-width: 690px;

    margin:
        var(--fm-space-6)
        0
        0;

    color:
        var(--fm-color-muted);

    font-size:
        var(--fm-text-lg);

    line-height:
        var(--fm-leading-body);
}


/* =========================================================
   CAPABILITIES 01
   ========================================================= */

.fm-capability-layout {
    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap:
        110px;
}


.fm-capability-copy .fm-section-heading {
    max-width: 570px;
}


.fm-capability-list {
    border-top:
        var(--fm-border-default);
}


/*
 * Compatibility with old homepage markup.
 */

.fm-capability-list > div:not(.fm-capability-item) {
    display: flex;
    align-items: center;

    min-height: 64px;

    border-bottom:
        var(--fm-border-default);

    font-size:
        var(--fm-text-base);

    font-weight:
        var(--fm-weight-medium);
}


/* =========================================================
   ABOUT TEASER 01
   ========================================================= */

.fm-about {
    border-top:
        var(--fm-border-default);
}


.fm-about-grid {
    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap:
        100px;
}


.fm-large-copy {
    margin:
        0
        0
        var(--fm-space-6);

    font-size:
        clamp(
            1.625rem,
            3vw,
            2.375rem
        );

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}


.fm-about-copy > p:not(.fm-large-copy) {
    max-width:
        650px;

    margin:
        0
        0
        var(--fm-space-6);

    color:
        var(--fm-color-muted);

    line-height:
        var(--fm-leading-body);

    font-size:
        var(--fm-text-base);
}


/* =========================================================
   CAPABILITIES / ABOUT — TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .fm-capability-layout {
        gap:
            var(--fm-space-8);
    }

}


/* =========================================================
   CAPABILITIES / ABOUT — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .fm-capability-layout,
    .fm-about-grid {
        display:
            block;
    }


    .fm-capability-list {
        margin-top:
            var(--fm-space-8);
    }


    .fm-about-copy {
        margin-top:
            var(--fm-space-7);
    }

}