/* ==========================================================================
   WE'LL FIX IT IN POST™
   Shared Stylesheet
   Foundation + Header + Home Hero
   ========================================================================== */


/* ==========================================================================
   TOKENS
   ========================================================================== */

:root {
    --cut-black: #0b0c0e;
    --edit-bay: #15171a;
    --panel-black: #1b1d21;

    --paper-white: #f2f0ea;
    --soft-white: #d9d7d0;

    --timeline-gray: #8b8e93;
    --timeline-dark: #575a60;

    --rec-red: #f04444;
    --waveform-blue: #5d78ff;
    --night-vision: #91a889;
    --practical-light: #e6bc72;

    --border-dark: rgba(242, 240, 234, 0.14);
    --border-light: rgba(242, 240, 234, 0.24);

    --shadow-deep:
        0 32px 90px rgba(0, 0, 0, 0.48);

    --font-display:
        "Arial Narrow",
        "Roboto Condensed",
        "Helvetica Neue",
        Arial,
        sans-serif;

    --font-body:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    --font-mono:
        "Cascadia Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --page-width: 1480px;
}


/* ==========================================================================
   RESET
   ========================================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--paper-white);

    background: var(--cut-black);

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

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
}


img,
video,
svg {
    display: block;

    max-width: 100%;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;
}


button {
    border: 0;

    cursor: pointer;
}


::selection {
    color: var(--cut-black);

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


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

:focus-visible {
    outline:
        2px solid
        var(--waveform-blue);

    outline-offset: 5px;
}


/* ==========================================================================
   SHARED HEADER
   ========================================================================== */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 50;

    width: 100%;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);

    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.82) 0%,
            rgba(11, 12, 14, 0.28) 72%,
            rgba(11, 12, 14, 0) 100%
        );
}


.site-header__inner {
    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    min-height: 96px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.brand {
    position: relative;

    display: grid;

    width: fit-content;

    text-decoration: none;

    line-height: 0.86;
}


.brand__primary,
.brand__secondary {
    display: block;

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

    font-size:
        clamp(
            1.02rem,
            1.4vw,
            1.28rem
        );

    font-weight: 950;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.brand__primary {
    color: var(--paper-white);
}


.brand__secondary {
    color: var(--paper-white);
}


.brand__tagline {
    position: absolute;

    left: calc(100% + 0.7rem);
    bottom: -0.05rem;

    color: var(--practical-light);

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

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    white-space: nowrap;

    transform: rotate(-3deg);
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-nav {
    display: flex;

    align-items: center;

    gap:
        clamp(
            1.3rem,
            2.5vw,
            2.5rem
        );
}


.site-nav > a {
    position: relative;

    color:
        rgba(242, 240, 234, 0.76);

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

    font-size: 0.68rem;

    font-weight: 750;

    letter-spacing: 0.10em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease;
}


.site-nav > a:not(.site-nav__cta)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -0.45rem;

    width: 0;
    height: 1px;

    background: var(--rec-red);

    transition:
        width 180ms ease;
}


.site-nav > a:not(.site-nav__cta):hover {
    color: var(--paper-white);
}


.site-nav > a:not(.site-nav__cta):hover::after {
    width: 100%;
}


.site-nav__cta {
    min-height: 42px;

    padding:
        0.82rem
        1.15rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--paper-white) !important;

    border:
        1px solid
        rgba(242, 240, 234, 0.34);

    background:
        rgba(11, 12, 14, 0.28);
}


.site-nav__cta:hover {
    border-color: var(--paper-white);

    background: var(--paper-white);

    color: var(--cut-black) !important;
}


/* ==========================================================================
   MOBILE NAV TOGGLE
   ========================================================================== */

.nav-toggle {
    display: none;

    width: 48px;
    height: 48px;

    padding: 0;

    background: transparent;

    border:
        1px solid
        var(--border-light);
}


.nav-toggle span {
    display: block;

    width: 19px;
    height: 1px;

    margin: 5px auto;

    background: var(--paper-white);
}


/* ==========================================================================
   HOME HERO
   ========================================================================== */

.home-hero {
    position: relative;

    min-height: 100svh;

    background: var(--cut-black);

    overflow: hidden;
}


/* ==========================================================================
   HERO MEDIA
   ========================================================================== */

.home-hero__media {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.home-hero__media-placeholder {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 72% 43%,
            rgba(93, 120, 255, 0.18),
            transparent 24%
        ),
        radial-gradient(
            circle at 74% 62%,
            rgba(240, 68, 68, 0.09),
            transparent 22%
        ),
        linear-gradient(
            118deg,
            #111317 0%,
            #191c21 45%,
            #0a0b0d 100%
        );
}


.home-hero__media-placeholder::before {
    content: "";

    position: absolute;

    top: 25%;
    right: 9%;

    width:
        clamp(
            280px,
            37vw,
            620px
        );

    aspect-ratio: 16 / 9;

    border:
        1px solid
        rgba(242, 240, 234, 0.09);

    background:
        linear-gradient(
            145deg,
            rgba(242, 240, 234, 0.025),
            rgba(242, 240, 234, 0)
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(0, 0, 0, 0.4),
        var(--shadow-deep);

    transform: rotate(-1.5deg);
}


.home-hero__media-placeholder::after {
    content: "FRAME 001";

    position: absolute;

    right:
        clamp(
            3rem,
            7vw,
            7rem
        );

    bottom:
        clamp(
            6rem,
            10vw,
            9rem
        );

    color:
        rgba(242, 240, 234, 0.16);

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

    font-size:
        clamp(
            2.5rem,
            6vw,
            6rem
        );

    font-weight: 900;

    letter-spacing: -0.07em;
}


.home-hero__media-placeholder > span {
    position: absolute;

    right:
        clamp(
            3rem,
            8vw,
            8rem
        );

    top: 23%;

    z-index: 2;

    padding:
        0.45rem
        0.65rem;

    color:
        rgba(242, 240, 234, 0.42);

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    background:
        rgba(11, 12, 14, 0.34);

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

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.home-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, 0.97) 0%,
            rgba(11, 12, 14, 0.84) 31%,
            rgba(11, 12, 14, 0.43) 57%,
            rgba(11, 12, 14, 0.24) 100%
        ),
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.18) 0%,
            rgba(11, 12, 14, 0) 53%,
            rgba(11, 12, 14, 0.82) 100%
        );
}


/* ==========================================================================
   HERO FRAME
   ========================================================================== */

.home-hero__frame {
    position: relative;

    z-index: 3;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    min-height: 100svh;

    margin: 0 auto;

    padding:
        126px
        0
        48px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(290px, 0.52fr);

    grid-template-rows:
        auto
        1fr
        auto;

    column-gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: center;
}


/* ==========================================================================
   HERO TOP METADATA
   ========================================================================== */

.home-hero__meta {
    grid-column:
        1 /
        -1;

    display: flex;

    align-items: center;

    gap:
        clamp(
            1rem,
            3vw,
            3rem
        );

    color:
        rgba(242, 240, 234, 0.46);

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

    font-size: 0.61rem;

    font-weight: 750;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.home-hero__meta span:first-child {
    color: var(--night-vision);
}


.home-hero__meta span:not(:first-child)::before {
    content: "/";

    margin-right:
        clamp(
            1rem,
            3vw,
            3rem
        );

    color:
        rgba(242, 240, 234, 0.18);
}


/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.home-hero__content {
    position: relative;

    align-self: center;

    max-width: 900px;
}


.home-hero__eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--timeline-gray);

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

    font-size:
        clamp(
            0.66rem,
            0.85vw,
            0.78rem
        );

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.home-hero__eyebrow::before {
    content: "●";

    margin-right: 0.65rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.home-hero__title {
    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4.5rem,
            9.2vw,
            9.2rem
        );

    font-weight: 950;

    line-height: 0.73;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.home-hero__title span {
    display: block;
}


.home-hero__title span:last-child {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, 0.88);

    text-stroke:
        1.5px
        rgba(242, 240, 234, 0.88);
}


.home-hero__probably {
    width: fit-content;

    margin:
        1rem
        0
        0
        clamp(1rem, 8vw, 8rem);

    color: var(--practical-light);

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

    font-size:
        clamp(
            0.76rem,
            1.2vw,
            1rem
        );

    font-weight: 850;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    transform: rotate(-2deg);
}


.home-hero__intro {
    max-width: 540px;

    margin:
        clamp(
            2rem,
            4vw,
            3.5rem
        )
        0
        0;

    color:
        rgba(242, 240, 234, 0.69);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.16rem
        );

    line-height: 1.72;
}


/* ==========================================================================
   HERO ACTIONS
   ========================================================================== */

.home-hero__actions {
    margin-top: 2.2rem;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        1rem
        1.5rem;
}


.button {
    min-height: 50px;

    padding:
        0.8rem
        1.25rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    color: var(--paper-white);

    background: var(--paper-white);

    border:
        1px solid
        var(--paper-white);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.button--reel {
    color: var(--cut-black);

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}


.button--reel:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    border-color: var(--rec-red);
}


.button__rec {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--rec-red);

    box-shadow:
        0
        0
        0
        4px
        rgba(240, 68, 68, 0.13);
}


.button--reel:hover .button__rec {
    background: var(--paper-white);
}


.text-link {
    display: inline-flex;

    align-items: center;

    gap: 0.7rem;

    min-height: 44px;

    color:
        rgba(242, 240, 234, 0.78);

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

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-decoration: none;

    text-transform: uppercase;
}


.text-link span {
    color: var(--waveform-blue);

    font-size: 1rem;
}


.text-link:hover {
    color: var(--paper-white);
}


/* ==========================================================================
   HERO STATUS
   ========================================================================== */

.home-hero__status {
    position: relative;

    align-self: end;

    width:
        min(
            350px,
            100%
        );

    margin:
        0
        0
        clamp(1rem, 4vw, 3.5rem)
        auto;

    padding:
        1.35rem
        1.3rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.16);

    background:
        rgba(11, 12, 14, 0.64);

    box-shadow:
        0
        18px
        50px
        rgba(0, 0, 0, 0.24);

    backdrop-filter:
        blur(12px);
}


.home-hero__status::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -1px;

    width: 64px;
    height: 2px;

    background: var(--waveform-blue);
}


.home-hero__status-label {
    display: block;

    margin-bottom: 0.8rem;

    color: var(--timeline-gray);

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

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.home-hero__status strong {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--paper-white);

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

    font-size:
        clamp(
            1.7rem,
            2.7vw,
            2.4rem
        );

    font-weight: 950;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}


.home-hero__status small {
    display: block;

    color:
        rgba(242, 240, 234, 0.54);

    font-size: 0.78rem;

    line-height: 1.5;
}


.home-hero__progress {
    position: relative;

    height: 3px;

    margin:
        1.2rem
        0
        0.65rem;

    background:
        rgba(242, 240, 234, 0.11);

    overflow: hidden;
}


.home-hero__progress span {
    display: block;

    width: 99%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--waveform-blue),
            var(--rec-red)
        );
}


.home-hero__status-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    color:
        rgba(242, 240, 234, 0.40);

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

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-hero__status-meta span:first-child {
    color: var(--rec-red);
}


/* ==========================================================================
   HERO TIMECODE
   ========================================================================== */

.home-hero__timecode {
    grid-column:
        1 /
        -1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 1.4rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.11);

    color:
        rgba(242, 240, 234, 0.45);

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

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.home-hero__rec {
    position: relative;

    padding-left: 1.1rem;

    color: var(--rec-red);
}


.home-hero__rec::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    transform:
        translateY(-50%);
}


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

@media (max-width: 980px) {

    .site-header__inner {
        min-height: 84px;
    }


    .site-nav {
        gap: 1.2rem;
    }


    .home-hero__frame {
        padding-top: 112px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.45fr);

        column-gap: 2.5rem;
    }


    .home-hero__title {
        font-size:
            clamp(
                4.3rem,
                10vw,
                7rem
            );
    }

}


/* ==========================================================================
   MOBILE NAVIGATION + HERO
   ========================================================================== */

@media (max-width: 760px) {

    .site-header {
        position: absolute;
    }


    .site-header__inner {
        width:
            calc(100% - 2rem);

        min-height: 76px;
    }


    .brand__primary,
    .brand__secondary {
        font-size: 0.96rem;
    }


    .brand__tagline {
        display: none;
    }


    .nav-toggle {
        position: relative;
        z-index: 60;

        display: block;
    }


    .site-nav {
        position: absolute;

        top: 76px;
        left: 1rem;
        right: 1rem;

        display: none;

        padding:
            1.2rem;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        border:
            1px solid
            rgba(242, 240, 234, 0.16);

        background:
            rgba(11, 12, 14, 0.97);

        box-shadow:
            0
            26px
            60px
            rgba(0, 0, 0, 0.42);

        backdrop-filter:
            blur(18px);
    }


    .site-nav.is-open {
        display: flex;
    }


    .site-nav > a {
        padding:
            1rem
            0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .site-nav > a:last-child {
        margin-top: 1rem;

        border-bottom: 0;
    }


    .site-nav__cta {
        width: 100%;
    }


    .home-hero {
        min-height: 100svh;
    }


    .home-hero__media-placeholder::before {
        top: 21%;
        right: -18%;

        width: 82vw;

        opacity: 0.76;
    }


    .home-hero__media-placeholder::after {
        right: -1rem;
        bottom: 9rem;

        font-size: 4rem;
    }


    .home-hero__media-placeholder > span {
        display: none;
    }


    .home-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(11, 12, 14, 0.72) 0%,
                rgba(11, 12, 14, 0.80) 33%,
                rgba(11, 12, 14, 0.96) 74%,
                rgba(11, 12, 14, 1) 100%
            );
    }


    .home-hero__frame {
        width:
            calc(100% - 2rem);

        min-height: 100svh;

        padding:
            104px
            0
            32px;

        display: block;
    }


    .home-hero__meta {
        margin-bottom: 5rem;

        gap: 0.9rem;

        font-size: 0.52rem;
    }


    .home-hero__meta span:not(:first-child)::before {
        margin-right: 0.9rem;
    }


    .home-hero__content {
        max-width: 100%;
    }


    .home-hero__eyebrow {
        margin-bottom: 1.2rem;
    }


    .home-hero__title {
        font-size:
            clamp(
                4rem,
                20vw,
                6.4rem
            );

        line-height: 0.76;
    }


    .home-hero__probably {
        margin-left: 1rem;
    }


    .home-hero__intro {
        max-width: 440px;

        margin-top: 2rem;
    }


    .home-hero__actions {
        align-items: flex-start;

        flex-direction: column;

        margin-top: 1.8rem;
    }


    .button--reel {
        width: 100%;
    }


    .home-hero__status {
        width: 100%;

        margin:
            4rem
            0
            2.5rem;
    }


    .home-hero__timecode {
        margin-top: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .home-hero__meta span:nth-child(3) {
        display: none;
    }


    .home-hero__title {
        font-size:
            clamp(
                3.55rem,
                19vw,
                5rem
            );
    }


    .home-hero__intro {
        font-size: 0.98rem;
    }


    .home-hero__timecode {
        font-size: 0.54rem;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ==========================================================================
   WFIP_HOME_HERO_IMAGE_V1
   Real cinematic hero photography
   ========================================================================== */

.home-hero__media-placeholder {
    background:
        url("../images/hero/home-hero-production.png")
        center right /
        cover
        no-repeat;
}


.home-hero__media-placeholder::before,
.home-hero__media-placeholder::after {
    content: none;
}


.home-hero__media-placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .home-hero__media-placeholder {
        background-position:
            64% center;
    }

}

/* ==========================================================================
   WFIP_HERO_IN_POST_OFFSET_V1
   Lower IN POST. slightly within the locked hero lockup
   ========================================================================== */

.home-hero__title span:last-child {
    transform: translateY(4px);
}

/* ==========================================================================
   WFIP_SELECTED_WORK_STYLE_V1
   Homepage — Selected Work
   ========================================================================== */

.selected-work {
    position: relative;

    width: 100%;

    padding:
        clamp(7rem, 11vw, 11rem)
        0
        clamp(7rem, 10vw, 10rem);

    color: var(--cut-black);

    background: var(--paper-white);

    overflow: hidden;
}


/* faint editorial frame number */

.selected-work::before {
    content: "01";

    position: absolute;

    top: 2rem;
    right: -0.8rem;

    color:
        rgba(11, 12, 14, 0.035);

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

    font-size:
        clamp(12rem, 25vw, 27rem);

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.selected-work__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.selected-work__header {
    margin-bottom:
        clamp(5rem, 9vw, 9rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(220px, 0.35fr);

    gap:
        clamp(3rem, 8vw, 8rem);

    align-items: end;
}


.section-kicker {
    margin:
        0
        0
        1.25rem;

    color: var(--rec-red);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.section-kicker::before {
    content: "●";

    margin-right: 0.65rem;

    font-size: 0.72em;
}


.selected-work__heading h2 {
    max-width: 880px;

    margin: 0;

    color: var(--cut-black);

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

    font-size:
        clamp(
            4.5rem,
            8.2vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.79;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.selected-work__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.4px
        rgba(11, 12, 14, 0.82);

    text-stroke:
        1.4px
        rgba(11, 12, 14, 0.82);
}


.selected-work__header-meta {
    padding-top: 1.1rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.26);

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(11, 12, 14, 0.50);

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

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.selected-work__header-meta span:last-child {
    color: var(--waveform-blue);
}


/* ==========================================================================
   PROJECT GRID
   ========================================================================== */

.selected-work__grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    column-gap:
        clamp(1rem, 2.2vw, 2.2rem);

    row-gap:
        clamp(7rem, 12vw, 13rem);
}


/* ==========================================================================
   PROJECT BASE
   ========================================================================== */

.work-project {
    position: relative;
}


.work-project--feature {
    grid-column:
        1 /
        12;
}


.work-project--portrait {
    grid-column:
        7 /
        12;
}


.work-project--wide {
    grid-column:
        1 /
        10;
}


/* ==========================================================================
   MEDIA FRAME
   ========================================================================== */

.work-project__media {
    position: relative;

    display: block;

    color: inherit;

    text-decoration: none;

    background: var(--edit-bay);

    overflow: hidden;

    isolation: isolate;
}


.work-project--feature .work-project__media {
    aspect-ratio: 16 / 8.2;
}


.work-project--portrait .work-project__media {
    aspect-ratio: 4 / 5.15;
}


.work-project--wide .work-project__media {
    aspect-ratio: 16 / 8.5;
}


.work-project__placeholder {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(93, 120, 255, 0.16),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #1b1d21 0%,
            #111317 46%,
            #202329 100%
        );

    transition:
        transform 500ms ease,
        filter 500ms ease;
}


.work-project--portrait
.work-project__placeholder {
    background:
        radial-gradient(
            circle at 58% 26%,
            rgba(230, 188, 114, 0.16),
            transparent 25%
        ),
        linear-gradient(
            150deg,
            #16181c 0%,
            #25282e 55%,
            #101114 100%
        );
}


.work-project--wide
.work-project__placeholder {
    background:
        radial-gradient(
            circle at 35% 55%,
            rgba(145, 168, 137, 0.15),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #111216 0%,
            #1d2024 48%,
            #0d0e10 100%
        );
}


.work-project__placeholder::before {
    content: "";

    position: absolute;

    inset: 22px;

    border:
        1px solid
        rgba(242, 240, 234, 0.10);

    pointer-events: none;
}


.work-project__placeholder::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242, 240, 234, 0.06) 30%,
            rgba(242, 240, 234, 0.06) 70%,
            transparent 100%
        );

    pointer-events: none;
}


.work-project__placeholder span {
    color:
        rgba(242, 240, 234, 0.35);

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

    font-size: 0.59rem;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.work-project__media:hover
.work-project__placeholder {
    transform: scale(1.025);

    filter: brightness(1.08);
}


/* ==========================================================================
   PLAY CONTROL
   ========================================================================== */

.work-project__play {
    position: absolute;

    right:
        clamp(1.2rem, 2.5vw, 2.4rem);

    bottom:
        clamp(1.2rem, 2.5vw, 2.4rem);

    z-index: 4;

    width:
        clamp(52px, 5vw, 72px);

    height:
        clamp(52px, 5vw, 72px);

    display: grid;

    place-items: center;

    color: var(--cut-black);

    background: var(--paper-white);

    border-radius: 50%;

    font-size:
        clamp(0.72rem, 1vw, 0.95rem);

    box-shadow:
        0
        14px
        35px
        rgba(0, 0, 0, 0.25);

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.work-project__media:hover
.work-project__play {
    color: var(--paper-white);

    background: var(--rec-red);

    transform: scale(1.08);
}


/* ==========================================================================
   PROJECT INFO
   ========================================================================== */

.work-project__info {
    margin-top:
        clamp(1.4rem, 2.6vw, 2.2rem);

    padding-top: 1rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.22);

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        auto;

    gap:
        clamp(1rem, 2.5vw, 2.5rem);

    align-items: start;
}


.work-project__number {
    color: var(--rec-red);

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

    font-size: 0.65rem;

    font-weight: 850;

    letter-spacing: 0.14em;
}


.work-project__title h3 {
    margin: 0;

    color: var(--cut-black);

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

    font-size:
        clamp(
            2.4rem,
            4.2vw,
            4.6rem
        );

    font-weight: 950;

    line-height: 0.88;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.work-project--portrait
.work-project__title h3 {
    font-size:
        clamp(
            2.25rem,
            3.3vw,
            3.7rem
        );
}


.work-project__title p {
    margin:
        0.65rem
        0
        0;

    color:
        rgba(11, 12, 14, 0.55);

    font-size: 0.88rem;

    line-height: 1.5;
}


.work-project__meta {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap:
        0.7rem
        1.25rem;

    color:
        rgba(11, 12, 14, 0.48);

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

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-project__meta span:first-child {
    color: var(--waveform-blue);
}


/* ==========================================================================
   FILE NAME
   ========================================================================== */

.work-project__filename {
    width: fit-content;

    margin:
        1.25rem
        0
        0
        72px;

    padding:
        0.42rem
        0.58rem;

    color:
        rgba(11, 12, 14, 0.46);

    background:
        rgba(11, 12, 14, 0.055);

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

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.work-project--feature
.work-project__filename::after {
    content: " / YES THIS ONE";

    color: var(--rec-red);
}


/* ==========================================================================
   PORTRAIT PROJECT OFFSET DETAIL
   ========================================================================== */

.work-project--portrait::before {
    content: "02";

    position: absolute;

    top: -4.5rem;
    left: -3.3rem;

    z-index: -1;

    color:
        rgba(11, 12, 14, 0.055);

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

    font-size:
        clamp(7rem, 12vw, 12rem);

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;
}


/* ==========================================================================
   WIDE PROJECT PRODUCTION MARKER
   ========================================================================== */

.work-project--wide::after {
    content: "CAM A / DOC";

    position: absolute;

    top: 1.4rem;
    right: -7.5rem;

    color:
        rgba(11, 12, 14, 0.38);

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

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    writing-mode: vertical-rl;

    text-transform: uppercase;
}


/* ==========================================================================
   SECTION FOOTER
   ========================================================================== */

.selected-work__footer {
    margin-top:
        clamp(6rem, 10vw, 10rem);

    padding-top: 1.5rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.26);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(11, 12, 14, 0.44);

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

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.selected-work__footer > a {
    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--cut-black);

    text-decoration: none;
}


.selected-work__footer > a > span {
    color: var(--rec-red);

    font-size: 0.9rem;
}


.selected-work__footer > a:hover {
    color: var(--waveform-blue);
}


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

@media (max-width: 980px) {

    .selected-work__header {
        grid-template-columns:
            1fr;

        gap: 2.5rem;
    }


    .selected-work__header-meta {
        max-width: 420px;
    }


    .work-project--feature {
        grid-column:
            1 /
            -1;
    }


    .work-project--portrait {
        grid-column:
            6 /
            -1;
    }


    .work-project--wide {
        grid-column:
            1 /
            11;
    }


    .work-project--wide::after {
        display: none;
    }

}


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

@media (max-width: 760px) {

    .selected-work {
        padding:
            6rem
            0;
    }


    .selected-work::before {
        top: 1rem;

        font-size: 11rem;
    }


    .selected-work__inner {
        width:
            calc(100% - 2rem);
    }


    .selected-work__header {
        margin-bottom: 4.5rem;
    }


    .selected-work__heading h2 {
        font-size:
            clamp(
                3.8rem,
                16vw,
                5.6rem
            );

        line-height: 0.80;
    }


    .selected-work__grid {
        display: block;
    }


    .work-project {
        margin-bottom: 6rem;
    }


    .work-project:last-child {
        margin-bottom: 0;
    }


    .work-project--feature,
    .work-project--portrait,
    .work-project--wide {
        width: 100%;
    }


    .work-project--feature
    .work-project__media,
    .work-project--wide
    .work-project__media {
        aspect-ratio: 16 / 10;
    }


    .work-project--portrait
    .work-project__media {
        width: 84%;

        margin-left: auto;

        aspect-ratio: 4 / 5;
    }


    .work-project__info {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap:
            1rem;

        align-items: start;
    }


    .work-project__meta {
        grid-column:
            2;

        justify-content: flex-start;

        margin-top: 0.5rem;
    }


    .work-project__filename {
        margin-left: 42px;
    }


    .work-project--portrait::before {
        top: -2.8rem;
        left: 0;

        font-size: 6.5rem;
    }


    .selected-work__footer {
        margin-top: 5rem;

        align-items: flex-start;

        flex-direction: column;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .selected-work__heading h2 {
        font-size:
            clamp(
                3.2rem,
                15vw,
                4.6rem
            );
    }


    .work-project__title h3,
    .work-project--portrait
    .work-project__title h3 {
        font-size:
            clamp(
                2.1rem,
                10vw,
                3rem
            );
    }


    .work-project--portrait
    .work-project__media {
        width: 90%;
    }

}

/* ==========================================================================
   WFIP_HERO_IMAGE_FIT_FIX_V2
   Preserve cinematic hero photograph composition on desktop
   ========================================================================== */

@media (min-width: 761px) {

    .home-hero__media-placeholder {
        background-color: var(--cut-black);

        background-image:
            url("../images/hero/home-hero-production.png");

        background-repeat: no-repeat;

        /*
         * Show the complete horizontal composition instead of zooming the
         * photograph until it fills the unusually tall hero viewport.
         */
        background-size:
            100% auto;

        background-position:
            center center;
    }


    /*
     * Blend the upper/lower edges of the photograph naturally into the
     * surrounding cinematic black rather than showing obvious letterboxing.
     */

    .home-hero__media::before {
        content: "";

        position: absolute;
        z-index: 1;

        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                var(--cut-black) 0%,
                rgba(11, 12, 14, 0.18) 16%,
                rgba(11, 12, 14, 0) 32%,
                rgba(11, 12, 14, 0) 72%,
                rgba(11, 12, 14, 0.28) 88%,
                var(--cut-black) 100%
            );
    }


    .home-hero__overlay {
        z-index: 2;
    }

}


/* Keep mobile immersive. */

@media (max-width: 760px) {

    .home-hero__media-placeholder {
        background-size:
            cover;

        background-position:
            64% center;
    }

}

/* ==========================================================================
   WFIP_HERO_IMAGE_FIT_FIX_V3
   Restore visible hero photography without aggressive crop
   ========================================================================== */

@media (min-width: 761px) {

    .home-hero__media {
        background: var(--cut-black);
    }


    /*
     * Disable the V2 blending layer that obscured the photograph.
     */

    .home-hero__media::before {
        content: none !important;
    }


    /*
     * Preserve the complete 16:9 production photograph.
     * Any extra vertical room becomes cinematic black rather than forcing
     * the image to zoom and crop.
     */

    .home-hero__media-placeholder {
        background-image:
            url("../images/hero/home-hero-production.png") !important;

        background-color:
            var(--cut-black) !important;

        background-repeat:
            no-repeat !important;

        background-size:
            contain !important;

        background-position:
            center center !important;
    }


    /*
     * Keep the original readability treatment, but slightly lighten the
     * right side so the production scene remains clearly recognizable.
     */

    .home-hero__overlay {
        z-index: auto;

        background:
            linear-gradient(
                90deg,
                rgba(11, 12, 14, 0.96) 0%,
                rgba(11, 12, 14, 0.80) 30%,
                rgba(11, 12, 14, 0.32) 57%,
                rgba(11, 12, 14, 0.10) 100%
            ),
            linear-gradient(
                180deg,
                rgba(11, 12, 14, 0.12) 0%,
                rgba(11, 12, 14, 0) 52%,
                rgba(11, 12, 14, 0.46) 100%
            );
    }

}


/* Mobile stays immersive. */

@media (max-width: 760px) {

    .home-hero__media::before {
        content: none !important;
    }


    .home-hero__media-placeholder {
        background-image:
            url("../images/hero/home-hero-production.png") !important;

        background-repeat:
            no-repeat !important;

        background-size:
            cover !important;

        background-position:
            64% center !important;
    }

}

/* ==========================================================================
   WFIP_SELECTED_AFTER_HOURS_IMAGE_V1
   Selected Work — Project 01 / AFTER HOURS
   ========================================================================== */

.work-project--feature
.work-project__placeholder {
    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, 0.18) 0%,
            rgba(11, 12, 14, 0.04) 42%,
            rgba(11, 12, 14, 0.02) 100%
        ),
        url("../images/work/after-hours.png")
        center center /
        cover
        no-repeat;
}


.work-project--feature
.work-project__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .work-project--feature
    .work-project__placeholder {
        background-position:
            64% center;
    }

}

/* ==========================================================================
   WFIP_SELECTED_STATIC_MOTION_IMAGE_V1
   Selected Work — Project 02 / STATIC / MOTION
   ========================================================================== */

.work-project--portrait
.work-project__placeholder {
    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.03) 0%,
            rgba(11, 12, 14, 0.08) 100%
        ),
        url("../images/work/static-motion.png")
        center center /
        cover
        no-repeat;
}


.work-project--portrait
.work-project__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .work-project--portrait
    .work-project__placeholder {
        background-position:
            center center;
    }

}

/* ==========================================================================
   WFIP_SELECTED_WORK_RHYTHM_V2
   Tighten project-to-project vertical rhythm
   ========================================================================== */

.selected-work__grid {
    row-gap:
        clamp(
            4.25rem,
            6.5vw,
            7rem
        );
}


/*
 * Pull Project 02 visually closer to Project 01 while preserving the
 * asymmetric editorial composition.
 */

.work-project--portrait::before {
    top: -3.25rem;
}


/*
 * Keep Project 03 from inheriting an oversized editorial pause.
 */

.work-project--wide {
    margin-top: -0.5rem;
}


@media (max-width: 980px) {

    .selected-work__grid {
        row-gap:
            clamp(
                4rem,
                7vw,
                6rem
            );
    }

}


@media (max-width: 760px) {

    .work-project {
        margin-bottom: 4.75rem;
    }


    .work-project--portrait::before {
        top: -2.25rem;
    }


    .work-project--wide {
        margin-top: 0;
    }

}

/* ==========================================================================
   WFIP_SELECTED_LONG_WAY_HOME_IMAGE_V1
   Selected Work — Project 03 / THE LONG WAY HOME
   ========================================================================== */

.work-project--wide
.work-project__placeholder {
    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, 0.05) 0%,
            rgba(11, 12, 14, 0.015) 55%,
            rgba(11, 12, 14, 0.06) 100%
        ),
        url("../images/work/long-way-home.png")
        center center /
        cover
        no-repeat;
}


.work-project--wide
.work-project__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .work-project--wide
    .work-project__placeholder {
        background-position:
            42% center;
    }

}

/* ==========================================================================
   WFIP_SELECTED_WORK_BOTTOM_RHYTHM_V1
   Tighten final Project 03 → section footer transition
   ========================================================================== */

.selected-work__footer {
    margin-top:
        clamp(
            3.75rem,
            5.5vw,
            6rem
        );
}


.selected-work {
    padding-bottom:
        clamp(
            5.5rem,
            7vw,
            7.5rem
        );
}


@media (max-width: 760px) {

    .selected-work__footer {
        margin-top: 3.75rem;
    }


    .selected-work {
        padding-bottom: 5rem;
    }

}

/* ==========================================================================
   WFIP_SELECTED_WORK_REBUILD_STYLE_V2
   Selected Work — Dense Cinematic Reel
   ========================================================================== */

.selected-reel {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 8vw, 8.5rem)
        0
        clamp(6rem, 8vw, 8rem);

    color: var(--paper-white);

    background:
        linear-gradient(
            180deg,
            #111316 0%,
            #0d0f11 45%,
            #101214 100%
        );

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);

    overflow: hidden;
}


.selected-reel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--rec-red) 0 8%,
            var(--waveform-blue) 8% 17%,
            transparent 17% 100%
        );

    opacity: 0.8;
}


.selected-reel__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.selected-reel__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(340px, 0.65fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 6vw, 6rem);
}


.selected-reel__kicker {
    margin:
        0
        0
        1.3rem;

    color: var(--rec-red);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.selected-reel__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.selected-reel__heading h2 {
    max-width: 920px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            7vw,
            7.25rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;

    text-transform: uppercase;
}


.selected-reel__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(242, 240, 234, 0.76);

    text-stroke:
        1.25px
        rgba(242, 240, 234, 0.76);
}


.selected-reel__intro {
    padding:
        1.5rem
        0
        0;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.18);
}


.selected-reel__intro > p {
    max-width: 520px;

    margin:
        0
        0
        2rem;

    color:
        rgba(242, 240, 234, 0.66);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.15rem
        );

    line-height: 1.72;
}


.selected-reel__stats {
    display: grid;

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

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.selected-reel__stats > div {
    min-height: 76px;

    padding:
        1rem
        1rem
        0.9rem
        0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.6rem;
}


.selected-reel__stats > div + div {
    padding-left: 1rem;

    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.selected-reel__stats span,
.selected-reel__stats strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.selected-reel__stats span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.selected-reel__stats strong {
    color: var(--paper-white);

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.07em;
}


.selected-reel__stats > div:last-child strong {
    color: var(--night-vision);
}


.selected-reel__intro > small {
    display: block;

    margin-top: 0.8rem;

    color:
        rgba(242, 240, 234, 0.34);

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

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================================
   PROJECT BASE
   ========================================================================== */

.reel-project {
    position: relative;
}


.reel-project__media {
    position: relative;

    display: block;

    width: 100%;

    color: inherit;

    background: var(--edit-bay);

    text-decoration: none;

    overflow: hidden;

    isolation: isolate;
}


.reel-project__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 550ms ease,
        filter 550ms ease;
}


.reel-project__media:hover img {
    transform: scale(1.018);

    filter:
        brightness(1.04)
        contrast(1.02);
}


.reel-project__shade {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.03) 25%,
            rgba(11, 12, 14, 0.12) 55%,
            rgba(11, 12, 14, 0.74) 100%
        );
}


.reel-project__play {
    position: absolute;

    z-index: 5;

    right:
        clamp(1.2rem, 2vw, 2rem);

    bottom:
        clamp(1.2rem, 2vw, 2rem);

    width:
        clamp(54px, 4.8vw, 72px);

    height:
        clamp(54px, 4.8vw, 72px);

    display: grid;

    place-items: center;

    color: var(--cut-black);

    background: var(--paper-white);

    border-radius: 50%;

    font-size: 0.8rem;

    box-shadow:
        0
        16px
        40px
        rgba(0, 0, 0, 0.35);

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.reel-project__media:hover
.reel-project__play {
    color: var(--paper-white);

    background: var(--rec-red);

    transform: scale(1.07);
}


/* ==========================================================================
   FEATURE PROJECT
   ========================================================================== */

.reel-project--feature {
    margin-bottom:
        clamp(4rem, 6vw, 6rem);
}


.reel-project--feature
.reel-project__media {
    aspect-ratio: 16 / 7.4;

    border:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.reel-project--feature
.reel-project__media::before {
    content: "FRAME 01 / MASTER";

    position: absolute;

    z-index: 4;

    top: 1.3rem;
    right: 1.5rem;

    color:
        rgba(242, 240, 234, 0.48);

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

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.reel-project--feature
.reel-project__shade {
    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, 0.72) 0%,
            rgba(11, 12, 14, 0.20) 46%,
            rgba(11, 12, 14, 0.04) 75%
        ),
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(11, 12, 14, 0.74) 100%
        );
}


.reel-project__overlay {
    position: absolute;

    z-index: 4;

    left:
        clamp(1.5rem, 3vw, 3.25rem);

    bottom:
        clamp(1.5rem, 3vw, 3rem);

    max-width: 760px;
}


.reel-project__index {
    display: block;

    margin-bottom: 0.9rem;

    color: var(--practical-light);

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

    font-size: 0.6rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.reel-project__overlay h3 {
    margin: 0;

    color: var(--paper-white);

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

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

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.07em;

    text-transform: uppercase;
}


.reel-project__overlay p {
    margin:
        0.8rem
        0
        0;

    color:
        rgba(242, 240, 234, 0.72);

    font-size: 0.92rem;
}


/* ==========================================================================
   FEATURE PRODUCTION RAIL
   ========================================================================== */

.reel-project__rail {
    display: grid;

    grid-template-columns:
        0.9fr
        0.65fr
        0.65fr
        1.8fr;

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    border-top: 0;

    background:
        #15171a;
}


.reel-project__rail > div {
    min-height: 78px;

    padding:
        1rem
        1.25rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.7rem;
}


.reel-project__rail > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.reel-project__rail span,
.reel-project__rail strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.reel-project__rail span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.reel-project__rail strong {
    color:
        rgba(242, 240, 234, 0.82);

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.07em;
}


.reel-project__rail-file strong {
    color: var(--rec-red);
}


/* ==========================================================================
   SECONDARY PROJECTS
   ========================================================================== */

.selected-reel__secondary {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.35fr);

    gap:
        clamp(1.5rem, 3vw, 3rem);

    align-items: stretch;

    margin-bottom:
        clamp(4rem, 6vw, 6rem);
}


.reel-project--product,
.reel-project--documentary {
    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    background: #15171a;
}


.reel-project--product
.reel-project__media {
    aspect-ratio: 4 / 4.65;
}


.reel-project--product
.reel-project__media img {
    object-position: center center;
}


.reel-project--documentary
.reel-project__media {
    aspect-ratio: 16 / 10.35;
}


.reel-project--documentary
.reel-project__media img {
    object-position: center center;
}


.reel-project__body {
    flex: 1;

    padding:
        clamp(1.5rem, 2.6vw, 2.5rem);

    display: flex;

    flex-direction: column;
}


.reel-project__topline {
    margin-bottom: 1.4rem;

    padding-bottom: 0.9rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);

    color:
        rgba(242, 240, 234, 0.42);

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

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.reel-project__topline span:first-child {
    color: var(--rec-red);
}


.reel-project__topline span:last-child {
    color: var(--waveform-blue);
}


.reel-project__body h3 {
    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            2.7rem,
            4.5vw,
            5rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.reel-project__body h3 span {
    display: block;
}


.reel-project__body > p {
    max-width: 500px;

    margin:
        1.3rem
        0
        2.2rem;

    color:
        rgba(242, 240, 234, 0.58);

    font-size: 0.92rem;

    line-height: 1.65;
}


.reel-project__file {
    width: fit-content;

    margin-top: auto;

    padding:
        0.55rem
        0.7rem;

    color:
        rgba(242, 240, 234, 0.55);

    background:
        rgba(242, 240, 234, 0.055);

    border:
        1px solid
        rgba(242, 240, 234, 0.08);

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

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ==========================================================================
   PROJECT LOG
   ========================================================================== */

.selected-reel__log {
    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background:
        #0b0c0e;
}


.selected-reel__log-title {
    min-height: 62px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.11);
}


.selected-reel__log-title span,
.selected-reel__log-title strong {
    font-family: var(--font-mono);

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.selected-reel__log-title span {
    color:
        rgba(242, 240, 234, 0.43);
}


.selected-reel__log-title strong {
    color: var(--night-vision);
}


.selected-reel__log-items {
    display: grid;

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


.selected-reel__log-items > div {
    min-height: 104px;

    padding:
        1.25rem
        1.3rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.selected-reel__log-items > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.selected-reel__log-items span,
.selected-reel__log-items strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.selected-reel__log-items span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.selected-reel__log-items strong {
    color: var(--paper-white);

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

    font-weight: 850;

    letter-spacing: 0.05em;
}


/* ==========================================================================
   ARCHIVE CTA
   ========================================================================== */

.selected-reel__footer {
    position: relative;

    min-height:
        clamp(
            280px,
            28vw,
            390px
        );

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        auto;

    gap: 3rem;

    align-items: end;

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        linear-gradient(
            135deg,
            #1a1d21 0%,
            #101215 58%,
            #17191c 100%
        );

    overflow: hidden;
}


.selected-reel__footer::before {
    content: "EXPORT";

    position: absolute;

    top: -0.15em;
    right: -0.03em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.selected-reel__footer > div,
.selected-reel__archive-link {
    position: relative;
    z-index: 2;
}


.selected-reel__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--rec-red);

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

    font-size: 0.61rem;

    font-weight: 850;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.selected-reel__footer strong {
    display: block;

    max-width: 820px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.3rem,
            6vw,
            6.5rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.selected-reel__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.15px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.15px
        rgba(242, 240, 234, 0.72);
}


.selected-reel__archive-link {
    min-width: 255px;

    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.selected-reel__archive-link > span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.selected-reel__archive-link:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform: translateY(-2px);
}


.selected-reel__archive-link:hover
> span:last-child {
    color: var(--paper-white);
}


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

@media (max-width: 1040px) {

    .selected-reel__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .selected-reel__intro {
        max-width: 720px;
    }


    .selected-reel__secondary {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(0, 1.08fr);
    }


    .reel-project__rail {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .reel-project__rail > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .reel-project__rail > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .selected-reel__log-items {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .selected-reel__log-items > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .selected-reel__log-items > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .selected-reel {
        padding:
            5.5rem
            0;
    }


    .selected-reel__inner {
        width:
            calc(100% - 2rem);
    }


    .selected-reel__heading h2 {
        font-size:
            clamp(
                3.5rem,
                16vw,
                5.2rem
            );
    }


    .selected-reel__stats {
        grid-template-columns: 1fr;
    }


    .selected-reel__stats > div {
        min-height: 62px;

        padding:
            0.9rem
            0;
    }


    .selected-reel__stats > div + div {
        padding-left: 0;

        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .reel-project--feature
    .reel-project__media {
        aspect-ratio: 4 / 4.2;
    }


    .reel-project--feature
    .reel-project__media img {
        object-position:
            63% center;
    }


    .reel-project__overlay h3 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.5rem
            );
    }


    .reel-project__rail {
        grid-template-columns: 1fr;
    }


    .reel-project__rail > div,
    .reel-project__rail > div:nth-child(3),
    .reel-project__rail > div:nth-child(4) {
        min-height: 60px;

        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .reel-project__rail > div:first-child {
        border-top: 0;
    }


    .selected-reel__secondary {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .reel-project--product
    .reel-project__media {
        aspect-ratio: 4 / 4.65;
    }


    .reel-project--documentary
    .reel-project__media {
        aspect-ratio: 16 / 11;
    }


    .reel-project__body h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.3rem
            );
    }


    .selected-reel__log-title {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }


    .selected-reel__log-items {
        grid-template-columns: 1fr;
    }


    .selected-reel__log-items > div,
    .selected-reel__log-items > div:nth-child(3),
    .selected-reel__log-items > div:nth-child(4) {
        min-height: 74px;

        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .selected-reel__log-items > div:first-child {
        border-top: 0;
    }


    .selected-reel__footer {
        min-height: 390px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .selected-reel__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.8rem
            );
    }


    .selected-reel__archive-link {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .selected-reel__heading h2 {
        font-size:
            clamp(
                3.1rem,
                15vw,
                4.3rem
            );
    }


    .reel-project__body h3 {
        font-size:
            clamp(
                2.8rem,
                13vw,
                3.8rem
            );
    }


    .selected-reel__footer strong {
        font-size:
            clamp(
                2.8rem,
                13vw,
                4rem
            );
    }

}

/* ==========================================================================
   WFIP_SELECTED_REEL_LOG_TYPE_SCALE_V1
   Increase Project Log readability
   ========================================================================== */

.selected-reel__log-title {
    min-height: 72px;

    padding:
        1.15rem
        1.4rem;
}


.selected-reel__log-title span,
.selected-reel__log-title strong {
    font-size: 0.68rem;

    letter-spacing: 0.10em;
}


.selected-reel__log-items > div {
    min-height: 118px;

    padding:
        1.35rem
        1.4rem;
}


.selected-reel__log-items span {
    font-size: 0.64rem;

    line-height: 1.35;

    letter-spacing: 0.09em;
}


.selected-reel__log-items strong {
    font-size:
        clamp(
            0.92rem,
            1.15vw,
            1.08rem
        );

    line-height: 1.3;

    letter-spacing: 0.045em;
}


@media (max-width: 760px) {

    .selected-reel__log-title span,
    .selected-reel__log-title strong {
        font-size: 0.64rem;
    }


    .selected-reel__log-items > div {
        min-height: 88px;
    }


    .selected-reel__log-items span {
        font-size: 0.61rem;
    }


    .selected-reel__log-items strong {
        font-size: 0.95rem;
    }

}

/* ==========================================================================
   WFIP_SELECTED_REEL_LOG_TYPE_SCALE_V1
   Increase Project Log readability
   ========================================================================== */

.selected-reel__log-title {
    min-height: 72px;

    padding:
        1.15rem
        1.4rem;
}


.selected-reel__log-title span,
.selected-reel__log-title strong {
    font-size: 0.68rem;

    letter-spacing: 0.10em;
}


.selected-reel__log-items > div {
    min-height: 118px;

    padding:
        1.35rem
        1.4rem;
}


.selected-reel__log-items span {
    font-size: 0.64rem;

    line-height: 1.35;

    letter-spacing: 0.09em;
}


.selected-reel__log-items strong {
    font-size:
        clamp(
            0.92rem,
            1.15vw,
            1.08rem
        );

    line-height: 1.3;

    letter-spacing: 0.045em;
}


@media (max-width: 760px) {

    .selected-reel__log-title span,
    .selected-reel__log-title strong {
        font-size: 0.64rem;
    }


    .selected-reel__log-items > div {
        min-height: 88px;
    }


    .selected-reel__log-items span {
        font-size: 0.61rem;
    }


    .selected-reel__log-items strong {
        font-size: 0.95rem;
    }

}

/* ==========================================================================
   WFIP_SELECTED_REEL_LOG_LABEL_SCALE_V2
   Strengthen Project Log column titles
   ========================================================================== */

.selected-reel__log-items span {
    font-size:
        clamp(
            0.72rem,
            0.82vw,
            0.82rem
        );

    font-weight: 850;

    line-height: 1.3;

    letter-spacing: 0.08em;

    color:
        rgba(242, 240, 234, 0.58);
}


.selected-reel__log-title span,
.selected-reel__log-title strong {
    font-size:
        clamp(
            0.72rem,
            0.78vw,
            0.80rem
        );
}


@media (max-width: 760px) {

    .selected-reel__log-items span {
        font-size: 0.70rem;
    }


    .selected-reel__log-title span,
    .selected-reel__log-title strong {
        font-size: 0.68rem;
    }

}

/* ==========================================================================
   WFIP_HOME_SERVICES_STYLE_V1
   Homepage — Services / Production Call Sheet
   ========================================================================== */

.home-services {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 8vw, 8rem)
        0
        clamp(6rem, 8vw, 8rem);

    color: var(--cut-black);

    background:
        linear-gradient(
            180deg,
            #f2f0ea 0%,
            #ece9e1 100%
        );

    overflow: hidden;
}


.home-services::before {
    content: "CALL SHEET";

    position: absolute;

    top: 1.5rem;
    right: -0.04em;

    color:
        rgba(11, 12, 14, 0.035);

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

    font-size:
        clamp(
            7rem,
            16vw,
            17rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    text-transform: uppercase;

    pointer-events: none;
}


.home-services__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.home-services__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(330px, 0.65fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 5.5vw, 5.5rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        var(--cut-black);
}


.home-services__kicker {
    margin:
        0
        0
        1.3rem;

    color: var(--rec-red);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-services__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.home-services__heading h2 {
    max-width: 940px;

    margin: 0;

    color: var(--cut-black);

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

    font-size:
        clamp(
            4.2rem,
            7.4vw,
            7.8rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.072em;

    text-transform: uppercase;
}


.home-services__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.35px
        rgba(11, 12, 14, 0.85);

    text-stroke:
        1.35px
        rgba(11, 12, 14, 0.85);
}


.home-services__intro {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.24);
}


.home-services__intro > p {
    max-width: 540px;

    margin:
        0
        0
        2rem;

    color:
        rgba(11, 12, 14, 0.68);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.16rem
        );

    line-height: 1.72;
}


.home-services__status {
    min-height: 70px;

    padding:
        1rem
        1.1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        rgba(11, 12, 14, 0.20);

    background:
        rgba(11, 12, 14, 0.035);
}


.home-services__status span,
.home-services__status strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-services__status span {
    color:
        rgba(11, 12, 14, 0.50);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.home-services__status strong {
    position: relative;

    padding-left: 1rem;

    color: #506d49;

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.home-services__status strong::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--night-vision);

    transform:
        translateY(-50%);

    box-shadow:
        0
        0
        0
        4px
        rgba(145, 168, 137, 0.16);
}


/* ==========================================================================
   CAPABILITIES BOARD
   ========================================================================== */

.home-services__capabilities {
    border-top:
        1px solid
        var(--cut-black);

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


.service-capability {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(145px, 0.18fr)
        minmax(0, 1fr);

    min-height:
        clamp(
            290px,
            24vw,
            370px
        );

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.26);

    overflow: hidden;
}


.service-capability:last-child {
    border-bottom: 0;
}


.service-capability__number {
    position: relative;

    padding:
        clamp(1.5rem, 2.8vw, 2.8rem);

    display: flex;

    align-items: flex-start;

    color:
        rgba(11, 12, 14, 0.10);

    border-right:
        1px solid
        rgba(11, 12, 14, 0.20);

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

    font-size:
        clamp(
            6rem,
            11vw,
            11rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;
}


.service-capability:nth-child(3)
.service-capability__number {
    color:
        rgba(240, 68, 68, 0.13);
}


.service-capability__content {
    position: relative;

    padding:
        clamp(1.8rem, 3.4vw, 3.4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(260px, 0.55fr);

    grid-template-rows:
        auto
        1fr;

    column-gap:
        clamp(2rem, 5vw, 6rem);

    align-items: start;
}


.service-capability__topline {
    grid-column:
        1 /
        -1;

    margin-bottom: 2rem;

    padding-bottom: 0.9rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.18);

    color:
        rgba(11, 12, 14, 0.46);

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

    font-size: 0.62rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.service-capability__topline span:first-child {
    color: var(--rec-red);
}


.service-capability__topline span:last-child {
    text-align: right;
}


.service-capability__content h3 {
    grid-column: 1;

    align-self: start;

    margin:
        0
        0
        1.3rem;

    color: var(--cut-black);

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

    font-size:
        clamp(
            3.8rem,
            6.3vw,
            6.8rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.07em;

    text-transform: uppercase;
}


.service-capability__content > p {
    grid-column: 1;

    max-width: 670px;

    margin:
        clamp(6rem, 8vw, 8rem)
        0
        0;

    color:
        rgba(11, 12, 14, 0.64);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.68;
}


.service-capability__content ul {
    grid-column: 2;

    grid-row:
        2;

    align-self: stretch;

    margin: 0;

    padding: 0;

    list-style: none;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.20);
}


.service-capability__content li {
    min-height: 48px;

    padding:
        0.85rem
        0.1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.14);

    color:
        rgba(11, 12, 14, 0.82);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.service-capability__content li::after {
    content: "✓";

    color: var(--rec-red);

    font-size: 0.8rem;
}


.service-capability:nth-child(2) {
    background:
        rgba(11, 12, 14, 0.025);
}


.service-capability:nth-child(3) {
    background:
        var(--cut-black);
}


.service-capability:nth-child(3)
.service-capability__number {
    border-right-color:
        rgba(242, 240, 234, 0.14);
}


.service-capability:nth-child(3)
.service-capability__content {
    color: var(--paper-white);
}


.service-capability:nth-child(3)
.service-capability__topline {
    border-bottom-color:
        rgba(242, 240, 234, 0.13);

    color:
        rgba(242, 240, 234, 0.45);
}


.service-capability:nth-child(3)
.service-capability__content h3 {
    color: var(--paper-white);
}


.service-capability:nth-child(3)
.service-capability__content > p {
    color:
        rgba(242, 240, 234, 0.60);
}


.service-capability:nth-child(3)
.service-capability__content ul {
    border-top-color:
        rgba(242, 240, 234, 0.14);
}


.service-capability:nth-child(3)
.service-capability__content li {
    color:
        rgba(242, 240, 234, 0.78);

    border-bottom-color:
        rgba(242, 240, 234, 0.11);
}


/* ==========================================================================
   DELIVERY MATRIX
   ========================================================================== */

.home-services__delivery {
    margin-top:
        clamp(3rem, 5vw, 5rem);

    border:
        1px solid
        rgba(11, 12, 14, 0.28);

    background:
        rgba(255, 255, 255, 0.15);
}


.home-services__delivery-heading {
    min-height: 70px;

    padding:
        1.1rem
        1.35rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.20);
}


.home-services__delivery-heading span,
.home-services__delivery-heading strong {
    font-family: var(--font-mono);

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-services__delivery-heading span {
    color:
        rgba(11, 12, 14, 0.52);

    font-size: 0.67rem;
}


.home-services__delivery-heading strong {
    color: var(--cut-black);

    font-size: 0.73rem;
}


.home-services__formats {
    display: grid;

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


.home-services__formats > div {
    min-height: 112px;

    padding:
        1.25rem
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.home-services__formats > div + div {
    border-left:
        1px solid
        rgba(11, 12, 14, 0.16);
}


.home-services__formats span,
.home-services__formats strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-services__formats span {
    color:
        rgba(11, 12, 14, 0.47);

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.home-services__formats strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.85rem,
            1.05vw,
            1rem
        );

    font-weight: 900;

    letter-spacing: 0.04em;
}


.home-services__formats > div:last-child strong {
    color: var(--rec-red);
}


/* ==========================================================================
   SERVICES CTA
   ========================================================================== */

.home-services__footer {
    position: relative;

    min-height:
        clamp(
            300px,
            30vw,
            410px
        );

    margin-top:
        clamp(3rem, 5vw, 5rem);

    padding:
        clamp(2.2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        auto;

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: end;

    color: var(--paper-white);

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        linear-gradient(
            135deg,
            #15171a 0%,
            #0b0c0e 55%,
            #191b1f 100%
        );

    overflow: hidden;
}


.home-services__footer::before {
    content: "04";

    position: absolute;

    top: -0.15em;
    right: -0.01em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            12rem,
            25vw,
            25rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.home-services__footer > div,
.home-services__actions {
    position: relative;
    z-index: 2;
}


.home-services__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--practical-light);

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

    font-size: 0.65rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-services__footer strong {
    display: block;

    max-width: 850px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.4rem,
            6vw,
            6.4rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.067em;

    text-transform: uppercase;
}


.home-services__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.2px
        rgba(242, 240, 234, 0.72);
}


.home-services__actions {
    min-width: 280px;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;
}


.home-services__primary-link {
    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.home-services__primary-link
span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.home-services__primary-link:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform:
        translateY(-2px);
}


.home-services__primary-link:hover
span:last-child {
    color: var(--paper-white);
}


.home-services__secondary-link {
    min-height: 54px;

    padding:
        0.8rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(242, 240, 234, 0.76);

    border:
        1px solid
        rgba(242, 240, 234, 0.18);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease;
}


.home-services__secondary-link span {
    color: var(--waveform-blue);

    font-size: 0.9rem;
}


.home-services__secondary-link:hover {
    color: var(--paper-white);

    border-color:
        rgba(242, 240, 234, 0.50);

    background:
        rgba(242, 240, 234, 0.06);
}


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

@media (max-width: 1040px) {

    .home-services__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .home-services__intro {
        max-width: 720px;
    }


    .service-capability {
        grid-template-columns:
            120px
            minmax(0, 1fr);
    }


    .service-capability__content {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(230px, 0.55fr);

        column-gap: 2.5rem;
    }


    .service-capability__content > p {
        margin-top: 4rem;
    }


    .home-services__formats {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .home-services__formats > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.16);
    }


    .home-services__formats > div:nth-child(5),
    .home-services__formats > div:nth-child(6) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.16);
    }

}


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

@media (max-width: 760px) {

    .home-services {
        padding:
            5.5rem
            0;
    }


    .home-services::before {
        top: 1rem;

        font-size: 8rem;
    }


    .home-services__inner {
        width:
            calc(100% - 2rem);
    }


    .home-services__heading h2 {
        font-size:
            clamp(
                3.5rem,
                16vw,
                5rem
            );
    }


    .home-services__status {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.7rem;
    }


    .service-capability {
        display: block;

        min-height: 0;
    }


    .service-capability__number {
        min-height: 94px;

        padding:
            1.3rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(11, 12, 14, 0.18);

        font-size: 6rem;
    }


    .service-capability:nth-child(3)
    .service-capability__number {
        border-bottom-color:
            rgba(242, 240, 234, 0.12);
    }


    .service-capability__content {
        display: block;

        padding:
            1.5rem;
    }


    .service-capability__topline {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.65rem;
    }


    .service-capability__topline
    span:last-child {
        text-align: left;
    }


    .service-capability__content h3 {
        font-size:
            clamp(
                3.3rem,
                15vw,
                4.8rem
            );
    }


    .service-capability__content > p {
        margin:
            1.3rem
            0
            2rem;
    }


    .service-capability__content ul {
        margin-top: 1.5rem;
    }


    .home-services__delivery-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .home-services__formats {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-services__formats > div:nth-child(3),
    .home-services__formats > div:nth-child(5) {
        border-left: 0;
    }


    .home-services__formats > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.16);
    }


    .home-services__footer {
        min-height: 430px;

        padding:
            1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .home-services__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .home-services__actions {
        width: 100%;

        min-width: 0;
    }


    .home-services__primary-link,
    .home-services__secondary-link {
        width: 100%;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .home-services__heading h2 {
        font-size:
            clamp(
                3.05rem,
                15vw,
                4.2rem
            );
    }


    .service-capability__content h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4rem
            );
    }


    .home-services__formats {
        grid-template-columns: 1fr;
    }


    .home-services__formats > div,
    .home-services__formats > div:nth-child(3),
    .home-services__formats > div:nth-child(4),
    .home-services__formats > div:nth-child(5),
    .home-services__formats > div:nth-child(6) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.16);
    }


    .home-services__formats > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_SERVICES_CAPABILITY_DENSITY_V2
   Tighten capability rows and remove dead vertical space
   ========================================================================== */

.service-capability {
    min-height:
        clamp(
            245px,
            20vw,
            315px
        );
}


.service-capability__content {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(260px, 0.55fr);

    grid-template-rows:
        auto
        auto
        1fr;

    align-content: start;
}


.service-capability__topline {
    grid-column:
        1 /
        -1;

    grid-row: 1;

    margin-bottom: 1.6rem;
}


.service-capability__content h3 {
    grid-column: 1;

    grid-row: 2;

    margin:
        0
        0
        1rem;
}


.service-capability__content > p {
    grid-column: 1;

    grid-row: 3;

    align-self: start;

    max-width: 670px;

    margin: 0;

    padding-top: 0.35rem;
}


.service-capability__content ul {
    grid-column: 2;

    grid-row:
        2 /
        span 2;

    align-self: start;
}


@media (max-width: 1040px) {

    .service-capability {
        min-height: 250px;
    }


    .service-capability__content > p {
        margin: 0;
    }

}


@media (max-width: 760px) {

    .service-capability {
        min-height: 0;
    }


    .service-capability__content {
        display: block;
    }


    .service-capability__content h3 {
        margin-bottom: 1rem;
    }


    .service-capability__content > p {
        margin:
            0
            0
            2rem;

        padding-top: 0;
    }


    .service-capability__content ul {
        margin-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_FEATURED_FILM_STYLE_V1
   Homepage — Featured Film
   ========================================================================== */

.featured-film {
    position: relative;

    width: 100%;

    padding:
        clamp(5.5rem, 7vw, 7rem)
        0
        clamp(5.5rem, 7vw, 7rem);

    color: var(--paper-white);

    background:
        linear-gradient(
            180deg,
            #0b0c0e 0%,
            #111316 52%,
            #0d0f11 100%
        );

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);

    overflow: hidden;
}


.featured-film::before {
    content: "FEATURE";

    position: absolute;

    top: 1rem;
    right: -0.03em;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            9rem,
            20vw,
            21rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.08em;

    text-transform: uppercase;

    pointer-events: none;
}


.featured-film__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   TOP RAIL
   ========================================================================== */

.featured-film__header {
    min-height: 86px;

    margin-bottom: 1.4rem;

    padding:
        1.15rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.16);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.16);
}


.featured-film__header-left {
    display: flex;

    align-items: baseline;

    gap:
        clamp(1.3rem, 3vw, 3rem);
}


.featured-film__eyebrow {
    color: var(--rec-red);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.featured-film__header-left strong {
    color: var(--paper-white);

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

    font-size:
        clamp(
            1.65rem,
            2.5vw,
            2.5rem
        );

    font-weight: 950;

    letter-spacing: -0.045em;

    line-height: 1;

    text-transform: uppercase;
}


.featured-film__header-meta {
    display: flex;

    align-items: center;

    gap:
        clamp(1.3rem, 2.6vw, 2.8rem);

    color:
        rgba(242, 240, 234, 0.46);

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

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.featured-film__header-meta span + span::before {
    content: "/";

    margin-right:
        clamp(1.3rem, 2.6vw, 2.8rem);

    color:
        rgba(242, 240, 234, 0.16);
}


/* ==========================================================================
   FEATURE FRAME
   ========================================================================== */

.featured-film__media {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 7.6;

    color: inherit;

    border:
        1px solid
        rgba(242, 240, 234, 0.15);

    background: #15171a;

    text-decoration: none;

    overflow: hidden;

    isolation: isolate;
}


.featured-film__placeholder {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(230, 188, 114, 0.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 36% 72%,
            rgba(93, 120, 255, 0.10),
            transparent 27%
        ),
        linear-gradient(
            120deg,
            #101216 0%,
            #202329 48%,
            #0b0c0e 100%
        );

    transition:
        transform 600ms ease,
        filter 600ms ease;
}


.featured-film__placeholder::before {
    content: "";

    position: absolute;

    inset: 28px;

    border:
        1px solid
        rgba(242, 240, 234, 0.11);

    pointer-events: none;
}


.featured-film__placeholder::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242, 240, 234, 0.07) 18%,
            rgba(242, 240, 234, 0.07) 82%,
            transparent 100%
        );
}


.featured-film__placeholder > span {
    color:
        rgba(242, 240, 234, 0.26);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.featured-film__media:hover
.featured-film__placeholder {
    transform: scale(1.015);

    filter: brightness(1.05);
}


.featured-film__media-shade {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, 0.82) 0%,
            rgba(11, 12, 14, 0.36) 42%,
            rgba(11, 12, 14, 0.06) 72%
        ),
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.08) 0%,
            rgba(11, 12, 14, 0) 50%,
            rgba(11, 12, 14, 0.68) 100%
        );
}


/* ==========================================================================
   FRAME META
   ========================================================================== */

.featured-film__frame-meta {
    position: absolute;

    z-index: 4;

    top:
        clamp(1.2rem, 2vw, 2rem);

    left:
        clamp(1.3rem, 2.5vw, 2.6rem);

    display: flex;

    align-items: center;

    gap:
        clamp(1rem, 2vw, 2rem);

    color:
        rgba(242, 240, 234, 0.54);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.featured-film__frame-meta span:first-child {
    color: var(--night-vision);
}


.featured-film__frame-meta span + span::before {
    content: "/";

    margin-right:
        clamp(1rem, 2vw, 2rem);

    color:
        rgba(242, 240, 234, 0.22);
}


/* ==========================================================================
   FRAME TITLE
   ========================================================================== */

.featured-film__frame-title {
    position: absolute;

    z-index: 4;

    left:
        clamp(1.5rem, 3.5vw, 4rem);

    bottom:
        clamp(1.7rem, 3.5vw, 3.8rem);

    max-width: 720px;
}


.featured-film__frame-title > span {
    display: block;

    margin-bottom: 0.9rem;

    color: var(--practical-light);

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.featured-film__frame-title h2 {
    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            8vw,
            8.2rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.featured-film__frame-title h2 strong {
    display: block;

    color: transparent;

    font-weight: inherit;

    -webkit-text-stroke:
        1.4px
        rgba(242, 240, 234, 0.85);

    text-stroke:
        1.4px
        rgba(242, 240, 234, 0.85);
}


/* ==========================================================================
   PLAY CONTROL
   ========================================================================== */

.featured-film__play {
    position: absolute;

    z-index: 5;

    right:
        clamp(1.5rem, 3vw, 3.2rem);

    bottom:
        clamp(1.5rem, 3vw, 3rem);

    min-width: 175px;

    min-height: 68px;

    padding:
        0.75rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.1rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    text-transform: uppercase;

    box-shadow:
        0
        18px
        50px
        rgba(0, 0, 0, 0.28);

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.featured-film__play > span {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(11, 12, 14, 0.22);

    border-radius: 50%;

    color: var(--rec-red);

    font-size: 0.72rem;
}


.featured-film__play strong {
    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.09em;
}


.featured-film__media:hover
.featured-film__play {
    color: var(--paper-white);

    background: var(--rec-red);

    transform: translateY(-2px);
}


.featured-film__media:hover
.featured-film__play > span {
    color: var(--paper-white);

    border-color:
        rgba(242, 240, 234, 0.40);
}


/* ==========================================================================
   DETAILS
   ========================================================================== */

.featured-film__details {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(520px, 0.75fr);

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    border-top: 0;

    background: #15171a;
}


.featured-film__story {
    min-height: 190px;

    padding:
        clamp(1.7rem, 3vw, 3rem);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.featured-film__label {
    display: block;

    margin-bottom: 1.2rem;

    color: var(--rec-red);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.featured-film__story p {
    max-width: 760px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.72);

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

    line-height: 1.55;
}


.featured-film__specs {
    display: grid;

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


.featured-film__specs > div {
    min-height: 95px;

    padding:
        1.25rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.featured-film__specs > div:nth-child(even) {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.featured-film__specs > div:nth-child(n + 3) {
    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.featured-film__specs span,
.featured-film__specs strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.featured-film__specs span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.featured-film__specs strong {
    color: var(--paper-white);

    font-size: 0.72rem;

    font-weight: 900;

    letter-spacing: 0.06em;
}


/* ==========================================================================
   CREDITS RAIL
   ========================================================================== */

.featured-film__credits {
    margin-top: 1.4rem;

    display: grid;

    grid-template-columns:
        0.75fr
        0.9fr
        0.8fr
        0.8fr
        1.75fr;

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background:
        #0b0c0e;
}


.featured-film__credits > div {
    min-height: 92px;

    padding:
        1.15rem
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.featured-film__credits > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.featured-film__credits span,
.featured-film__credits strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.featured-film__credits span {
    color:
        rgba(242, 240, 234, 0.36);

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.featured-film__credits strong {
    color:
        rgba(242, 240, 234, 0.78);

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.055em;
}


.featured-film__credits-file strong {
    color: var(--practical-light);
}


/* ==========================================================================
   BOTTOM CTA
   ========================================================================== */

.featured-film__footer {
    position: relative;

    min-height:
        clamp(
            260px,
            25vw,
            350px
        );

    margin-top: 1.4rem;

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        auto;

    gap: 3rem;

    align-items: end;

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        linear-gradient(
            135deg,
            #1b1d21 0%,
            #111316 55%,
            #0b0c0e 100%
        );

    overflow: hidden;
}


.featured-film__footer::before {
    content: "01:42";

    position: absolute;

    top: -0.08em;
    right: -0.02em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.075em;

    pointer-events: none;
}


.featured-film__footer > div,
.featured-film__project-link {
    position: relative;
    z-index: 2;
}


.featured-film__footer > div > span {
    display: block;

    margin-bottom: 1rem;

    color: var(--night-vision);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.featured-film__footer > div > strong {
    display: block;

    max-width: 850px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.4rem,
            6vw,
            6.3rem
        );

    font-weight: 950;

    font-style: normal;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.featured-film__footer em {
    display: block;

    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.2px
        rgba(242, 240, 234, 0.72);
}


.featured-film__project-link {
    min-width: 235px;

    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.featured-film__project-link
span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.featured-film__project-link:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform: translateY(-2px);
}


.featured-film__project-link:hover
span:last-child {
    color: var(--paper-white);
}


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

@media (max-width: 1040px) {

    .featured-film__details {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.8fr);
    }


    .featured-film__credits {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .featured-film__credits > div:nth-child(3),
    .featured-film__credits > div:nth-child(5) {
        border-left: 0;
    }


    .featured-film__credits > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .featured-film__credits-file {
        grid-column:
            1 /
            -1;
    }

}


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

@media (max-width: 760px) {

    .featured-film {
        padding:
            5rem
            0;
    }


    .featured-film__inner {
        width:
            calc(100% - 2rem);
    }


    .featured-film__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 1rem;
    }


    .featured-film__header-left {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.7rem;
    }


    .featured-film__header-meta {
        flex-wrap: wrap;

        gap:
            0.65rem
            1rem;
    }


    .featured-film__header-meta
    span + span::before {
        margin-right: 1rem;
    }


    .featured-film__media {
        aspect-ratio: 4 / 5;
    }


    .featured-film__frame-title {
        left: 1.25rem;
        right: 1.25rem;

        bottom: 7.2rem;
    }


    .featured-film__frame-title h2 {
        font-size:
            clamp(
                3.6rem,
                17vw,
                5.2rem
            );
    }


    .featured-film__play {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;

        width: auto;

        min-width: 0;
    }


    .featured-film__details {
        grid-template-columns: 1fr;
    }


    .featured-film__story {
        min-height: 0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .featured-film__specs {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .featured-film__credits {
        grid-template-columns: 1fr;
    }


    .featured-film__credits > div,
    .featured-film__credits > div:nth-child(3),
    .featured-film__credits > div:nth-child(5) {
        border-left: 0;
    }


    .featured-film__credits > div + div {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .featured-film__footer {
        min-height: 390px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .featured-film__footer > div > strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .featured-film__project-link {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .featured-film__frame-title h2 {
        font-size:
            clamp(
                3.2rem,
                16vw,
                4.5rem
            );
    }


    .featured-film__specs {
        grid-template-columns: 1fr;
    }


    .featured-film__specs > div,
    .featured-film__specs > div:nth-child(even),
    .featured-film__specs > div:nth-child(n + 3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .featured-film__specs > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_FEATURED_FILM_IMAGE_V1
   Featured Film — AFTER HOURS dedicated still
   ========================================================================== */

.featured-film__placeholder {
    background:
        url("../images/work/featured-after-hours.png")
        center center /
        cover
        no-repeat;
}


.featured-film__placeholder::before,
.featured-film__placeholder::after {
    content: none;
}


.featured-film__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .featured-film__placeholder {
        background-position:
            68% center;
    }

}

/* ==========================================================================
   WFIP_HOME_PROCESS_STYLE_V1
   Homepage — Process / Production Timeline
   ========================================================================== */

.home-process {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 8vw, 8rem)
        0
        clamp(6rem, 8vw, 8rem);

    color: var(--paper-white);

    background:
        linear-gradient(
            180deg,
            #17191d 0%,
            #101215 48%,
            #15171a 100%
        );

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);

    overflow: hidden;
}


.home-process::before {
    content: "TIMELINE";

    position: absolute;

    top: 1.25rem;
    right: -0.04em;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            8rem,
            18vw,
            19rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.08em;

    text-transform: uppercase;

    pointer-events: none;
}


.home-process__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.home-process__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(330px, 0.65fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);
}


.home-process__kicker {
    margin:
        0
        0
        1.3rem;

    color: var(--rec-red);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-process__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.home-process__heading h2 {
    max-width: 980px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            7vw,
            7.4rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.072em;

    text-transform: uppercase;
}


.home-process__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.3px
        rgba(242, 240, 234, 0.75);

    text-stroke:
        1.3px
        rgba(242, 240, 234, 0.75);
}


.home-process__intro {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.18);
}


.home-process__intro > p {
    max-width: 540px;

    margin:
        0
        0
        2rem;

    color:
        rgba(242, 240, 234, 0.64);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.15rem
        );

    line-height: 1.72;
}


.home-process__intro-meta {
    min-height: 70px;

    padding:
        1rem
        1.1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(242, 240, 234, 0.035);
}


.home-process__intro-meta span,
.home-process__intro-meta strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-process__intro-meta span {
    color:
        rgba(242, 240, 234, 0.40);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.home-process__intro-meta strong {
    color: var(--night-vision);

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ==========================================================================
   TIMELINE RAIL
   ========================================================================== */

.home-process__timeline-rail {
    min-height: 78px;

    padding:
        1rem
        1.25rem;

    display: grid;

    grid-template-columns:
        auto
        minmax(300px, 1fr)
        auto;

    gap:
        clamp(1.5rem, 4vw, 4rem);

    align-items: center;

    border:
        1px solid
        rgba(242, 240, 234, 0.15);

    background: #0b0c0e;
}


.home-process__timeline-rail > span,
.home-process__timeline-rail > strong {
    font-family: var(--font-mono);

    font-size: 0.61rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.home-process__timeline-rail > span {
    color:
        rgba(242, 240, 234, 0.44);
}


.home-process__timeline-rail > strong {
    color: var(--practical-light);
}


.home-process__timeline-track {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.home-process__timeline-track::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;
    right: 0;

    height: 1px;

    background:
        rgba(242, 240, 234, 0.16);

    transform:
        translateY(-50%);
}


.home-process__timeline-track span {
    position: relative;
    z-index: 2;

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    color: var(--paper-white);

    border:
        1px solid
        rgba(242, 240, 234, 0.26);

    border-radius: 50%;

    background: var(--cut-black);

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

    font-size: 0.58rem;

    font-weight: 850;
}


.home-process__timeline-track span:nth-child(3) {
    color: var(--paper-white);

    border-color: var(--rec-red);

    background: var(--rec-red);
}


/* ==========================================================================
   STAGE BOARD
   ========================================================================== */

.home-process__stages {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.14);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.process-stage {
    position: relative;

    display: grid;

    grid-template-columns:
        120px
        minmax(0, 1.15fr)
        minmax(220px, 0.48fr)
        minmax(220px, 0.48fr);

    min-height:
        clamp(
            245px,
            20vw,
            305px
        );

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(242, 240, 234, 0.018);
}


.process-stage:nth-child(even) {
    background:
        rgba(242, 240, 234, 0.035);
}


.process-stage__number {
    padding:
        clamp(1.4rem, 2.3vw, 2.3rem);

    color:
        rgba(242, 240, 234, 0.10);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.13);

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

    font-size:
        clamp(
            5rem,
            8vw,
            8.5rem
        );

    font-weight: 950;

    line-height: 0.72;

    letter-spacing: -0.08em;
}


/* ==========================================================================
   STAGE MAIN
   ========================================================================== */

.process-stage__main {
    padding:
        clamp(1.5rem, 2.6vw, 2.6rem);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.process-stage__topline {
    margin-bottom:
        clamp(1.3rem, 2vw, 2rem);

    padding-bottom: 0.85rem;

    display: flex;

    justify-content: space-between;

    gap: 1.5rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.11);

    color:
        rgba(242, 240, 234, 0.40);

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.process-stage__topline span:first-child {
    color: var(--rec-red);
}


.process-stage__headline {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap:
        clamp(1.5rem, 3vw, 3rem);

    margin-bottom: 1.25rem;
}


.process-stage__headline h3 {
    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.5rem,
            5.5vw,
            6rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.07em;

    text-transform: uppercase;
}


.process-stage__headline > span {
    max-width: 250px;

    color:
        rgba(242, 240, 234, 0.42);

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

    font-size: 0.56rem;

    font-weight: 850;

    line-height: 1.45;

    letter-spacing: 0.09em;

    text-align: right;

    text-transform: uppercase;
}


.process-stage__main > p {
    max-width: 690px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.59);

    font-size:
        clamp(
            0.96rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.66;
}


/* ==========================================================================
   TASK LIST
   ========================================================================== */

.process-stage__tasks {
    padding:
        clamp(1.5rem, 2.2vw, 2.2rem);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.process-stage__tasks-label {
    display: block;

    margin-bottom: 1rem;

    color:
        rgba(242, 240, 234, 0.36);

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

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.process-stage__tasks ul {
    margin: 0;

    padding: 0;

    list-style: none;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.11);
}


.process-stage__tasks li {
    min-height: 36px;

    padding:
        0.62rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.09);

    color:
        rgba(242, 240, 234, 0.66);

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

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.process-stage__tasks li::after {
    content: "✓";

    color: var(--night-vision);

    font-size: 0.72rem;
}


/* ==========================================================================
   OUTPUT
   ========================================================================== */

.process-stage__output {
    padding:
        clamp(1.5rem, 2.2vw, 2.2rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 2rem;
}


.process-stage__output span {
    color:
        rgba(242, 240, 234, 0.36);

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

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.process-stage__output strong {
    max-width: 240px;

    color: var(--paper-white);

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

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

    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.04em;

    text-transform: uppercase;
}


/* ==========================================================================
   POST — FEATURED STAGE
   ========================================================================== */

.process-stage--post {
    background:
        linear-gradient(
            110deg,
            #33171a 0%,
            #1c1417 35%,
            #111316 100%
        );
}


.process-stage--post::before {
    content: "WE LIVE HERE";

    position: absolute;

    right: 1.3rem;
    top: 0.9rem;

    color:
        rgba(240, 68, 68, 0.22);

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

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

    font-weight: 950;

    letter-spacing: -0.06em;

    line-height: 1;

    pointer-events: none;
}


.process-stage--post
.process-stage__number {
    color:
        rgba(240, 68, 68, 0.30);
}


.process-stage--post
.process-stage__headline h3 {
    color: var(--rec-red);
}


.process-stage--post
.process-stage__topline span:first-child {
    color: var(--practical-light);
}


.process-stage--post
.process-stage__tasks li::after {
    color: var(--rec-red);
}


.process-stage--post
.process-stage__output strong {
    color: var(--practical-light);

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

    font-size:
        clamp(
            0.78rem,
            1vw,
            0.95rem
        );

    line-height: 1.45;

    letter-spacing: 0.03em;

    word-break: break-word;
}


/* ==========================================================================
   STATUS BOARD
   ========================================================================== */

.home-process__status-board {
    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background: #0b0c0e;
}


.home-process__status-heading {
    min-height: 68px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.home-process__status-heading span,
.home-process__status-heading strong {
    font-family: var(--font-mono);

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-process__status-heading span {
    color:
        rgba(242, 240, 234, 0.44);
}


.home-process__status-heading strong {
    color: var(--night-vision);
}


.home-process__status-grid {
    display: grid;

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


.home-process__status-grid > div {
    min-height: 108px;

    padding:
        1.25rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.home-process__status-grid > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.home-process__status-grid span,
.home-process__status-grid strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-process__status-grid span {
    color:
        rgba(242, 240, 234, 0.39);

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.home-process__status-grid strong {
    color: var(--paper-white);

    font-size:
        clamp(
            0.78rem,
            1vw,
            0.95rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.045em;
}


.home-process__status-grid > div:nth-child(4) strong {
    color: var(--practical-light);
}


.home-process__status-grid > div:last-child strong {
    color: var(--rec-red);
}


/* ==========================================================================
   PROCESS CTA
   ========================================================================== */

.home-process__footer {
    position: relative;

    min-height:
        clamp(
            290px,
            28vw,
            390px
        );

    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--cut-black);

    background:
        linear-gradient(
            135deg,
            #f2f0ea 0%,
            #e7e4dc 100%
        );

    overflow: hidden;
}


.home-process__footer::before {
    content: "01 → 04";

    position: absolute;

    top: -0.05em;
    right: -0.02em;

    color:
        rgba(11, 12, 14, 0.045);

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

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.home-process__footer > div,
.home-process__cta {
    position: relative;
    z-index: 2;
}


.home-process__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--rec-red);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-process__footer strong {
    display: block;

    max-width: 850px;

    color: var(--cut-black);

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

    font-size:
        clamp(
            3.5rem,
            6vw,
            6.4rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.067em;

    text-transform: uppercase;
}


.home-process__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(11, 12, 14, 0.78);

    text-stroke:
        1.25px
        rgba(11, 12, 14, 0.78);
}


.home-process__cta {
    min-width: 245px;

    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--paper-white);

    background: var(--cut-black);

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

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.home-process__cta span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.home-process__cta:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform:
        translateY(-2px);
}


.home-process__cta:hover
span:last-child {
    color: var(--paper-white);
}


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

@media (max-width: 1100px) {

    .home-process__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .home-process__intro {
        max-width: 720px;
    }


    .process-stage {
        grid-template-columns:
            100px
            minmax(0, 1fr)
            minmax(200px, 0.55fr);
    }


    .process-stage__output {
        grid-column:
            2 /
            -1;

        min-height: 100px;

        padding:
            1.2rem
            1.5rem;

        flex-direction: row;

        align-items: center;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .process-stage__output strong {
        max-width: 520px;

        text-align: right;
    }


    .home-process__status-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .home-process__status-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-process__status-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .home-process {
        padding:
            5.5rem
            0;
    }


    .home-process__inner {
        width:
            calc(100% - 2rem);
    }


    .home-process__heading h2 {
        font-size:
            clamp(
                3.45rem,
                16vw,
                5rem
            );
    }


    .home-process__intro-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }


    .home-process__timeline-rail {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .home-process__timeline-track {
        width: 100%;
    }


    .process-stage {
        display: block;

        min-height: 0;
    }


    .process-stage__number {
        min-height: 92px;

        padding: 1.25rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.12);

        font-size: 6rem;
    }


    .process-stage__main,
    .process-stage__tasks {
        border-right: 0;
    }


    .process-stage__main {
        padding: 1.5rem;
    }


    .process-stage__topline {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .process-stage__headline {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.8rem;
    }


    .process-stage__headline h3 {
        font-size:
            clamp(
                3.3rem,
                15vw,
                4.7rem
            );
    }


    .process-stage__headline > span {
        max-width: none;

        text-align: left;
    }


    .process-stage__tasks {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .process-stage__output {
        min-height: 100px;

        padding:
            1.5rem;

        flex-direction: column;

        align-items: flex-start;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .process-stage__output strong {
        max-width: none;

        text-align: left;
    }


    .process-stage--post::before {
        top: 1rem;
        right: 1rem;

        font-size: 3rem;
    }


    .home-process__status-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .home-process__status-grid {
        grid-template-columns: 1fr;
    }


    .home-process__status-grid > div,
    .home-process__status-grid > div:nth-child(4),
    .home-process__status-grid > div:nth-child(5) {
        min-height: 76px;

        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-process__status-grid > div:first-child {
        border-top: 0;
    }


    .home-process__footer {
        min-height: 390px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .home-process__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .home-process__cta {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .home-process__heading h2 {
        font-size:
            clamp(
                3.05rem,
                15vw,
                4.2rem
            );
    }


    .home-process__timeline-track span {
        width: 30px;
        height: 30px;
    }


    .process-stage__headline h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4rem
            );
    }

}

/* ==========================================================================
   WFIP_HOME_PROCESS_POST_WATERMARK_V2
   Refine POST / WE LIVE HERE background treatment
   ========================================================================== */

.process-stage--post {
    isolation: isolate;
}


.process-stage--post::before {
    top: 1.25rem;
    right: 1.6rem;

    z-index: 0;

    color:
        rgba(240, 68, 68, 0.105);

    font-size:
        clamp(
            2.8rem,
            4.8vw,
            4.8rem
        );

    line-height: 0.9;

    white-space: nowrap;
}


.process-stage--post > * {
    position: relative;

    z-index: 1;
}


@media (max-width: 760px) {

    .process-stage--post::before {
        top: 1rem;
        right: 1rem;

        font-size: 2.6rem;

        opacity: 0.75;
    }

}

/* ==========================================================================
   WFIP_HOME_PROCESS_NUMBER_RAIL_FIX_V2
   Keep stage numerals inside their dedicated rail
   ========================================================================== */

@media (min-width: 1101px) {

    .process-stage {
        grid-template-columns:
            150px
            minmax(0, 1.15fr)
            minmax(220px, 0.48fr)
            minmax(220px, 0.48fr);
    }


    .process-stage__number {
        width: 100%;

        padding:
            1.7rem
            1rem;

        display: flex;

        align-items: flex-start;

        justify-content: center;

        overflow: hidden;

        font-size:
            clamp(
                4.8rem,
                6.6vw,
                6.8rem
            );

        line-height: 0.78;

        letter-spacing: -0.07em;

        text-align: center;
    }

}


@media (min-width: 761px) and (max-width: 1100px) {

    .process-stage {
        grid-template-columns:
            125px
            minmax(0, 1fr)
            minmax(200px, 0.55fr);
    }


    .process-stage__number {
        width: 100%;

        padding:
            1.5rem
            0.75rem;

        display: flex;

        justify-content: center;

        overflow: hidden;

        font-size:
            clamp(
                4.4rem,
                7vw,
                6rem
            );

        text-align: center;
    }

}


/* Mobile keeps its stacked number treatment. */

@media (max-width: 760px) {

    .process-stage__number {
        width: 100%;

        overflow: hidden;
    }

}

/* ==========================================================================
   WFIP_HOME_BTS_STYLE_V1
   Homepage — Behind the Scenes / Production Contact Sheet
   ========================================================================== */

.home-bts {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 8vw, 8rem)
        0
        clamp(6rem, 8vw, 8rem);

    color: var(--cut-black);

    background:
        linear-gradient(
            180deg,
            #f1efe8 0%,
            #e9e6de 100%
        );

    overflow: hidden;
}


.home-bts::before {
    content: "BTS";

    position: absolute;

    top: 1rem;
    right: -0.03em;

    color:
        rgba(11, 12, 14, 0.04);

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

    font-size:
        clamp(
            10rem,
            22vw,
            23rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.home-bts__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.home-bts__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(330px, 0.65fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        var(--cut-black);
}


.home-bts__kicker {
    margin:
        0
        0
        1.25rem;

    color: var(--rec-red);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-bts__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.home-bts__heading h2 {
    max-width: 960px;

    margin: 0;

    color: var(--cut-black);

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

    font-size:
        clamp(
            4rem,
            7vw,
            7.5rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.072em;

    text-transform: uppercase;
}


.home-bts__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.3px
        rgba(11, 12, 14, 0.82);

    text-stroke:
        1.3px
        rgba(11, 12, 14, 0.82);
}


.home-bts__intro {
    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.22);
}


.home-bts__intro > p {
    max-width: 540px;

    margin:
        0
        0
        2rem;

    color:
        rgba(11, 12, 14, 0.66);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.14rem
        );

    line-height: 1.7;
}


.home-bts__intro-meta {
    min-height: 68px;

    padding:
        1rem
        1.1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        rgba(11, 12, 14, 0.20);

    background:
        rgba(11, 12, 14, 0.035);
}


.home-bts__intro-meta span,
.home-bts__intro-meta strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-bts__intro-meta span {
    color:
        rgba(11, 12, 14, 0.48);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.home-bts__intro-meta strong {
    color: #506d49;

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ==========================================================================
   CONTACT SHEET
   ========================================================================== */

.home-bts__contact-sheet {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(360px, 0.55fr);

    gap:
        clamp(1.25rem, 2vw, 2rem);

    align-items: stretch;
}


.bts-frame {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    border:
        1px solid
        rgba(11, 12, 14, 0.20);

    background:
        rgba(255, 255, 255, 0.16);
}


.bts-frame__media {
    position: relative;

    min-width: 0;

    background: var(--edit-bay);

    overflow: hidden;

    isolation: isolate;
}


.bts-frame--feature
.bts-frame__media {
    aspect-ratio: 16 / 10.5;
}


.bts-frame--vertical
.bts-frame__media {
    aspect-ratio: 4 / 4.7;
}


.bts-frame--edit
.bts-frame__media {
    aspect-ratio: 16 / 9.7;
}


/* ==========================================================================
   PLACEHOLDERS
   ========================================================================== */

.bts-frame__placeholder {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 68% 32%,
            rgba(230, 188, 114, 0.18),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #16181c 0%,
            #24272c 50%,
            #0d0e10 100%
        );
}


.bts-frame--vertical
.bts-frame__placeholder {
    background:
        radial-gradient(
            circle at 40% 30%,
            rgba(93, 120, 255, 0.14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #121418 0%,
            #22252b 55%,
            #111216 100%
        );
}


.bts-frame--edit
.bts-frame__placeholder {
    background:
        radial-gradient(
            circle at 70% 52%,
            rgba(240, 68, 68, 0.12),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #0e1013 0%,
            #1e2126 52%,
            #0b0c0e 100%
        );
}


.bts-frame__placeholder::before {
    content: "";

    position: absolute;

    inset: 20px;

    border:
        1px solid
        rgba(242, 240, 234, 0.11);
}


.bts-frame__placeholder::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242, 240, 234, 0.06) 25%,
            rgba(242, 240, 234, 0.06) 75%,
            transparent 100%
        );
}


.bts-frame__placeholder > span {
    color:
        rgba(242, 240, 234, 0.32);

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

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


/* ==========================================================================
   FRAME META
   ========================================================================== */

.bts-frame__frame-meta {
    position: absolute;

    z-index: 3;

    top: 1rem;
    left: 1rem;

    display: flex;

    align-items: center;

    gap: 1.2rem;

    color:
        rgba(242, 240, 234, 0.52);

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

    font-size: 0.54rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.bts-frame__frame-meta span:first-child {
    color: var(--night-vision);
}


.bts-frame__frame-meta span + span::before {
    content: "/";

    margin-right: 1.2rem;

    color:
        rgba(242, 240, 234, 0.18);
}


/* ==========================================================================
   CAPTIONS
   ========================================================================== */

.bts-frame__caption {
    flex: 1;

    padding:
        clamp(1.3rem, 2vw, 2rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 0.55fr);

    gap:
        clamp(1.5rem, 3vw, 3rem);

    align-items: end;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.18);
}


.bts-frame__caption > div > span {
    display: block;

    margin-bottom: 0.75rem;

    color: var(--rec-red);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.bts-frame__caption strong {
    display: block;

    color: var(--cut-black);

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

    font-size:
        clamp(
            2.3rem,
            3.8vw,
            4rem
        );

    font-weight: 950;

    line-height: 0.88;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.bts-frame__caption p {
    margin: 0;

    color:
        rgba(11, 12, 14, 0.60);

    font-size: 0.9rem;

    line-height: 1.6;
}


/* ==========================================================================
   SUPPORTING COLUMN
   ========================================================================== */

.home-bts__supporting {
    display: grid;

    grid-template-rows:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap:
        clamp(1.25rem, 2vw, 2rem);
}


.home-bts__supporting
.bts-frame__caption {
    grid-template-columns: 1fr;

    gap: 1rem;
}


.home-bts__supporting
.bts-frame__caption strong {
    font-size:
        clamp(
            1.9rem,
            2.8vw,
            3rem
        );
}


/* ==========================================================================
   PRODUCTION NOTES
   ========================================================================== */

.home-bts__notes {
    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    border:
        1px solid
        rgba(11, 12, 14, 0.24);

    background:
        rgba(255, 255, 255, 0.13);
}


.home-bts__notes-heading {
    min-height: 68px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.18);
}


.home-bts__notes-heading span,
.home-bts__notes-heading strong {
    font-family: var(--font-mono);

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-bts__notes-heading span {
    color:
        rgba(11, 12, 14, 0.48);
}


.home-bts__notes-heading strong {
    color: var(--cut-black);
}


.home-bts__notes-grid {
    display: grid;

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


.home-bts__notes-grid > div {
    min-height: 110px;

    padding:
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.home-bts__notes-grid > div + div {
    border-left:
        1px solid
        rgba(11, 12, 14, 0.14);
}


.home-bts__notes-grid span,
.home-bts__notes-grid strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-bts__notes-grid span {
    color:
        rgba(11, 12, 14, 0.48);

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.home-bts__notes-grid strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.82rem,
            1vw,
            0.98rem
        );

    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.045em;
}


.home-bts__notes-grid > div:nth-child(2) strong,
.home-bts__notes-grid > div:nth-child(3) strong {
    color: var(--rec-red);
}


/* ==========================================================================
   FILE LOG
   ========================================================================== */

.home-bts__file-log {
    margin-top: 1.25rem;

    display: grid;

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

    border:
        1px solid
        rgba(11, 12, 14, 0.24);

    background: var(--cut-black);
}


.home-bts__file-log > div {
    min-height: 88px;

    padding:
        1.1rem
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.home-bts__file-log > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.home-bts__file-log span,
.home-bts__file-log strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-bts__file-log span {
    color:
        rgba(242, 240, 234, 0.36);

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.home-bts__file-log strong {
    color:
        rgba(242, 240, 234, 0.80);

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.055em;
}


.home-bts__file-log > div:last-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.home-bts__footer {
    position: relative;

    min-height:
        clamp(
            300px,
            29vw,
            400px
        );

    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--paper-white);

    background:
        linear-gradient(
            135deg,
            #17191d 0%,
            #0d0f11 58%,
            #15171a 100%
        );

    overflow: hidden;
}


.home-bts__footer::before {
    content: "BTS";

    position: absolute;

    top: -0.08em;
    right: -0.02em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            10rem,
            22vw,
            22rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.home-bts__footer > div,
.home-bts__actions {
    position: relative;
    z-index: 2;
}


.home-bts__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--practical-light);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-bts__footer strong {
    display: block;

    max-width: 880px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.5rem,
            6vw,
            6.4rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.067em;

    text-transform: uppercase;
}


.home-bts__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.2px
        rgba(242, 240, 234, 0.72);
}


.home-bts__actions {
    min-width: 275px;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;
}


.home-bts__primary-link {
    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.home-bts__primary-link
span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.home-bts__primary-link:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform: translateY(-2px);
}


.home-bts__primary-link:hover
span:last-child {
    color: var(--paper-white);
}


.home-bts__secondary-link {
    min-height: 54px;

    padding:
        0.8rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(242, 240, 234, 0.76);

    border:
        1px solid
        rgba(242, 240, 234, 0.18);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-decoration: none;

    text-transform: uppercase;
}


.home-bts__secondary-link span {
    color: var(--waveform-blue);

    font-size: 0.9rem;
}


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

@media (max-width: 1040px) {

    .home-bts__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .home-bts__intro {
        max-width: 720px;
    }


    .home-bts__contact-sheet {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(320px, 0.7fr);
    }


    .bts-frame__caption {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .home-bts__notes-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .home-bts__notes-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.14);
    }


    .home-bts__notes-grid > div:nth-child(5),
    .home-bts__notes-grid > div:nth-child(6) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.14);
    }

}


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

@media (max-width: 760px) {

    .home-bts {
        padding:
            5.5rem
            0;
    }


    .home-bts__inner {
        width:
            calc(100% - 2rem);
    }


    .home-bts__heading h2 {
        font-size:
            clamp(
                3.45rem,
                16vw,
                5rem
            );
    }


    .home-bts__intro-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }


    .home-bts__contact-sheet {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }


    .home-bts__supporting {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: none;

        gap: 1.5rem;
    }


    .bts-frame--feature
    .bts-frame__media,
    .bts-frame--edit
    .bts-frame__media {
        aspect-ratio: 16 / 11;
    }


    .bts-frame--vertical
    .bts-frame__media {
        aspect-ratio: 4 / 5;
    }


    .bts-frame__caption {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .bts-frame__caption strong {
        font-size:
            clamp(
                2.5rem,
                11vw,
                3.6rem
            );
    }


    .home-bts__notes-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .home-bts__notes-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-bts__notes-grid > div:nth-child(3),
    .home-bts__notes-grid > div:nth-child(5) {
        border-left: 0;
    }


    .home-bts__notes-grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.14);
    }


    .home-bts__file-log {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-bts__file-log > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-bts__file-log > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-bts__footer {
        min-height: 420px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .home-bts__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .home-bts__actions {
        width: 100%;

        min-width: 0;
    }


    .home-bts__primary-link,
    .home-bts__secondary-link {
        width: 100%;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .home-bts__heading h2 {
        font-size:
            clamp(
                3.05rem,
                15vw,
                4.2rem
            );
    }


    .home-bts__notes-grid {
        grid-template-columns: 1fr;
    }


    .home-bts__notes-grid > div,
    .home-bts__notes-grid > div:nth-child(3),
    .home-bts__notes-grid > div:nth-child(4),
    .home-bts__notes-grid > div:nth-child(5),
    .home-bts__notes-grid > div:nth-child(6) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.14);
    }


    .home-bts__notes-grid > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_BTS_FEATURE_BALANCE_V2
   Remove stretched caption void from dominant BTS frame
   ========================================================================== */

@media (min-width: 761px) {

    .home-bts__contact-sheet {
        align-items: start;
    }


    .bts-frame--feature {
        align-self: start;
    }


    .bts-frame--feature
    .bts-frame__media {
        aspect-ratio: 4 / 5;
    }


    .bts-frame--feature
    .bts-frame__caption {
        flex:
            0
            0
            auto;

        min-height: 190px;
    }

}


/* Keep the compact stacked composition on mobile. */

@media (max-width: 760px) {

    .bts-frame--feature
    .bts-frame__caption {
        flex:
            0
            0
            auto;
    }

}

/* ==========================================================================
   WFIP_HOME_BTS_IMAGE_01_V1
   BTS Frame 01 — Production Camera
   ========================================================================== */

.bts-frame--feature
.bts-frame__placeholder {
    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.10) 0%,
            rgba(11, 12, 14, 0.02) 42%,
            rgba(11, 12, 14, 0.16) 100%
        ),
        url("../images/bts/bts-production-camera.png")
        center center /
        cover
        no-repeat;
}


.bts-frame--feature
.bts-frame__placeholder::before,
.bts-frame--feature
.bts-frame__placeholder::after {
    content: none;
}


.bts-frame--feature
.bts-frame__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .bts-frame--feature
    .bts-frame__placeholder {
        background-position:
            58% center;
    }

}

/* ==========================================================================
   WFIP_HOME_BTS_IMAGE_02_V1
   BTS Frame 02 — Lighting Adjustment
   ========================================================================== */

.bts-frame--vertical
.bts-frame__placeholder {
    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.12) 0%,
            rgba(11, 12, 14, 0.025) 45%,
            rgba(11, 12, 14, 0.14) 100%
        ),
        url("../images/bts/bts-lighting-adjustment.png")
        center center /
        cover
        no-repeat;
}


.bts-frame--vertical
.bts-frame__placeholder::before,
.bts-frame--vertical
.bts-frame__placeholder::after {
    content: none;
}


.bts-frame--vertical
.bts-frame__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .bts-frame--vertical
    .bts-frame__placeholder {
        background-position:
            center center;
    }

}

/* ==========================================================================
   WFIP_HOME_BTS_IMAGE_03_V1
   BTS Frame 03 — Late-Night Edit Bay
   ========================================================================== */

.bts-frame--edit
.bts-frame__placeholder {
    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.13) 0%,
            rgba(11, 12, 14, 0.015) 46%,
            rgba(11, 12, 14, 0.16) 100%
        ),
        url("../images/bts/bts-edit-bay-rendering.png")
        center center /
        cover
        no-repeat;
}


.bts-frame--edit
.bts-frame__placeholder::before,
.bts-frame--edit
.bts-frame__placeholder::after {
    content: none;
}


.bts-frame--edit
.bts-frame__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .bts-frame--edit
    .bts-frame__placeholder {
        background-position:
            56% center;
    }

}

/* ==========================================================================
   WFIP_HOME_ABOUT_STYLE_V1
   Homepage — About / Studio Profile
   ========================================================================== */

.home-about {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 8vw, 8rem)
        0
        clamp(6rem, 8vw, 8rem);

    color: var(--paper-white);

    background:
        linear-gradient(
            180deg,
            #111316 0%,
            #17191d 52%,
            #101215 100%
        );

    overflow: hidden;
}


.home-about::before {
    content: "STUDIO";

    position: absolute;

    top: 1.2rem;
    right: -0.03em;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            9rem,
            20vw,
            21rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.home-about__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.home-about__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(340px, 0.7fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);

    padding-bottom:
        clamp(2.75rem, 4vw, 4rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.15);
}


.home-about__kicker {
    margin:
        0
        0
        1.25rem;

    color: var(--practical-light);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-about__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.home-about__heading h2 {
    max-width: 1020px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            7vw,
            7.3rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.072em;

    text-transform: uppercase;
}


.home-about__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.25px
        rgba(242, 240, 234, 0.72);
}


.home-about__intro {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.18);
}


.home-about__intro p {
    max-width: 560px;

    margin:
        0
        0
        1.3rem;

    color:
        rgba(242, 240, 234, 0.62);

    font-size:
        clamp(
            0.98rem,
            1.25vw,
            1.10rem
        );

    line-height: 1.7;
}


.home-about__intro p:last-child {
    margin-bottom: 0;
}


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

.home-about__story {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(410px, 0.85fr);

    min-height:
        clamp(
            590px,
            48vw,
            720px
        );

    border:
        1px solid
        rgba(242, 240, 234, 0.15);

    background: #0b0c0e;
}


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

.home-about__media {
    position: relative;

    min-height: 100%;

    overflow: hidden;

    border-right:
        1px solid
        rgba(242, 240, 234, 0.13);

    isolation: isolate;
}


.home-about__placeholder {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle at 68% 34%,
            rgba(230, 188, 114, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 28% 72%,
            rgba(93, 120, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #181b20 0%,
            #272a30 46%,
            #0e1013 100%
        );
}


.home-about__placeholder::before {
    content: "";

    position: absolute;

    inset: 24px;

    border:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.home-about__placeholder::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242, 240, 234, 0.07) 20%,
            rgba(242, 240, 234, 0.07) 80%,
            transparent 100%
        );
}


.home-about__placeholder span {
    color:
        rgba(242, 240, 234, 0.30);

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

    font-size: 0.61rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.home-about__frame-meta {
    position: absolute;
    z-index: 3;

    top: 1.25rem;
    left: 1.25rem;

    display: flex;

    align-items: center;

    gap: 1.1rem;

    color:
        rgba(242, 240, 234, 0.50);

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

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-about__frame-meta span:first-child {
    color: var(--night-vision);
}


.home-about__frame-meta span + span::before {
    content: "/";

    margin-right: 1.1rem;

    color:
        rgba(242, 240, 234, 0.18);
}


.home-about__media-tag {
    position: absolute;
    z-index: 3;

    left: 1.25rem;
    bottom: 1.25rem;

    min-width: 245px;

    padding:
        0.95rem
        1rem;

    display: flex;

    flex-direction: column;

    gap: 0.45rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.18);

    background:
        rgba(11, 12, 14, 0.84);

    backdrop-filter:
        blur(8px);
}


.home-about__media-tag span,
.home-about__media-tag strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-about__media-tag span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;
}


.home-about__media-tag strong {
    color: var(--practical-light);

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.065em;
}


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

.home-about__story-copy {
    padding:
        clamp(2rem, 4vw, 4rem);

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        linear-gradient(
            160deg,
            #0b0c0e 0%,
            #14161a 100%
        );
}


.home-about__story-topline {
    margin-bottom:
        clamp(2rem, 3vw, 3rem);

    padding-bottom: 0.85rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.13);
}


.home-about__story-topline span,
.home-about__story-topline strong {
    font-family: var(--font-mono);

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-about__story-topline span {
    color:
        rgba(242, 240, 234, 0.40);
}


.home-about__story-topline strong {
    color: var(--rec-red);
}


.home-about__story-copy h3 {
    margin:
        0
        0
        1.8rem;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.3rem,
            5vw,
            5.5rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.home-about__story-copy h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.1px
        rgba(242, 240, 234, 0.68);

    text-stroke:
        1.1px
        rgba(242, 240, 234, 0.68);
}


.home-about__story-copy > p {
    max-width: 620px;

    margin:
        0
        0
        1.3rem;

    color:
        rgba(242, 240, 234, 0.58);

    font-size:
        clamp(
            0.95rem,
            1.05vw,
            1.03rem
        );

    line-height: 1.68;
}


.home-about__story-link {
    margin-top: 1.5rem;

    min-height: 58px;

    padding:
        0.9rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--paper-white);

    border:
        1px solid
        rgba(242, 240, 234, 0.18);

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

    font-size: 0.64rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}


.home-about__story-link span:last-child {
    color: var(--rec-red);

    font-size: 0.9rem;
}


.home-about__story-link:hover {
    border-color: var(--rec-red);

    background:
        rgba(240, 68, 68, 0.08);

    transform:
        translateY(-2px);
}


/* ==========================================================================
   STUDIO SPECS
   ========================================================================== */

.home-about__specs {
    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(242, 240, 234, 0.025);
}


.home-about__specs-heading {
    min-height: 68px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.home-about__specs-heading span,
.home-about__specs-heading strong {
    font-family: var(--font-mono);

    font-size: 0.67rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-about__specs-heading span {
    color:
        rgba(242, 240, 234, 0.42);
}


.home-about__specs-heading strong {
    color: var(--night-vision);
}


.home-about__specs-grid {
    display: grid;

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


.home-about__specs-grid > div {
    min-height: 112px;

    padding:
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.home-about__specs-grid > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.home-about__specs-grid span,
.home-about__specs-grid strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-about__specs-grid span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.60rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.home-about__specs-grid strong {
    color: var(--paper-white);

    font-size:
        clamp(
            0.82rem,
            1vw,
            0.98rem
        );

    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.045em;
}


.home-about__specs-note {
    margin: 0;

    padding:
        0.8rem
        1.3rem;

    color:
        rgba(242, 240, 234, 0.34);

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);

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

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================================
   WHAT WE ARE / WHAT WE ARE NOT
   ========================================================================== */

.home-about__contrast {
    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.home-about__contrast-panel {
    min-height:
        clamp(
            370px,
            30vw,
            440px
        );

    padding:
        clamp(2rem, 3.5vw, 3.5rem);

    color: var(--cut-black);

    background:
        linear-gradient(
            135deg,
            #f2f0ea 0%,
            #e7e4dc 100%
        );
}


.home-about__contrast-panel--dark {
    color: var(--paper-white);

    border-left:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        linear-gradient(
            135deg,
            #1b1e22 0%,
            #0d0f11 100%
        );
}


.home-about__contrast-heading {
    margin-bottom:
        clamp(2.2rem, 4vw, 4rem);

    padding-bottom: 1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.18);
}


.home-about__contrast-panel--dark
.home-about__contrast-heading {
    border-bottom-color:
        rgba(242, 240, 234, 0.14);
}


.home-about__contrast-heading span,
.home-about__contrast-heading strong {
    font-family: var(--font-mono);

    font-size: 0.62rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.home-about__contrast-heading span {
    opacity: 0.52;
}


.home-about__contrast-heading strong {
    color: var(--rec-red);
}


.home-about__contrast-panel--dark
.home-about__contrast-heading strong {
    color: var(--practical-light);
}


.home-about__contrast-panel ul {
    margin: 0;

    padding: 0;

    list-style: none;

    border-top:
        2px solid
        currentColor;
}


.home-about__contrast-panel li {
    min-height: 54px;

    padding:
        0.9rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        currentColor;

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

    font-size:
        clamp(
            1.7rem,
            2.5vw,
            2.7rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.home-about__contrast-panel li::after {
    content: "YES";

    color: #506d49;

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

    font-size: 0.56rem;

    font-weight: 900;

    letter-spacing: 0.10em;
}


.home-about__contrast-panel--dark
li::after {
    content: "NO";

    color: var(--rec-red);
}


/* ==========================================================================
   STUDIO RECORD
   ========================================================================== */

.home-about__record {
    margin-top: 1.25rem;

    display: grid;

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

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background: #0b0c0e;
}


.home-about__record > div {
    min-height: 94px;

    padding:
        1.1rem
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.home-about__record > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.home-about__record span,
.home-about__record strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-about__record span {
    color:
        rgba(242, 240, 234, 0.35);

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.home-about__record strong {
    color:
        rgba(242, 240, 234, 0.82);

    font-size: 0.72rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.055em;
}


.home-about__record > div:last-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.home-about__footer {
    position: relative;

    min-height:
        clamp(
            310px,
            29vw,
            410px
        );

    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--cut-black);

    background:
        linear-gradient(
            135deg,
            #f2f0ea 0%,
            #e8e5dd 100%
        );

    overflow: hidden;
}


.home-about__footer::before {
    content: "HELLO";

    position: absolute;

    top: -0.09em;
    right: -0.025em;

    color:
        rgba(11, 12, 14, 0.045);

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

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

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.085em;

    pointer-events: none;
}


.home-about__footer > div,
.home-about__actions {
    position: relative;
    z-index: 2;
}


.home-about__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--rec-red);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-about__footer strong {
    display: block;

    max-width: 940px;

    color: var(--cut-black);

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

    font-size:
        clamp(
            3.5rem,
            6vw,
            6.3rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.067em;

    text-transform: uppercase;
}


.home-about__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(11, 12, 14, 0.76);

    text-stroke:
        1.25px
        rgba(11, 12, 14, 0.76);
}


.home-about__actions {
    min-width: 275px;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;
}


.home-about__primary-link {
    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--paper-white);

    background: var(--cut-black);

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

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.home-about__primary-link span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.home-about__primary-link:hover {
    background: var(--rec-red);

    transform:
        translateY(-2px);
}


.home-about__primary-link:hover
span:last-child {
    color: var(--paper-white);
}


.home-about__secondary-link {
    min-height: 54px;

    padding:
        0.8rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(11, 12, 14, 0.76);

    border:
        1px solid
        rgba(11, 12, 14, 0.20);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-decoration: none;

    text-transform: uppercase;
}


.home-about__secondary-link span {
    color: var(--waveform-blue);

    font-size: 0.9rem;
}


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

@media (max-width: 1100px) {

    .home-about__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .home-about__intro {
        max-width: 720px;
    }


    .home-about__story {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.8fr);
    }


    .home-about__specs-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .home-about__specs-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-about__specs-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .home-about {
        padding:
            5.5rem
            0;
    }


    .home-about__inner {
        width:
            calc(100% - 2rem);
    }


    .home-about__heading h2 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                5rem
            );
    }


    .home-about__story {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .home-about__media {
        min-height: 520px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.13);
    }


    .home-about__story-copy {
        padding: 1.5rem;
    }


    .home-about__story-copy h3 {
        font-size:
            clamp(
                3.15rem,
                14vw,
                4.6rem
            );
    }


    .home-about__specs-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .home-about__specs-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-about__specs-grid > div:nth-child(3),
    .home-about__specs-grid > div:nth-child(5) {
        border-left: 0;
    }


    .home-about__specs-grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-about__contrast {
        grid-template-columns: 1fr;
    }


    .home-about__contrast-panel {
        min-height: 0;

        padding:
            2rem
            1.5rem;
    }


    .home-about__contrast-panel--dark {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.14);
    }


    .home-about__contrast-heading {
        margin-bottom: 2rem;
    }


    .home-about__record {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .home-about__record > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-about__record > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-about__footer {
        min-height: 430px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .home-about__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .home-about__actions {
        width: 100%;

        min-width: 0;
    }


    .home-about__primary-link,
    .home-about__secondary-link {
        width: 100%;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .home-about__heading h2 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.2rem
            );
    }


    .home-about__media {
        min-height: 470px;
    }


    .home-about__specs-grid {
        grid-template-columns: 1fr;
    }


    .home-about__specs-grid > div,
    .home-about__specs-grid > div:nth-child(3),
    .home-about__specs-grid > div:nth-child(4),
    .home-about__specs-grid > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-about__specs-grid > div:first-child {
        border-top: 0;
    }


    .home-about__record {
        grid-template-columns: 1fr;
    }


    .home-about__record > div,
    .home-about__record > div:nth-child(3),
    .home-about__record > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .home-about__record > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_ABOUT_IMAGE_V1
   Homepage About — Studio Filmmaker Image
   ========================================================================== */

.home-about__placeholder {
    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.11) 0%,
            rgba(11, 12, 14, 0.015) 42%,
            rgba(11, 12, 14, 0.18) 100%
        ),
        url("../images/about/about-studio-filmmaker.png")
        center center /
        cover
        no-repeat;
}


.home-about__placeholder::before,
.home-about__placeholder::after {
    content: none;
}


.home-about__placeholder > span {
    display: none;
}


@media (max-width: 760px) {

    .home-about__placeholder {
        background-position:
            58% center;
    }

}

/* ==========================================================================
   WFIP_HOME_CLIENT_NOTES_STYLE_V1
   Homepage — Client Notes / Review Session
   ========================================================================== */

.home-client-notes {
    position: relative;

    width: 100%;

    padding:
        clamp(6rem, 8vw, 8rem)
        0
        clamp(6rem, 8vw, 8rem);

    color: var(--cut-black);

    background:
        linear-gradient(
            180deg,
            #f2f0ea 0%,
            #ebe8e0 100%
        );

    overflow: hidden;
}


.home-client-notes::before {
    content: "REVIEW";

    position: absolute;

    top: 1rem;
    right: -0.04em;

    color:
        rgba(11, 12, 14, 0.04);

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

    font-size:
        clamp(
            9rem,
            20vw,
            21rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.home-client-notes__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.home-client-notes__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(340px, 0.7fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 5vw, 5rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        var(--cut-black);
}


.home-client-notes__kicker {
    margin:
        0
        0
        1.25rem;

    color: var(--rec-red);

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

    font-size: 0.68rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-client-notes__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.home-client-notes__heading h2 {
    max-width: 900px;

    margin: 0;

    color: var(--cut-black);

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

    font-size:
        clamp(
            4.3rem,
            7.4vw,
            7.7rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.073em;

    text-transform: uppercase;
}


.home-client-notes__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.3px
        rgba(11, 12, 14, 0.82);

    text-stroke:
        1.3px
        rgba(11, 12, 14, 0.82);
}


.home-client-notes__intro {
    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.22);
}


.home-client-notes__intro > p {
    max-width: 540px;

    margin:
        0
        0
        2rem;

    color:
        rgba(11, 12, 14, 0.66);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.14rem
        );

    line-height: 1.7;
}


.home-client-notes__intro-meta {
    min-height: 68px;

    padding:
        1rem
        1.1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        rgba(11, 12, 14, 0.20);

    background:
        rgba(11, 12, 14, 0.035);
}


.home-client-notes__intro-meta span,
.home-client-notes__intro-meta strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.home-client-notes__intro-meta span {
    color:
        rgba(11, 12, 14, 0.46);

    font-size: 0.61rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.home-client-notes__intro-meta strong {
    color: #506d49;

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ==========================================================================
   REVIEW BOARD
   ========================================================================== */

.client-review {
    border:
        1px solid
        rgba(11, 12, 14, 0.24);

    background:
        #101215;
}


/* ==========================================================================
   REVIEW RAIL
   ========================================================================== */

.client-review__rail {
    display: grid;

    grid-template-columns:
        1.25fr
        0.55fr
        0.55fr
        0.55fr
        1fr;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.13);

    background:
        #0b0c0e;
}


.client-review__rail > div {
    min-height: 90px;

    padding:
        1rem
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.client-review__rail > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.client-review__rail span,
.client-review__rail strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.client-review__rail span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.client-review__rail strong {
    color:
        rgba(242, 240, 234, 0.82);

    font-size:
        clamp(
            0.69rem,
            0.9vw,
            0.86rem
        );

    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.05em;
}


.client-review__rail > div:last-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   CLIENT NOTES
   ========================================================================== */

.client-note {
    position: relative;

    display: grid;

    grid-template-columns:
        145px
        minmax(0, 1fr)
        minmax(230px, 0.32fr);

    min-height:
        clamp(
            260px,
            22vw,
            320px
        );

    color: var(--paper-white);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);

    background:
        linear-gradient(
            100deg,
            #15171a 0%,
            #101215 100%
        );
}


.client-note:last-child {
    border-bottom: 0;
}


.client-note__index {
    padding:
        clamp(1.5rem, 2.4vw, 2.4rem)
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.client-note__index > span {
    color:
        rgba(242, 240, 234, 0.12);

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

    font-size:
        clamp(
            4.8rem,
            7vw,
            7rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.07em;
}


.client-note__index strong {
    color:
        rgba(242, 240, 234, 0.48);

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

    font-size: 0.56rem;

    font-weight: 900;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* ==========================================================================
   NOTE CONTENT
   ========================================================================== */

.client-note__content {
    padding:
        clamp(1.7rem, 3vw, 3rem);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.client-note__meta {
    margin-bottom:
        clamp(1.5rem, 2.5vw, 2.5rem);

    padding-bottom: 0.85rem;

    display: flex;

    align-items: center;

    gap:
        clamp(1rem, 3vw, 3rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.11);

    color:
        rgba(242, 240, 234, 0.38);

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

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.client-note__meta span:first-child {
    color: var(--rec-red);
}


.client-note blockquote {
    max-width: 920px;

    margin:
        0
        0
        1.4rem;

    color: var(--paper-white);

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

    font-size:
        clamp(
            2.7rem,
            4.3vw,
            4.8rem
        );

    font-weight: 950;

    line-height: 0.90;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.client-note__content > p {
    max-width: 670px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.52);

    font-size:
        clamp(
            0.94rem,
            1.05vw,
            1.03rem
        );

    line-height: 1.65;
}


/* ==========================================================================
   NOTE STATUS
   ========================================================================== */

.client-note__status {
    padding:
        clamp(1.5rem, 2.5vw, 2.5rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1.5rem;
}


.client-note__status span,
.client-note__status strong,
.client-note__status small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.client-note__status span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.client-note__status strong {
    color: var(--paper-white);

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

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

    font-weight: 950;

    line-height: 0.86;

    letter-spacing: -0.05em;
}


.client-note__status small {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.54rem;

    font-weight: 850;

    letter-spacing: 0.08em;

    line-height: 1.4;
}


/* ==========================================================================
   NOTE STATES
   ========================================================================== */

.client-note--approved {
    background:
        linear-gradient(
            100deg,
            #15191a 0%,
            #111715 38%,
            #101215 100%
        );
}


.client-note--approved
.client-note__index strong,
.client-note--approved
.client-note__status strong {
    color: var(--night-vision);
}


.client-note--resolved
.client-note__index strong,
.client-note--resolved
.client-note__status strong {
    color: var(--practical-light);
}


.client-note--active {
    background:
        linear-gradient(
            105deg,
            #2b1518 0%,
            #191417 38%,
            #101215 100%
        );
}


.client-note--active::before {
    content: "REVISION";

    position: absolute;

    top: 0.16em;
    right: 0.05em;

    color:
        rgba(240, 68, 68, 0.055);

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

    font-size:
        clamp(
            5rem,
            11vw,
            11rem
        );

    font-weight: 950;

    line-height: 0.78;

    letter-spacing: -0.07em;

    pointer-events: none;
}


.client-note--active > * {
    position: relative;
    z-index: 1;
}


.client-note--active
.client-note__index strong,
.client-note--active
.client-note__status strong,
.client-note--active
.client-note__meta span:first-child {
    color: var(--rec-red);
}


/* ==========================================================================
   REVIEW SUMMARY
   ========================================================================== */

.client-notes-summary {
    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    border:
        1px solid
        rgba(11, 12, 14, 0.22);

    background:
        rgba(255, 255, 255, 0.14);
}


.client-notes-summary__heading {
    min-height: 68px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.16);
}


.client-notes-summary__heading span,
.client-notes-summary__heading strong {
    font-family: var(--font-mono);

    font-size: 0.67rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.client-notes-summary__heading span {
    color:
        rgba(11, 12, 14, 0.46);
}


.client-notes-summary__heading strong {
    color: var(--rec-red);
}


.client-notes-summary__grid {
    display: grid;

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


.client-notes-summary__grid > div {
    min-height: 105px;

    padding:
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.client-notes-summary__grid > div + div {
    border-left:
        1px solid
        rgba(11, 12, 14, 0.12);
}


.client-notes-summary__grid span,
.client-notes-summary__grid strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.client-notes-summary__grid span {
    color:
        rgba(11, 12, 14, 0.44);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.client-notes-summary__grid strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.82rem,
            1vw,
            0.98rem
        );

    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.05em;
}


.client-notes-summary__grid > div:nth-child(3) strong,
.client-notes-summary__grid > div:nth-child(4) strong {
    color: #506d49;
}


.client-notes-summary__grid > div:last-child strong {
    color: var(--rec-red);
}


/* ==========================================================================
   LATEST CLIENT MESSAGE
   ========================================================================== */

.client-notes-message {
    margin-top: 1.25rem;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr)
        100px;

    min-height: 150px;

    border:
        1px solid
        rgba(11, 12, 14, 0.22);

    background: var(--cut-black);
}


.client-notes-message__time,
.client-notes-message__body,
.client-notes-message__read {
    padding:
        1.3rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.client-notes-message__time,
.client-notes-message__body {
    border-right:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.client-notes-message__time span,
.client-notes-message__time strong,
.client-notes-message__body > span,
.client-notes-message__read span,
.client-notes-message__read strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.client-notes-message__time span,
.client-notes-message__body > span,
.client-notes-message__read span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.client-notes-message__time strong {
    color: var(--practical-light);

    font-size: 0.67rem;

    font-weight: 900;

    letter-spacing: 0.07em;
}


.client-notes-message__body p {
    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            2rem,
            3.4vw,
            3.7rem
        );

    font-weight: 950;

    line-height: 0.90;

    letter-spacing: -0.05em;

    text-transform: uppercase;
}


.client-notes-message__read {
    align-items: flex-end;

    text-align: right;
}


.client-notes-message__read strong {
    color: var(--waveform-blue);

    font-size: 1.25rem;

    font-weight: 900;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.home-client-notes__footer {
    position: relative;

    min-height:
        clamp(
            310px,
            29vw,
            410px
        );

    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--paper-white);

    background:
        linear-gradient(
            135deg,
            #17191d 0%,
            #0b0c0e 70%
        );

    overflow: hidden;
}


.home-client-notes__footer::before {
    content: "APPROVED";

    position: absolute;

    top: -0.06em;
    right: -0.03em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            7rem,
            16vw,
            17rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.home-client-notes__footer > div,
.home-client-notes__actions {
    position: relative;
    z-index: 2;
}


.home-client-notes__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--practical-light);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-client-notes__footer strong {
    display: block;

    max-width: 940px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.5rem,
            6vw,
            6.3rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.067em;

    text-transform: uppercase;
}


.home-client-notes__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.70);

    text-stroke:
        1.2px
        rgba(242, 240, 234, 0.70);
}


.home-client-notes__actions {
    min-width: 275px;

    display: flex;

    flex-direction: column;

    gap: 0.9rem;
}


.home-client-notes__primary-link {
    min-height: 66px;

    padding:
        1rem
        1.3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.home-client-notes__primary-link span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.home-client-notes__primary-link:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform:
        translateY(-2px);
}


.home-client-notes__primary-link:hover
span:last-child {
    color: var(--paper-white);
}


.home-client-notes__secondary-link {
    min-height: 54px;

    padding:
        0.8rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(242, 240, 234, 0.76);

    border:
        1px solid
        rgba(242, 240, 234, 0.18);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.08em;

    text-decoration: none;

    text-transform: uppercase;
}


.home-client-notes__secondary-link span {
    color: var(--waveform-blue);

    font-size: 0.9rem;
}


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

@media (max-width: 1100px) {

    .home-client-notes__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .home-client-notes__intro {
        max-width: 720px;
    }


    .client-note {
        grid-template-columns:
            115px
            minmax(0, 1fr);
    }


    .client-note__status {
        grid-column:
            2 /
            -1;

        min-height: 92px;

        padding:
            1.15rem
            1.5rem;

        flex-direction: row;

        align-items: center;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .client-note__status strong {
        margin-left: auto;
    }


    .client-notes-summary__grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .client-notes-summary__grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }


    .client-notes-summary__grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }

}


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

@media (max-width: 760px) {

    .home-client-notes {
        padding:
            5.5rem
            0;
    }


    .home-client-notes__inner {
        width:
            calc(100% - 2rem);
    }


    .home-client-notes__heading h2 {
        font-size:
            clamp(
                3.45rem,
                16vw,
                5rem
            );
    }


    .home-client-notes__intro-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }


    .client-review__rail {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .client-review__rail > div:nth-child(3),
    .client-review__rail > div:nth-child(5) {
        border-left: 0;
    }


    .client-review__rail > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .client-note {
        display: block;

        min-height: 0;
    }


    .client-note__index {
        min-height: 94px;

        padding:
            1.2rem
            1.4rem;

        flex-direction: row;

        align-items: flex-end;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .client-note__index > span {
        font-size: 5.5rem;
    }


    .client-note__content {
        padding: 1.5rem;

        border-right: 0;
    }


    .client-note__meta {
        align-items: flex-start;

        flex-wrap: wrap;

        gap:
            0.6rem
            1.4rem;
    }


    .client-note blockquote {
        font-size:
            clamp(
                2.55rem,
                11.5vw,
                3.8rem
            );
    }


    .client-note__status {
        min-height: 100px;

        padding: 1.5rem;

        flex-direction: column;

        align-items: flex-start;
    }


    .client-note__status strong {
        margin-left: 0;
    }


    .client-notes-summary__heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .client-notes-summary__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .client-notes-summary__grid > div:nth-child(3),
    .client-notes-summary__grid > div:nth-child(5) {
        border-left: 0;
    }


    .client-notes-summary__grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }


    .client-notes-message {
        grid-template-columns:
            1fr;
    }


    .client-notes-message__time,
    .client-notes-message__body {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .client-notes-message__time {
        min-height: 80px;

        flex-direction: row;

        align-items: center;
    }


    .client-notes-message__read {
        min-height: 72px;

        align-items: flex-start;

        flex-direction: row;

        text-align: left;
    }


    .home-client-notes__footer {
        min-height: 430px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .home-client-notes__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .home-client-notes__actions {
        width: 100%;

        min-width: 0;
    }


    .home-client-notes__primary-link,
    .home-client-notes__secondary-link {
        width: 100%;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .home-client-notes__heading h2 {
        font-size:
            clamp(
                3.05rem,
                15vw,
                4.2rem
            );
    }


    .client-review__rail {
        grid-template-columns: 1fr;
    }


    .client-review__rail > div,
    .client-review__rail > div:nth-child(3),
    .client-review__rail > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .client-review__rail > div:first-child {
        border-top: 0;
    }


    .client-notes-summary__grid {
        grid-template-columns: 1fr;
    }


    .client-notes-summary__grid > div,
    .client-notes-summary__grid > div:nth-child(3),
    .client-notes-summary__grid > div:nth-child(4),
    .client-notes-summary__grid > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }


    .client-notes-summary__grid > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_FOOTER_STYLE_V1
   Homepage — End Credits / Site Footer
   ========================================================================== */

.site-footer {
    position: relative;

    width: 100%;

    color: var(--paper-white);

    background:
        linear-gradient(
            180deg,
            #0b0c0e 0%,
            #111316 100%
        );

    border-top:
        1px solid
        rgba(242, 240, 234, 0.12);

    overflow: hidden;
}


.site-footer::before {
    content: "END";

    position: absolute;

    top: -0.12em;
    right: -0.02em;

    color:
        rgba(242, 240, 234, 0.022);

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

    font-size:
        clamp(
            11rem,
            24vw,
            25rem
        );

    font-weight: 950;

    line-height: 0.78;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.site-footer__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(4rem, 6vw, 6rem)
        0
        1.5rem;
}


/* ==========================================================================
   TOP / BRAND
   ========================================================================== */

.site-footer__top {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    padding-bottom:
        clamp(3rem, 5vw, 5rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.15);
}


.site-footer__brand {
    min-width: 0;
}


.site-footer__logo {
    display: inline-block;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4.8rem,
            9vw,
            9.5rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.075em;

    text-decoration: none;

    text-transform: uppercase;
}


.site-footer__logo span {
    display: block;
}


.site-footer__logo span:last-child {
    color: transparent;

    -webkit-text-stroke:
        1.3px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.3px
        rgba(242, 240, 234, 0.72);
}


.site-footer__tagline {
    margin:
        1.2rem
        0
        0;

    color: var(--rec-red);

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

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.site-footer__availability {
    min-width: 280px;

    padding:
        1.25rem
        1.3rem;

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.16);

    background:
        rgba(242, 240, 234, 0.025);
}


.site-footer__availability span,
.site-footer__availability strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.site-footer__availability span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.57rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.site-footer__availability strong {
    color: var(--night-vision);

    font-size: 0.76rem;

    font-weight: 900;

    letter-spacing: 0.075em;
}


.site-footer__availability strong::before {
    content: "●";

    margin-right: 0.65rem;

    color: var(--night-vision);

    font-size: 0.65em;
}


/* ==========================================================================
   BODY
   ========================================================================== */

.site-footer__body {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(360px, 0.8fr);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);
}


/* ==========================================================================
   SHARED LABEL
   ========================================================================== */

.site-footer__label {
    display: block;

    color:
        rgba(242, 240, 234, 0.34);

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-footer__nav {
    padding:
        clamp(2rem, 3.5vw, 3.5rem)
        clamp(2rem, 4vw, 4rem)
        clamp(2rem, 3.5vw, 3.5rem)
        0;

    border-right:
        1px solid
        rgba(242, 240, 234, 0.13);
}


.site-footer__nav > .site-footer__label {
    margin-bottom: 1.5rem;
}


.site-footer__nav > a {
    min-height:
        clamp(
            72px,
            6vw,
            92px
        );

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    gap: 1.25rem;

    align-items: center;

    color: var(--paper-white);

    border-top:
        1px solid
        rgba(242, 240, 234, 0.12);

    text-decoration: none;

    transition:
        padding-left 180ms ease,
        background-color 180ms ease;
}


.site-footer__nav > a:last-child {
    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.site-footer__nav > a > span:first-child {
    color:
        rgba(242, 240, 234, 0.30);

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

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.08em;
}


.site-footer__nav > a strong {
    color: var(--paper-white);

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

    font-size:
        clamp(
            2rem,
            3.1vw,
            3.4rem
        );

    font-weight: 950;

    line-height: 0.84;

    letter-spacing: -0.05em;

    text-transform: uppercase;
}


.site-footer__nav > a > span:last-child {
    color: var(--rec-red);

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

    font-size: 1rem;
}


.site-footer__nav > a:hover {
    padding-left: 1rem;

    background:
        rgba(242, 240, 234, 0.035);
}


/* ==========================================================================
   CONTACT
   ========================================================================== */

.site-footer__contact {
    padding:
        clamp(2rem, 3.5vw, 3.5rem)
        0
        clamp(2rem, 3.5vw, 3.5rem)
        clamp(2rem, 4vw, 4rem);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;
}


.site-footer__contact > .site-footer__label {
    margin-bottom:
        clamp(2rem, 4vw, 4rem);
}


.site-footer__contact > strong {
    display: block;

    margin-bottom: 1.4rem;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3rem,
            5.2vw,
            5.7rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.site-footer__contact > p {
    max-width: 500px;

    margin:
        0
        0
        2rem;

    color:
        rgba(242, 240, 234, 0.52);

    font-size:
        clamp(
            0.94rem,
            1.1vw,
            1.04rem
        );

    line-height: 1.65;
}


.site-footer__contact-link {
    min-height: 62px;

    padding:
        0.9rem
        1.15rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.site-footer__contact-link span:last-child {
    color: var(--rec-red);

    font-size: 0.95rem;
}


.site-footer__contact-link:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform:
        translateY(-2px);
}


.site-footer__contact-link:hover
span:last-child {
    color: var(--paper-white);
}


/* ==========================================================================
   PRODUCTION METADATA
   ========================================================================== */

.site-footer__metadata {
    display: grid;

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

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(0, 0, 0, 0.18);
}


.site-footer__metadata > div {
    min-height: 100px;

    padding:
        1.15rem
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.site-footer__metadata > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.site-footer__metadata span,
.site-footer__metadata strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.site-footer__metadata span {
    color:
        rgba(242, 240, 234, 0.31);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.site-footer__metadata strong {
    color:
        rgba(242, 240, 234, 0.76);

    font-size:
        clamp(
            0.68rem,
            0.85vw,
            0.82rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;
}


.site-footer__metadata > div:nth-child(3) strong {
    color: var(--rec-red);
}


.site-footer__metadata > div:nth-child(4) strong {
    color: var(--night-vision);
}


.site-footer__metadata > div:last-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.site-footer__bottom {
    min-height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;
}


.site-footer__copyright,
.site-footer__final-status {
    display: flex;

    align-items: center;

    gap: 1.5rem;

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

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.site-footer__copyright {
    color:
        rgba(242, 240, 234, 0.34);
}


.site-footer__copyright span + span::before {
    content: "/";

    margin-right: 1.5rem;

    color:
        rgba(242, 240, 234, 0.15);
}


.site-footer__final-status {
    color:
        rgba(242, 240, 234, 0.34);
}


.site-footer__final-status strong {
    color: var(--rec-red);

    font-weight: 900;

    letter-spacing: 0.07em;
}


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

@media (max-width: 1000px) {

    .site-footer__top {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .site-footer__availability {
        width: min(100%, 430px);
    }


    .site-footer__body {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.75fr);
    }


    .site-footer__metadata {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .site-footer__metadata > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .site-footer__metadata > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .site-footer__inner {
        width:
            calc(100% - 2rem);

        padding-top: 4rem;
    }


    .site-footer__logo {
        font-size:
            clamp(
                3.8rem,
                18vw,
                5.8rem
            );
    }


    .site-footer__availability {
        width: 100%;

        min-width: 0;
    }


    .site-footer__body {
        grid-template-columns: 1fr;
    }


    .site-footer__nav {
        padding:
            2.5rem
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.14);
    }


    .site-footer__nav > a {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;
    }


    .site-footer__nav > a strong {
        font-size:
            clamp(
                2.2rem,
                10vw,
                3.2rem
            );
    }


    .site-footer__contact {
        padding:
            2.5rem
            0;
    }


    .site-footer__contact > .site-footer__label {
        margin-bottom: 2rem;
    }


    .site-footer__contact > strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .site-footer__metadata {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .site-footer__metadata > div:nth-child(3),
    .site-footer__metadata > div:nth-child(5) {
        border-left: 0;
    }


    .site-footer__metadata > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .site-footer__bottom {
        min-height: 130px;

        padding:
            1.5rem
            0;

        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        gap: 1.4rem;
    }


    .site-footer__copyright {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .site-footer__copyright span + span::before {
        content: none;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .site-footer__logo {
        font-size:
            clamp(
                3.35rem,
                17vw,
                4.8rem
            );
    }


    .site-footer__metadata {
        grid-template-columns: 1fr;
    }


    .site-footer__metadata > div,
    .site-footer__metadata > div:nth-child(3),
    .site-footer__metadata > div:nth-child(4),
    .site-footer__metadata > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .site-footer__metadata > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_HOME_FOOTER_COMPACT_V2
   Compact credits-style footer
   ========================================================================== */

.site-footer::before {
    font-size:
        clamp(
            6rem,
            12vw,
            11rem
        );

    opacity: 0.65;
}


.site-footer__inner {
    padding:
        2.5rem
        0
        1rem;
}


/* ==========================================================================
   COMPACT BRAND ROW
   ========================================================================== */

.site-footer__top {
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 2rem;

    align-items: center;

    padding-bottom: 1.75rem;
}


.site-footer__brand {
    display: flex;

    align-items: baseline;

    gap: 1rem;

    flex-wrap: wrap;
}


.site-footer__logo {
    display: flex;

    align-items: baseline;

    gap: 0.22em;

    font-size:
        clamp(
            2.5rem,
            4.8vw,
            4.4rem
        );

    line-height: 0.86;

    letter-spacing: -0.065em;
}


.site-footer__logo span {
    display: inline;
}


.site-footer__tagline {
    margin: 0;

    font-size: 0.58rem;
}


.site-footer__availability {
    min-width: 230px;

    padding:
        0.85rem
        1rem;

    gap: 0.35rem;
}


/* ==========================================================================
   COMPACT BODY
   ========================================================================== */

.site-footer__body {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(290px, 0.38fr);

    align-items: stretch;
}


/* ==========================================================================
   NAVIGATION — FOOTER SCALE
   ========================================================================== */

.site-footer__nav {
    padding:
        1.6rem
        2rem
        1.6rem
        0;
}


.site-footer__nav > .site-footer__label {
    margin-bottom: 0.85rem;
}


.site-footer__nav {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    column-gap: 1rem;
}


.site-footer__nav > .site-footer__label {
    grid-column:
        1 /
        -1;
}


.site-footer__nav > a {
    min-height: 62px;

    padding:
        0.55rem
        0;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    gap: 0.7rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.site-footer__nav > a:last-child {
    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.site-footer__nav > a strong {
    font-size:
        clamp(
            1.15rem,
            1.7vw,
            1.65rem
        );

    line-height: 1;
}


.site-footer__nav > a:hover {
    padding-left: 0.4rem;
}


/* ==========================================================================
   CONTACT — RESTRAINED
   ========================================================================== */

.site-footer__contact {
    padding:
        1.6rem
        0
        1.6rem
        2rem;

    justify-content: center;
}


.site-footer__contact > .site-footer__label {
    margin-bottom: 0.9rem;
}


.site-footer__contact > strong {
    margin-bottom: 0.7rem;

    font-size:
        clamp(
            1.75rem,
            2.7vw,
            2.7rem
        );

    line-height: 0.9;
}


.site-footer__contact > p {
    max-width: 390px;

    margin-bottom: 1rem;

    font-size: 0.84rem;

    line-height: 1.5;
}


.site-footer__contact-link {
    min-height: 48px;

    padding:
        0.7rem
        0.9rem;

    font-size: 0.60rem;
}


/* ==========================================================================
   METADATA — THIN CREDITS STRIP
   ========================================================================== */

.site-footer__metadata > div {
    min-height: 68px;

    padding:
        0.8rem
        0.9rem;

    gap: 0.55rem;
}


.site-footer__metadata span {
    font-size: 0.49rem;
}


.site-footer__metadata strong {
    font-size:
        clamp(
            0.59rem,
            0.7vw,
            0.70rem
        );
}


/* ==========================================================================
   BOTTOM CREDITS
   ========================================================================== */

.site-footer__bottom {
    min-height: 62px;

    gap: 2rem;
}


.site-footer__copyright,
.site-footer__final-status {
    font-size: 0.49rem;
}


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

@media (max-width: 1000px) {

    .site-footer__top {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .site-footer__availability {
        width: auto;
    }


    .site-footer__body {
        grid-template-columns: 1fr;
    }


    .site-footer__nav {
        padding-right: 0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.13);
    }


    .site-footer__contact {
        padding:
            1.5rem
            0;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        column-gap: 2rem;

        align-items: end;
    }


    .site-footer__contact > .site-footer__label,
    .site-footer__contact > strong,
    .site-footer__contact > p {
        grid-column: 1;
    }


    .site-footer__contact-link {
        grid-column: 2;

        grid-row:
            1 /
            4;

        align-self: end;

        min-width: 220px;
    }

}


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

@media (max-width: 760px) {

    .site-footer__inner {
        padding-top: 2.5rem;
    }


    .site-footer__top {
        grid-template-columns: 1fr;

        gap: 1.25rem;

        padding-bottom: 1.5rem;
    }


    .site-footer__brand {
        display: block;
    }


    .site-footer__logo {
        display: block;

        font-size:
            clamp(
                3rem,
                14vw,
                4.6rem
            );
    }


    .site-footer__logo span {
        display: block;
    }


    .site-footer__tagline {
        margin-top: 0.7rem;
    }


    .site-footer__availability {
        width: 100%;
    }


    .site-footer__nav {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            0
            1rem;
    }


    .site-footer__nav > a {
        min-height: 58px;
    }


    .site-footer__nav > a strong {
        font-size:
            clamp(
                1.4rem,
                6vw,
                2rem
            );
    }


    .site-footer__contact {
        display: block;

        padding:
            1.5rem
            0;
    }


    .site-footer__contact > strong {
        font-size:
            clamp(
                2rem,
                10vw,
                3rem
            );
    }


    .site-footer__contact-link {
        width: 100%;

        min-width: 0;
    }


    .site-footer__metadata {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .site-footer__metadata > div {
        min-height: 64px;
    }


    .site-footer__bottom {
        min-height: 100px;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .site-footer__nav {
        grid-template-columns: 1fr;
    }


    .site-footer__metadata {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================================
   WFIP_HOME_FOOTER_TRUE_COMPACT_V3
   Actual footer scale — credits, not another homepage section
   ========================================================================== */

.site-footer::before {
    font-size:
        clamp(
            4rem,
            8vw,
            7rem
        );

    opacity: 0.35;
}


.site-footer__inner {
    padding:
        1.5rem
        0
        0.5rem;
}


/* ==========================================================================
   TOP ROW
   ========================================================================== */

.site-footer__top {
    min-height: 62px;

    padding-bottom: 1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;
}


.site-footer__brand {
    display: flex;

    align-items: center;

    gap: 0.8rem;

    flex-wrap: nowrap;
}


.site-footer__logo {
    display: flex;

    align-items: baseline;

    gap: 0.18em;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.7rem
        );

    line-height: 1;

    white-space: nowrap;
}


.site-footer__logo span {
    display: inline;
}


.site-footer__tagline {
    margin: 0;

    font-size: 0.48rem;

    white-space: nowrap;
}


.site-footer__availability {
    min-width: 0;

    padding: 0;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 0.8rem;

    border: 0;

    background: transparent;
}


.site-footer__availability span {
    font-size: 0.48rem;
}


.site-footer__availability strong {
    font-size: 0.58rem;

    white-space: nowrap;
}


/* ==========================================================================
   BODY — NAV ONLY
   ========================================================================== */

.site-footer__body {
    display: block;
}


.site-footer__contact {
    display: none;
}


.site-footer__nav {
    padding:
        0.65rem
        0;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    border-right: 0;
}


.site-footer__nav > .site-footer__label {
    display: none;
}


.site-footer__nav > a {
    min-height: 44px;

    padding:
        0.35rem
        0.9rem;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    gap: 0.55rem;

    border-top: 0;

    border-bottom: 0;

    border-right:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.site-footer__nav > a:first-of-type {
    padding-left: 0;
}


.site-footer__nav > a:last-child {
    padding-right: 0;

    border-right: 0;

    border-bottom: 0;
}


.site-footer__nav > a > span:first-child {
    font-size: 0.45rem;
}


.site-footer__nav > a strong {
    font-size:
        clamp(
            1rem,
            1.45vw,
            1.3rem
        );

    line-height: 1;
}


.site-footer__nav > a > span:last-child {
    font-size: 0.72rem;
}


.site-footer__nav > a:hover {
    padding-left: 0.9rem;

    background:
        rgba(242, 240, 234, 0.025);
}


.site-footer__nav > a:first-of-type:hover {
    padding-left: 0.4rem;
}


/* ==========================================================================
   METADATA — VERY THIN
   ========================================================================== */

.site-footer__metadata {
    margin-top: 0;

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


.site-footer__metadata > div {
    min-height: 50px;

    padding:
        0.55rem
        0.75rem;

    gap: 0.25rem;
}


.site-footer__metadata span {
    font-size: 0.43rem;
}


.site-footer__metadata strong {
    font-size:
        clamp(
            0.50rem,
            0.6vw,
            0.58rem
        );

    line-height: 1.15;
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.site-footer__bottom {
    min-height: 44px;

    gap: 1.5rem;
}


.site-footer__copyright,
.site-footer__final-status {
    font-size: 0.43rem;
}


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

@media (max-width: 900px) {

    .site-footer__top {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.75rem;
    }


    .site-footer__availability {
        width: auto;
    }


    .site-footer__nav {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .site-footer__nav > a {
        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.08);
    }


    .site-footer__nav > a:nth-of-type(2) {
        border-right: 0;
    }


    .site-footer__metadata {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


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

@media (max-width: 600px) {

    .site-footer__inner {
        padding-top: 1.25rem;
    }


    .site-footer__brand {
        display: block;
    }


    .site-footer__logo {
        display: block;

        font-size:
            clamp(
                2.4rem,
                11vw,
                3.5rem
            );

        white-space: normal;
    }


    .site-footer__logo span {
        display: inline;
    }


    .site-footer__tagline {
        margin-top: 0.45rem;
    }


    .site-footer__availability {
        flex-wrap: wrap;
    }


    .site-footer__nav {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .site-footer__nav > a {
        min-height: 48px;
    }


    .site-footer__nav > a strong {
        font-size:
            clamp(
                1.05rem,
                5vw,
                1.4rem
            );
    }


    .site-footer__metadata {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .site-footer__metadata > div {
        min-height: 48px;
    }


    .site-footer__bottom {
        min-height: 70px;

        padding:
            0.8rem
            0;

        gap: 0.65rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .site-footer__nav {
        grid-template-columns: 1fr;
    }


    .site-footer__nav > a {
        padding:
            0.45rem
            0;

        border-right: 0;
    }


    .site-footer__metadata {
        grid-template-columns: 1fr;
    }


    .site-footer__metadata > div {
        min-height: 44px;

        flex-direction: row;

        align-items: center;
    }

}

/* ==========================================================================
   WFIP_HOME_FOOTER_EXTRA_COMPACT_V4
   Slightly smaller final footer experiment
   ========================================================================== */

.site-footer__inner {
    padding:
        1rem
        0
        0.35rem;
}


/* ==========================================================================
   TOP
   ========================================================================== */

.site-footer__top {
    min-height: 48px;

    padding-bottom: 0.7rem;

    gap: 1.25rem;
}


.site-footer__logo {
    font-size:
        clamp(
            1.5rem,
            2.5vw,
            2.15rem
        );

    letter-spacing: -0.06em;
}


.site-footer__tagline {
    font-size: 0.42rem;
}


.site-footer__availability {
    gap: 0.55rem;
}


.site-footer__availability span {
    font-size: 0.42rem;
}


.site-footer__availability strong {
    font-size: 0.50rem;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-footer__nav {
    padding:
        0.40rem
        0;
}


.site-footer__nav > a {
    min-height: 36px;

    padding:
        0.22rem
        0.70rem;

    gap: 0.45rem;
}


.site-footer__nav > a:first-of-type {
    padding-left: 0;
}


.site-footer__nav > a:last-child {
    padding-right: 0;
}


.site-footer__nav > a > span:first-child {
    font-size: 0.39rem;
}


.site-footer__nav > a strong {
    font-size:
        clamp(
            0.88rem,
            1.25vw,
            1.08rem
        );
}


.site-footer__nav > a > span:last-child {
    font-size: 0.61rem;
}


/* ==========================================================================
   METADATA
   ========================================================================== */

.site-footer__metadata > div {
    min-height: 40px;

    padding:
        0.40rem
        0.60rem;

    gap: 0.18rem;
}


.site-footer__metadata span {
    font-size: 0.37rem;
}


.site-footer__metadata strong {
    font-size:
        clamp(
            0.44rem,
            0.52vw,
            0.50rem
        );
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.site-footer__bottom {
    min-height: 34px;

    gap: 1rem;
}


.site-footer__copyright,
.site-footer__final-status {
    font-size: 0.37rem;
}


/* ==========================================================================
   BACKGROUND WORD
   ========================================================================== */

.site-footer::before {
    font-size:
        clamp(
            3rem,
            6vw,
            5rem
        );

    opacity: 0.25;
}


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

@media (max-width: 600px) {

    .site-footer__inner {
        padding-top: 0.9rem;
    }


    .site-footer__top {
        min-height: 0;

        gap: 0.6rem;

        padding-bottom: 0.7rem;
    }


    .site-footer__logo {
        font-size:
            clamp(
                2rem,
                9vw,
                2.9rem
            );
    }


    .site-footer__nav > a {
        min-height: 40px;
    }


    .site-footer__nav > a strong {
        font-size:
            clamp(
                0.95rem,
                4.4vw,
                1.25rem
            );
    }


    .site-footer__metadata > div {
        min-height: 40px;
    }


    .site-footer__bottom {
        min-height: 56px;

        padding:
            0.55rem
            0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .site-footer__nav > a {
        min-height: 38px;

        padding:
            0.3rem
            0;
    }


    .site-footer__metadata > div {
        min-height: 38px;

        padding:
            0.35rem
            0.5rem;
    }

}

/* ==========================================================================
   WFIP_HOME_FOOTER_TYPE_SCALE_V5
   Increase footer micro-type without increasing footer footprint
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tagline
   -------------------------------------------------------------------------- */

.site-footer__tagline {
    font-size: 0.50rem;

    letter-spacing: 0.12em;
}


/* --------------------------------------------------------------------------
   Availability
   -------------------------------------------------------------------------- */

.site-footer__availability span {
    font-size: 0.50rem;

    letter-spacing: 0.095em;
}


.site-footer__availability strong {
    font-size: 0.61rem;

    letter-spacing: 0.07em;
}


/* --------------------------------------------------------------------------
   Navigation indexes
   -------------------------------------------------------------------------- */

.site-footer__nav > a > span:first-child {
    font-size: 0.48rem;

    font-weight: 900;

    opacity: 0.82;
}


/* Keep main navigation names comfortably readable. */

.site-footer__nav > a strong {
    font-size:
        clamp(
            1rem,
            1.35vw,
            1.18rem
        );
}


/* --------------------------------------------------------------------------
   Metadata labels
   -------------------------------------------------------------------------- */

.site-footer__metadata span {
    font-size: 0.46rem;

    font-weight: 850;

    letter-spacing: 0.085em;
}


/* --------------------------------------------------------------------------
   Metadata values
   -------------------------------------------------------------------------- */

.site-footer__metadata strong {
    font-size:
        clamp(
            0.53rem,
            0.64vw,
            0.62rem
        );

    font-weight: 900;

    letter-spacing: 0.045em;

    line-height: 1.15;
}


/* --------------------------------------------------------------------------
   Copyright / final status
   -------------------------------------------------------------------------- */

.site-footer__copyright,
.site-footer__final-status {
    font-size: 0.46rem;

    font-weight: 850;

    letter-spacing: 0.075em;
}


.site-footer__final-status strong {
    font-size: 0.50rem;

    font-weight: 950;
}


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

@media (max-width: 600px) {

    .site-footer__tagline {
        font-size: 0.50rem;
    }


    .site-footer__availability span {
        font-size: 0.48rem;
    }


    .site-footer__availability strong {
        font-size: 0.58rem;
    }


    .site-footer__nav > a > span:first-child {
        font-size: 0.47rem;
    }


    .site-footer__metadata span {
        font-size: 0.45rem;
    }


    .site-footer__metadata strong {
        font-size: 0.57rem;
    }


    .site-footer__copyright,
    .site-footer__final-status {
        font-size: 0.45rem;
    }

}

/* ==========================================================================
   WFIP_WORK_HERO_STYLE_V1
   Work Page — Project Archive Hero
   ========================================================================== */

.page-work {
    background: var(--cut-black);
}


.work-hero {
    position: relative;

    width: 100%;

    padding:
        clamp(9rem, 12vw, 11rem)
        0
        clamp(4.5rem, 7vw, 7rem);

    color: var(--paper-white);

    background:
        radial-gradient(
            circle at 80% 24%,
            rgba(93, 120, 255, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0b0c0e 0%,
            #111316 100%
        );

    overflow: hidden;
}


.work-hero::before {
    content: "ARCHIVE";

    position: absolute;

    top: 0.22em;
    right: -0.035em;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            8rem,
            20vw,
            20rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    text-transform: uppercase;

    pointer-events: none;
}


.work-hero__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   TOP ARCHIVE RAIL
   ========================================================================== */

.work-hero__rail {
    display: grid;

    grid-template-columns:
        1.4fr
        0.7fr
        0.9fr
        1fr;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(0, 0, 0, 0.20);
}


.work-hero__rail > div {
    min-height: 72px;

    padding:
        0.95rem
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.6rem;
}


.work-hero__rail > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-hero__rail span,
.work-hero__rail strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-hero__rail span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.53rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-hero__rail strong {
    color: var(--paper-white);

    font-size:
        clamp(
            0.68rem,
            0.85vw,
            0.82rem
        );

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: 0.055em;
}


.work-hero__rail > div:nth-child(3) strong {
    color: var(--night-vision);
}


.work-hero__rail > div:last-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   HERO INTRO
   ========================================================================== */

.work-hero__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(340px, 0.65fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    padding-bottom:
        clamp(3.5rem, 5vw, 5rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.15);
}


.work-hero__kicker {
    margin:
        0
        0
        1.2rem;

    color: var(--rec-red);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.work-hero__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.work-hero__heading h1 {
    max-width: 1050px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            5rem,
            10vw,
            10rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.078em;

    text-transform: uppercase;
}


.work-hero__heading h1 span {
    display: block;

    margin-top: 0.03em;

    color: transparent;

    -webkit-text-stroke:
        1.35px
        rgba(242, 240, 234, 0.72);

    text-stroke:
        1.35px
        rgba(242, 240, 234, 0.72);

    font-size: 0.58em;

    letter-spacing: -0.06em;
}


.work-hero__copy {
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.18);
}


.work-hero__copy p {
    max-width: 560px;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(242, 240, 234, 0.60);

    font-size:
        clamp(
            0.98rem,
            1.3vw,
            1.12rem
        );

    line-height: 1.68;
}


.work-hero__copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   ARCHIVE STATUS
   ========================================================================== */

.work-hero__status {
    display: grid;

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

    margin-top:
        clamp(2.3rem, 4vw, 3.5rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background:
        rgba(242, 240, 234, 0.022);
}


.work-hero__status > div {
    min-height: 88px;

    padding:
        1rem
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.work-hero__status > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-hero__status span,
.work-hero__status strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-hero__status span {
    color:
        rgba(242, 240, 234, 0.33);

    font-size: 0.53rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.work-hero__status strong {
    color: var(--paper-white);

    font-size:
        clamp(
            0.72rem,
            0.9vw,
            0.86rem
        );

    font-weight: 900;

    letter-spacing: 0.05em;
}


.work-hero__status > div:first-child strong,
.work-hero__status > div:nth-child(2) strong {
    color: var(--night-vision);
}


.work-hero__status > div:last-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   CURRENTLY SHOWING
   ========================================================================== */

.work-hero__showing {
    margin-top:
        clamp(2.3rem, 4vw, 3.5rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background: #0b0c0e;
}


.work-hero__showing-heading {
    min-height: 62px;

    padding:
        0.9rem
        1.15rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.work-hero__showing-heading span,
.work-hero__showing-heading strong {
    font-family: var(--font-mono);

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-hero__showing-heading span {
    color:
        rgba(242, 240, 234, 0.40);
}


.work-hero__showing-heading strong {
    color: var(--rec-red);
}


.work-hero__showing-list {
    display: block;
}


.work-hero__showing-item {
    min-height:
        clamp(
            92px,
            8vw,
            118px
        );

    padding:
        1rem
        1.2rem;

    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        90px
        34px;

    gap:
        clamp(1rem, 2vw, 2rem);

    align-items: center;

    color: var(--paper-white);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);

    text-decoration: none;

    transition:
        background-color 180ms ease,
        padding-left 180ms ease;
}


.work-hero__showing-item:last-child {
    border-bottom: 0;
}


.work-hero__showing-index {
    color:
        rgba(242, 240, 234, 0.22);

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

    font-size:
        clamp(
            2.2rem,
            3vw,
            3.2rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.05em;
}


.work-hero__showing-item > div {
    min-width: 0;
}


.work-hero__showing-item > div strong {
    display: block;

    margin-bottom: 0.35rem;

    color: var(--paper-white);

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

    font-size:
        clamp(
            2rem,
            3.4vw,
            3.6rem
        );

    font-weight: 950;

    line-height: 0.86;

    letter-spacing: -0.05em;

    text-transform: uppercase;
}


.work-hero__showing-item > div span {
    display: block;

    color:
        rgba(242, 240, 234, 0.36);

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

    font-size: 0.53rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-hero__showing-runtime {
    color: var(--practical-light);

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

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.08em;

    text-align: right;
}


.work-hero__showing-arrow {
    color: var(--rec-red);

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

    font-size: 1rem;

    text-align: right;
}


.work-hero__showing-item:hover {
    padding-left: 1.7rem;

    background:
        rgba(242, 240, 234, 0.035);
}


.work-hero__showing-item:hover
.work-hero__showing-index {
    color: var(--rec-red);
}


/* ==========================================================================
   HERO FOOT
   ========================================================================== */

.work-hero__foot {
    min-height: 58px;

    margin-top: 1.25rem;

    padding:
        0.8rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.12);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.work-hero__foot span,
.work-hero__foot strong {
    font-family: var(--font-mono);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-hero__foot span {
    color:
        rgba(242, 240, 234, 0.34);
}


.work-hero__foot strong {
    color: var(--night-vision);
}


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

@media (max-width: 1000px) {

    .work-hero__rail {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-hero__rail > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-hero__rail > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-hero__intro {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .work-hero__copy {
        max-width: 720px;
    }


    .work-hero__status {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .work-hero__status > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-hero__status > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .work-hero {
        padding:
            7.5rem
            0
            4.5rem;
    }


    .work-hero__inner {
        width:
            calc(100% - 2rem);
    }


    .work-hero::before {
        top: 0.7em;

        font-size:
            clamp(
                7rem,
                30vw,
                10rem
            );
    }


    .work-hero__rail {
        grid-template-columns:
            repeat(2, 1fr);

        margin-bottom: 3rem;
    }


    .work-hero__rail > div {
        min-height: 68px;
    }


    .work-hero__heading h1 {
        font-size:
            clamp(
                4rem,
                20vw,
                6.5rem
            );

        line-height: 0.78;
    }


    .work-hero__heading h1 span {
        margin-top: 0.10em;

        font-size: 0.48em;

        line-height: 0.9;
    }


    .work-hero__status {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-hero__status > div:nth-child(3),
    .work-hero__status > div:nth-child(5) {
        border-left: 0;
    }


    .work-hero__status > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-hero__showing-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.45rem;
    }


    .work-hero__showing-item {
        min-height: 116px;

        padding:
            1rem
            1rem;

        grid-template-columns:
            46px
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "index title arrow"
            "index runtime arrow";

        gap:
            0.7rem
            1rem;
    }


    .work-hero__showing-index {
        grid-area: index;

        align-self: center;

        font-size: 2.6rem;
    }


    .work-hero__showing-item > div {
        grid-area: title;
    }


    .work-hero__showing-item > div strong {
        font-size:
            clamp(
                1.8rem,
                9vw,
                2.8rem
            );
    }


    .work-hero__showing-runtime {
        grid-area: runtime;

        text-align: left;
    }


    .work-hero__showing-arrow {
        grid-area: arrow;

        align-self: center;
    }


    .work-hero__showing-item:hover {
        padding-left: 1rem;
    }


    .work-hero__foot {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.45rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .work-hero__rail {
        grid-template-columns: 1fr;
    }


    .work-hero__rail > div,
    .work-hero__rail > div:nth-child(2),
    .work-hero__rail > div:nth-child(3),
    .work-hero__rail > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-hero__rail > div:first-child {
        border-top: 0;
    }


    .work-hero__heading h1 {
        font-size:
            clamp(
                3.6rem,
                19vw,
                5.4rem
            );
    }


    .work-hero__status {
        grid-template-columns: 1fr;
    }


    .work-hero__status > div,
    .work-hero__status > div:nth-child(3),
    .work-hero__status > div:nth-child(4),
    .work-hero__status > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-hero__status > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_WORK_PROJECT_AFTER_HOURS_STYLE_V1
   Work Page — Project 01 / AFTER HOURS
   ========================================================================== */

.work-project--after-hours {
    position: relative;

    width: 100%;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 8vw, 8rem);

    color: var(--cut-black);

    background:
        linear-gradient(
            180deg,
            #f2f0ea 0%,
            #e9e6de 100%
        );

    overflow: hidden;
}


.work-project--after-hours::before {
    content: "01";

    position: absolute;

    top: 0.08em;
    right: -0.02em;

    color:
        rgba(11, 12, 14, 0.045);

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

    font-size:
        clamp(
            10rem,
            24vw,
            25rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.work-project__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   PROJECT HEADER
   ========================================================================== */

.work-project__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    padding-bottom:
        clamp(2.4rem, 4vw, 4rem);

    border-bottom:
        2px solid
        var(--cut-black);
}


.work-project__kicker {
    margin:
        0
        0
        1.2rem;

    color: var(--rec-red);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.work-project__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    font-size: 0.72em;
}


.work-project__header-main h2 {
    margin: 0;

    color: var(--cut-black);

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

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

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.078em;

    text-transform: uppercase;
}


.work-project__header-main h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.35px
        rgba(11, 12, 14, 0.82);

    text-stroke:
        1.35px
        rgba(11, 12, 14, 0.82);
}


.work-project__header-meta {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border:
        1px solid
        rgba(11, 12, 14, 0.20);
}


.work-project__header-meta > div {
    min-height: 96px;

    padding:
        1rem
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.work-project__header-meta > div + div {
    border-left:
        1px solid
        rgba(11, 12, 14, 0.15);
}


.work-project__header-meta span,
.work-project__header-meta strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-project__header-meta span {
    color:
        rgba(11, 12, 14, 0.46);

    font-size: 0.56rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-project__header-meta strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.68rem,
            0.9vw,
            0.86rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;
}


.work-project__header-meta > div:last-child strong {
    color: #506d49;
}


/* ==========================================================================
   FEATURE FRAME
   ========================================================================== */

.work-project__frame {
    position: relative;

    width: 100%;

    min-height:
        clamp(
            560px,
            61vw,
            820px
        );

    background: var(--cut-black);

    overflow: hidden;

    isolation: isolate;
}


.work-project__frame img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 52%;
}


.work-project__frame-shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(11, 12, 14, 0.35) 0%,
            rgba(11, 12, 14, 0.04) 35%,
            rgba(11, 12, 14, 0.12) 64%,
            rgba(11, 12, 14, 0.72) 100%
        );
}


.work-project__frame-top {
    position: absolute;
    z-index: 2;

    top: 1.25rem;
    left: 1.25rem;

    display: flex;

    align-items: center;

    gap: 1.2rem;

    color:
        rgba(242, 240, 234, 0.62);

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

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-project__frame-top span:first-child {
    color: var(--night-vision);
}


.work-project__frame-top span + span::before {
    content: "/";

    margin-right: 1.2rem;

    color:
        rgba(242, 240, 234, 0.20);
}


.work-project__frame-title {
    position: absolute;
    z-index: 2;

    left:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.7rem, 3vw, 3rem);

    display: flex;

    align-items: flex-end;

    gap:
        clamp(1rem, 2vw, 2rem);
}


.work-project__frame-title > span {
    color: var(--rec-red);

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

    font-size: 0.66rem;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.work-project__frame-title strong {
    color: var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            8vw,
            8rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.work-project__frame-timecode {
    position: absolute;
    z-index: 2;

    right:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.7rem, 3vw, 3rem);

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 0.35rem;
}


.work-project__frame-timecode span,
.work-project__frame-timecode strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-project__frame-timecode span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-project__frame-timecode strong {
    color: var(--practical-light);

    font-size: 0.68rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ==========================================================================
   PROJECT INFO
   ========================================================================== */

.work-project__info {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.55fr);

    border:
        1px solid
        rgba(11, 12, 14, 0.22);

    background:
        rgba(255, 255, 255, 0.14);
}


.work-project__summary {
    padding:
        clamp(2rem, 4vw, 4rem);

    border-right:
        1px solid
        rgba(11, 12, 14, 0.16);
}


.work-project__label {
    display: block;

    margin-bottom:
        clamp(1.8rem, 3vw, 3rem);

    color: var(--rec-red);

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

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.work-project__summary h3 {
    max-width: 900px;

    margin:
        0
        0
        2rem;

    color: var(--cut-black);

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

    font-size:
        clamp(
            3.2rem,
            5.3vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.work-project__summary h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.1px
        rgba(11, 12, 14, 0.75);

    text-stroke:
        1.1px
        rgba(11, 12, 14, 0.75);
}


.work-project__summary p {
    max-width: 760px;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(11, 12, 14, 0.64);

    font-size:
        clamp(
            0.97rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.68;
}


.work-project__summary p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   PROJECT SPECS
   ========================================================================== */

.work-project__specs {
    display: grid;

    grid-template-columns: 1fr;
}


.work-project__specs > div {
    min-height: 104px;

    padding:
        1.15rem
        1.3rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.9rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.14);
}


.work-project__specs > div:last-child {
    border-bottom: 0;
}


.work-project__specs span,
.work-project__specs strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-project__specs span {
    color:
        rgba(11, 12, 14, 0.44);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-project__specs strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.78rem,
            1vw,
            0.95rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;
}


.work-project__specs > div:nth-child(2) strong {
    color: var(--rec-red);
}


/* ==========================================================================
   PRODUCTION NOTES
   ========================================================================== */

.work-project__notes {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid
        rgba(11, 12, 14, 0.22);

    background:
        rgba(255, 255, 255, 0.12);
}


.work-project__notes-heading {
    min-height: 64px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.15);
}


.work-project__notes-heading span,
.work-project__notes-heading strong {
    font-family: var(--font-mono);

    font-size: 0.61rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-project__notes-heading span {
    color:
        rgba(11, 12, 14, 0.44);
}


.work-project__notes-heading strong {
    color: #506d49;
}


.work-project__notes-grid {
    display: grid;

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


.work-project__notes-grid > div {
    min-height: 102px;

    padding:
        1.1rem
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.9rem;
}


.work-project__notes-grid > div + div {
    border-left:
        1px solid
        rgba(11, 12, 14, 0.13);
}


.work-project__notes-grid span,
.work-project__notes-grid strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-project__notes-grid span {
    color:
        rgba(11, 12, 14, 0.42);

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.work-project__notes-grid strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.72rem,
            0.9vw,
            0.86rem
        );

    font-weight: 900;

    line-height: 1.28;

    letter-spacing: 0.045em;
}


.work-project__notes-grid > div:last-child strong {
    color: var(--rec-red);
}


/* ==========================================================================
   DELIVERY LOG
   ========================================================================== */

.work-project__delivery {
    margin-top: 1.2rem;

    display: grid;

    grid-template-columns:
        1.55fr
        0.7fr
        0.8fr
        0.8fr;

    color: var(--paper-white);

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background: var(--cut-black);
}


.work-project__delivery > div {
    min-height: 86px;

    padding:
        1rem
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.work-project__delivery > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-project__delivery span,
.work-project__delivery strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-project__delivery span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.53rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-project__delivery strong {
    color:
        rgba(242, 240, 234, 0.82);

    font-size:
        clamp(
            0.65rem,
            0.8vw,
            0.78rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;

    word-break: break-word;
}


.work-project__delivery > div:nth-child(2) strong,
.work-project__delivery > div:nth-child(4) strong {
    color: var(--night-vision);
}


.work-project__delivery > div:first-child strong {
    color: var(--practical-light);
}


/* ==========================================================================
   PROJECT CTA
   ========================================================================== */

.work-project__footer {
    position: relative;

    min-height:
        clamp(
            280px,
            26vw,
            370px
        );

    margin-top:
        clamp(2rem, 3vw, 3rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--paper-white);

    background:
        linear-gradient(
            135deg,
            #17191d 0%,
            #0b0c0e 72%
        );

    overflow: hidden;
}


.work-project__footer::before {
    content: "01:42";

    position: absolute;

    top: -0.08em;
    right: -0.02em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.work-project__footer-copy,
.work-project__cta {
    position: relative;
    z-index: 2;
}


.work-project__footer-copy > span {
    display: block;

    margin-bottom: 1rem;

    color: var(--practical-light);

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.work-project__footer-copy > strong {
    display: block;

    max-width: 820px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.2rem,
            5.6vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.work-project__footer-copy > strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.15px
        rgba(242, 240, 234, 0.70);

    text-stroke:
        1.15px
        rgba(242, 240, 234, 0.70);
}


.work-project__cta {
    min-width: 245px;

    min-height: 64px;

    padding:
        1rem
        1.25rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--cut-black);

    background: var(--paper-white);

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

    font-size: 0.65rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.work-project__cta span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.work-project__cta:hover {
    color: var(--paper-white);

    background: var(--rec-red);

    transform:
        translateY(-2px);
}


.work-project__cta:hover
span:last-child {
    color: var(--paper-white);
}


/* ==========================================================================
   NEXT PROJECT
   ========================================================================== */

.work-project__next {
    min-height: 62px;

    margin-top: 1.2rem;

    padding:
        0.9rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(11, 12, 14, 0.20);

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.20);
}


.work-project__next span,
.work-project__next strong {
    font-family: var(--font-mono);

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-project__next span {
    color:
        rgba(11, 12, 14, 0.42);
}


.work-project__next strong {
    color: var(--rec-red);
}


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

@media (max-width: 1000px) {

    .work-project__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .work-project__header-meta {
        max-width: 720px;
    }


    .work-project__info {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.5fr);
    }


    .work-project__notes-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .work-project__notes-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.13);
    }


    .work-project__notes-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.13);
    }


    .work-project__delivery {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-project__delivery > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-project__delivery > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .work-project--after-hours {
        padding:
            5rem
            0;
    }


    .work-project__inner {
        width:
            calc(100% - 2rem);
    }


    .work-project__header-main h2 {
        font-size:
            clamp(
                4rem,
                20vw,
                6rem
            );
    }


    .work-project__header-meta {
        grid-template-columns: 1fr;
    }


    .work-project__header-meta > div + div {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.15);
    }


    .work-project__frame {
        min-height: 500px;
    }


    .work-project__frame img {
        object-position: 58% center;
    }


    .work-project__frame-title {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.5rem;

        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }


    .work-project__frame-title strong {
        font-size:
            clamp(
                3.2rem,
                16vw,
                5rem
            );
    }


    .work-project__frame-timecode {
        top: 1.2rem;
        right: 1.2rem;

        bottom: auto;
    }


    .work-project__info {
        grid-template-columns: 1fr;
    }


    .work-project__summary {
        padding: 1.5rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(11, 12, 14, 0.16);
    }


    .work-project__summary h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.6rem
            );
    }


    .work-project__specs {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-project__specs > div {
        min-height: 88px;

        border-bottom:
            1px solid
            rgba(11, 12, 14, 0.14);
    }


    .work-project__specs > div:nth-child(even) {
        border-left:
            1px solid
            rgba(11, 12, 14, 0.14);
    }


    .work-project__notes-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .work-project__notes-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-project__notes-grid > div:nth-child(3),
    .work-project__notes-grid > div:nth-child(5) {
        border-left: 0;
    }


    .work-project__notes-grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.13);
    }


    .work-project__delivery {
        grid-template-columns: 1fr;
    }


    .work-project__delivery > div,
    .work-project__delivery > div:nth-child(3),
    .work-project__delivery > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-project__delivery > div:first-child {
        border-top: 0;
    }


    .work-project__footer {
        min-height: 400px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .work-project__footer-copy > strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .work-project__cta {
        width: 100%;

        min-width: 0;
    }


    .work-project__next {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .work-project__frame {
        min-height: 450px;
    }


    .work-project__specs {
        grid-template-columns: 1fr;
    }


    .work-project__specs > div:nth-child(even) {
        border-left: 0;
    }


    .work-project__notes-grid {
        grid-template-columns: 1fr;
    }


    .work-project__notes-grid > div,
    .work-project__notes-grid > div:nth-child(3),
    .work-project__notes-grid > div:nth-child(4),
    .work-project__notes-grid > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.13);
    }


    .work-project__notes-grid > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_WORK_PROJECT_STATIC_MOTION_STYLE_V1
   Work Page — Project 02 / STATIC / MOTION
   ========================================================================== */

.work-static {
    position: relative;

    width: 100%;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 8vw, 8rem);

    color: var(--paper-white);

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(93, 120, 255, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 22% 72%,
            rgba(145, 168, 137, 0.045),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #0b0c0e 0%,
            #12151a 48%,
            #0a0b0d 100%
        );

    overflow: hidden;
}


.work-static::before {
    content: "02";

    position: absolute;

    top: 0.08em;
    right: -0.02em;

    color:
        rgba(93, 120, 255, 0.055);

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

    font-size:
        clamp(
            10rem,
            24vw,
            25rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.work-static__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.work-static__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(340px, 0.7fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.16);
}


.work-static__kicker {
    margin:
        0
        0
        1.2rem;

    color: var(--waveform-blue);

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.work-static__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.work-static__heading h2 {
    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4.8rem,
            8.7vw,
            8.8rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.078em;

    text-transform: uppercase;
}


.work-static__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.3px
        rgba(93, 120, 255, 0.82);

    text-stroke:
        1.3px
        rgba(93, 120, 255, 0.82);
}


.work-static__header-copy {
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.16);
}


.work-static__header-copy > span {
    display: block;

    margin-bottom: 1.3rem;

    color: var(--practical-light);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.work-static__header-copy p {
    max-width: 540px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.60);

    font-size:
        clamp(
            0.98rem,
            1.3vw,
            1.12rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   PRODUCT FRAME
   ========================================================================== */

.work-static__frame {
    position: relative;

    width: 100%;

    min-height:
        clamp(
            560px,
            58vw,
            790px
        );

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background: #050607;

    overflow: hidden;

    isolation: isolate;
}


.work-static__frame img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}


.work-static__frame-shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 6, 7, 0.68) 0%,
            rgba(5, 6, 7, 0.10) 38%,
            rgba(5, 6, 7, 0.04) 66%,
            rgba(5, 6, 7, 0.32) 100%
        ),
        linear-gradient(
            180deg,
            rgba(5, 6, 7, 0.28) 0%,
            transparent 42%,
            rgba(5, 6, 7, 0.62) 100%
        );
}


.work-static__frame-rail {
    position: absolute;
    z-index: 2;

    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;

    min-height: 44px;

    padding:
        0.65rem
        0.8rem;

    display: flex;

    align-items: center;

    gap:
        clamp(1rem, 3vw, 3rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.15);

    background:
        rgba(5, 6, 7, 0.58);

    backdrop-filter:
        blur(7px);
}


.work-static__frame-rail span {
    color:
        rgba(242, 240, 234, 0.52);

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

    font-size: 0.52rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-static__frame-rail span:first-child {
    color: var(--waveform-blue);
}


.work-static__frame-rail span + span::before {
    content: "/";

    margin-right:
        clamp(1rem, 3vw, 3rem);

    color:
        rgba(242, 240, 234, 0.17);
}


.work-static__frame-title {
    position: absolute;
    z-index: 2;

    left:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.8rem, 3vw, 3rem);
}


.work-static__frame-title > span {
    display: block;

    margin-bottom: 0.9rem;

    color: var(--practical-light);

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

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.work-static__frame-title > strong {
    display: block;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.8rem,
            7.4vw,
            7.6rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.072em;

    text-transform: uppercase;
}


.work-static__frame-title > strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(93, 120, 255, 0.85);

    text-stroke:
        1.2px
        rgba(93, 120, 255, 0.85);
}


.work-static__frame-corner {
    position: absolute;
    z-index: 2;

    right:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.8rem, 3vw, 3rem);

    min-width: 150px;

    padding:
        0.8rem
        0.95rem;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 0.4rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.16);

    background:
        rgba(5, 6, 7, 0.62);

    backdrop-filter:
        blur(7px);
}


.work-static__frame-corner span,
.work-static__frame-corner strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-static__frame-corner span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.51rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-static__frame-corner strong {
    color: var(--practical-light);

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


/* ==========================================================================
   BRIEF
   ========================================================================== */

.work-static__brief {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, 0.55fr);

    color: var(--cut-black);

    border:
        1px solid
        rgba(242, 240, 234, 0.15);

    background:
        linear-gradient(
            135deg,
            #f2f0ea 0%,
            #e7e4dc 100%
        );
}


.work-static__brief-copy {
    padding:
        clamp(2rem, 4vw, 4rem);

    border-right:
        1px solid
        rgba(11, 12, 14, 0.16);
}


.work-static__label {
    display: block;

    margin-bottom:
        clamp(1.8rem, 3vw, 3rem);

    color: var(--waveform-blue);

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

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.work-static__brief-copy h3 {
    max-width: 820px;

    margin:
        0
        0
        2rem;

    color: var(--cut-black);

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

    font-size:
        clamp(
            3.3rem,
            5.5vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.work-static__brief-copy h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.1px
        rgba(11, 12, 14, 0.75);

    text-stroke:
        1.1px
        rgba(11, 12, 14, 0.75);
}


.work-static__brief-copy p {
    max-width: 760px;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(11, 12, 14, 0.64);

    font-size:
        clamp(
            0.97rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.68;
}


.work-static__brief-copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   SPEC LEDGER
   ========================================================================== */

.work-static__spec-ledger {
    display: grid;

    grid-template-columns: 1fr;

    background:
        rgba(255, 255, 255, 0.12);
}


.work-static__spec-ledger > div {
    min-height: 115px;

    padding:
        1.2rem
        1.3rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.14);
}


.work-static__spec-ledger > div:last-child {
    border-bottom: 0;
}


.work-static__spec-ledger span,
.work-static__spec-ledger strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-static__spec-ledger span {
    color:
        rgba(11, 12, 14, 0.42);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-static__spec-ledger strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.76rem,
            1vw,
            0.94rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;
}


.work-static__spec-ledger > div:nth-child(2) strong {
    color: var(--rec-red);
}


.work-static__spec-ledger > div:nth-child(3) strong {
    color: #506d49;
}


/* ==========================================================================
   PRODUCTION RECIPE
   ========================================================================== */

.work-static__recipe {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(242, 240, 234, 0.025);
}


.work-static__recipe-heading {
    min-height: 64px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.11);
}


.work-static__recipe-heading span,
.work-static__recipe-heading strong {
    font-family: var(--font-mono);

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-static__recipe-heading span {
    color:
        rgba(242, 240, 234, 0.40);
}


.work-static__recipe-heading strong {
    color: var(--waveform-blue);
}


.work-static__recipe-grid {
    display: grid;

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


.work-static__recipe-grid > div {
    min-height: 150px;

    padding:
        1.2rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.work-static__recipe-grid > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-static__recipe-grid span,
.work-static__recipe-grid strong,
.work-static__recipe-grid small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-static__recipe-grid span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.53rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.work-static__recipe-grid strong {
    color: var(--paper-white);

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

    font-size:
        clamp(
            1.55rem,
            2.2vw,
            2.3rem
        );

    font-weight: 950;

    line-height: 0.90;

    letter-spacing: -0.045em;
}


.work-static__recipe-grid small {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.49rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.08em;
}


.work-static__recipe-grid > div:nth-child(2) strong {
    color: var(--waveform-blue);
}


.work-static__recipe-grid > div:nth-child(4) strong {
    color: var(--practical-light);
}


/* ==========================================================================
   MOTION STUDY
   ========================================================================== */

.work-static__motion-log {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    color: var(--cut-black);

    border:
        1px solid
        rgba(242, 240, 234, 0.15);

    background: var(--paper-white);
}


.work-static__motion-heading {
    min-height: 72px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, 0.16);
}


.work-static__motion-heading > div {
    display: flex;

    align-items: center;

    gap: 1.4rem;
}


.work-static__motion-heading span,
.work-static__motion-heading strong {
    font-family: var(--font-mono);

    font-size: 0.59rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-static__motion-heading span {
    color:
        rgba(11, 12, 14, 0.46);
}


.work-static__motion-heading strong {
    color: var(--waveform-blue);
}


.work-static__motion-heading > span {
    color: var(--rec-red);
}


.work-static__motion-track {
    position: relative;

    display: grid;

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


.work-static__motion-track::before {
    content: "";

    position: absolute;

    top: 35px;
    left: 10%;
    right: 10%;

    height: 2px;

    background:
        rgba(11, 12, 14, 0.15);
}


.work-static__motion-track > div {
    position: relative;
    z-index: 2;

    min-height: 122px;

    padding:
        1rem
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;

    text-align: center;
}


.work-static__motion-track > div + div {
    border-left:
        1px solid
        rgba(11, 12, 14, 0.12);
}


.work-static__motion-track > div::before {
    content: "";

    width: 12px;
    height: 12px;

    margin:
        13px
        auto
        0;

    border:
        2px solid
        var(--cut-black);

    border-radius: 50%;

    background: var(--paper-white);
}


.work-static__motion-track > div:nth-child(3)::before {
    border-color: var(--waveform-blue);

    background: var(--waveform-blue);
}


.work-static__motion-track span,
.work-static__motion-track strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-static__motion-track span {
    color: var(--rec-red);

    font-size: 0.54rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.work-static__motion-track strong {
    color: var(--cut-black);

    font-size:
        clamp(
            0.68rem,
            0.86vw,
            0.82rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;
}


/* ==========================================================================
   MASTER LOG
   ========================================================================== */

.work-static__master-log {
    margin-top: 1.2rem;

    display: grid;

    grid-template-columns:
        1.5fr
        0.6fr
        0.75fr
        0.75fr;

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background: #050607;
}


.work-static__master-log > div {
    min-height: 84px;

    padding:
        1rem
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.work-static__master-log > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-static__master-log span,
.work-static__master-log strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-static__master-log span {
    color:
        rgba(242, 240, 234, 0.34);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-static__master-log strong {
    color:
        rgba(242, 240, 234, 0.82);

    font-size:
        clamp(
            0.64rem,
            0.8vw,
            0.77rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;

    word-break: break-word;
}


.work-static__master-log > div:first-child strong {
    color: var(--practical-light);
}


.work-static__master-log > div:nth-child(2) strong {
    color: var(--waveform-blue);
}


.work-static__master-log > div:last-child strong {
    color: var(--night-vision);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.work-static__footer {
    position: relative;

    min-height:
        clamp(
            285px,
            26vw,
            370px
        );

    margin-top:
        clamp(2rem, 3vw, 3rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--cut-black);

    background:
        linear-gradient(
            135deg,
            #f2f0ea 0%,
            #e6e3dc 100%
        );

    overflow: hidden;
}


.work-static__footer::before {
    content: "00:48";

    position: absolute;

    top: -0.08em;
    right: -0.02em;

    color:
        rgba(11, 12, 14, 0.045);

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

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.work-static__footer > div,
.work-static__cta {
    position: relative;
    z-index: 2;
}


.work-static__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--waveform-blue);

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.work-static__footer strong {
    display: block;

    max-width: 820px;

    color: var(--cut-black);

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

    font-size:
        clamp(
            3.2rem,
            5.6vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.work-static__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.15px
        rgba(11, 12, 14, 0.72);

    text-stroke:
        1.15px
        rgba(11, 12, 14, 0.72);
}


.work-static__cta {
    min-width: 260px;

    min-height: 64px;

    padding:
        1rem
        1.25rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--paper-white);

    background: var(--cut-black);

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

    font-size: 0.64rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.work-static__cta span:last-child {
    color: var(--waveform-blue);

    font-size: 1rem;
}


.work-static__cta:hover {
    color: var(--paper-white);

    background: var(--waveform-blue);

    transform:
        translateY(-2px);
}


.work-static__cta:hover
span:last-child {
    color: var(--paper-white);
}


/* ==========================================================================
   NEXT PROJECT
   ========================================================================== */

.work-static__next {
    min-height: 62px;

    margin-top: 1.2rem;

    padding:
        0.9rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.work-static__next span,
.work-static__next strong {
    font-family: var(--font-mono);

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-static__next span {
    color:
        rgba(242, 240, 234, 0.38);
}


.work-static__next strong {
    color: var(--practical-light);
}


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

@media (max-width: 1000px) {

    .work-static__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .work-static__header-copy {
        max-width: 720px;
    }


    .work-static__brief {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.48fr);
    }


    .work-static__recipe-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .work-static__recipe-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-static__recipe-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-static__motion-track {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .work-static__motion-track::before {
        display: none;
    }


    .work-static__motion-track > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }


    .work-static__motion-track > div:nth-child(5) {
        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }


    .work-static__master-log {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-static__master-log > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-static__master-log > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .work-static {
        padding:
            5rem
            0;
    }


    .work-static__inner {
        width:
            calc(100% - 2rem);
    }


    .work-static__heading h2 {
        font-size:
            clamp(
                3.8rem,
                18vw,
                5.8rem
            );
    }


    .work-static__frame {
        min-height: 500px;
    }


    .work-static__frame img {
        object-position:
            55%
            center;
    }


    .work-static__frame-rail {
        right: auto;

        max-width:
            calc(100% - 2.5rem);

        flex-wrap: wrap;

        gap:
            0.45rem
            1rem;
    }


    .work-static__frame-rail span + span::before {
        margin-right: 1rem;
    }


    .work-static__frame-title {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.4rem;
    }


    .work-static__frame-title > strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.8rem
            );
    }


    .work-static__frame-corner {
        top: 1.2rem;
        right: 1.2rem;
        bottom: auto;

        min-width: 110px;
    }


    .work-static__brief {
        grid-template-columns: 1fr;
    }


    .work-static__brief-copy {
        padding: 1.5rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(11, 12, 14, 0.16);
    }


    .work-static__brief-copy h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .work-static__spec-ledger {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-static__spec-ledger > div {
        min-height: 92px;
    }


    .work-static__spec-ledger > div:nth-child(even) {
        border-left:
            1px solid
            rgba(11, 12, 14, 0.14);
    }


    .work-static__recipe-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .work-static__recipe-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-static__recipe-grid > div:nth-child(3),
    .work-static__recipe-grid > div:nth-child(5) {
        border-left: 0;
    }


    .work-static__recipe-grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-static__motion-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }


    .work-static__motion-heading > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.4rem;
    }


    .work-static__motion-track {
        grid-template-columns: 1fr;
    }


    .work-static__motion-track > div,
    .work-static__motion-track > div:nth-child(4),
    .work-static__motion-track > div:nth-child(5) {
        min-height: 82px;

        padding:
            0.9rem
            1rem;

        display: grid;

        grid-template-columns:
            18px
            70px
            minmax(0, 1fr);

        gap: 0.8rem;

        align-items: center;

        text-align: left;

        border-left: 0;

        border-top:
            1px solid
            rgba(11, 12, 14, 0.12);
    }


    .work-static__motion-track > div:first-child {
        border-top: 0;
    }


    .work-static__motion-track > div::before {
        width: 10px;
        height: 10px;

        margin: 0;
    }


    .work-static__master-log {
        grid-template-columns: 1fr;
    }


    .work-static__master-log > div,
    .work-static__master-log > div:nth-child(3),
    .work-static__master-log > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-static__master-log > div:first-child {
        border-top: 0;
    }


    .work-static__footer {
        min-height: 400px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .work-static__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .work-static__cta {
        width: 100%;

        min-width: 0;
    }


    .work-static__next {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .work-static__frame {
        min-height: 450px;
    }


    .work-static__spec-ledger {
        grid-template-columns: 1fr;
    }


    .work-static__spec-ledger > div:nth-child(even) {
        border-left: 0;
    }


    .work-static__recipe-grid {
        grid-template-columns: 1fr;
    }


    .work-static__recipe-grid > div,
    .work-static__recipe-grid > div:nth-child(3),
    .work-static__recipe-grid > div:nth-child(4),
    .work-static__recipe-grid > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-static__recipe-grid > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_WORK_PROJECT_LONG_WAY_HOME_STYLE_V1
   Work Page — Project 03 / THE LONG WAY HOME
   ========================================================================== */

.work-long-way {
    position: relative;

    width: 100%;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 8vw, 8rem);

    color: #191715;

    background:
        linear-gradient(
            180deg,
            #e7dfd2 0%,
            #ddd4c6 48%,
            #e9e2d7 100%
        );

    overflow: hidden;
}


.work-long-way::before {
    content: "03";

    position: absolute;

    top: 0.06em;
    right: -0.02em;

    color:
        rgba(69, 57, 43, 0.055);

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

    font-size:
        clamp(
            10rem,
            24vw,
            25rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.09em;

    pointer-events: none;
}


.work-long-way__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.work-long-way__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(340px, 0.7fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3rem, 5vw, 5rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        rgba(25, 23, 21, 0.82);
}


.work-long-way__kicker {
    margin:
        0
        0
        1.2rem;

    color: #83583b;

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

    font-size: 0.66rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.work-long-way__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.work-long-way__heading h2 {
    margin: 0;

    color: #191715;

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

    font-size:
        clamp(
            4.8rem,
            8.8vw,
            9rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.078em;

    text-transform: uppercase;
}


.work-long-way__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(25, 23, 21, 0.75);

    text-stroke:
        1.25px
        rgba(25, 23, 21, 0.75);
}


.work-long-way__header-copy {
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(25, 23, 21, 0.20);
}


.work-long-way__header-copy > span {
    display: block;

    margin-bottom: 1.3rem;

    color: #83583b;

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.work-long-way__header-copy p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(25, 23, 21, 0.66);

    font-size:
        clamp(
            0.98rem,
            1.3vw,
            1.12rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   FEATURE FRAME
   ========================================================================== */

.work-long-way__frame {
    position: relative;

    width: 100%;

    min-height:
        clamp(
            580px,
            61vw,
            820px
        );

    border:
        1px solid
        rgba(25, 23, 21, 0.25);

    background: #171513;

    overflow: hidden;

    isolation: isolate;
}


.work-long-way__frame img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center
        center;
}


.work-long-way__frame-shade {
    position: absolute;
    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(15, 14, 13, 0.24) 0%,
            rgba(15, 14, 13, 0.01) 36%,
            rgba(15, 14, 13, 0.12) 62%,
            rgba(15, 14, 13, 0.72) 100%
        );
}


.work-long-way__frame-meta {
    position: absolute;
    z-index: 2;

    top: 1.25rem;
    left: 1.25rem;

    display: flex;

    align-items: center;

    gap: 1.2rem;

    color:
        rgba(242, 240, 234, 0.58);

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

    font-size: 0.54rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-long-way__frame-meta span:first-child {
    color: var(--night-vision);
}


.work-long-way__frame-meta span + span::before {
    content: "/";

    margin-right: 1.2rem;

    color:
        rgba(242, 240, 234, 0.20);
}


.work-long-way__frame-title {
    position: absolute;
    z-index: 2;

    left:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.8rem, 3vw, 3rem);
}


.work-long-way__frame-title > span {
    display: block;

    margin-bottom: 0.8rem;

    color: var(--practical-light);

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

    font-size: 0.59rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.work-long-way__frame-title > strong {
    display: block;

    max-width: 950px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.9rem,
            7.5vw,
            7.7rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.074em;

    text-transform: uppercase;
}


.work-long-way__frame-title > strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.75);

    text-stroke:
        1.2px
        rgba(242, 240, 234, 0.75);
}


.work-long-way__frame-time {
    position: absolute;
    z-index: 2;

    right:
        clamp(1.5rem, 3vw, 3rem);

    bottom:
        clamp(1.8rem, 3vw, 3rem);

    min-width: 142px;

    padding:
        0.8rem
        0.95rem;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 0.4rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.16);

    background:
        rgba(15, 14, 13, 0.64);

    backdrop-filter:
        blur(7px);
}


.work-long-way__frame-time span,
.work-long-way__frame-time strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-long-way__frame-time span {
    color:
        rgba(242, 240, 234, 0.38);

    font-size: 0.51rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-long-way__frame-time strong {
    color: var(--practical-light);

    font-size: 0.70rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


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

.work-long-way__story {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.55fr);

    border:
        1px solid
        rgba(25, 23, 21, 0.20);

    background:
        rgba(255, 255, 255, 0.20);
}


.work-long-way__story-copy {
    padding:
        clamp(2rem, 4vw, 4rem);

    border-right:
        1px solid
        rgba(25, 23, 21, 0.15);
}


.work-long-way__label {
    display: block;

    margin-bottom:
        clamp(1.8rem, 3vw, 3rem);

    color: #83583b;

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

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.work-long-way__story-copy h3 {
    max-width: 860px;

    margin:
        0
        0
        2rem;

    color: #191715;

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

    font-size:
        clamp(
            3.2rem,
            5.3vw,
            5.8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.work-long-way__story-copy h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.1px
        rgba(25, 23, 21, 0.72);

    text-stroke:
        1.1px
        rgba(25, 23, 21, 0.72);
}


.work-long-way__story-copy p {
    max-width: 760px;

    margin:
        0
        0
        1.25rem;

    color:
        rgba(25, 23, 21, 0.64);

    font-size:
        clamp(
            0.97rem,
            1.15vw,
            1.06rem
        );

    line-height: 1.68;
}


.work-long-way__story-copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   DETAILS
   ========================================================================== */

.work-long-way__details {
    display: grid;

    grid-template-columns: 1fr;

    margin: 0;
}


.work-long-way__details > div {
    min-height: 102px;

    padding:
        1.1rem
        1.25rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;

    border-bottom:
        1px solid
        rgba(25, 23, 21, 0.13);
}


.work-long-way__details > div:last-child {
    border-bottom: 0;
}


.work-long-way__details span,
.work-long-way__details strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-long-way__details span {
    color:
        rgba(25, 23, 21, 0.42);

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-long-way__details strong {
    color: #191715;

    font-size:
        clamp(
            0.76rem,
            0.95vw,
            0.92rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;
}


.work-long-way__details > div:nth-child(2) strong {
    color: var(--rec-red);
}


.work-long-way__details > div:nth-child(4) strong {
    color: #68785f;
}


/* ==========================================================================
   FIELD NOTES
   ========================================================================== */

.work-long-way__field-notes {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid
        rgba(25, 23, 21, 0.22);

    background:
        rgba(255, 255, 255, 0.16);
}


.work-long-way__field-heading {
    min-height: 64px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(25, 23, 21, 0.14);
}


.work-long-way__field-heading span,
.work-long-way__field-heading strong {
    font-family: var(--font-mono);

    font-size: 0.60rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-long-way__field-heading span {
    color:
        rgba(25, 23, 21, 0.42);
}


.work-long-way__field-heading strong {
    color: #68785f;
}


.work-long-way__field-grid {
    display: grid;

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


.work-long-way__field-grid > div {
    min-height: 142px;

    padding:
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.work-long-way__field-grid > div + div {
    border-left:
        1px solid
        rgba(25, 23, 21, 0.12);
}


.work-long-way__field-grid span,
.work-long-way__field-grid strong,
.work-long-way__field-grid small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-long-way__field-grid span {
    color:
        rgba(25, 23, 21, 0.40);

    font-size: 0.52rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.work-long-way__field-grid strong {
    color: #191715;

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

    font-size:
        clamp(
            1.45rem,
            2.1vw,
            2.2rem
        );

    font-weight: 950;

    line-height: 0.9;

    letter-spacing: -0.04em;
}


.work-long-way__field-grid small {
    color:
        rgba(25, 23, 21, 0.42);

    font-size: 0.49rem;

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: 0.08em;
}


.work-long-way__field-grid > div:nth-child(2) strong {
    color: #83583b;
}


.work-long-way__field-grid > div:last-child strong {
    color: #68785f;
}


/* ==========================================================================
   SCENE LOG
   ========================================================================== */

.work-long-way__scene-log {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    color: var(--paper-white);

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    background:
        linear-gradient(
            135deg,
            #171513 0%,
            #0e0d0c 100%
        );
}


.work-long-way__scene-heading {
    min-height: 68px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-long-way__scene-heading > div {
    display: flex;

    align-items: center;

    gap: 1.4rem;
}


.work-long-way__scene-heading span,
.work-long-way__scene-heading strong {
    font-family: var(--font-mono);

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-long-way__scene-heading span {
    color:
        rgba(242, 240, 234, 0.38);
}


.work-long-way__scene-heading strong {
    color: var(--practical-light);
}


.work-long-way__scene-heading > span {
    color: var(--night-vision);
}


.work-long-way__scenes {
    display: grid;

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


.work-long-way__scenes article {
    min-height: 190px;

    padding:
        1.3rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.work-long-way__scenes article + article {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-long-way__scenes article > span {
    color: var(--rec-red);

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

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.work-long-way__scenes article > strong {
    color: var(--paper-white);

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

    font-size:
        clamp(
            1.7rem,
            2.6vw,
            2.8rem
        );

    font-weight: 950;

    line-height: 0.88;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.work-long-way__scenes article > p {
    margin: 0;

    color:
        rgba(242, 240, 234, 0.46);

    font-size: 0.82rem;

    line-height: 1.5;
}


/* ==========================================================================
   DELIVERY LOG
   ========================================================================== */

.work-long-way__delivery {
    margin-top: 1.2rem;

    display: grid;

    grid-template-columns:
        1.45fr
        0.65fr
        0.8fr
        0.75fr;

    color: var(--paper-white);

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    background: #0d0c0b;
}


.work-long-way__delivery > div {
    min-height: 84px;

    padding:
        1rem
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.75rem;
}


.work-long-way__delivery > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.work-long-way__delivery span,
.work-long-way__delivery strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.work-long-way__delivery span {
    color:
        rgba(242, 240, 234, 0.32);

    font-size: 0.51rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.work-long-way__delivery strong {
    color:
        rgba(242, 240, 234, 0.82);

    font-size:
        clamp(
            0.63rem,
            0.8vw,
            0.76rem
        );

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.05em;

    word-break: break-word;
}


.work-long-way__delivery > div:first-child strong {
    color: var(--practical-light);
}


.work-long-way__delivery > div:nth-child(2) strong,
.work-long-way__delivery > div:last-child strong {
    color: var(--night-vision);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.work-long-way__footer {
    position: relative;

    min-height:
        clamp(
            290px,
            27vw,
            385px
        );

    margin-top:
        clamp(2rem, 3vw, 3rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        auto;

    gap: 3rem;

    align-items: end;

    color: var(--paper-white);

    background:
        linear-gradient(
            135deg,
            #40352c 0%,
            #191512 52%,
            #0d0c0b 100%
        );

    overflow: hidden;
}


.work-long-way__footer::before {
    content: "03:16";

    position: absolute;

    top: -0.08em;
    right: -0.02em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            8rem,
            18vw,
            18rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.work-long-way__footer > div,
.work-long-way__cta {
    position: relative;
    z-index: 2;
}


.work-long-way__footer-label {
    display: block;

    margin-bottom: 1rem;

    color: var(--practical-light);

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.work-long-way__footer strong {
    display: block;

    max-width: 880px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.2rem,
            5.6vw,
            5.9rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


.work-long-way__footer strong span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.15px
        rgba(242, 240, 234, 0.70);

    text-stroke:
        1.15px
        rgba(242, 240, 234, 0.70);
}


.work-long-way__cta {
    min-width: 275px;

    min-height: 64px;

    padding:
        1rem
        1.25rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: #191715;

    background: var(--paper-white);

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

    font-size: 0.63rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.work-long-way__cta span:last-child {
    color: #83583b;

    font-size: 1rem;
}


.work-long-way__cta:hover {
    color: var(--paper-white);

    background: #83583b;

    transform:
        translateY(-2px);
}


.work-long-way__cta:hover
span:last-child {
    color: var(--paper-white);
}


/* ==========================================================================
   ARCHIVE END
   ========================================================================== */

.work-long-way__archive-end {
    min-height: 64px;

    margin-top: 1.2rem;

    padding:
        0.9rem
        1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(25, 23, 21, 0.20);

    border-bottom:
        1px solid
        rgba(25, 23, 21, 0.20);
}


.work-long-way__archive-end span,
.work-long-way__archive-end strong {
    font-family: var(--font-mono);

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.work-long-way__archive-end span {
    color:
        rgba(25, 23, 21, 0.42);
}


.work-long-way__archive-end strong {
    color: #68785f;
}


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

@media (max-width: 1000px) {

    .work-long-way__header {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .work-long-way__header-copy {
        max-width: 720px;
    }


    .work-long-way__story {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.48fr);
    }


    .work-long-way__field-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .work-long-way__field-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(25, 23, 21, 0.12);
    }


    .work-long-way__field-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(25, 23, 21, 0.12);
    }


    .work-long-way__scenes {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-long-way__scenes article:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-long-way__scenes article:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-long-way__delivery {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-long-way__delivery > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-long-way__delivery > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .work-long-way {
        padding:
            5rem
            0;
    }


    .work-long-way__inner {
        width:
            calc(100% - 2rem);
    }


    .work-long-way__heading h2 {
        font-size:
            clamp(
                3.8rem,
                18vw,
                5.8rem
            );
    }


    .work-long-way__frame {
        min-height: 500px;
    }


    .work-long-way__frame img {
        object-position:
            42%
            center;
    }


    .work-long-way__frame-title {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.4rem;
    }


    .work-long-way__frame-title > strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.8rem
            );
    }


    .work-long-way__frame-time {
        top: 1.2rem;
        right: 1.2rem;
        bottom: auto;

        min-width: 105px;
    }


    .work-long-way__story {
        grid-template-columns: 1fr;
    }


    .work-long-way__story-copy {
        padding: 1.5rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(25, 23, 21, 0.15);
    }


    .work-long-way__story-copy h3 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .work-long-way__details {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-long-way__details > div:nth-child(even) {
        border-left:
            1px solid
            rgba(25, 23, 21, 0.13);
    }


    .work-long-way__field-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .work-long-way__field-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .work-long-way__field-grid > div:nth-child(3),
    .work-long-way__field-grid > div:nth-child(5) {
        border-left: 0;
    }


    .work-long-way__field-grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(25, 23, 21, 0.12);
    }


    .work-long-way__scene-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .work-long-way__scene-heading > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.4rem;
    }


    .work-long-way__scenes {
        grid-template-columns: 1fr;
    }


    .work-long-way__scenes article {
        min-height: 140px;
    }


    .work-long-way__scenes article,
    .work-long-way__scenes article:nth-child(3),
    .work-long-way__scenes article:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-long-way__scenes article:first-child {
        border-top: 0;
    }


    .work-long-way__delivery {
        grid-template-columns: 1fr;
    }


    .work-long-way__delivery > div,
    .work-long-way__delivery > div:nth-child(3),
    .work-long-way__delivery > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .work-long-way__delivery > div:first-child {
        border-top: 0;
    }


    .work-long-way__footer {
        min-height: 410px;

        padding: 1.5rem;

        grid-template-columns: 1fr;

        align-content: space-between;
    }


    .work-long-way__footer strong {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }


    .work-long-way__cta {
        width: 100%;

        min-width: 0;
    }


    .work-long-way__archive-end {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .work-long-way__frame {
        min-height: 450px;
    }


    .work-long-way__details {
        grid-template-columns: 1fr;
    }


    .work-long-way__details > div:nth-child(even) {
        border-left: 0;
    }


    .work-long-way__field-grid {
        grid-template-columns: 1fr;
    }


    .work-long-way__field-grid > div,
    .work-long-way__field-grid > div:nth-child(3),
    .work-long-way__field-grid > div:nth-child(4),
    .work-long-way__field-grid > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(25, 23, 21, 0.12);
    }


    .work-long-way__field-grid > div:first-child {
        border-top: 0;
    }

}

/* ==========================================================================
   WFIP_WORK_LONG_WAY_MOBILE_CTA_FIX_V2
   Project 03 — Prevent final CTA headline clipping on mobile
   ========================================================================== */

@media (max-width: 760px) {

    .work-long-way__footer {
        min-width: 0;

        overflow: hidden;
    }


    .work-long-way__footer > div {
        min-width: 0;

        width: 100%;
    }


    .work-long-way__footer strong {
        width: 100%;

        max-width: 100%;

        font-size:
            clamp(
                2.55rem,
                11.5vw,
                3.7rem
            );

        line-height: 0.84;

        letter-spacing: -0.058em;
    }


    .work-long-way__footer strong span {
        font-size: 0.94em;

        line-height: 0.88;
    }


    .work-long-way__cta {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .work-long-way__footer {
        padding:
            1.35rem;
    }


    .work-long-way__footer strong {
        font-size:
            clamp(
                2.35rem,
                10.8vw,
                3.15rem
            );

        letter-spacing: -0.052em;
    }


    .work-long-way__cta {
        padding:
            0.95rem
            1rem;

        gap: 1rem;
    }

}

/* ==========================================================================
   WFIP_SERVICES_HERO_STYLE_V1
   Services Page — Hero / Capability Board
   ========================================================================== */

.services-hero {
    position: relative;

    min-height: 100svh;

    padding:
        clamp(9rem, 12vw, 11.5rem)
        0
        clamp(4.5rem, 7vw, 7rem);

    color: var(--paper-white);

    background:
        radial-gradient(
            circle at 78% 26%,
            rgba(93, 120, 255, 0.10),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #0b0c0e 0%,
            #111317 58%,
            #0b0c0e 100%
        );

    overflow: hidden;

    isolation: isolate;
}


.services-hero::before {
    content: "SERVICES";

    position: absolute;

    top: 0.66em;
    right: -0.035em;

    z-index: -1;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            8rem,
            20vw,
            21rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.085em;

    text-transform: uppercase;

    pointer-events: none;
}


.services-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:
        linear-gradient(
            rgba(242, 240, 234, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242, 240, 234, 0.018) 1px,
            transparent 1px
        );

    background-size:
        84px 84px;

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.45),
            transparent 74%
        );

    pointer-events: none;
}


.services-hero__inner {
    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   TOP PRODUCTION RAIL
   ========================================================================== */

.services-hero__rail {
    display: grid;

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

    margin-bottom:
        clamp(3.5rem, 6vw, 6rem);

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-hero__rail > div {
    min-height: 72px;

    padding:
        0.9rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.7rem;
}


.services-hero__rail > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-hero__rail span,
.services-hero__rail strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-hero__rail span {
    color:
        rgba(242, 240, 234, 0.31);

    font-size: 0.51rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.services-hero__rail strong {
    color:
        rgba(242, 240, 234, 0.78);

    font-size:
        clamp(
            0.64rem,
            0.8vw,
            0.76rem
        );

    font-weight: 900;

    letter-spacing: 0.07em;
}


.services-hero__rail > div:nth-child(2) strong {
    color: var(--night-vision);
}


.services-hero__rail > div:nth-child(4) strong {
    color: var(--practical-light);
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.services-hero__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    padding-bottom:
        clamp(3.5rem, 6vw, 6rem);
}


.services-hero__kicker {
    margin:
        0
        0
        1.25rem;

    color: var(--night-vision);

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.services-hero__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.services-hero__heading h1 {
    max-width: 1050px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4.8rem,
            8.6vw,
            8.8rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.services-hero__heading h1 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(242, 240, 234, 0.68);

    text-stroke:
        1.25px
        rgba(242, 240, 234, 0.68);
}


.services-hero__copy {
    padding-top: 1.4rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-hero__copy > span {
    display: block;

    margin-bottom: 1.4rem;

    color: var(--waveform-blue);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-hero__copy p {
    max-width: 530px;

    margin:
        0
        0
        2rem;

    color:
        rgba(242, 240, 234, 0.58);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.68;
}


.services-hero__cta {
    width: 100%;

    min-height: 60px;

    padding:
        0.95rem
        1.15rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: #0b0c0e;

    background: var(--paper-white);

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

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.services-hero__cta span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.services-hero__cta:hover {
    color: var(--paper-white);

    background: var(--waveform-blue);

    transform: translateY(-2px);
}


.services-hero__cta:hover span:last-child {
    color: var(--paper-white);
}


/* ==========================================================================
   CAPABILITY LEDGER
   ========================================================================== */

.services-hero__capabilities {
    display: grid;

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

    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background:
        rgba(21, 23, 26, 0.76);

    box-shadow:
        0
        26px
        70px
        rgba(0, 0, 0, 0.18);
}


.services-hero__capability {
    position: relative;

    min-height:
        clamp(
            155px,
            13vw,
            190px
        );

    padding:
        clamp(1.25rem, 2vw, 1.75rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 2rem;

    overflow: hidden;
}


.services-hero__capability:nth-child(2),
.services-hero__capability:nth-child(3),
.services-hero__capability:nth-child(5),
.services-hero__capability:nth-child(6) {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-hero__capability:nth-child(n + 4) {
    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-hero__capability::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--waveform-blue);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform 180ms ease;
}


.services-hero__capability:hover::after {
    transform: scaleX(1);
}


.services-hero__number {
    color:
        rgba(242, 240, 234, 0.27);

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

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.11em;
}


.services-hero__capability > div {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;
}


.services-hero__capability strong {
    color: var(--paper-white);

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

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

    font-weight: 950;

    line-height: 0.86;

    letter-spacing: -0.052em;

    text-transform: uppercase;
}


.services-hero__capability > div > span {
    color:
        rgba(242, 240, 234, 0.35);

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

    font-size: 0.52rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.services-hero__capability:nth-child(1) strong {
    color: var(--practical-light);
}


.services-hero__capability:nth-child(3) strong {
    color: #aab7ff;
}


.services-hero__capability:nth-child(5) strong {
    color: var(--night-vision);
}


/* ==========================================================================
   STATUS STRIP
   ========================================================================== */

.services-hero__status {
    display: grid;

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

    margin-top: 1.2rem;

    border:
        1px solid
        rgba(242, 240, 234, 0.11);

    background:
        rgba(11, 12, 14, 0.72);
}


.services-hero__status > div {
    min-height: 78px;

    padding:
        0.95rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.65rem;
}


.services-hero__status > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.09);
}


.services-hero__status span,
.services-hero__status strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-hero__status span {
    color:
        rgba(242, 240, 234, 0.29);

    font-size: 0.50rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.services-hero__status strong {
    color:
        rgba(242, 240, 234, 0.76);

    font-size: 0.66rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.07em;
}


.services-hero__status > div:nth-child(1) strong,
.services-hero__status > div:nth-child(2) strong {
    color: var(--night-vision);
}


.services-hero__status > div:nth-child(3) strong {
    color: var(--practical-light);
}


.services-hero__status > div:nth-child(4) strong {
    color: #aab7ff;
}


/* ==========================================================================
   HERO END
   ========================================================================== */

.services-hero__end {
    min-height: 62px;

    margin-top:
        clamp(2rem, 4vw, 3.5rem);

    padding:
        0.8rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.12);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.services-hero__end span,
.services-hero__end strong {
    font-family: var(--font-mono);

    font-size: 0.54rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-hero__end span {
    color:
        rgba(242, 240, 234, 0.31);
}


.services-hero__end strong {
    color: var(--night-vision);
}


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

@media (max-width: 1000px) {

    .services-hero__intro {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }


    .services-hero__copy {
        max-width: 680px;
    }


    .services-hero__capabilities {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .services-hero__capability:nth-child(3),
    .services-hero__capability:nth-child(5) {
        border-left: 0;
    }


    .services-hero__capability:nth-child(3) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-hero__capability:nth-child(4),
    .services-hero__capability:nth-child(6) {
        border-left:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .services-hero {
        min-height: auto;

        padding:
            7.75rem
            0
            4rem;
    }


    .services-hero::before {
        top: 1.2em;

        font-size:
            clamp(
                7rem,
                31vw,
                10rem
            );
    }


    .services-hero__inner {
        width:
            calc(100% - 2rem);
    }


    .services-hero__rail {
        grid-template-columns:
            repeat(2, 1fr);

        margin-bottom: 3.5rem;
    }


    .services-hero__rail > div:nth-child(3),
    .services-hero__rail > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-hero__rail > div:nth-child(3) {
        border-left: 0;
    }


    .services-hero__heading h1 {
        font-size:
            clamp(
                3.8rem,
                17vw,
                5.5rem
            );

        line-height: 0.79;
    }


    .services-hero__intro {
        padding-bottom: 3rem;
    }


    .services-hero__capabilities {
        grid-template-columns: 1fr;
    }


    .services-hero__capability {
        min-height: 125px;

        padding: 1.2rem;
    }


    .services-hero__capability:nth-child(2),
    .services-hero__capability:nth-child(3),
    .services-hero__capability:nth-child(4),
    .services-hero__capability:nth-child(5),
    .services-hero__capability:nth-child(6) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-hero__capability strong {
        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }


    .services-hero__status {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .services-hero__status > div:nth-child(3),
    .services-hero__status > div:nth-child(4) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-hero__status > div:nth-child(3) {
        border-left: 0;
    }


    .services-hero__end {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-hero__rail,
    .services-hero__status {
        grid-template-columns: 1fr;
    }


    .services-hero__rail > div,
    .services-hero__rail > div:nth-child(2),
    .services-hero__rail > div:nth-child(3),
    .services-hero__rail > div:nth-child(4) {
        border-left: 0;
    }


    .services-hero__rail > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-hero__status > div,
    .services-hero__status > div:nth-child(2),
    .services-hero__status > div:nth-child(3),
    .services-hero__status > div:nth-child(4) {
        border-left: 0;
    }


    .services-hero__status > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-hero__heading h1 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                4.65rem
            );
    }

}

/* ==========================================================================
   WFIP_SERVICES_PRODUCTION_PATHS_STYLE_V1
   Services Page — Section 02 / Production Paths
   ========================================================================== */

.services-paths {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0
        clamp(6rem, 9vw, 9rem);

    color: #151515;

    background:
        linear-gradient(
            180deg,
            #f2f0ea 0%,
            #e9e5dc 100%
        );

    overflow: hidden;
}


.services-paths::before {
    content: "SERVICES / 02";

    position: absolute;

    top: 0.14em;
    right: -0.02em;

    color:
        rgba(21, 21, 21, 0.035);

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

    font-size:
        clamp(
            8rem,
            20vw,
            21rem
        );

    font-weight: 950;

    line-height: 0.78;

    letter-spacing: -0.085em;

    text-transform: uppercase;

    pointer-events: none;
}


.services-paths__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.services-paths__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        rgba(21, 21, 21, 0.82);
}


.services-paths__kicker {
    margin:
        0
        0
        1.15rem;

    color: #765c3f;

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

    font-size: 0.64rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.services-paths__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.services-paths__header h2 {
    max-width: 980px;

    margin: 0;

    color: #151515;

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

    font-size:
        clamp(
            4.7rem,
            8.2vw,
            8.4rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.services-paths__header h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.25px
        rgba(21, 21, 21, 0.76);

    text-stroke:
        1.25px
        rgba(21, 21, 21, 0.76);
}


.services-paths__intro {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(21, 21, 21, 0.18);
}


.services-paths__intro > span {
    display: block;

    margin-bottom: 1.3rem;

    color: #765c3f;

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-paths__intro p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(21, 21, 21, 0.63);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.68;
}


/* ==========================================================================
   SHARED SERVICE PATH
   ========================================================================== */

.services-path {
    position: relative;

    margin-top:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid
        rgba(21, 21, 21, 0.19);

    overflow: hidden;

    isolation: isolate;
}


.services-path:first-of-type {
    margin-top: 0;
}


.services-path__number {
    min-height: 74px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(21, 21, 21, 0.15);
}


.services-path__number span,
.services-path__number strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-path__number span {
    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.services-path__number strong {
    font-size:
        clamp(
            1.3rem,
            2vw,
            1.8rem
        );

    font-weight: 900;

    letter-spacing: -0.04em;
}


.services-path__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    padding:
        clamp(2rem, 4vw, 4rem);
}


.services-path__title > span {
    display: block;

    margin-bottom: 1.1rem;

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.services-path__title h3 {
    margin: 0;

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

    font-size:
        clamp(
            4rem,
            7vw,
            7.2rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.services-path__title h3 span {
    display: block;
}


.services-path__description {
    padding-top: 1.1rem;

    border-top:
        1px solid
        currentColor;

    border-top-color:
        rgba(21, 21, 21, 0.15);
}


.services-path__description p {
    max-width: 530px;

    margin: 0;

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   SCOPE GRID
   ========================================================================== */

.services-path__scope {
    display: grid;

    grid-template-columns:
        1.15fr
        0.8fr
        0.8fr;

    border-top:
        1px solid
        rgba(21, 21, 21, 0.15);
}


.services-path__scope > div {
    min-height:
        clamp(
            250px,
            22vw,
            315px
        );

    padding:
        clamp(1.4rem, 2.4vw, 2.2rem);

    display: flex;

    flex-direction: column;

    gap: 0.9rem;
}


.services-path__scope > div + div {
    border-left:
        1px solid
        rgba(21, 21, 21, 0.13);
}


.services-path__scope > div > span {
    display: block;

    margin-bottom: 1rem;

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

    font-size: 0.53rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-path__scope ul {
    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.75rem
        1.4rem;

    list-style: none;
}


.services-path__scope li {
    position: relative;

    padding-left: 1rem;

    font-size:
        clamp(
            0.88rem,
            1vw,
            0.98rem
        );

    font-weight: 650;

    line-height: 1.45;
}


.services-path__scope li::before {
    content: "—";

    position: absolute;

    left: 0;

    opacity: 0.45;
}


.services-path__scope strong {
    font-family: var(--font-display);

    font-size:
        clamp(
            1.55rem,
            2.2vw,
            2.3rem
        );

    font-weight: 950;

    line-height: 0.92;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.services-path__scope small {
    margin-top: auto;

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

    font-size: 0.51rem;

    font-weight: 800;

    line-height: 1.45;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================================
   PATH FOOTER
   ========================================================================== */

.services-path__footer {
    min-height: 66px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(21, 21, 21, 0.15);
}


.services-path__footer span,
.services-path__footer strong {
    font-family: var(--font-mono);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


/* ==========================================================================
   PATH 01 — FULL PRODUCTION
   ========================================================================== */

.services-path--full {
    color: #171513;

    background:
        linear-gradient(
            135deg,
            #e6ddcf 0%,
            #f1ece3 62%,
            #e7dfd3 100%
        );
}


.services-path--full::before {
    content: "FULL";

    position: absolute;

    top: 0.11em;
    right: -0.03em;

    z-index: -1;

    color:
        rgba(71, 51, 34, 0.04);

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

    font-size:
        clamp(
            10rem,
            25vw,
            24rem
        );

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.services-path--full
.services-path__number span,
.services-path--full
.services-path__scope > div > span {
    color: #765c3f;
}


.services-path--full
.services-path__number strong {
    color: var(--rec-red);
}


.services-path--full
.services-path__title > span {
    color: #765c3f;
}


.services-path--full
.services-path__title h3 {
    color: #171513;
}


.services-path--full
.services-path__title h3 span {
    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(23, 21, 19, 0.72);

    text-stroke:
        1.2px
        rgba(23, 21, 19, 0.72);
}


.services-path--full
.services-path__description p {
    color:
        rgba(23, 21, 19, 0.64);
}


.services-path--full
.services-path__scope strong {
    color: #171513;
}


.services-path--full
.services-path__scope small {
    color:
        rgba(23, 21, 19, 0.46);
}


.services-path--full
.services-path__footer span {
    color:
        rgba(23, 21, 19, 0.42);
}


.services-path--full
.services-path__footer strong {
    color: #765c3f;
}


/* ==========================================================================
   PATH 02 — SHOOT ONLY
   ========================================================================== */

.services-path--shoot {
    color: var(--paper-white);

    border-color:
        rgba(242, 240, 234, 0.12);

    background:
        radial-gradient(
            circle at 72% 38%,
            rgba(230, 188, 114, 0.09),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #17191c 0%,
            #0b0c0e 100%
        );
}


.services-path--shoot::before {
    content: "REC";

    position: absolute;

    top: 0.04em;
    right: -0.02em;

    z-index: -1;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            11rem,
            27vw,
            26rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.services-path--shoot
.services-path__number,
.services-path--shoot
.services-path__scope,
.services-path--shoot
.services-path__footer {
    border-color:
        rgba(242, 240, 234, 0.10);
}


.services-path--shoot
.services-path__scope > div + div {
    border-color:
        rgba(242, 240, 234, 0.10);
}


.services-path--shoot
.services-path__number span,
.services-path--shoot
.services-path__scope > div > span {
    color:
        rgba(242, 240, 234, 0.34);
}


.services-path--shoot
.services-path__number strong {
    color: var(--rec-red);
}


.services-path--shoot
.services-path__title > span {
    color: var(--practical-light);
}


.services-path--shoot
.services-path__title h3 {
    color: var(--paper-white);
}


.services-path--shoot
.services-path__title h3 span {
    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.70);

    text-stroke:
        1.2px
        rgba(242, 240, 234, 0.70);
}


.services-path--shoot
.services-path__description {
    border-top-color:
        rgba(242, 240, 234, 0.15);
}


.services-path--shoot
.services-path__description p {
    color:
        rgba(242, 240, 234, 0.57);
}


.services-path--shoot
.services-path__scope li {
    color:
        rgba(242, 240, 234, 0.73);
}


.services-path--shoot
.services-path__scope strong {
    color: var(--paper-white);
}


.services-path--shoot
.services-path__scope small {
    color:
        rgba(242, 240, 234, 0.36);
}


.services-path--shoot
.services-path__footer span {
    color:
        rgba(242, 240, 234, 0.31);
}


.services-path--shoot
.services-path__footer strong {
    color: var(--practical-light);
}


/* ==========================================================================
   PATH 03 — POST ONLY
   ========================================================================== */

.services-path--post {
    color: #17191d;

    background:
        radial-gradient(
            circle at 80% 38%,
            rgba(93, 120, 255, 0.08),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            #e7e9ed 0%,
            #f0f0ec 58%,
            #e2e4e8 100%
        );
}


.services-path--post::before {
    content: "POST";

    position: absolute;

    top: 0.08em;
    right: -0.025em;

    z-index: -1;

    color:
        rgba(45, 55, 90, 0.035);

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

    font-size:
        clamp(
            10rem,
            25vw,
            24rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.services-path--post
.services-path__number span,
.services-path--post
.services-path__scope > div > span {
    color: #5468b6;
}


.services-path--post
.services-path__number strong {
    color: var(--waveform-blue);
}


.services-path--post
.services-path__title > span {
    color: #5468b6;
}


.services-path--post
.services-path__title h3 {
    color: #17191d;
}


.services-path--post
.services-path__title h3 span {
    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(23, 25, 29, 0.72);

    text-stroke:
        1.2px
        rgba(23, 25, 29, 0.72);
}


.services-path--post
.services-path__description p {
    color:
        rgba(23, 25, 29, 0.62);
}


.services-path--post
.services-path__scope strong {
    color: #17191d;
}


.services-path--post
.services-path__scope small {
    color:
        rgba(23, 25, 29, 0.44);
}


.services-path--post
.services-path__footer span {
    color:
        rgba(23, 25, 29, 0.40);
}


.services-path--post
.services-path__footer strong {
    color: #5468b6;
}


/* ==========================================================================
   SECTION END
   ========================================================================== */

.services-paths__end {
    min-height:
        clamp(
            115px,
            10vw,
            145px
        );

    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    padding:
        1.4rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    border-top:
        2px solid
        rgba(21, 21, 21, 0.80);

    border-bottom:
        1px solid
        rgba(21, 21, 21, 0.20);
}


.services-paths__end > span {
    color:
        rgba(21, 21, 21, 0.48);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-paths__end a {
    min-width: 310px;

    min-height: 64px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--paper-white);

    background: #0b0c0e;

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

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.services-paths__end a span:last-child {
    color: var(--practical-light);

    font-size: 1rem;
}


.services-paths__end a:hover {
    color: #0b0c0e;

    background: var(--practical-light);

    transform: translateY(-2px);
}


.services-paths__end a:hover span:last-child {
    color: #0b0c0e;
}


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

@media (max-width: 1000px) {

    .services-paths__header {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }


    .services-paths__intro {
        max-width: 700px;
    }


    .services-path__main {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .services-path__description {
        max-width: 720px;
    }


    .services-path__scope {
        grid-template-columns:
            1.15fr
            0.85fr;
    }


    .services-path__scope > div:nth-child(3) {
        grid-column: 1 / -1;

        min-height: 160px;

        border-left: 0;

        border-top:
            1px solid
            rgba(21, 21, 21, 0.13);
    }


    .services-path--shoot
    .services-path__scope > div:nth-child(3) {
        border-top-color:
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .services-paths {
        padding:
            5rem
            0;
    }


    .services-paths__inner {
        width:
            calc(100% - 2rem);
    }


    .services-paths__header {
        margin-bottom: 3.5rem;
    }


    .services-paths__header h2 {
        font-size:
            clamp(
                3.5rem,
                16.5vw,
                5.2rem
            );
    }


    .services-path__main {
        padding:
            1.5rem;
    }


    .services-path__title h3 {
        font-size:
            clamp(
                3.2rem,
                15vw,
                4.8rem
            );
    }


    .services-path__scope {
        grid-template-columns: 1fr;
    }


    .services-path__scope > div,
    .services-path__scope > div:nth-child(3) {
        min-height: auto;

        padding: 1.4rem;
    }


    .services-path__scope > div + div,
    .services-path__scope > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(21, 21, 21, 0.13);
    }


    .services-path--shoot
    .services-path__scope > div + div,
    .services-path--shoot
    .services-path__scope > div:nth-child(3) {
        border-top-color:
            rgba(242, 240, 234, 0.10);
    }


    .services-path__scope ul {
        grid-template-columns: 1fr;
    }


    .services-path__scope small {
        margin-top: 1.5rem;
    }


    .services-path__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .services-paths__end {
        align-items: stretch;

        flex-direction: column;

        gap: 1.25rem;
    }


    .services-paths__end a {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-path__number {
        min-height: 62px;
    }


    .services-path__main {
        padding:
            1.3rem;
    }


    .services-path__title h3 {
        font-size:
            clamp(
                3rem,
                14.3vw,
                4rem
            );
    }


    .services-path__scope strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }

}

/* ==========================================================================
   WFIP_SERVICES_PATHS_MOBILE_TITLE_FIX_V2
   Services Section 02 — Prevent service-title clipping on mobile
   ========================================================================== */

@media (max-width: 760px) {

    .services-path__title {
        width: 100%;

        min-width: 0;

        overflow: hidden;
    }


    .services-path__title h3 {
        width: 100%;

        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13.2vw,
                4.25rem
            );

        line-height: 0.80;
    }


    .services-path__title h3 > span {
        width: 100%;

        max-width: 100%;

        font-size: 0.74em;

        line-height: 0.88;

        letter-spacing: -0.045em;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-path__title h3 {
        font-size:
            clamp(
                2.9rem,
                12.8vw,
                3.75rem
            );
    }


    .services-path__title h3 > span {
        font-size: 0.72em;

        letter-spacing: -0.04em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_WORKFLOW_STYLE_V1
   Services Page — Section 03 / Production Workflow
   ========================================================================== */

.services-workflow {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0
        clamp(6rem, 9vw, 9rem);

    color: var(--paper-white);

    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(145, 168, 137, 0.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 18% 68%,
            rgba(93, 120, 255, 0.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #0c0d0f 0%,
            #141619 52%,
            #0b0c0e 100%
        );

    overflow: hidden;

    isolation: isolate;
}


.services-workflow::before {
    content: "WORKFLOW";

    position: absolute;

    top: 0.12em;
    right: -0.035em;

    z-index: -1;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            8rem,
            20vw,
            21rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.085em;

    text-transform: uppercase;

    pointer-events: none;
}


.services-workflow::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:
        linear-gradient(
            rgba(242, 240, 234, 0.018) 1px,
            transparent 1px
        );

    background-size:
        100% 72px;

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.55),
            transparent 82%
        );

    pointer-events: none;
}


.services-workflow__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.services-workflow__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.18);
}


.services-workflow__kicker {
    margin:
        0
        0
        1.2rem;

    color: var(--night-vision);

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.services-workflow__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.services-workflow__heading h2 {
    max-width: 1020px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4.7rem,
            8.2vw,
            8.4rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.074em;

    text-transform: uppercase;
}


.services-workflow__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.68);
}


.services-workflow__intro {
    padding-top: 1.35rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-workflow__intro > span {
    display: block;

    margin-bottom: 1.25rem;

    color: var(--practical-light);

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-workflow__intro p {
    max-width: 540px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.57);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   PRODUCTION BOARD
   ========================================================================== */

.services-workflow__board {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);

    border-left:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(8, 9, 11, 0.42);
}


/* ==========================================================================
   STAGE
   ========================================================================== */

.services-workflow__stage {
    position: relative;

    min-height:
        clamp(
            460px,
            37vw,
            570px
        );

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    border-right:
        1px solid
        rgba(242, 240, 234, 0.14);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);

    background:
        rgba(21, 23, 26, 0.58);

    overflow: hidden;

    isolation: isolate;
}


.services-workflow__stage::before {
    content: attr(data-stage);

    position: absolute;

    right: -0.045em;
    bottom: -0.11em;

    z-index: -1;

    color:
        rgba(242, 240, 234, 0.025);

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

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

    font-weight: 950;

    line-height: 0.75;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.services-workflow__stage:nth-child(1)::before {
    content: "01";
}


.services-workflow__stage:nth-child(2)::before {
    content: "02";
}


.services-workflow__stage:nth-child(3)::before {
    content: "03";
}


.services-workflow__stage:nth-child(4)::before {
    content: "04";
}


.services-workflow__stage:nth-child(5)::before {
    content: "05";
}


.services-workflow__stage:nth-child(6)::before {
    content: "06";
}


.services-workflow__stage:nth-child(2),
.services-workflow__stage:nth-child(5) {
    background:
        rgba(13, 14, 16, 0.82);
}


.services-workflow__stage:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            rgba(81, 55, 38, 0.40),
            rgba(15, 16, 18, 0.90)
        );
}


.services-workflow__stage:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            rgba(44, 53, 89, 0.34),
            rgba(14, 15, 18, 0.92)
        );
}


/* ==========================================================================
   STAGE HEADER
   ========================================================================== */

.services-workflow__stage-head {
    min-height: 68px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-workflow__stage-head span,
.services-workflow__stage-head strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-workflow__stage-head span {
    color: var(--rec-red);

    font-size: 0.60rem;

    font-weight: 900;

    letter-spacing: 0.10em;
}


.services-workflow__stage-head strong {
    color:
        rgba(242, 240, 234, 0.46);

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;
}


/* ==========================================================================
   STAGE BODY
   ========================================================================== */

.services-workflow__stage-body {
    padding:
        clamp(1.7rem, 3vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.services-workflow__stage-status {
    display: block;

    margin-bottom:
        clamp(2rem, 3vw, 3rem);

    color: var(--night-vision);

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

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-workflow__stage:nth-child(3)
.services-workflow__stage-status {
    color: var(--practical-light);
}


.services-workflow__stage:nth-child(4)
.services-workflow__stage-status {
    color: #aab7ff;
}


.services-workflow__stage:nth-child(5)
.services-workflow__stage-status {
    color: var(--rec-red);
}


.services-workflow__stage-body h3 {
    max-width: 620px;

    margin:
        0
        0
        1.8rem;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.15rem,
            5.1vw,
            5.25rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.064em;

    text-transform: uppercase;
}


.services-workflow__stage-body h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.05px
        rgba(242, 240, 234, 0.64);
}


.services-workflow__stage-body p {
    max-width: 590px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.52);

    font-size:
        clamp(
            0.92rem,
            1.05vw,
            1.02rem
        );

    line-height: 1.67;
}


/* ==========================================================================
   STAGE FOOTER
   ========================================================================== */

.services-workflow__stage-foot {
    min-height: 76px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-workflow__stage-foot span,
.services-workflow__stage-foot strong {
    font-family: var(--font-mono);

    font-size: 0.52rem;

    font-weight: 850;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.services-workflow__stage-foot span {
    color:
        rgba(242, 240, 234, 0.28);
}


.services-workflow__stage-foot strong {
    color:
        rgba(242, 240, 234, 0.72);

    text-align: right;
}


.services-workflow__stage:nth-child(1)
.services-workflow__stage-foot strong,
.services-workflow__stage:nth-child(2)
.services-workflow__stage-foot strong {
    color: var(--night-vision);
}


.services-workflow__stage:nth-child(3)
.services-workflow__stage-foot strong {
    color: var(--practical-light);
}


.services-workflow__stage:nth-child(4)
.services-workflow__stage-foot strong {
    color: #aab7ff;
}


.services-workflow__stage:nth-child(5)
.services-workflow__stage-foot strong {
    color: #e99090;
}


.services-workflow__stage:nth-child(6)
.services-workflow__stage-foot strong {
    color: var(--night-vision);
}


/* ==========================================================================
   WORKING AGREEMENT
   ========================================================================== */

.services-workflow__handoff {
    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    color: #171513;

    border:
        1px solid
        rgba(23, 21, 19, 0.20);

    background:
        linear-gradient(
            135deg,
            #e8dfd2 0%,
            #f1ece4 55%,
            #e5ddd2 100%
        );
}


.services-workflow__handoff-heading {
    min-height: 76px;

    padding:
        1rem
        1.25rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(23, 21, 19, 0.16);
}


.services-workflow__handoff-heading span,
.services-workflow__handoff-heading strong {
    font-family: var(--font-mono);

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-workflow__handoff-heading span {
    color:
        rgba(23, 21, 19, 0.42);
}


.services-workflow__handoff-heading strong {
    color: #6f5940;
}


.services-workflow__handoff-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.services-workflow__handoff-grid > div {
    min-height: 225px;

    padding:
        clamp(1.3rem, 2vw, 1.8rem);

    display: flex;

    flex-direction: column;
}


.services-workflow__handoff-grid > div + div {
    border-left:
        1px solid
        rgba(23, 21, 19, 0.13);
}


.services-workflow__handoff-grid span {
    display: block;

    margin-bottom:
        clamp(2.5rem, 4vw, 4rem);

    color: #765c3f;

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

    font-size: 0.51rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-workflow__handoff-grid strong {
    display: block;

    margin-bottom: 0.8rem;

    color: #171513;

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

    font-size:
        clamp(
            1.7rem,
            2.5vw,
            2.55rem
        );

    font-weight: 950;

    line-height: 0.90;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.services-workflow__handoff-grid p {
    max-width: 300px;

    margin:
        auto
        0
        0;

    color:
        rgba(23, 21, 19, 0.57);

    font-size: 0.85rem;

    line-height: 1.55;
}


.services-workflow__handoff-grid > div:nth-child(3) span,
.services-workflow__handoff-grid > div:nth-child(4) span {
    color: #61725b;
}


/* ==========================================================================
   TIMELINE STATUS
   ========================================================================== */

.services-workflow__timeline {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    margin-top:
        clamp(2rem, 3vw, 3rem);

    border-top:
        1px solid
        rgba(242, 240, 234, 0.13);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.13);
}


.services-workflow__timeline::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 4%;
    right: 4%;

    height: 1px;

    background:
        rgba(242, 240, 234, 0.13);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.services-workflow__timeline > div {
    position: relative;
    z-index: 2;

    min-height: 112px;

    padding:
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;

    background:
        rgba(11, 12, 14, 0.76);
}


.services-workflow__timeline > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-workflow__timeline span,
.services-workflow__timeline strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-workflow__timeline span {
    color:
        rgba(242, 240, 234, 0.30);

    font-size: 0.51rem;

    font-weight: 850;

    letter-spacing: 0.10em;
}


.services-workflow__timeline strong {
    color:
        rgba(242, 240, 234, 0.74);

    font-size: 0.64rem;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.services-workflow__timeline > div:nth-child(1) strong,
.services-workflow__timeline > div:nth-child(2) strong {
    color: var(--night-vision);
}


.services-workflow__timeline > div:nth-child(3) strong {
    color: var(--practical-light);
}


.services-workflow__timeline > div:nth-child(4) strong {
    color: #aab7ff;
}


.services-workflow__timeline > div:nth-child(5) strong {
    color: #e99090;
}


.services-workflow__timeline > div:nth-child(6) strong {
    color: var(--night-vision);
}


/* ==========================================================================
   SECTION END
   ========================================================================== */

.services-workflow__end {
    min-height: 66px;

    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    padding:
        0.85rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.12);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);
}


.services-workflow__end span,
.services-workflow__end strong {
    font-family: var(--font-mono);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-workflow__end span {
    color:
        rgba(242, 240, 234, 0.31);
}


.services-workflow__end strong {
    color: var(--night-vision);
}


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

@media (max-width: 1000px) {

    .services-workflow__header {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }


    .services-workflow__intro {
        max-width: 700px;
    }


    .services-workflow__stage {
        min-height: 500px;
    }


    .services-workflow__handoff-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-workflow__handoff-grid > div:nth-child(3) {
        border-left: 0;

        border-top:
            1px solid
            rgba(23, 21, 19, 0.13);
    }


    .services-workflow__handoff-grid > div:nth-child(4) {
        border-top:
            1px solid
            rgba(23, 21, 19, 0.13);
    }


    .services-workflow__timeline {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .services-workflow__timeline::before {
        display: none;
    }


    .services-workflow__timeline > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-workflow__timeline > div:nth-child(5),
    .services-workflow__timeline > div:nth-child(6) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}


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

@media (max-width: 760px) {

    .services-workflow {
        padding:
            5rem
            0;
    }


    .services-workflow__inner {
        width:
            calc(100% - 2rem);
    }


    .services-workflow__header {
        margin-bottom: 3.5rem;
    }


    .services-workflow__heading h2 {
        font-size:
            clamp(
                3.5rem,
                16.5vw,
                5.15rem
            );
    }


    .services-workflow__board {
        grid-template-columns: 1fr;
    }


    .services-workflow__stage {
        min-height: 0;
    }


    .services-workflow__stage-body {
        min-height: 390px;

        padding: 1.5rem;
    }


    .services-workflow__stage-body h3 {
        font-size:
            clamp(
                3rem,
                13.5vw,
                4.4rem
            );
    }


    .services-workflow__stage-body p {
        max-width: 520px;
    }


    .services-workflow__stage-foot {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-workflow__stage-foot strong {
        text-align: left;
    }


    .services-workflow__handoff-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }


    .services-workflow__handoff-grid {
        grid-template-columns: 1fr;
    }


    .services-workflow__handoff-grid > div {
        min-height: 190px;
    }


    .services-workflow__handoff-grid > div,
    .services-workflow__handoff-grid > div:nth-child(3),
    .services-workflow__handoff-grid > div:nth-child(4) {
        border-left: 0;
    }


    .services-workflow__handoff-grid > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(23, 21, 19, 0.13);
    }


    .services-workflow__handoff-grid span {
        margin-bottom: 2.2rem;
    }


    .services-workflow__timeline {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-workflow__timeline > div {
        min-height: 92px;
    }


    .services-workflow__timeline > div:nth-child(3),
    .services-workflow__timeline > div:nth-child(5) {
        border-left: 0;
    }


    .services-workflow__timeline > div:nth-child(3),
    .services-workflow__timeline > div:nth-child(4),
    .services-workflow__timeline > div:nth-child(5),
    .services-workflow__timeline > div:nth-child(6) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-workflow__end {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-workflow__heading h2 {
        font-size:
            clamp(
                3.25rem,
                15.2vw,
                4.5rem
            );
    }


    .services-workflow__stage-body {
        min-height: 350px;

        padding:
            1.35rem;
    }


    .services-workflow__stage-body h3 {
        font-size:
            clamp(
                2.8rem,
                12.7vw,
                3.8rem
            );
    }


    .services-workflow__timeline {
        grid-template-columns: 1fr;
    }


    .services-workflow__timeline > div,
    .services-workflow__timeline > div:nth-child(2),
    .services-workflow__timeline > div:nth-child(3),
    .services-workflow__timeline > div:nth-child(4),
    .services-workflow__timeline > div:nth-child(5),
    .services-workflow__timeline > div:nth-child(6) {
        border-left: 0;
    }


    .services-workflow__timeline > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }

}

/* ==========================================================================
   WFIP_SERVICES_WORKFLOW_STAGE_NUMBER_FIX_V2
   Services Workflow — Controlled stage-number watermarks
   ========================================================================== */

.services-workflow__stage::before {
    right: 0.04em;
    bottom: 0.03em;

    font-size:
        clamp(
            7rem,
            12vw,
            12.5rem
        );

    line-height: 0.78;

    letter-spacing: -0.07em;

    opacity: 1;
}


@media (max-width: 1000px) {

    .services-workflow__stage::before {
        right: 0.05em;
        bottom: 0.04em;

        font-size:
            clamp(
                6.5rem,
                15vw,
                10rem
            );
    }

}


@media (max-width: 760px) {

    .services-workflow__stage::before {
        right: 0.04em;
        bottom: 0.05em;

        font-size:
            clamp(
                6rem,
                25vw,
                8.5rem
            );
    }

}


@media (max-width: 440px) {

    .services-workflow__stage::before {
        right: 0.05em;
        bottom: 0.06em;

        font-size:
            clamp(
                5.5rem,
                23vw,
                7.2rem
            );
    }

}

/* ==========================================================================
   WFIP_SERVICES_SCOPE_STYLE_V1
   Services Page — Section 04 / Scope Before Surprises
   ========================================================================== */

.services-scope {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0
        clamp(6rem, 9vw, 9rem);

    color: #171715;

    background:
        linear-gradient(
            180deg,
            #eeeae1 0%,
            #f3f0e9 48%,
            #e8e4db 100%
        );

    overflow: hidden;

    isolation: isolate;
}


.services-scope::before {
    content: "SCOPE";

    position: absolute;

    top: 0.10em;
    right: -0.03em;

    z-index: -1;

    color:
        rgba(23, 23, 21, 0.035);

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

    font-size:
        clamp(
            9rem,
            22vw,
            23rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.085em;

    text-transform: uppercase;

    pointer-events: none;
}


.services-scope::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:
        linear-gradient(
            rgba(23, 23, 21, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 23, 21, 0.018) 1px,
            transparent 1px
        );

    background-size:
        88px 88px;

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.38),
            transparent 68%
        );

    pointer-events: none;
}


.services-scope__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.services-scope__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.28fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 6vw, 6rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        rgba(23, 23, 21, 0.82);
}


.services-scope__kicker {
    margin:
        0
        0
        1.2rem;

    color: #73583d;

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.services-scope__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.services-scope__heading h2 {
    max-width: 1020px;

    margin: 0;

    color: #171715;

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

    font-size:
        clamp(
            4.7rem,
            8.2vw,
            8.4rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.075em;

    text-transform: uppercase;
}


.services-scope__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(23, 23, 21, 0.74);
}


.services-scope__intro {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(23, 23, 21, 0.18);
}


.services-scope__intro > span {
    display: block;

    margin-bottom: 1.25rem;

    color: #73583d;

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-scope__intro p {
    max-width: 545px;

    margin: 0;

    color:
        rgba(23, 23, 21, 0.62);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   SCOPE INDEX
   ========================================================================== */

.services-scope__index {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    margin-bottom:
        clamp(2rem, 3vw, 3rem);

    border:
        1px solid
        rgba(23, 23, 21, 0.17);

    background:
        rgba(255, 255, 255, 0.19);
}


.services-scope__index > div {
    min-height: 82px;

    padding:
        0.9rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.8rem;
}


.services-scope__index > div + div {
    border-left:
        1px solid
        rgba(23, 23, 21, 0.12);
}


.services-scope__index span,
.services-scope__index strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-scope__index span {
    color:
        rgba(23, 23, 21, 0.35);

    font-size: 0.51rem;

    font-weight: 850;

    letter-spacing: 0.09em;
}


.services-scope__index strong {
    color:
        rgba(23, 23, 21, 0.78);

    font-size: 0.59rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.07em;
}


.services-scope__index > div:nth-child(1) strong,
.services-scope__index > div:nth-child(2) strong {
    color: #73583d;
}


.services-scope__index > div:nth-child(3) strong {
    color: #4e63b8;
}


.services-scope__index > div:nth-child(6) strong {
    color: #61735c;
}


/* ==========================================================================
   PRIMARY SCOPE GRID
   ========================================================================== */

.services-scope__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(23, 23, 21, 0.18);

    border-left:
        1px solid
        rgba(23, 23, 21, 0.18);
}


.services-scope__item {
    position: relative;

    min-height:
        clamp(
            425px,
            34vw,
            525px
        );

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    border-right:
        1px solid
        rgba(23, 23, 21, 0.18);

    border-bottom:
        1px solid
        rgba(23, 23, 21, 0.18);

    background:
        rgba(255, 255, 255, 0.20);

    overflow: hidden;

    isolation: isolate;
}


.services-scope__item:nth-child(2),
.services-scope__item:nth-child(5) {
    background:
        rgba(224, 217, 205, 0.54);
}


.services-scope__item:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            rgba(222, 226, 239, 0.78),
            rgba(243, 240, 233, 0.80)
        );
}


.services-scope__item:nth-child(6) {
    background:
        linear-gradient(
            135deg,
            rgba(221, 228, 217, 0.72),
            rgba(241, 238, 231, 0.82)
        );
}


.services-scope__item::before {
    position: absolute;

    right: 0.02em;
    bottom: -0.04em;

    z-index: -1;

    color:
        rgba(23, 23, 21, 0.035);

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

    font-size:
        clamp(
            8rem,
            14vw,
            14rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.075em;

    pointer-events: none;
}


.services-scope__item:nth-child(1)::before {
    content: "01";
}


.services-scope__item:nth-child(2)::before {
    content: "02";
}


.services-scope__item:nth-child(3)::before {
    content: "03";
}


.services-scope__item:nth-child(4)::before {
    content: "04";
}


.services-scope__item:nth-child(5)::before {
    content: "05";
}


.services-scope__item:nth-child(6)::before {
    content: "06";
}


/* ==========================================================================
   ITEM HEADER
   ========================================================================== */

.services-scope__item-head {
    min-height: 66px;

    padding:
        0.9rem
        1.15rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(23, 23, 21, 0.13);
}


.services-scope__item-head span,
.services-scope__item-head strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-scope__item-head span {
    color: var(--rec-red);

    font-size: 0.57rem;

    font-weight: 900;

    letter-spacing: 0.09em;
}


.services-scope__item-head strong {
    color:
        rgba(23, 23, 21, 0.42);

    font-size: 0.53rem;

    font-weight: 850;

    letter-spacing: 0.10em;
}


/* ==========================================================================
   ITEM BODY
   ========================================================================== */

.services-scope__item-body {
    padding:
        clamp(1.7rem, 3vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.services-scope__item-body h3 {
    max-width: 650px;

    margin:
        0
        0
        1.8rem;

    color: #171715;

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

    font-size:
        clamp(
            3.1rem,
            5.2vw,
            5.25rem
        );

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.064em;

    text-transform: uppercase;
}


.services-scope__item-body h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.05px
        rgba(23, 23, 21, 0.68);
}


.services-scope__item-body p {
    max-width: 590px;

    margin: 0;

    color:
        rgba(23, 23, 21, 0.61);

    font-size:
        clamp(
            0.92rem,
            1.05vw,
            1.02rem
        );

    line-height: 1.67;
}


/* ==========================================================================
   ITEM FOOT
   ========================================================================== */

.services-scope__item-foot {
    min-height: 72px;

    padding:
        0.95rem
        1.15rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    border-top:
        1px solid
        rgba(23, 23, 21, 0.13);
}


.services-scope__item-foot span,
.services-scope__item-foot strong {
    font-family: var(--font-mono);

    font-size: 0.52rem;

    font-weight: 850;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.services-scope__item-foot span {
    color:
        rgba(23, 23, 21, 0.36);
}


.services-scope__item-foot strong {
    color: #171715;

    text-align: right;
}


.services-scope__item:nth-child(1)
.services-scope__item-foot strong,
.services-scope__item:nth-child(2)
.services-scope__item-foot strong {
    color: #73583d;
}


.services-scope__item:nth-child(3)
.services-scope__item-foot strong {
    color: #4e63b8;
}


.services-scope__item:nth-child(6)
.services-scope__item-foot strong {
    color: #61735c;
}


/* ==========================================================================
   SECONDARY VARIABLES
   ========================================================================== */

.services-scope__variables {
    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    border:
        1px solid
        rgba(23, 23, 21, 0.18);

    background:
        rgba(255, 255, 255, 0.18);
}


.services-scope__variables-head {
    min-height: 70px;

    padding:
        0.95rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(23, 23, 21, 0.14);
}


.services-scope__variables-head span,
.services-scope__variables-head strong {
    font-family: var(--font-mono);

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-scope__variables-head span {
    color:
        rgba(23, 23, 21, 0.40);
}


.services-scope__variables-head strong {
    color: #73583d;
}


.services-scope__variables-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));
}


.services-scope__variables-grid > div {
    min-height: 160px;

    padding:
        1.1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.services-scope__variables-grid > div + div {
    border-left:
        1px solid
        rgba(23, 23, 21, 0.12);
}


.services-scope__variables-grid span,
.services-scope__variables-grid strong,
.services-scope__variables-grid small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-scope__variables-grid span {
    color:
        rgba(23, 23, 21, 0.32);

    font-size: 0.50rem;

    font-weight: 850;

    letter-spacing: 0.08em;
}


.services-scope__variables-grid strong {
    color: #171715;

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

    font-size:
        clamp(
            1.45rem,
            2vw,
            2.05rem
        );

    font-weight: 950;

    line-height: 0.91;

    letter-spacing: -0.04em;
}


.services-scope__variables-grid small {
    color:
        rgba(23, 23, 21, 0.42);

    font-size: 0.47rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.07em;
}


/* ==========================================================================
   ESTIMATE LOGIC
   ========================================================================== */

.services-scope__estimate {
    position: relative;

    min-height:
        clamp(
            255px,
            23vw,
            330px
        );

    margin-top:
        clamp(2rem, 3vw, 3rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    color: var(--paper-white);

    background:
        linear-gradient(
            135deg,
            #191816 0%,
            #0b0c0e 72%
        );

    overflow: hidden;
}


.services-scope__estimate::before {
    content: "$?";

    position: absolute;

    top: -0.07em;
    right: 0.01em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            9rem,
            20vw,
            19rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.07em;

    pointer-events: none;
}


.services-scope__estimate > div {
    position: relative;
    z-index: 2;
}


.services-scope__estimate > div:first-child > span {
    display: block;

    margin-bottom: 1.1rem;

    color: var(--practical-light);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-scope__estimate > div:first-child > strong {
    display: block;

    max-width: 800px;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.25rem,
            5.4vw,
            5.6rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.064em;

    text-transform: uppercase;
}


.services-scope__estimate
> div:first-child
> strong
> span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.05px
        rgba(242, 240, 234, 0.65);
}


.services-scope__estimate > div:last-child {
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-scope__estimate p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.56);

    font-size:
        clamp(
            0.96rem,
            1.15vw,
            1.05rem
        );

    line-height: 1.68;
}


/* ==========================================================================
   SECTION END CTA
   ========================================================================== */

.services-scope__end {
    min-height:
        clamp(
            110px,
            10vw,
            140px
        );

    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    padding:
        1.3rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    border-top:
        2px solid
        rgba(23, 23, 21, 0.80);

    border-bottom:
        1px solid
        rgba(23, 23, 21, 0.20);
}


.services-scope__end > span {
    color:
        rgba(23, 23, 21, 0.44);

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-scope__end a {
    min-width: 290px;

    min-height: 64px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: var(--paper-white);

    background: #0b0c0e;

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

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.services-scope__end a span:last-child {
    color: var(--practical-light);

    font-size: 1rem;
}


.services-scope__end a:hover {
    color: #171715;

    background: var(--practical-light);

    transform: translateY(-2px);
}


.services-scope__end a:hover span:last-child {
    color: #171715;
}


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

@media (max-width: 1000px) {

    .services-scope__header {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }


    .services-scope__intro {
        max-width: 700px;
    }


    .services-scope__index {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .services-scope__index > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__index > div:nth-child(5),
    .services-scope__index > div:nth-child(6) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__item {
        min-height: 470px;
    }


    .services-scope__variables-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .services-scope__variables-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__variables-grid > div:nth-child(5),
    .services-scope__variables-grid > div:nth-child(6) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__estimate {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .services-scope__estimate > div:last-child {
        max-width: 680px;
    }

}


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

@media (max-width: 760px) {

    .services-scope {
        padding:
            5rem
            0;
    }


    .services-scope__inner {
        width:
            calc(100% - 2rem);
    }


    .services-scope__header {
        margin-bottom: 3.5rem;
    }


    .services-scope__heading h2 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                5rem
            );
    }


    .services-scope__index {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-scope__index > div:nth-child(3),
    .services-scope__index > div:nth-child(5) {
        border-left: 0;
    }


    .services-scope__index > div:nth-child(3),
    .services-scope__index > div:nth-child(4),
    .services-scope__index > div:nth-child(5),
    .services-scope__index > div:nth-child(6) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__grid {
        grid-template-columns: 1fr;
    }


    .services-scope__item {
        min-height: 0;
    }


    .services-scope__item-body {
        min-height: 355px;

        padding: 1.5rem;
    }


    .services-scope__item-body h3 {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.25rem
            );
    }


    .services-scope__item-foot {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-scope__item-foot strong {
        text-align: left;
    }


    .services-scope__variables-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-scope__variables-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-scope__variables-grid > div:nth-child(3),
    .services-scope__variables-grid > div:nth-child(5) {
        border-left: 0;
    }


    .services-scope__variables-grid > div:nth-child(3),
    .services-scope__variables-grid > div:nth-child(4),
    .services-scope__variables-grid > div:nth-child(5),
    .services-scope__variables-grid > div:nth-child(6) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__estimate {
        min-height: 390px;

        padding: 1.5rem;

        align-content: space-between;
    }


    .services-scope__estimate
    > div:first-child
    > strong {
        font-size:
            clamp(
                3rem,
                13.5vw,
                4.3rem
            );
    }


    .services-scope__end {
        align-items: stretch;

        flex-direction: column;

        gap: 1.25rem;
    }


    .services-scope__end a {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-scope__heading h2 {
        font-size:
            clamp(
                3.15rem,
                14.8vw,
                4.35rem
            );
    }


    .services-scope__item-body {
        min-height: 330px;

        padding: 1.35rem;
    }


    .services-scope__item-body h3 {
        font-size:
            clamp(
                2.7rem,
                12.2vw,
                3.7rem
            );
    }


    .services-scope__item::before {
        font-size:
            clamp(
                5.5rem,
                24vw,
                7rem
            );

        right: 0.04em;
        bottom: 0.04em;
    }


    .services-scope__variables-grid {
        grid-template-columns: 1fr;
    }


    .services-scope__variables-grid > div,
    .services-scope__variables-grid > div:nth-child(2),
    .services-scope__variables-grid > div:nth-child(3),
    .services-scope__variables-grid > div:nth-child(4),
    .services-scope__variables-grid > div:nth-child(5),
    .services-scope__variables-grid > div:nth-child(6) {
        border-left: 0;
    }


    .services-scope__variables-grid > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-scope__estimate
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.7rem,
                12vw,
                3.65rem
            );
    }

}

/* ==========================================================================
   WFIP_SERVICES_DELIVERABLES_STYLE_V1
   Services Page — Section 05 / Deliverables + Final Files
   ========================================================================== */

.services-delivery {
    position: relative;

    padding:
        clamp(6rem, 9vw, 9rem)
        0
        clamp(6rem, 9vw, 9rem);

    color: var(--paper-white);

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(93, 120, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 72%,
            rgba(145, 168, 137, 0.055),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #0a0b0d 0%,
            #111319 48%,
            #090a0c 100%
        );

    overflow: hidden;

    isolation: isolate;
}


.services-delivery::before {
    content: "EXPORT";

    position: absolute;

    top: 0.10em;
    right: -0.035em;

    z-index: -1;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            9rem,
            22vw,
            23rem
        );

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.085em;

    text-transform: uppercase;

    pointer-events: none;
}


.services-delivery::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background-image:
        linear-gradient(
            rgba(242, 240, 234, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242, 240, 234, 0.012) 1px,
            transparent 1px
        );

    background-size:
        90px 72px;

    mask-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.46),
            transparent 70%
        );

    pointer-events: none;
}


.services-delivery__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.services-delivery__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.28fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(4rem, 7vw, 7rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.18);
}


.services-delivery__kicker {
    margin:
        0
        0
        1.2rem;

    color: var(--night-vision);

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.services-delivery__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.services-delivery__heading h2 {
    max-width: 1050px;

    margin: 0;

    color: var(--paper-white);

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

    font-size:
        clamp(
            4.7rem,
            8.2vw,
            8.4rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.074em;

    text-transform: uppercase;
}


.services-delivery__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(242, 240, 234, 0.67);
}


.services-delivery__intro {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-delivery__intro > span {
    display: block;

    margin-bottom: 1.25rem;

    color: #aab7ff;

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-delivery__intro p {
    max-width: 540px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.57);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   MASTER DELIVERY PANEL
   ========================================================================== */

.services-delivery__master {
    border:
        1px solid
        rgba(242, 240, 234, 0.13);

    background:
        rgba(7, 8, 10, 0.72);

    box-shadow:
        0
        30px
        80px
        rgba(0, 0, 0, 0.20);
}


.services-delivery__master-status {
    min-height: 68px;

    padding:
        0.9rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-delivery__master-status span,
.services-delivery__master-status strong {
    font-family: var(--font-mono);

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-delivery__master-status span {
    color:
        rgba(242, 240, 234, 0.34);
}


.services-delivery__master-status strong {
    color: var(--night-vision);
}


.services-delivery__master-main {
    display: grid;

    grid-template-columns:
        1.65fr
        repeat(4, 0.75fr);
}


.services-delivery__master-main > div {
    min-height: 108px;

    padding:
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.9rem;
}


.services-delivery__master-main > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.09);
}


.services-delivery__master-main span,
.services-delivery__master-main strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-delivery__master-main span {
    color:
        rgba(242, 240, 234, 0.30);

    font-size: 0.50rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.services-delivery__master-main strong {
    color:
        rgba(242, 240, 234, 0.80);

    font-size:
        clamp(
            0.68rem,
            0.86vw,
            0.84rem
        );

    font-weight: 900;

    line-height: 1.35;

    letter-spacing: 0.055em;

    word-break: break-word;
}


.services-delivery__master-main > div:first-child strong {
    color: var(--practical-light);
}


.services-delivery__master-main > div:nth-child(2) strong,
.services-delivery__master-main > div:nth-child(3) strong,
.services-delivery__master-main > div:nth-child(4) strong,
.services-delivery__master-main > div:nth-child(5) strong {
    color: var(--night-vision);
}


/* ==========================================================================
   FILE NAMING NOTE
   ========================================================================== */

.services-delivery__master-note {
    position: relative;

    min-height:
        clamp(
            180px,
            17vw,
            235px
        );

    padding:
        clamp(1.8rem, 3vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.10);

    background:
        linear-gradient(
            135deg,
            rgba(43, 51, 85, 0.22),
            rgba(11, 12, 14, 0.18)
        );

    overflow: hidden;
}


.services-delivery__master-note::before {
    content: "V09";

    position: absolute;

    top: -0.05em;
    right: 0.02em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            7rem,
            16vw,
            15rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.07em;

    pointer-events: none;
}


.services-delivery__master-note > span {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 1rem;

    color: #aab7ff;

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

    font-size: 0.54rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-delivery__master-note > strong {
    position: relative;
    z-index: 2;

    display: block;

    color: var(--paper-white);

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

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            4.8rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.06em;

    text-transform: uppercase;
}


.services-delivery__master-note > strong > span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(242, 240, 234, 0.62);
}


/* ==========================================================================
   DELIVERY MANIFEST
   ========================================================================== */

.services-delivery__manifest {
    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-delivery__item {
    display: grid;

    grid-template-columns:
        0.22fr
        minmax(0, 1.25fr)
        minmax(260px, 0.55fr);

    min-height:
        clamp(
            245px,
            21vw,
            315px
        );

    border-left:
        1px solid
        rgba(242, 240, 234, 0.12);

    border-right:
        1px solid
        rgba(242, 240, 234, 0.12);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.12);

    background:
        rgba(21, 23, 26, 0.50);
}


.services-delivery__item:nth-child(even) {
    background:
        rgba(10, 11, 13, 0.72);
}


.services-delivery__item:nth-child(3) {
    background:
        linear-gradient(
            90deg,
            rgba(41, 49, 82, 0.30),
            rgba(15, 17, 21, 0.62)
        );
}


.services-delivery__item:nth-child(5) {
    background:
        linear-gradient(
            90deg,
            rgba(54, 68, 52, 0.28),
            rgba(15, 17, 20, 0.62)
        );
}


/* ==========================================================================
   MANIFEST NUMBER
   ========================================================================== */

.services-delivery__item-number {
    min-width: 0;

    padding:
        1.2rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

    border-right:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-delivery__item-number span,
.services-delivery__item-number strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-delivery__item-number span {
    color: var(--rec-red);

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.09em;
}


.services-delivery__item-number strong {
    color:
        rgba(242, 240, 234, 0.32);

    font-size: 0.51rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    writing-mode: vertical-rl;

    transform:
        rotate(180deg);
}


/* ==========================================================================
   MANIFEST COPY
   ========================================================================== */

.services-delivery__item-copy {
    padding:
        clamp(1.7rem, 3vw, 3rem);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.services-delivery__item-copy h3 {
    max-width: 720px;

    margin:
        0
        0
        1.7rem;

    color: var(--paper-white);

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

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

    font-weight: 950;

    line-height: 0.80;

    letter-spacing: -0.062em;

    text-transform: uppercase;
}


.services-delivery__item-copy h3 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.05px
        rgba(242, 240, 234, 0.64);
}


.services-delivery__item-copy p {
    max-width: 640px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.51);

    font-size:
        clamp(
            0.92rem,
            1.05vw,
            1.02rem
        );

    line-height: 1.66;
}


/* ==========================================================================
   MANIFEST META
   ========================================================================== */

.services-delivery__item-meta {
    padding:
        clamp(1.5rem, 2.5vw, 2.2rem);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;

    border-left:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-delivery__item-meta span,
.services-delivery__item-meta strong,
.services-delivery__item-meta small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-delivery__item-meta span {
    color:
        rgba(242, 240, 234, 0.30);

    font-size: 0.50rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.services-delivery__item-meta strong {
    color: var(--practical-light);

    font-size:
        clamp(
            0.72rem,
            0.95vw,
            0.92rem
        );

    font-weight: 900;

    line-height: 1.4;

    letter-spacing: 0.06em;
}


.services-delivery__item:nth-child(3)
.services-delivery__item-meta strong {
    color: #aab7ff;
}


.services-delivery__item:nth-child(5)
.services-delivery__item-meta strong {
    color: var(--night-vision);
}


.services-delivery__item-meta small {
    margin-top: auto;

    color:
        rgba(242, 240, 234, 0.30);

    font-size: 0.48rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.075em;
}


/* ==========================================================================
   EXPORT MATRIX
   ========================================================================== */

.services-delivery__matrix {
    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    background:
        rgba(9, 10, 12, 0.70);
}


.services-delivery__matrix-head {
    min-height: 70px;

    padding:
        0.95rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.services-delivery__matrix-head span,
.services-delivery__matrix-head strong {
    font-family: var(--font-mono);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-delivery__matrix-head span {
    color:
        rgba(242, 240, 234, 0.34);
}


.services-delivery__matrix-head strong {
    color: var(--practical-light);
}


.services-delivery__matrix-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}


.services-delivery__matrix-grid > div {
    min-height: 180px;

    padding:
        1.15rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.services-delivery__matrix-grid > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.09);
}


.services-delivery__matrix-grid span,
.services-delivery__matrix-grid strong,
.services-delivery__matrix-grid small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-delivery__matrix-grid span {
    color:
        rgba(242, 240, 234, 0.29);

    font-size: 0.49rem;

    font-weight: 800;

    letter-spacing: 0.09em;
}


.services-delivery__matrix-grid strong {
    color: var(--paper-white);

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

    font-size:
        clamp(
            2rem,
            3.1vw,
            3.2rem
        );

    font-weight: 950;

    line-height: 0.88;

    letter-spacing: -0.045em;
}


.services-delivery__matrix-grid > div:nth-child(1) strong,
.services-delivery__matrix-grid > div:nth-child(2) strong {
    color: var(--night-vision);
}


.services-delivery__matrix-grid > div:nth-child(4) strong {
    color: #aab7ff;
}


.services-delivery__matrix-grid > div:nth-child(5) strong {
    color: var(--practical-light);
}


.services-delivery__matrix-grid small {
    color:
        rgba(242, 240, 234, 0.30);

    font-size: 0.47rem;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.07em;
}


/* ==========================================================================
   FOLDER HANDOFF
   ========================================================================== */

.services-delivery__folders {
    margin-top:
        clamp(2rem, 3vw, 3rem);

    color: #171715;

    border:
        1px solid
        rgba(23, 23, 21, 0.18);

    background:
        linear-gradient(
            135deg,
            #e8e4dc 0%,
            #f2efe8 62%,
            #e4e2dd 100%
        );
}


.services-delivery__folders-heading {
    min-height: 72px;

    padding:
        0.95rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(23, 23, 21, 0.14);
}


.services-delivery__folders-heading span,
.services-delivery__folders-heading strong {
    font-family: var(--font-mono);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-delivery__folders-heading span {
    color:
        rgba(23, 23, 21, 0.42);
}


.services-delivery__folders-heading strong {
    color: #61735c;
}


.services-delivery__folder-tree {
    display: grid;

    grid-template-columns:
        1.4fr
        repeat(5, 1fr);
}


.services-delivery__folder-tree > div {
    min-height: 128px;

    padding:
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.services-delivery__folder-tree > div + div {
    border-left:
        1px solid
        rgba(23, 23, 21, 0.12);
}


.services-delivery__folder-tree span,
.services-delivery__folder-tree strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-delivery__folder-tree span {
    color:
        rgba(23, 23, 21, 0.36);

    font-size: 0.50rem;

    font-weight: 850;

    letter-spacing: 0.08em;
}


.services-delivery__folder-tree strong {
    color: #171715;

    font-size:
        clamp(
            0.62rem,
            0.85vw,
            0.80rem
        );

    font-weight: 900;

    line-height: 1.35;

    letter-spacing: 0.055em;
}


.services-delivery__folder-tree > div:first-child strong {
    color: #73583d;
}


/* ==========================================================================
   DELIVERY NOTE
   ========================================================================== */

.services-delivery__note {
    position: relative;

    min-height:
        clamp(
            270px,
            24vw,
            350px
        );

    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    border:
        1px solid
        rgba(242, 240, 234, 0.12);

    background:
        linear-gradient(
            135deg,
            #18202a 0%,
            #0d1015 54%,
            #090a0c 100%
        );

    overflow: hidden;
}


.services-delivery__note::before {
    content: "BEFORE REC";

    position: absolute;

    top: 0.06em;
    right: -0.025em;

    color:
        rgba(242, 240, 234, 0.025);

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

    font-size:
        clamp(
            7rem,
            16vw,
            15rem
        );

    font-weight: 950;

    line-height: 0.78;

    letter-spacing: -0.075em;

    pointer-events: none;
}


.services-delivery__note > div {
    position: relative;
    z-index: 2;
}


.services-delivery__note
> div:first-child
> span {
    display: block;

    margin-bottom: 1.1rem;

    color: var(--rec-red);

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-delivery__note
> div:first-child
> strong {
    display: block;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.1rem,
            5.3vw,
            5.4rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.064em;

    text-transform: uppercase;
}


.services-delivery__note
> div:first-child
> strong
> span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.05px
        rgba(242, 240, 234, 0.66);
}


.services-delivery__note > div:last-child {
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-delivery__note p {
    max-width: 540px;

    margin: 0;

    color:
        rgba(242, 240, 234, 0.55);

    font-size:
        clamp(
            0.96rem,
            1.15vw,
            1.05rem
        );

    line-height: 1.68;
}


/* ==========================================================================
   SECTION END
   ========================================================================== */

.services-delivery__end {
    min-height:
        clamp(
            110px,
            10vw,
            140px
        );

    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    padding:
        1.3rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-delivery__end > div {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;
}


.services-delivery__end > div span,
.services-delivery__end > div strong {
    font-family: var(--font-mono);

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-delivery__end > div span {
    color:
        rgba(242, 240, 234, 0.32);
}


.services-delivery__end > div strong {
    color: var(--night-vision);
}


.services-delivery__end a {
    min-width: 300px;

    min-height: 64px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: #0b0c0e;

    background: var(--paper-white);

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

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.services-delivery__end a span:last-child {
    color: var(--waveform-blue);

    font-size: 1rem;
}


.services-delivery__end a:hover {
    color: var(--paper-white);

    background: var(--waveform-blue);

    transform: translateY(-2px);
}


.services-delivery__end a:hover span:last-child {
    color: var(--paper-white);
}


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

@media (max-width: 1000px) {

    .services-delivery__header {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }


    .services-delivery__intro {
        max-width: 700px;
    }


    .services-delivery__master-main {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .services-delivery__master-main > div:first-child {
        grid-column:
            1 / -1;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__master-main > div:nth-child(2),
    .services-delivery__master-main > div:nth-child(4) {
        border-left: 0;
    }


    .services-delivery__master-main > div:nth-child(4),
    .services-delivery__master-main > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__item {
        grid-template-columns:
            80px
            minmax(0, 1fr);
    }


    .services-delivery__item-meta {
        grid-column:
            1 / -1;

        min-height: 120px;

        display: grid;

        grid-template-columns:
            0.7fr
            1fr
            1.2fr;

        align-items: center;

        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-delivery__item-meta small {
        margin-top: 0;
    }


    .services-delivery__matrix-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .services-delivery__matrix-grid > div:nth-child(4) {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__matrix-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__folder-tree {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .services-delivery__folder-tree > div:first-child {
        grid-column:
            1 / -1;

        border-bottom:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-delivery__folder-tree > div:nth-child(2) {
        border-left: 0;
    }


    .services-delivery__folder-tree > div:nth-child(5) {
        border-left: 0;

        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-delivery__folder-tree > div:nth-child(6) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-delivery__note {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .services-delivery__note > div:last-child {
        max-width: 700px;
    }

}


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

@media (max-width: 760px) {

    .services-delivery {
        padding:
            5rem
            0;
    }


    .services-delivery__inner {
        width:
            calc(100% - 2rem);
    }


    .services-delivery__header {
        margin-bottom: 3.5rem;
    }


    .services-delivery__heading h2 {
        font-size:
            clamp(
                3.35rem,
                15.8vw,
                4.95rem
            );
    }


    .services-delivery__master-status {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-delivery__master-main {
        grid-template-columns: 1fr;
    }


    .services-delivery__master-main > div,
    .services-delivery__master-main > div:first-child,
    .services-delivery__master-main > div:nth-child(2),
    .services-delivery__master-main > div:nth-child(3),
    .services-delivery__master-main > div:nth-child(4),
    .services-delivery__master-main > div:nth-child(5) {
        grid-column: auto;

        border-left: 0;
    }


    .services-delivery__master-main > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__master-note {
        min-height: 250px;

        padding: 1.5rem;
    }


    .services-delivery__master-note > strong {
        font-size:
            clamp(
                2.6rem,
                12vw,
                3.8rem
            );
    }


    .services-delivery__item {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .services-delivery__item-number {
        min-height: 62px;

        padding:
            0.9rem
            1rem;

        flex-direction: row;

        align-items: center;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-delivery__item-number strong {
        writing-mode: horizontal-tb;

        transform: none;
    }


    .services-delivery__item-copy {
        min-height: 320px;

        padding: 1.5rem;
    }


    .services-delivery__item-copy h3 {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.2rem
            );
    }


    .services-delivery__item-meta {
        grid-column: auto;

        min-height: 150px;

        padding: 1.3rem;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.10);
    }


    .services-delivery__item-meta small {
        margin-top: auto;
    }


    .services-delivery__matrix-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-delivery__matrix-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-delivery__matrix-grid > div:nth-child(3),
    .services-delivery__matrix-grid > div:nth-child(5) {
        border-left: 0;
    }


    .services-delivery__matrix-grid > div:nth-child(3),
    .services-delivery__matrix-grid > div:nth-child(4),
    .services-delivery__matrix-grid > div:nth-child(5) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__folders-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-delivery__folder-tree {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-delivery__folder-tree > div:first-child {
        grid-column:
            1 / -1;
    }


    .services-delivery__folder-tree > div:nth-child(2),
    .services-delivery__folder-tree > div:nth-child(4),
    .services-delivery__folder-tree > div:nth-child(6) {
        border-left: 0;
    }


    .services-delivery__folder-tree > div:nth-child(n + 4) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-delivery__note {
        min-height: 410px;

        padding: 1.5rem;

        align-content: space-between;
    }


    .services-delivery__note
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.2rem
            );
    }


    .services-delivery__end {
        align-items: stretch;

        flex-direction: column;

        gap: 1.25rem;
    }


    .services-delivery__end a {
        width: 100%;

        min-width: 0;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-delivery__heading h2 {
        font-size:
            clamp(
                3.05rem,
                14.5vw,
                4.25rem
            );
    }


    .services-delivery__master-note > strong {
        font-size:
            clamp(
                2.4rem,
                11vw,
                3.25rem
            );
    }


    .services-delivery__item-copy {
        min-height: 295px;

        padding: 1.35rem;
    }


    .services-delivery__item-copy h3 {
        font-size:
            clamp(
                2.7rem,
                12.2vw,
                3.7rem
            );
    }


    .services-delivery__matrix-grid {
        grid-template-columns: 1fr;
    }


    .services-delivery__matrix-grid > div,
    .services-delivery__matrix-grid > div:nth-child(2),
    .services-delivery__matrix-grid > div:nth-child(3),
    .services-delivery__matrix-grid > div:nth-child(4),
    .services-delivery__matrix-grid > div:nth-child(5) {
        border-left: 0;
    }


    .services-delivery__matrix-grid > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .services-delivery__folder-tree {
        grid-template-columns: 1fr;
    }


    .services-delivery__folder-tree > div,
    .services-delivery__folder-tree > div:nth-child(2),
    .services-delivery__folder-tree > div:nth-child(3),
    .services-delivery__folder-tree > div:nth-child(4),
    .services-delivery__folder-tree > div:nth-child(5),
    .services-delivery__folder-tree > div:nth-child(6) {
        grid-column: auto;

        border-left: 0;
    }


    .services-delivery__folder-tree > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(23, 23, 21, 0.12);
    }


    .services-delivery__note
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.65rem,
                12vw,
                3.55rem
            );
    }

}

/* ==========================================================================
   WFIP_SERVICES_DELIVERY_MOBILE_OVERFLOW_FIX_V2
   Services Section 05 — Mobile filename + delivery-note containment
   ========================================================================== */

@media (max-width: 760px) {

    /* --------------------------------------------------------------
       FILE NAMING
       -------------------------------------------------------------- */

    .services-delivery__master-note {
        min-width: 0;

        overflow: hidden;
    }


    .services-delivery__master-note > strong {
        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    .services-delivery__master-note
    > strong
    > span {
        width: 100%;

        max-width: 100%;

        overflow-wrap: anywhere;

        word-break: break-word;

        hyphens: none;
    }


    /* --------------------------------------------------------------
       DEFINE DELIVERABLES EARLY PANEL
       -------------------------------------------------------------- */

    .services-delivery__note {
        grid-template-columns: 1fr;

        width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .services-delivery__note > div {
        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    .services-delivery__note
    > div:first-child
    > strong {
        width: 100%;

        max-width: 100%;

        overflow-wrap: normal;

        word-break: normal;
    }


    .services-delivery__note
    > div:first-child
    > strong
    > span {
        width: 100%;

        max-width: 100%;
    }


    .services-delivery__note > div:last-child {
        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    .services-delivery__note p {
        width: 100%;

        max-width: 100%;

        overflow-wrap: break-word;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-delivery__master-note
    > strong
    > span {
        font-size: 0.88em;

        line-height: 0.92;
    }


    .services-delivery__note
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.5rem,
                11.2vw,
                3.3rem
            );

        line-height: 0.84;
    }

}

/* ==========================================================================
   WFIP_SERVICES_DELIVERY_FILENAME_MOBILE_FIX_V3
   Services Deliverables — Controlled fake filename on mobile
   ========================================================================== */

@media (max-width: 760px) {

    .services-delivery__master-note
    > strong
    > span {
        position: relative;

        display: block;

        width: 100%;

        max-width: 100%;

        overflow: visible;

        overflow-wrap: normal;

        word-break: normal;

        white-space: normal;

        font-size: 0;

        -webkit-text-stroke: 0;
    }


    .services-delivery__master-note
    > strong
    > span::after {
        content:
            "FINAL_v9_\A"
            "REALFINAL_\A"
            "USETHIS.mov";

        display: block;

        white-space: pre-line;

        color: transparent;

        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, 0.62);

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

        font-size:
            clamp(
                2.55rem,
                11.5vw,
                3.65rem
            );

        font-weight: 950;

        line-height: 0.88;

        letter-spacing: -0.045em;

        text-transform: uppercase;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-delivery__master-note
    > strong
    > span::after {
        font-size:
            clamp(
                2.35rem,
                10.8vw,
                3.1rem
            );

        line-height: 0.90;

        letter-spacing: -0.038em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_DELIVERY_FILENAME_SIZE_FIX_V4
   Services Deliverables — Slightly smaller mobile fake filename
   ========================================================================== */

@media (max-width: 760px) {

    .services-delivery__master-note
    > strong
    > span::after {
        font-size:
            clamp(
                2.25rem,
                10.2vw,
                3.2rem
            );

        line-height: 0.90;

        letter-spacing: -0.038em;
    }

}


@media (max-width: 440px) {

    .services-delivery__master-note
    > strong
    > span::after {
        font-size:
            clamp(
                2.05rem,
                9.7vw,
                2.8rem
            );

        line-height: 0.91;

        letter-spacing: -0.034em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_DELIVERY_NOTE_MOBILE_TITLE_FIX_V3
   Services Deliverables — Fit outlined DELIVERABLES title on mobile
   ========================================================================== */

@media (max-width: 760px) {

    .services-delivery__note
    > div:first-child
    > strong {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.7rem
            );

        line-height: 0.84;

        letter-spacing: -0.052em;
    }


    .services-delivery__note
    > div:first-child
    > strong
    > span {
        display: block;

        width: 100%;

        max-width: 100%;

        font-size: 0.76em;

        line-height: 0.92;

        letter-spacing: -0.035em;

        overflow: visible;

        word-break: normal;

        overflow-wrap: normal;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-delivery__note
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.45rem,
                11vw,
                3.25rem
            );
    }


    .services-delivery__note
    > div:first-child
    > strong
    > span {
        font-size: 0.73em;

        line-height: 0.94;

        letter-spacing: -0.03em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_FINAL_CTA_STYLE_V1
   Services Page — Final CTA / Project Intake
   ========================================================================== */

.services-final {
    position: relative;

    padding:
        clamp(5.5rem, 8vw, 8rem)
        0
        clamp(5.5rem, 8vw, 8rem);

    color: #171513;

    background:
        linear-gradient(
            180deg,
            #ebe4d8 0%,
            #f2eee6 52%,
            #e6ded2 100%
        );

    overflow: hidden;

    isolation: isolate;
}


.services-final::before {
    content: "START";

    position: absolute;

    top: 0.08em;
    right: -0.03em;

    z-index: -1;

    color:
        rgba(23, 21, 19, 0.035);

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

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

    font-weight: 950;

    line-height: 0.76;

    letter-spacing: -0.085em;

    text-transform: uppercase;

    pointer-events: none;
}


.services-final__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   TOP RAIL
   ========================================================================== */

.services-final__rail {
    display: grid;

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

    margin-bottom:
        clamp(3.5rem, 6vw, 5.5rem);

    border-top:
        1px solid
        rgba(23, 21, 19, 0.18);

    border-bottom:
        1px solid
        rgba(23, 21, 19, 0.18);
}


.services-final__rail > div {
    min-height: 76px;

    padding:
        0.95rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.7rem;
}


.services-final__rail > div + div {
    border-left:
        1px solid
        rgba(23, 21, 19, 0.12);
}


.services-final__rail span,
.services-final__rail strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-final__rail span {
    color:
        rgba(23, 21, 19, 0.38);

    font-size: 0.51rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.services-final__rail strong {
    color: #171513;

    font-size:
        clamp(
            0.64rem,
            0.82vw,
            0.78rem
        );

    font-weight: 900;

    letter-spacing: 0.07em;
}


.services-final__rail > div:nth-child(1) strong {
    color: #61735c;
}


.services-final__rail > div:nth-child(2) strong {
    color: #73583d;
}


.services-final__rail > div:nth-child(3) strong {
    color: #4e63b8;
}


/* ==========================================================================
   MAIN INTRO
   ========================================================================== */

.services-final__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    margin-bottom:
        clamp(3.5rem, 6vw, 6rem);

    padding-bottom:
        clamp(2.5rem, 4vw, 4rem);

    border-bottom:
        2px solid
        rgba(23, 21, 19, 0.82);
}


.services-final__kicker {
    margin:
        0
        0
        1.15rem;

    color: #73583d;

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

    font-size: 0.63rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.services-final__kicker::before {
    content: "●";

    margin-right: 0.7rem;

    color: var(--rec-red);

    font-size: 0.72em;
}


.services-final__heading h2 {
    max-width: 1000px;

    margin: 0;

    color: #171513;

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

    font-size:
        clamp(
            4.6rem,
            8vw,
            8.1rem
        );

    font-weight: 950;

    line-height: 0.77;

    letter-spacing: -0.074em;

    text-transform: uppercase;
}


.services-final__heading h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.2px
        rgba(23, 21, 19, 0.72);
}


.services-final__copy {
    padding-top: 1.3rem;

    border-top:
        1px solid
        rgba(23, 21, 19, 0.18);
}


.services-final__copy > span {
    display: block;

    margin-bottom: 1.2rem;

    color: #4e63b8;

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-final__copy p {
    max-width: 535px;

    margin: 0;

    color:
        rgba(23, 21, 19, 0.62);

    font-size:
        clamp(
            0.98rem,
            1.2vw,
            1.08rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   BRIEF BOARD
   ========================================================================== */

.services-final__brief {
    border:
        1px solid
        rgba(23, 21, 19, 0.18);

    background:
        rgba(255, 255, 255, 0.18);
}


.services-final__brief-head {
    min-height: 70px;

    padding:
        0.95rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(23, 21, 19, 0.14);
}


.services-final__brief-head span,
.services-final__brief-head strong {
    font-family: var(--font-mono);

    font-size: 0.56rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-final__brief-head span {
    color:
        rgba(23, 21, 19, 0.40);
}


.services-final__brief-head strong {
    color: #61735c;
}


.services-final__brief-grid {
    display: grid;

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


.services-final__brief-grid > div {
    min-height: 185px;

    padding:
        1.3rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 1rem;
}


.services-final__brief-grid > div:nth-child(2),
.services-final__brief-grid > div:nth-child(3),
.services-final__brief-grid > div:nth-child(5),
.services-final__brief-grid > div:nth-child(6) {
    border-left:
        1px solid
        rgba(23, 21, 19, 0.12);
}


.services-final__brief-grid > div:nth-child(n + 4) {
    border-top:
        1px solid
        rgba(23, 21, 19, 0.12);
}


.services-final__brief-grid span,
.services-final__brief-grid strong,
.services-final__brief-grid small {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-final__brief-grid span {
    color:
        rgba(23, 21, 19, 0.34);

    font-size: 0.50rem;

    font-weight: 850;

    letter-spacing: 0.08em;
}


.services-final__brief-grid strong {
    color: #171513;

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

    font-size:
        clamp(
            1.8rem,
            2.8vw,
            2.85rem
        );

    font-weight: 950;

    line-height: 0.90;

    letter-spacing: -0.045em;
}


.services-final__brief-grid small {
    color:
        rgba(23, 21, 19, 0.43);

    font-size: 0.48rem;

    font-weight: 800;

    line-height: 1.45;

    letter-spacing: 0.075em;
}


.services-final__brief-grid > div:nth-child(1) strong,
.services-final__brief-grid > div:nth-child(2) strong {
    color: #73583d;
}


.services-final__brief-grid > div:nth-child(3) strong {
    color: #4e63b8;
}


.services-final__brief-grid > div:nth-child(4) strong {
    color: #61735c;
}


/* ==========================================================================
   ACTION PANEL
   ========================================================================== */

.services-final__action {
    position: relative;

    min-height:
        clamp(
            285px,
            25vw,
            360px
        );

    margin-top:
        clamp(2.5rem, 5vw, 5rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap:
        clamp(3rem, 7vw, 8rem);

    align-items: end;

    color: var(--paper-white);

    background:
        linear-gradient(
            135deg,
            #1c1815 0%,
            #101012 55%,
            #090a0c 100%
        );

    overflow: hidden;
}


.services-final__action::before {
    content: "GO";

    position: absolute;

    top: -0.08em;
    right: 0.01em;

    color:
        rgba(242, 240, 234, 0.035);

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

    font-size:
        clamp(
            10rem,
            21vw,
            20rem
        );

    font-weight: 950;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.services-final__action > div {
    position: relative;
    z-index: 2;
}


.services-final__action > div:first-child > span {
    display: block;

    margin-bottom: 1rem;

    color: var(--practical-light);

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

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.services-final__action > div:first-child > strong {
    display: block;

    color: var(--paper-white);

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

    font-size:
        clamp(
            3.3rem,
            5.5vw,
            5.7rem
        );

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.064em;

    text-transform: uppercase;
}


.services-final__action
> div:first-child
> strong
> span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.05px
        rgba(242, 240, 234, 0.66);
}


.services-final__action-right {
    padding-top: 1.2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.services-final__action-right p {
    max-width: 520px;

    margin:
        0
        0
        1.8rem;

    color:
        rgba(242, 240, 234, 0.56);

    font-size:
        clamp(
            0.96rem,
            1.15vw,
            1.05rem
        );

    line-height: 1.68;
}


.services-final__action-right a {
    width: 100%;

    min-height: 64px;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    color: #171513;

    background: var(--paper-white);

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

    font-size: 0.62rem;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.services-final__action-right a span:last-child {
    color: var(--rec-red);

    font-size: 1rem;
}


.services-final__action-right a:hover {
    color: var(--paper-white);

    background: #73583d;

    transform: translateY(-2px);
}


.services-final__action-right a:hover span:last-child {
    color: var(--paper-white);
}


/* ==========================================================================
   FINAL STATUS
   ========================================================================== */

.services-final__status {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: 1.25rem;

    border:
        1px solid
        rgba(23, 21, 19, 0.18);

    background:
        rgba(255, 255, 255, 0.15);
}


.services-final__status > div {
    min-height: 78px;

    padding:
        0.95rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.65rem;
}


.services-final__status > div + div {
    border-left:
        1px solid
        rgba(23, 21, 19, 0.12);
}


.services-final__status span,
.services-final__status strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.services-final__status span {
    color:
        rgba(23, 21, 19, 0.34);

    font-size: 0.50rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.services-final__status strong {
    color: #171513;

    font-size: 0.64rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.07em;
}


.services-final__status > div:nth-child(1) strong {
    color: #73583d;
}


.services-final__status > div:nth-child(2) strong {
    color: #61735c;
}


.services-final__status > div:nth-child(3) strong {
    color: #4e63b8;
}


/* ==========================================================================
   SECTION END
   ========================================================================== */

.services-final__end {
    min-height: 64px;

    margin-top:
        clamp(2.5rem, 4vw, 4rem);

    padding:
        0.85rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(23, 21, 19, 0.18);

    border-bottom:
        1px solid
        rgba(23, 21, 19, 0.18);
}


.services-final__end span,
.services-final__end strong {
    font-family: var(--font-mono);

    font-size: 0.55rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.services-final__end span {
    color:
        rgba(23, 21, 19, 0.40);
}


.services-final__end strong {
    color: #61735c;
}


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

@media (max-width: 1000px) {

    .services-final__main {
        grid-template-columns: 1fr;

        gap: 2.75rem;
    }


    .services-final__copy {
        max-width: 700px;
    }


    .services-final__action {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .services-final__action-right {
        max-width: 700px;
    }

}


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

@media (max-width: 760px) {

    .services-final {
        padding:
            5rem
            0;
    }


    .services-final__inner {
        width:
            calc(100% - 2rem);
    }


    .services-final__rail {
        grid-template-columns: 1fr;
    }


    .services-final__rail > div + div {
        border-left: 0;

        border-top:
            1px solid
            rgba(23, 21, 19, 0.12);
    }


    .services-final__heading h2 {
        font-size:
            clamp(
                3.35rem,
                15.5vw,
                4.9rem
            );
    }


    .services-final__brief-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.5rem;
    }


    .services-final__brief-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-final__brief-grid > div:nth-child(3),
    .services-final__brief-grid > div:nth-child(5) {
        border-left: 0;
    }


    .services-final__brief-grid > div:nth-child(3),
    .services-final__brief-grid > div:nth-child(4),
    .services-final__brief-grid > div:nth-child(5),
    .services-final__brief-grid > div:nth-child(6) {
        border-top:
            1px solid
            rgba(23, 21, 19, 0.12);
    }


    .services-final__action {
        min-height: 390px;

        padding: 1.5rem;
    }


    .services-final__action
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.2rem
            );
    }


    .services-final__status {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .services-final__status > div:nth-child(3) {
        border-left: 0;
    }


    .services-final__status > div:nth-child(3),
    .services-final__status > div:nth-child(4) {
        border-top:
            1px solid
            rgba(23, 21, 19, 0.12);
    }


    .services-final__end {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.55rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-final__heading h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.2rem
            );
    }


    .services-final__brief-grid {
        grid-template-columns: 1fr;
    }


    .services-final__brief-grid > div,
    .services-final__brief-grid > div:nth-child(2),
    .services-final__brief-grid > div:nth-child(3),
    .services-final__brief-grid > div:nth-child(4),
    .services-final__brief-grid > div:nth-child(5),
    .services-final__brief-grid > div:nth-child(6) {
        border-left: 0;
    }


    .services-final__brief-grid > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(23, 21, 19, 0.12);
    }


    .services-final__action
    > div:first-child
    > strong {
        font-size:
            clamp(
                2.65rem,
                12vw,
                3.6rem
            );
    }


    .services-final__status {
        grid-template-columns: 1fr;
    }


    .services-final__status > div,
    .services-final__status > div:nth-child(2),
    .services-final__status > div:nth-child(3),
    .services-final__status > div:nth-child(4) {
        border-left: 0;
    }


    .services-final__status > div:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(23, 21, 19, 0.12);
    }

}

/* ==========================================================================
   WFIP_SERVICES_FINAL_BRIEF_REFERENCES_MOBILE_FIX_V2
   Services Final CTA — Keep ANY REFERENCES? inside mobile cell
   ========================================================================== */

@media (max-width: 760px) {

    .services-final__brief-grid > div:nth-child(6) {
        min-width: 0;

        overflow: hidden;
    }


    .services-final__brief-grid
    > div:nth-child(6)
    > strong {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        font-size:
            clamp(
                1.55rem,
                6.4vw,
                2.15rem
            );

        line-height: 0.90;

        letter-spacing: -0.035em;

        overflow-wrap: normal;

        word-break: normal;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-final__brief-grid
    > div:nth-child(6)
    > strong {
        font-size:
            clamp(
                1.5rem,
                7vw,
                1.95rem
            );

        line-height: 0.91;

        letter-spacing: -0.03em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_FINAL_REFERENCES_CONTROLLED_FIX_V3
   Final CTA — Controlled ANY REFERENCES? mobile treatment
   ========================================================================== */

@media (max-width: 760px) {

    .services-final__brief-grid
    > div:nth-child(6)
    > strong {
        display: block;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        overflow: visible;

        font-size: 0;

        line-height: 1;
    }


    .services-final__brief-grid
    > div:nth-child(6)
    > strong::after {
        content:
            "ANY\A"
            "REFERENCES?";

        display: block;

        width: 100%;

        max-width: 100%;

        white-space: pre-line;

        color: #171513;

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

        font-size:
            clamp(
                1.35rem,
                5.6vw,
                1.7rem
            );

        font-weight: 950;

        line-height: 0.88;

        letter-spacing: -0.045em;

        text-transform: uppercase;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 440px) {

    .services-final__brief-grid
    > div:nth-child(6)
    > strong::after {
        font-size:
            clamp(
                1.28rem,
                5.4vw,
                1.55rem
            );

        line-height: 0.90;

        letter-spacing: -0.04em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_FINAL_REFERENCES_SIZE_FIX_V4
   Final CTA — Slightly reduce ANY REFERENCES? on mobile
   ========================================================================== */

@media (max-width: 760px) {

    .services-final__brief-grid
    > div:nth-child(6)
    > strong::after {
        font-size:
            clamp(
                1.25rem,
                5.15vw,
                1.58rem
            );

        line-height: 0.90;

        letter-spacing: -0.04em;
    }

}


@media (max-width: 440px) {

    .services-final__brief-grid
    > div:nth-child(6)
    > strong::after {
        font-size:
            clamp(
                1.18rem,
                5vw,
                1.45rem
            );

        line-height: 0.91;

        letter-spacing: -0.035em;
    }

}

/* ==========================================================================
   WFIP_SERVICES_FOOTER_STYLE_V1
   Services Page — Compact Footer
   ========================================================================== */

.wfip-footer {
    color: var(--paper-white);
    background: #090a0c;

    border-top:
        1px solid
        rgba(242, 240, 234, 0.14);
}


.wfip-footer__inner {
    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;
}


/* ==========================================================================
   PRIMARY
   ========================================================================== */

.wfip-footer__primary {
    min-height: 108px;

    padding:
        1.5rem
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.11);
}


.wfip-footer__brand {
    display: grid;

    width: fit-content;

    color: var(--paper-white);

    text-decoration: none;
}


.wfip-footer__brand-main,
.wfip-footer__brand-secondary {
    font-family: var(--font-display);

    font-weight: 950;

    line-height: 0.82;

    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.wfip-footer__brand-main {
    font-size:
        clamp(
            1.25rem,
            2vw,
            1.75rem
        );
}


.wfip-footer__brand-secondary {
    color: var(--paper-white);

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


.wfip-footer__brand-tag {
    margin-top: 0.35rem;

    color: var(--practical-light);

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

    font-size: 0.49rem;

    font-weight: 850;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.wfip-footer__nav {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap:
        0.8rem
        clamp(1.3rem, 3vw, 2.5rem);
}


.wfip-footer__nav a {
    color:
        rgba(242, 240, 234, 0.62);

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

    font-size: 0.57rem;

    font-weight: 850;

    letter-spacing: 0.09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 180ms ease;
}


.wfip-footer__nav a:hover {
    color: var(--paper-white);
}


/* ==========================================================================
   STATUS
   ========================================================================== */

.wfip-footer__status {
    display: grid;

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

    border-bottom:
        1px solid
        rgba(242, 240, 234, 0.10);
}


.wfip-footer__status > div {
    min-height: 74px;

    padding:
        0.9rem
        1rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 0.55rem;
}


.wfip-footer__status > div:first-child {
    padding-left: 0;
}


.wfip-footer__status > div + div {
    border-left:
        1px solid
        rgba(242, 240, 234, 0.09);
}


.wfip-footer__status span,
.wfip-footer__status strong {
    font-family: var(--font-mono);

    text-transform: uppercase;
}


.wfip-footer__status span {
    color:
        rgba(242, 240, 234, 0.28);

    font-size: 0.48rem;

    font-weight: 800;

    letter-spacing: 0.10em;
}


.wfip-footer__status strong {
    color:
        rgba(242, 240, 234, 0.72);

    font-size: 0.55rem;

    font-weight: 900;

    line-height: 1.35;

    letter-spacing: 0.065em;

    overflow-wrap: anywhere;
}


.wfip-footer__status > div:first-child strong {
    color: var(--night-vision);
}


.wfip-footer__status > div:nth-child(2) strong {
    color: var(--practical-light);
}


.wfip-footer__status > div:nth-child(3) strong {
    color: #aab7ff;
}


/* ==========================================================================
   BOTTOM
   ========================================================================== */

.wfip-footer__bottom {
    min-height: 58px;

    padding:
        0.85rem
        0;

    display: grid;

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

    gap: 2rem;

    align-items: center;
}


.wfip-footer__bottom p {
    margin: 0;

    color:
        rgba(242, 240, 234, 0.29);

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

    font-size: 0.47rem;

    font-weight: 800;

    line-height: 1.45;

    letter-spacing: 0.075em;

    text-transform: uppercase;
}


.wfip-footer__bottom p:nth-child(2) {
    text-align: center;
}


.wfip-footer__bottom p:last-child {
    text-align: right;
}


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

@media (max-width: 760px) {

    .wfip-footer__inner {
        width:
            calc(100% - 2rem);
    }


    .wfip-footer__primary {
        min-height: 0;

        padding:
            1.5rem
            0;

        align-items: flex-start;

        flex-direction: column;

        gap: 1.5rem;
    }


    .wfip-footer__nav {
        width: 100%;

        justify-content: flex-start;

        gap:
            0.8rem
            1.5rem;
    }


    .wfip-footer__status {
        grid-template-columns: 1fr;
    }


    .wfip-footer__status > div,
    .wfip-footer__status > div:first-child {
        min-height: 64px;

        padding:
            0.85rem
            0;
    }


    .wfip-footer__status > div + div {
        border-left: 0;

        border-top:
            1px solid
            rgba(242, 240, 234, 0.09);
    }


    .wfip-footer__bottom {
        grid-template-columns: 1fr;

        gap: 0.45rem;

        padding:
            1rem
            0
            1.25rem;
    }


    .wfip-footer__bottom p:nth-child(2),
    .wfip-footer__bottom p:last-child {
        text-align: left;
    }

}

/* ==========================================================================
   WFIP_ABOUT_HERO_STYLE_V1
   About Page — Studio Profile Hero
   ========================================================================== */

.page-about .about-hero {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    color: var(--paper-white);

    background:
        var(--cut-black);
}


.page-about .about-hero__media {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.page-about .about-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 57% center;

    filter:
        saturate(.82)
        contrast(1.05)
        brightness(.79);
}


.page-about .about-hero__media-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, .97) 0%,
            rgba(11, 12, 14, .88) 24%,
            rgba(11, 12, 14, .59) 48%,
            rgba(11, 12, 14, .24) 72%,
            rgba(11, 12, 14, .14) 100%
        ),
        linear-gradient(
            180deg,
            rgba(11, 12, 14, .45) 0%,
            rgba(11, 12, 14, .03) 34%,
            rgba(11, 12, 14, .18) 72%,
            rgba(11, 12, 14, .82) 100%
        );
}


.page-about .about-hero__frame {
    position: relative;

    z-index: 2;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    min-height: 100svh;

    margin: 0 auto;

    padding:
        126px
        0
        34px;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto
        auto;
}


/* ==========================================================================
   TOP RAIL
   ========================================================================== */

.page-about .about-hero__rail {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(242, 240, 234, .22);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .22);
}


.page-about .about-hero__rail > div {
    min-width: 0;

    padding:
        14px
        18px
        15px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-about .about-hero__rail > div:first-child {
    padding-left: 0;
}


.page-about .about-hero__rail > div:last-child {
    border-right: 0;
}


.page-about .about-hero__rail span,
.page-about .about-hero__rail strong {
    display: block;
}


.page-about .about-hero__rail span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .44);

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

    font-size:
        .62rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-hero__rail strong {
    color:
        var(--paper-white);

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

    font-size:
        .72rem;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================================
   HERO CONTENT
   ========================================================================== */

.page-about .about-hero__content {
    align-self: center;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(270px, .55fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );

    align-items: end;

    padding:
        clamp(
            4rem,
            8vh,
            7.5rem
        )
        0
        clamp(
            3.5rem,
            7vh,
            6rem
        );
}


.page-about .about-hero__heading {
    min-width: 0;
}


.page-about .about-hero__kicker {
    margin:
        0
        0
        22px;

    color:
        var(--night-vision);

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-hero__heading h1 {
    max-width: 880px;

    margin: 0;

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

    font-size:
        clamp(
            4.6rem,
            8.5vw,
            8.6rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.page-about .about-hero__heading h1 > span {
    display: block;
}


.page-about .about-hero__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, .78);

    text-stroke:
        1.5px
        rgba(242, 240, 234, .78);
}


.page-about .about-hero__intro {
    max-width: 420px;

    padding:
        0
        0
        .55rem;
}


.page-about .about-hero__intro-label {
    display: block;

    margin-bottom: 18px;

    color:
        var(--practical-light);

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

    font-size:
        .66rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-hero__intro p {
    margin:
        0
        0
        17px;

    color:
        rgba(242, 240, 234, .70);

    font-size:
        clamp(
            .95rem,
            1.05vw,
            1.08rem
        );

    line-height: 1.66;
}


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


/* ==========================================================================
   PRINCIPLES STRIP
   ========================================================================== */

.page-about .about-hero__principles {
    display: grid;

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

    border-top:
        1px solid
        rgba(242, 240, 234, .20);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .20);

    background:
        rgba(11, 12, 14, .30);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.page-about .about-hero__principles > div {
    position: relative;

    min-width: 0;

    min-height: 106px;

    padding:
        18px
        24px
        20px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-about .about-hero__principles > div:first-child {
    padding-left: 0;
}


.page-about .about-hero__principles > div:last-child {
    border-right: 0;
}


.page-about .about-hero__principles span,
.page-about .about-hero__principles strong,
.page-about .about-hero__principles small {
    display: block;
}


.page-about .about-hero__principles span {
    margin-bottom: 10px;

    color:
        var(--timeline-gray);

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

    font-size:
        .62rem;

    font-weight: 800;

    letter-spacing: .12em;
}


.page-about .about-hero__principles strong {
    margin-bottom: 6px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            1.3rem,
            2vw,
            1.85rem
        );

    font-weight: 950;

    line-height: .9;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-about .about-hero__principles small {
    max-width: 270px;

    color:
        rgba(242, 240, 234, .48);

    font-size:
        .76rem;

    line-height: 1.45;
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-hero__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    color:
        rgba(242, 240, 234, .40);

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

    font-size:
        .61rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-hero__end span:last-child {
    color:
        rgba(242, 240, 234, .66);
}


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1500px) {

    .page-about .about-hero__frame {
        padding-top: 136px;
    }


    .page-about .about-hero__heading h1 {
        font-size:
            clamp(
                7rem,
                8vw,
                9rem
            );
    }

}


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

@media (max-width: 1040px) {

    .page-about .about-hero__media img {
        object-position: 63% center;
    }


    .page-about .about-hero__media-shade {
        background:
            linear-gradient(
                90deg,
                rgba(11, 12, 14, .96) 0%,
                rgba(11, 12, 14, .82) 42%,
                rgba(11, 12, 14, .40) 75%,
                rgba(11, 12, 14, .24) 100%
            ),
            linear-gradient(
                180deg,
                rgba(11, 12, 14, .50) 0%,
                rgba(11, 12, 14, .06) 34%,
                rgba(11, 12, 14, .30) 70%,
                rgba(11, 12, 14, .90) 100%
            );
    }


    .page-about .about-hero__content {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(250px, .75fr);

        gap: 3rem;
    }


    .page-about .about-hero__heading h1 {
        font-size:
            clamp(
                4.25rem,
                8.4vw,
                6.5rem
            );
    }

}


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

@media (max-width: 760px) {

    .page-about .about-hero {
        min-height: auto;
    }


    .page-about .about-hero__media img {
        object-position: 66% center;
    }


    .page-about .about-hero__media-shade {
        background:
            linear-gradient(
                180deg,
                rgba(11, 12, 14, .72) 0%,
                rgba(11, 12, 14, .53) 24%,
                rgba(11, 12, 14, .57) 53%,
                rgba(11, 12, 14, .96) 100%
            ),
            linear-gradient(
                90deg,
                rgba(11, 12, 14, .76) 0%,
                rgba(11, 12, 14, .30) 100%
            );
    }


    .page-about .about-hero__frame {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        min-height: 100svh;

        padding:
            110px
            0
            24px;
    }


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


    .page-about .about-hero__rail > div {
        min-height: 62px;

        padding:
            11px
            12px
            12px;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .12);
    }


    .page-about .about-hero__rail > div:nth-child(2) {
        border-right: 0;
    }


    .page-about .about-hero__rail > div:nth-child(3),
    .page-about .about-hero__rail > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-about .about-hero__rail > div:first-child,
    .page-about .about-hero__rail > div:nth-child(3) {
        padding-left: 0;
    }


    .page-about .about-hero__rail span {
        font-size: .54rem;
    }


    .page-about .about-hero__rail strong {
        font-size: .62rem;
    }


    .page-about .about-hero__content {
        display: block;

        padding:
            clamp(
                3.6rem,
                10vh,
                5rem
            )
            0
            3.25rem;
    }


    .page-about .about-hero__kicker {
        margin-bottom: 18px;

        font-size: .58rem;
    }


    .page-about .about-hero__heading h1 {
        max-width: 100%;

        font-size:
            clamp(
                3.55rem,
                16.5vw,
                5.35rem
            );

        line-height: .80;

        letter-spacing: -.06em;
    }


    .page-about .about-hero__title-outline {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .80);

        text-stroke:
            1px
            rgba(242, 240, 234, .80);
    }


    .page-about .about-hero__intro {
        max-width: 520px;

        margin-top: 32px;

        padding: 0;
    }


    .page-about .about-hero__intro-label {
        margin-bottom: 14px;

        font-size: .58rem;
    }


    .page-about .about-hero__intro p {
        font-size: .91rem;

        line-height: 1.58;
    }


    .page-about .about-hero__principles {
        grid-template-columns: 1fr;

        backdrop-filter: none;

        -webkit-backdrop-filter: none;

        background:
            rgba(11, 12, 14, .58);
    }


    .page-about .about-hero__principles > div {
        min-height: auto;

        padding:
            15px
            0
            16px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-about .about-hero__principles > div:last-child {
        border-bottom: 0;
    }


    .page-about .about-hero__principles strong {
        font-size: 1.35rem;
    }


    .page-about .about-hero__principles small {
        font-size: .72rem;
    }


    .page-about .about-hero__end {
        padding-top: 14px;

        flex-direction: column;

        gap: 7px;

        font-size: .53rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-hero__frame {
        width:
            calc(100% - 1.5rem);

        padding-top: 104px;
    }


    .page-about .about-hero__heading h1 {
        font-size:
            clamp(
                3.25rem,
                16vw,
                4.45rem
            );
    }


    .page-about .about-hero__content {
        padding-top: 3.3rem;
    }


    .page-about .about-hero__rail > div {
        padding-right: 8px;
    }

}

/* ==========================================================================
   WFIP_ABOUT_HERO_INTRO_WHITE_FIX_V2
   About Hero — Improve Short Version Readability
   ========================================================================== */

.page-about .about-hero__intro p {
    color: var(--paper-white);
}

/* ==========================================================================
   WFIP_ABOUT_STORY_STYLE_V1
   About Page — Studio Story
   ========================================================================== */

.page-about .about-story {
    position: relative;

    overflow: hidden;

    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-about .about-story::before {
    content: "02";

    position: absolute;

    top:
        clamp(
            4rem,
            7vw,
            7.5rem
        );

    right:
        clamp(
            -1rem,
            1vw,
            1rem
        );

    z-index: 0;

    color:
        rgba(11, 12, 14, .035);

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

    font-size:
        clamp(
            13rem,
            27vw,
            30rem
        );

    font-weight: 950;

    line-height: .70;

    letter-spacing: -.08em;

    pointer-events: none;

    user-select: none;
}


.page-about .about-story__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            6rem,
            9vw,
            10rem
        )
        0
        34px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.page-about .about-story__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .55fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-about .about-story__kicker {
    margin:
        0
        0
        20px;

    color:
        #67785f;

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-story__header h2 {
    max-width: 920px;

    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            5rem,
            9.5vw,
            10rem
        );

    font-weight: 950;

    line-height: .77;

    letter-spacing: -.07em;

    text-transform: uppercase;
}


.page-about .about-story__header h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(11, 12, 14, .78);

    text-stroke:
        1.5px
        rgba(11, 12, 14, .78);
}


.page-about .about-story__header-note {
    max-width: 410px;

    padding-bottom: .55rem;
}


.page-about .about-story__header-note > span {
    display: block;

    margin-bottom: 17px;

    color:
        #8f6226;

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

    font-size:
        .66rem;

    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-story__header-note p {
    margin: 0;

    color:
        rgba(11, 12, 14, .70);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.66;
}


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

.page-about .about-story__body {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, .9fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    padding:
        clamp(
            4.5rem,
            7vw,
            7rem
        )
        0;
}


.page-about .about-story__statement {
    max-width: 820px;
}


.page-about .about-story__statement-number {
    display: block;

    margin-bottom: 22px;

    color:
        rgba(11, 12, 14, .42);

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

    font-size:
        .64rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-story__statement p {
    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            2.35rem,
            4.5vw,
            5.15rem
        );

    font-weight: 950;

    line-height: .93;

    letter-spacing: -.045em;

    text-transform: uppercase;
}


.page-about .about-story__copy {
    max-width: 500px;
}


.page-about .about-story__copy p {
    margin:
        0
        0
        24px;

    color:
        rgba(11, 12, 14, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.7;
}


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


/* ==========================================================================
   VERSION HISTORY LEDGER
   ========================================================================== */

.page-about .about-story__ledger {
    border-top:
        2px solid
        var(--cut-black);

    border-bottom:
        2px solid
        var(--cut-black);
}


.page-about .about-story__ledger-heading {
    min-height: 70px;

    padding:
        15px
        0;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    align-items: center;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-about .about-story__ledger-heading span,
.page-about .about-story__ledger-heading strong {
    font-family:
        var(--font-mono);

    font-size:
        .65rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-story__ledger-heading span {
    color:
        rgba(11, 12, 14, .48);
}


.page-about .about-story__ledger-heading strong {
    color:
        var(--cut-black);
}


.page-about .about-story__ledger-row {
    min-height: 154px;

    display: grid;

    grid-template-columns:
        70px
        minmax(220px, .75fr)
        minmax(320px, 1.25fr)
        minmax(130px, auto);

    gap:
        clamp(
            1.5rem,
            3vw,
            3.5rem
        );

    align-items: center;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .20);
}


.page-about .about-story__ledger-row:last-child {
    border-bottom: 0;
}


.page-about .about-story__ledger-index {
    color:
        rgba(11, 12, 14, .34);

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

    font-size:
        .68rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-about .about-story__ledger-row small {
    display: block;

    margin-bottom: 8px;

    color:
        #67785f;

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

    font-size:
        .60rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-story__ledger-row strong {
    display: block;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            1.65rem,
            2.6vw,
            2.75rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-about .about-story__ledger-row p {
    max-width: 610px;

    margin: 0;

    color:
        rgba(11, 12, 14, .64);

    font-size:
        .92rem;

    line-height: 1.58;
}


.page-about .about-story__ledger-status {
    justify-self: end;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(11, 12, 14, .24);

    color:
        rgba(11, 12, 14, .70);

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

    font-size:
        .57rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .10em;

    text-align: center;

    text-transform: uppercase;
}


/* ==========================================================================
   BOTTOM STATEMENT
   ========================================================================== */

.page-about .about-story__bottom {
    position: relative;

    padding:
        clamp(
            5rem,
            8vw,
            8.5rem
        )
        0
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    display: grid;

    grid-template-columns:
        minmax(200px, .38fr)
        minmax(0, 1.62fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );

    align-items: start;
}


.page-about .about-story__bottom p {
    margin: 0;

    color:
        #8f6226;

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.35;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-story__bottom strong {
    max-width: 1030px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            3rem,
            5.8vw,
            6.6rem
        );

    font-weight: 950;

    line-height: .84;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-about .about-story__bottom strong span {
    display: block;

    color:
        rgba(11, 12, 14, .34);
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-story__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    color:
        rgba(11, 12, 14, .42);

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

    font-size:
        .61rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-story__end span:last-child {
    color:
        rgba(11, 12, 14, .68);
}


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

@media (max-width: 1040px) {

    .page-about .about-story__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-about .about-story__body {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, .95fr);

        gap: 3.5rem;
    }


    .page-about .about-story__ledger-row {
        grid-template-columns:
            48px
            minmax(190px, .8fr)
            minmax(260px, 1.2fr)
            auto;

        gap: 1.5rem;
    }

}


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

@media (max-width: 760px) {

    .page-about .about-story::before {
        top: 6rem;

        right: -1.5rem;

        font-size: 13rem;
    }


    .page-about .about-story__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            5rem
            0
            24px;
    }


    .page-about .about-story__header {
        display: block;

        padding-bottom: 3.75rem;
    }


    .page-about .about-story__kicker {
        font-size: .58rem;
    }


    .page-about .about-story__header h2 {
        font-size:
            clamp(
                3.9rem,
                17vw,
                5.7rem
            );

        line-height: .80;
    }


    .page-about .about-story__header h2 span {
        -webkit-text-stroke:
            1px
            rgba(11, 12, 14, .80);

        text-stroke:
            1px
            rgba(11, 12, 14, .80);
    }


    .page-about .about-story__header-note {
        max-width: 520px;

        margin-top: 31px;

        padding: 0;
    }


    .page-about .about-story__header-note > span {
        font-size: .58rem;
    }


    .page-about .about-story__header-note p {
        font-size: .92rem;

        line-height: 1.58;
    }


    .page-about .about-story__body {
        display: block;

        padding:
            3.75rem
            0
            4rem;
    }


    .page-about .about-story__statement-number {
        font-size: .57rem;
    }


    .page-about .about-story__statement p {
        font-size:
            clamp(
                2.5rem,
                10.5vw,
                3.7rem
            );

        line-height: .94;
    }


    .page-about .about-story__copy {
        margin-top: 32px;
    }


    .page-about .about-story__copy p {
        font-size: .92rem;

        line-height: 1.6;
    }


    .page-about .about-story__ledger-heading {
        min-height: 62px;
    }


    .page-about .about-story__ledger-heading span,
    .page-about .about-story__ledger-heading strong {
        font-size: .54rem;
    }


    .page-about .about-story__ledger-row {
        min-height: auto;

        padding:
            22px
            0
            24px;

        grid-template-columns:
            38px
            1fr;

        gap:
            8px
            14px;

        align-items: start;
    }


    .page-about .about-story__ledger-index {
        grid-row:
            1 / 4;

        padding-top: 3px;

        font-size: .57rem;
    }


    .page-about .about-story__ledger-row small {
        font-size: .53rem;
    }


    .page-about .about-story__ledger-row strong {
        font-size:
            clamp(
                1.75rem,
                8vw,
                2.35rem
            );
    }


    .page-about .about-story__ledger-row p {
        grid-column: 2;

        margin-top: 8px;

        font-size: .84rem;

        line-height: 1.52;
    }


    .page-about .about-story__ledger-status {
        grid-column: 2;

        justify-self: start;

        margin-top: 8px;

        font-size: .51rem;
    }


    .page-about .about-story__bottom {
        display: block;

        padding:
            4.5rem
            0
            4rem;
    }


    .page-about .about-story__bottom p {
        margin-bottom: 20px;

        font-size: .57rem;
    }


    .page-about .about-story__bottom strong {
        display: block;

        font-size:
            clamp(
                2.65rem,
                11vw,
                4rem
            );

        line-height: .87;
    }


    .page-about .about-story__end {
        flex-direction: column;

        gap: 7px;

        font-size: .53rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-story__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-about .about-story__header h2 {
        font-size:
            clamp(
                3.45rem,
                16.5vw,
                4.8rem
            );
    }


    .page-about .about-story__statement p {
        font-size:
            clamp(
                2.3rem,
                10vw,
                3.2rem
            );
    }


    .page-about .about-story__bottom strong {
        font-size:
            clamp(
                2.45rem,
                10.5vw,
                3.45rem
            );
    }

}

/* ==========================================================================
   WFIP_ABOUT_STORY_ORIGIN_SCALE_FIX_V2
   About Story — Control Origin Statement Desktop Scale
   ========================================================================== */

@media (min-width: 761px) {

    .page-about .about-story__statement {
        max-width: 780px;
    }


    .page-about .about-story__statement p {
        font-size:
            clamp(
                2.3rem,
                3.65vw,
                4.15rem
            );

        line-height: .94;

        letter-spacing: -.04em;
    }

}

/* ==========================================================================
   WFIP_ABOUT_VALUES_STYLE_V1
   About Page — Working Principles / Manifesto
   ========================================================================== */

.page-about .about-values {
    position: relative;

    overflow: hidden;

    color:
        var(--paper-white);

    background:
        var(--cut-black);
}


.page-about .about-values::before {
    content: "WORK";

    position: absolute;

    top:
        clamp(
            5rem,
            10vw,
            11rem
        );

    right:
        -2vw;

    z-index: 0;

    color:
        rgba(242, 240, 234, .025);

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

    font-size:
        clamp(
            10rem,
            23vw,
            27rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.075em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


.page-about .about-values__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            6rem,
            9vw,
            10rem
        )
        0
        34px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.page-about .about-values__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .55fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4rem,
            7vw,
            7rem
        );

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-values__kicker {
    margin:
        0
        0
        20px;

    color:
        var(--night-vision);

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-values__heading h2 {
    max-width: 900px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            5rem,
            9.5vw,
            9.8rem
        );

    font-weight: 950;

    line-height: .77;

    letter-spacing: -.07em;

    text-transform: uppercase;
}


.page-about .about-values__heading h2 > span {
    display: block;
}


.page-about .about-values__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, .75);

    text-stroke:
        1.5px
        rgba(242, 240, 234, .75);
}


.page-about .about-values__intro {
    max-width: 420px;

    padding-bottom: .55rem;
}


.page-about .about-values__intro > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--practical-light);

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

    font-size:
        .64rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-values__intro p {
    margin: 0;

    color:
        rgba(242, 240, 234, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.66;
}


/* ==========================================================================
   PRINCIPLES
   ========================================================================== */

.page-about .about-values__principles {
    border-top:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-values__principle {
    position: relative;

    min-height: 188px;

    display: grid;

    grid-template-columns:
        64px
        minmax(260px, .9fr)
        minmax(330px, 1.1fr)
        minmax(130px, auto);

    gap:
        clamp(
            1.5rem,
            3.5vw,
            4rem
        );

    align-items: center;

    padding:
        28px
        0;

    border-bottom:
        1px solid
        rgba(242, 240, 234, .16);
}


.page-about .about-values__principle::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 2px;

    background:
        var(--rec-red);

    transition:
        width .28s ease;
}


.page-about .about-values__principle:hover::after {
    width: 100%;
}


.page-about .about-values__number {
    color:
        rgba(242, 240, 234, .32);

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

    font-size:
        .68rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-about .about-values__principle-heading small {
    display: block;

    margin-bottom: 10px;

    color:
        var(--night-vision);

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

    font-size:
        .59rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-values__principle-heading h3 {
    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            1.9rem,
            3.2vw,
            3.5rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.page-about .about-values__principle > p {
    max-width: 640px;

    margin: 0;

    color:
        rgba(242, 240, 234, .64);

    font-size:
        .94rem;

    line-height: 1.6;
}


.page-about .about-values__status {
    justify-self: end;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(242, 240, 234, .20);

    color:
        rgba(242, 240, 234, .66);

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

    font-size:
        .55rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .10em;

    text-align: center;

    text-transform: uppercase;
}


/* ==========================================================================
   REALITY CHECK
   ========================================================================== */

.page-about .about-values__reality {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    border-top:
        2px solid
        var(--paper-white);

    border-bottom:
        2px solid
        var(--paper-white);
}


.page-about .about-values__reality-heading {
    min-height: 74px;

    padding:
        17px
        0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-values__reality-heading span,
.page-about .about-values__reality-heading strong {
    font-family:
        var(--font-mono);

    font-size:
        .64rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-values__reality-heading span {
    color:
        rgba(242, 240, 234, .45);
}


.page-about .about-values__reality-heading strong {
    color:
        var(--paper-white);
}


.page-about .about-values__reality-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


.page-about .about-values__reality-grid > div {
    min-height: 150px;

    padding:
        24px
        24px
        26px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        rgba(242, 240, 234, .16);
}


.page-about .about-values__reality-grid > div:first-child {
    padding-left: 0;
}


.page-about .about-values__reality-grid > div:last-child {
    border-right: 0;
}


.page-about .about-values__reality-grid span {
    color:
        var(--practical-light);

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

    font-size:
        .58rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-values__reality-grid strong {
    color:
        var(--paper-white);

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

    font-size:
        clamp(
            1.55rem,
            2.45vw,
            2.8rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   MANIFESTO
   ========================================================================== */

.page-about .about-values__manifesto {
    padding:
        clamp(
            5rem,
            8vw,
            9rem
        )
        0
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    display: grid;

    grid-template-columns:
        minmax(180px, .32fr)
        minmax(0, 1.68fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );
}


.page-about .about-values__manifesto > span {
    color:
        var(--rec-red);

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

    font-size:
        .66rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-values__manifesto > strong {
    max-width: 1080px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            3.2rem,
            6vw,
            6.8rem
        );

    font-weight: 950;

    line-height: .84;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-about .about-values__manifesto > strong span {
    display: block;

    color:
        rgba(242, 240, 234, .35);
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-values__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    color:
        rgba(242, 240, 234, .38);

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

    font-size:
        .61rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-values__end span:last-child {
    color:
        rgba(242, 240, 234, .66);
}


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

@media (max-width: 1040px) {

    .page-about .about-values__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-about .about-values__principle {
        grid-template-columns:
            48px
            minmax(220px, .85fr)
            minmax(280px, 1.15fr)
            auto;

        gap: 1.5rem;
    }


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


    .page-about .about-values__reality-grid > div:nth-child(2) {
        border-right: 0;
    }


    .page-about .about-values__reality-grid > div:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(242, 240, 234, .16);
    }


    .page-about .about-values__reality-grid > div:nth-child(3) {
        padding-left: 0;
    }

}


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

@media (max-width: 760px) {

    .page-about .about-values::before {
        top: 7rem;

        right: -2rem;

        font-size: 10rem;
    }


    .page-about .about-values__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            5rem
            0
            24px;
    }


    .page-about .about-values__header {
        display: block;

        padding-bottom: 3.75rem;
    }


    .page-about .about-values__kicker {
        font-size: .58rem;
    }


    .page-about .about-values__heading h2 {
        font-size:
            clamp(
                3.9rem,
                17vw,
                5.6rem
            );

        line-height: .80;
    }


    .page-about .about-values__title-outline {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .78);

        text-stroke:
            1px
            rgba(242, 240, 234, .78);
    }


    .page-about .about-values__intro {
        max-width: 520px;

        margin-top: 30px;

        padding: 0;
    }


    .page-about .about-values__intro > span {
        font-size: .56rem;
    }


    .page-about .about-values__intro p {
        font-size: .92rem;

        line-height: 1.58;
    }


    .page-about .about-values__principle {
        min-height: auto;

        padding:
            24px
            0
            26px;

        grid-template-columns:
            38px
            1fr;

        gap:
            8px
            14px;

        align-items: start;
    }


    .page-about .about-values__number {
        grid-row:
            1 / 4;

        padding-top: 3px;

        font-size: .56rem;
    }


    .page-about .about-values__principle-heading small {
        font-size: .52rem;
    }


    .page-about .about-values__principle-heading h3 {
        font-size:
            clamp(
                1.9rem,
                8vw,
                2.5rem
            );
    }


    .page-about .about-values__principle > p {
        grid-column: 2;

        margin-top: 9px;

        font-size: .85rem;

        line-height: 1.54;
    }


    .page-about .about-values__status {
        grid-column: 2;

        justify-self: start;

        margin-top: 9px;

        font-size: .49rem;
    }


    .page-about .about-values__reality {
        margin-top: 4.5rem;
    }


    .page-about .about-values__reality-heading {
        min-height: auto;

        padding:
            16px
            0;

        display: block;
    }


    .page-about .about-values__reality-heading span,
    .page-about .about-values__reality-heading strong {
        display: block;

        font-size: .53rem;
    }


    .page-about .about-values__reality-heading strong {
        margin-top: 7px;
    }


    .page-about .about-values__reality-grid {
        grid-template-columns: 1fr;
    }


    .page-about .about-values__reality-grid > div {
        min-height: 108px;

        padding:
            17px
            0
            18px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .15);
    }


    .page-about .about-values__reality-grid > div:nth-child(2),
    .page-about .about-values__reality-grid > div:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(242, 240, 234, .15);
    }


    .page-about .about-values__reality-grid > div:last-child {
        border-bottom: 0;
    }


    .page-about .about-values__reality-grid span {
        font-size: .51rem;
    }


    .page-about .about-values__reality-grid strong {
        font-size:
            clamp(
                1.65rem,
                7.5vw,
                2.25rem
            );
    }


    .page-about .about-values__manifesto {
        display: block;

        padding:
            4.75rem
            0
            4rem;
    }


    .page-about .about-values__manifesto > span {
        display: block;

        margin-bottom: 20px;

        font-size: .56rem;
    }


    .page-about .about-values__manifesto > strong {
        display: block;

        font-size:
            clamp(
                2.7rem,
                11vw,
                4rem
            );

        line-height: .87;
    }


    .page-about .about-values__end {
        flex-direction: column;

        gap: 7px;

        font-size: .52rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-values__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-about .about-values__heading h2 {
        font-size:
            clamp(
                3.45rem,
                16.5vw,
                4.8rem
            );
    }


    .page-about .about-values__manifesto > strong {
        font-size:
            clamp(
                2.45rem,
                10.5vw,
                3.45rem
            );
    }

}

/* ==========================================================================
   WFIP_ABOUT_WORKSPACES_STYLE_V1
   About Page — Where The Work Actually Happens
   ========================================================================== */

.page-about .about-workspaces {
    position: relative;

    overflow: hidden;

    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-about .about-workspaces__inner {
    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            6rem,
            9vw,
            10rem
        )
        0
        34px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.page-about .about-workspaces__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4rem,
            7vw,
            7rem
        );
}


.page-about .about-workspaces__kicker {
    margin:
        0
        0
        20px;

    color:
        #67785f;

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-workspaces__header h2 {
    max-width: 900px;

    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            5rem,
            9.6vw,
            10rem
        );

    font-weight: 950;

    line-height: .77;

    letter-spacing: -.07em;

    text-transform: uppercase;
}


.page-about .about-workspaces__header h2 > span {
    display: block;
}


.page-about .about-workspaces__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(11, 12, 14, .78);

    text-stroke:
        1.5px
        rgba(11, 12, 14, .78);
}


.page-about .about-workspaces__intro {
    max-width: 410px;

    padding-bottom: .55rem;
}


.page-about .about-workspaces__intro > span {
    display: block;

    margin-bottom: 17px;

    color:
        #8f6226;

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

    font-size:
        .64rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-workspaces__intro p {
    margin: 0;

    color:
        rgba(11, 12, 14, .70);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.66;
}


/* ==========================================================================
   SHARED PHOTO PANELS
   ========================================================================== */

.page-about .about-workspaces__panel {
    position: relative;

    min-height:
        clamp(
            620px,
            66vw,
            860px
        );

    overflow: hidden;

    color:
        var(--paper-white);

    background:
        var(--cut-black);

    isolation: isolate;
}


.page-about .about-workspaces__media {
    position: absolute;

    inset: 0;

    z-index: -2;
}


.page-about .about-workspaces__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.88)
        contrast(1.06)
        brightness(.82);

    transform:
        scale(1.005);
}


.page-about .about-workspaces__panel--production
.about-workspaces__media img {
    object-position:
        46%
        center;
}


.page-about .about-workspaces__panel--post
.about-workspaces__media img {
    object-position:
        58%
        center;

    filter:
        saturate(.78)
        contrast(1.08)
        brightness(.76);
}


.page-about .about-workspaces__media-shade {
    position: absolute;

    inset: 0;

    z-index: -1;
}


.page-about .about-workspaces__panel--production
.about-workspaces__media-shade {
    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, .90) 0%,
            rgba(11, 12, 14, .64) 36%,
            rgba(11, 12, 14, .20) 68%,
            rgba(11, 12, 14, .18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(11, 12, 14, .34) 0%,
            rgba(11, 12, 14, .03) 45%,
            rgba(11, 12, 14, .72) 100%
        );
}


.page-about .about-workspaces__panel--post
.about-workspaces__media-shade {
    background:
        linear-gradient(
            90deg,
            rgba(11, 12, 14, .93) 0%,
            rgba(11, 12, 14, .75) 33%,
            rgba(11, 12, 14, .34) 61%,
            rgba(11, 12, 14, .14) 100%
        ),
        linear-gradient(
            180deg,
            rgba(11, 12, 14, .38) 0%,
            rgba(11, 12, 14, .04) 46%,
            rgba(11, 12, 14, .80) 100%
        );
}


.page-about .about-workspaces__panel-content {
    min-height:
        clamp(
            620px,
            66vw,
            860px
        );

    padding:
        clamp(
            2rem,
            4vw,
            4rem
        );

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;
}


/* ==========================================================================
   PANEL META
   ========================================================================== */

.page-about .about-workspaces__panel-meta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    padding-bottom: 17px;

    border-bottom:
        1px solid
        rgba(242, 240, 234, .24);

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

    font-size:
        .62rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-workspaces__panel-meta span {
    color:
        rgba(242, 240, 234, .50);
}


.page-about .about-workspaces__panel-meta strong {
    color:
        var(--paper-white);
}


/* ==========================================================================
   PANEL COPY
   ========================================================================== */

.page-about .about-workspaces__panel-copy {
    align-self: center;

    max-width: 760px;

    padding:
        clamp(
            3rem,
            8vw,
            8rem
        )
        0;
}


.page-about .about-workspaces__panel-copy > span {
    display: block;

    margin-bottom: 20px;

    color:
        var(--practical-light);

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

    font-size:
        .65rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-workspaces__panel--post
.about-workspaces__panel-copy > span {
    color:
        #9eaeff;
}


.page-about .about-workspaces__panel-copy h3 {
    max-width: 800px;

    margin:
        0
        0
        28px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            7vw,
            7.7rem
        );

    font-weight: 950;

    line-height: .80;

    letter-spacing: -.06em;

    text-transform: uppercase;
}


.page-about .about-workspaces__panel-copy h3 strong {
    display: block;

    color: transparent;

    font: inherit;

    -webkit-text-stroke:
        1.4px
        rgba(242, 240, 234, .76);

    text-stroke:
        1.4px
        rgba(242, 240, 234, .76);
}


.page-about .about-workspaces__panel-copy p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(242, 240, 234, .78);

    font-size:
        clamp(
            .96rem,
            1.05vw,
            1.08rem
        );

    line-height: 1.68;
}


/* ==========================================================================
   PANEL STATUS
   ========================================================================== */

.page-about .about-workspaces__panel-status {
    display: grid;

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

    border-top:
        1px solid
        rgba(242, 240, 234, .24);
}


.page-about .about-workspaces__panel-status > div {
    padding:
        16px
        20px
        0;

    border-right:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-workspaces__panel-status > div:first-child {
    padding-left: 0;
}


.page-about .about-workspaces__panel-status > div:last-child {
    border-right: 0;
}


.page-about .about-workspaces__panel-status span,
.page-about .about-workspaces__panel-status strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-about .about-workspaces__panel-status span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .42);

    font-size:
        .57rem;

    letter-spacing: .13em;
}


.page-about .about-workspaces__panel-status strong {
    color:
        var(--paper-white);

    font-size:
        .68rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   TRANSITION RAIL
   ========================================================================== */

.page-about .about-workspaces__transition {
    min-height: 86px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto;

    gap:
        20px;

    align-items: center;

    padding:
        0
        clamp(
            1rem,
            2vw,
            2rem
        );

    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-about .about-workspaces__transition > span,
.page-about .about-workspaces__transition > strong {
    font-family:
        var(--font-mono);

    font-size:
        .58rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-workspaces__transition > span {
    color:
        rgba(11, 12, 14, .52);
}


.page-about .about-workspaces__transition > strong {
    color:
        var(--cut-black);

    white-space: nowrap;
}


.page-about .about-workspaces__transition > div {
    position: relative;

    height: 1px;

    overflow: hidden;

    background:
        rgba(11, 12, 14, .22);
}


.page-about .about-workspaces__transition > div span {
    position: absolute;

    top: 0;
    left: 0;

    width: 42%;
    height: 1px;

    background:
        var(--rec-red);
}


.page-about .about-workspaces__transition > div:nth-of-type(2) span {
    right: 0;
    left: auto;

    background:
        var(--waveform-blue);
}


/* ==========================================================================
   CLOSING
   ========================================================================== */

.page-about .about-workspaces__closing {
    padding:
        clamp(
            5rem,
            8vw,
            8rem
        )
        0
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    display: grid;

    grid-template-columns:
        minmax(180px, .32fr)
        minmax(0, 1.68fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );
}


.page-about .about-workspaces__closing > span {
    color:
        #8f6226;

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

    font-size:
        .66rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-workspaces__closing > strong {
    max-width: 1080px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            3.1rem,
            5.9vw,
            6.6rem
        );

    font-weight: 950;

    line-height: .84;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-about .about-workspaces__closing > strong span {
    display: block;

    color:
        rgba(11, 12, 14, .32);
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-workspaces__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    color:
        rgba(11, 12, 14, .42);

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

    font-size:
        .61rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-workspaces__end span:last-child {
    color:
        rgba(11, 12, 14, .70);
}


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

@media (max-width: 1040px) {

    .page-about .about-workspaces__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-about .about-workspaces__panel {
        min-height: 680px;
    }


    .page-about .about-workspaces__panel-content {
        min-height: 680px;
    }


    .page-about .about-workspaces__panel-copy {
        max-width: 650px;
    }


    .page-about .about-workspaces__panel-copy h3 {
        font-size:
            clamp(
                4rem,
                7.5vw,
                6.5rem
            );
    }

}


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

@media (max-width: 760px) {

    .page-about .about-workspaces__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            5rem
            0
            24px;
    }


    .page-about .about-workspaces__header {
        display: block;

        padding-bottom: 3.75rem;
    }


    .page-about .about-workspaces__kicker {
        font-size: .58rem;
    }


    .page-about .about-workspaces__header h2 {
        font-size:
            clamp(
                3.9rem,
                17vw,
                5.6rem
            );

        line-height: .80;
    }


    .page-about .about-workspaces__title-outline {
        -webkit-text-stroke:
            1px
            rgba(11, 12, 14, .80);

        text-stroke:
            1px
            rgba(11, 12, 14, .80);
    }


    .page-about .about-workspaces__intro {
        max-width: 520px;

        margin-top: 30px;

        padding: 0;
    }


    .page-about .about-workspaces__intro > span {
        font-size: .56rem;
    }


    .page-about .about-workspaces__intro p {
        font-size: .92rem;

        line-height: 1.58;
    }


    .page-about .about-workspaces__panel {
        min-height: 690px;
    }


    .page-about .about-workspaces__panel-content {
        min-height: 690px;

        padding:
            20px
            18px;
    }


    .page-about .about-workspaces__panel--production
    .about-workspaces__media img {
        object-position:
            55%
            center;
    }


    .page-about .about-workspaces__panel--post
    .about-workspaces__media img {
        object-position:
            62%
            center;
    }


    .page-about .about-workspaces__panel--production
    .about-workspaces__media-shade,
    .page-about .about-workspaces__panel--post
    .about-workspaces__media-shade {
        background:
            linear-gradient(
                180deg,
                rgba(11, 12, 14, .54) 0%,
                rgba(11, 12, 14, .24) 28%,
                rgba(11, 12, 14, .44) 56%,
                rgba(11, 12, 14, .94) 100%
            ),
            linear-gradient(
                90deg,
                rgba(11, 12, 14, .72) 0%,
                rgba(11, 12, 14, .18) 100%
            );
    }


    .page-about .about-workspaces__panel-meta {
        font-size: .53rem;
    }


    .page-about .about-workspaces__panel-copy {
        align-self: end;

        max-width: 100%;

        padding:
            5rem
            0
            3rem;
    }


    .page-about .about-workspaces__panel-copy > span {
        font-size: .55rem;
    }


    .page-about .about-workspaces__panel-copy h3 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                13vw,
                4.65rem
            );

        line-height: .82;
    }


    .page-about .about-workspaces__panel-copy h3 strong {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .78);

        text-stroke:
            1px
            rgba(242, 240, 234, .78);
    }


    .page-about .about-workspaces__panel-copy p {
        max-width: 500px;

        font-size: .88rem;

        line-height: 1.56;
    }


    .page-about .about-workspaces__panel-status {
        grid-template-columns: 1fr;
    }


    .page-about .about-workspaces__panel-status > div {
        padding:
            11px
            0
            12px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-about .about-workspaces__panel-status > div:last-child {
        border-bottom: 0;
    }


    .page-about .about-workspaces__panel-status span {
        font-size: .50rem;
    }


    .page-about .about-workspaces__panel-status strong {
        font-size: .60rem;
    }


    .page-about .about-workspaces__transition {
        min-height: 96px;

        grid-template-columns:
            auto
            1fr
            auto;

        gap:
            12px;

        padding:
            0
            12px;
    }


    .page-about .about-workspaces__transition > div:nth-of-type(2),
    .page-about .about-workspaces__transition > strong {
        display: none;
    }


    .page-about .about-workspaces__transition > span {
        font-size: .51rem;
    }


    .page-about .about-workspaces__closing {
        display: block;

        padding:
            4.75rem
            0
            4rem;
    }


    .page-about .about-workspaces__closing > span {
        display: block;

        margin-bottom: 20px;

        font-size: .56rem;
    }


    .page-about .about-workspaces__closing > strong {
        display: block;

        font-size:
            clamp(
                2.7rem,
                11vw,
                4rem
            );

        line-height: .87;
    }


    .page-about .about-workspaces__end {
        flex-direction: column;

        gap: 7px;

        font-size: .52rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-workspaces__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-about .about-workspaces__header h2 {
        font-size:
            clamp(
                3.45rem,
                16.5vw,
                4.8rem
            );
    }


    .page-about .about-workspaces__panel {
        min-height: 660px;
    }


    .page-about .about-workspaces__panel-content {
        min-height: 660px;

        padding:
            17px
            15px;
    }


    .page-about .about-workspaces__panel-copy h3 {
        font-size:
            clamp(
                2.75rem,
                12.5vw,
                4rem
            );
    }


    .page-about .about-workspaces__closing > strong {
        font-size:
            clamp(
                2.45rem,
                10.5vw,
                3.45rem
            );
    }

}

/* ==========================================================================
   WFIP_ABOUT_CREW_STYLE_V1
   About Page — Core Crew / Extended Crew
   ========================================================================== */

.page-about .about-crew {
    position: relative;

    overflow: hidden;

    color:
        var(--paper-white);

    background:
        var(--edit-bay);
}


.page-about .about-crew::before {
    content: "CALL SHEET";

    position: absolute;

    top:
        clamp(
            7rem,
            11vw,
            12rem
        );

    right: -2vw;

    z-index: 0;

    color:
        rgba(242, 240, 234, .022);

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

    font-size:
        clamp(
            8rem,
            18vw,
            21rem
        );

    font-weight: 950;

    line-height: .74;

    letter-spacing: -.06em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


.page-about .about-crew__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            6rem,
            9vw,
            10rem
        )
        0
        34px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.page-about .about-crew__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4rem,
            7vw,
            7rem
        );

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-crew__kicker {
    margin:
        0
        0
        20px;

    color:
        var(--night-vision);

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-crew__header h2 {
    max-width: 940px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            5rem,
            9.4vw,
            9.6rem
        );

    font-weight: 950;

    line-height: .77;

    letter-spacing: -.07em;

    text-transform: uppercase;
}


.page-about .about-crew__header h2 > span {
    display: block;
}


.page-about .about-crew__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, .74);

    text-stroke:
        1.5px
        rgba(242, 240, 234, .74);
}


.page-about .about-crew__intro {
    max-width: 420px;

    padding-bottom: .55rem;
}


.page-about .about-crew__intro > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--practical-light);

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

    font-size:
        .64rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-crew__intro p {
    margin: 0;

    color:
        rgba(242, 240, 234, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.66;
}


/* ==========================================================================
   CORE CREW
   ========================================================================== */

.page-about .about-crew__core {
    margin-top:
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    border-top:
        2px solid
        var(--paper-white);

    border-bottom:
        2px solid
        var(--paper-white);
}


.page-about .about-crew__core-heading {
    min-height: 72px;

    padding:
        16px
        0;

    display: grid;

    grid-template-columns:
        100px
        1fr
        auto;

    gap: 2rem;

    align-items: center;

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-crew__core-heading span,
.page-about .about-crew__core-heading strong,
.page-about .about-crew__core-heading small {
    font-family:
        var(--font-mono);

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-crew__core-heading span {
    color:
        rgba(242, 240, 234, .40);

    font-size: .60rem;
}


.page-about .about-crew__core-heading strong {
    color:
        var(--paper-white);

    font-size: .66rem;
}


.page-about .about-crew__core-heading small {
    color:
        var(--night-vision);

    font-size: .56rem;
}


.page-about .about-crew__core-grid {
    display: grid;

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


.page-about .about-crew__core-grid article {
    min-height: 310px;

    padding:
        26px
        30px
        30px;

    display: flex;

    flex-direction: column;

    border-right:
        1px solid
        rgba(242, 240, 234, .16);
}


.page-about .about-crew__core-grid article:first-child {
    padding-left: 0;
}


.page-about .about-crew__core-grid article:last-child {
    border-right: 0;
}


.page-about .about-crew__core-grid article > span {
    margin-bottom: auto;

    color:
        rgba(242, 240, 234, .28);

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

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-about .about-crew__core-grid article > small {
    display: block;

    margin:
        48px
        0
        9px;

    color:
        var(--practical-light);

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

    font-size: .56rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-crew__core-grid h3 {
    margin:
        0
        0
        20px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            2rem,
            3.2vw,
            3.6rem
        );

    font-weight: 950;

    line-height: .87;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.page-about .about-crew__core-grid p {
    max-width: 390px;

    margin: 0;

    color:
        rgba(242, 240, 234, .60);

    font-size: .88rem;

    line-height: 1.58;
}


/* ==========================================================================
   EXTENDED CREW
   ========================================================================== */

.page-about .about-crew__extended {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );
}


.page-about .about-crew__extended-heading {
    min-height: 86px;

    padding:
        18px
        0;

    display: grid;

    grid-template-columns:
        minmax(260px, .7fr)
        minmax(300px, 1.3fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );

    align-items: end;

    border-top:
        2px solid
        rgba(242, 240, 234, .9);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-crew__extended-heading div > span,
.page-about .about-crew__extended-heading div > strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-about .about-crew__extended-heading div > span {
    margin-bottom: 7px;

    color:
        rgba(242, 240, 234, .38);

    font-size: .57rem;

    letter-spacing: .14em;
}


.page-about .about-crew__extended-heading div > strong {
    color:
        var(--paper-white);

    font-size: .68rem;

    letter-spacing: .13em;
}


.page-about .about-crew__extended-heading p {
    max-width: 560px;

    margin: 0;

    color:
        rgba(242, 240, 234, .58);

    font-size: .90rem;

    line-height: 1.5;
}


/* ==========================================================================
   EXTENDED CREW ROSTER
   ========================================================================== */

.page-about .about-crew__roles {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-bottom:
        2px solid
        rgba(242, 240, 234, .90);
}


.page-about .about-crew__roles > div {
    min-height: 156px;

    padding:
        20px
        22px
        22px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-about .about-crew__roles > div:nth-child(4n) {
    border-right: 0;
}


.page-about .about-crew__roles > div:nth-last-child(-n+4) {
    border-bottom: 0;
}


.page-about .about-crew__roles > div:first-child,
.page-about .about-crew__roles > div:nth-child(5) {
    padding-left: 0;
}


.page-about .about-crew__roles > div > span {
    color:
        rgba(242, 240, 234, .30);

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

    font-size: .55rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-about .about-crew__roles > div > strong {
    margin:
        22px
        0
        8px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            1.4rem,
            2.25vw,
            2.4rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-about .about-crew__roles > div > small {
    color:
        var(--night-vision);

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

    font-size: .50rem;

    font-weight: 900;

    line-height: 1.4;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* ==========================================================================
   CREW LOGIC
   ========================================================================== */

.page-about .about-crew__logic {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    display: grid;

    grid-template-columns:
        minmax(190px, .42fr)
        minmax(240px, .58fr)
        minmax(330px, 1fr);

    gap:
        clamp(
            2rem,
            5vw,
            6rem
        );

    align-items: start;

    padding:
        30px
        0;

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-crew__logic div span,
.page-about .about-crew__logic div strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-about .about-crew__logic div span {
    margin-bottom: 8px;

    color:
        rgba(242, 240, 234, .38);

    font-size: .55rem;

    letter-spacing: .13em;
}


.page-about .about-crew__logic div strong {
    color:
        var(--paper-white);

    font-size: .68rem;

    letter-spacing: .10em;
}


.page-about .about-crew__logic div:nth-child(2) strong {
    color:
        var(--rec-red);
}


.page-about .about-crew__logic > p {
    max-width: 610px;

    margin: 0;

    color:
        rgba(242, 240, 234, .68);

    font-size:
        .94rem;

    line-height: 1.64;
}


/* ==========================================================================
   CLOSING STATEMENT
   ========================================================================== */

.page-about .about-crew__closing {
    padding:
        clamp(
            5rem,
            8vw,
            8.5rem
        )
        0
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    display: grid;

    grid-template-columns:
        minmax(180px, .32fr)
        minmax(0, 1.68fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );
}


.page-about .about-crew__closing > span {
    color:
        var(--practical-light);

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

    font-size:
        .66rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-crew__closing > strong {
    max-width: 1080px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            3rem,
            5.8vw,
            6.4rem
        );

    font-weight: 950;

    line-height: .84;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-about .about-crew__closing > strong span {
    display: block;

    color:
        rgba(242, 240, 234, .32);
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-crew__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    color:
        rgba(242, 240, 234, .38);

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

    font-size:
        .61rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-crew__end span:last-child {
    color:
        rgba(242, 240, 234, .66);
}


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

@media (max-width: 1040px) {

    .page-about .about-crew__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-about .about-crew__core-grid h3 {
        font-size:
            clamp(
                1.8rem,
                3vw,
                2.7rem
            );
    }


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


    .page-about .about-crew__roles > div {
        border-right:
            1px solid
            rgba(242, 240, 234, .14);

        border-bottom:
            1px solid
            rgba(242, 240, 234, .14);
    }


    .page-about .about-crew__roles > div:nth-child(2n) {
        border-right: 0;
    }


    .page-about .about-crew__roles > div:nth-last-child(-n+2) {
        border-bottom: 0;
    }


    .page-about .about-crew__roles > div:nth-child(3),
    .page-about .about-crew__roles > div:nth-child(7) {
        padding-left: 0;
    }


    .page-about .about-crew__logic {
        grid-template-columns:
            minmax(160px, .4fr)
            minmax(190px, .5fr)
            minmax(280px, 1.1fr);

        gap: 2rem;
    }

}


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

@media (max-width: 760px) {

    .page-about .about-crew::before {
        top: 8rem;

        right: -2rem;

        font-size: 7rem;
    }


    .page-about .about-crew__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            5rem
            0
            24px;
    }


    .page-about .about-crew__header {
        display: block;

        padding-bottom: 3.75rem;
    }


    .page-about .about-crew__kicker {
        font-size: .58rem;
    }


    .page-about .about-crew__header h2 {
        font-size:
            clamp(
                3.85rem,
                16.5vw,
                5.5rem
            );

        line-height: .80;
    }


    .page-about .about-crew__title-outline {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .78);

        text-stroke:
            1px
            rgba(242, 240, 234, .78);
    }


    .page-about .about-crew__intro {
        max-width: 520px;

        margin-top: 30px;

        padding: 0;
    }


    .page-about .about-crew__intro > span {
        font-size: .55rem;
    }


    .page-about .about-crew__intro p {
        font-size: .92rem;

        line-height: 1.58;
    }


    /* ============================================================
       CORE CREW
       ============================================================ */

    .page-about .about-crew__core {
        margin-top: 4rem;
    }


    .page-about .about-crew__core-heading {
        min-height: auto;

        padding:
            14px
            0;

        grid-template-columns:
            auto
            1fr;

        gap:
            8px
            18px;
    }


    .page-about .about-crew__core-heading small {
        grid-column:
            1 / -1;

        font-size: .50rem;
    }


    .page-about .about-crew__core-grid {
        grid-template-columns: 1fr;
    }


    .page-about .about-crew__core-grid article {
        min-height: auto;

        padding:
            24px
            0
            26px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .15);
    }


    .page-about .about-crew__core-grid article:last-child {
        border-bottom: 0;
    }


    .page-about .about-crew__core-grid article > span {
        margin-bottom: 22px;
    }


    .page-about .about-crew__core-grid article > small {
        margin:
            0
            0
            8px;

        font-size: .51rem;
    }


    .page-about .about-crew__core-grid h3 {
        max-width: 440px;

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


    .page-about .about-crew__core-grid p {
        max-width: 500px;

        font-size: .85rem;

        line-height: 1.54;
    }


    /* ============================================================
       EXTENDED CREW
       ============================================================ */

    .page-about .about-crew__extended {
        margin-top: 4.5rem;
    }


    .page-about .about-crew__extended-heading {
        min-height: auto;

        padding:
            16px
            0;

        display: block;
    }


    .page-about .about-crew__extended-heading p {
        margin-top: 14px;

        font-size: .84rem;
    }


    .page-about .about-crew__roles {
        grid-template-columns: 1fr;
    }


    .page-about .about-crew__roles > div {
        min-height: 106px;

        padding:
            17px
            0
            18px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .14);
    }


    .page-about .about-crew__roles > div:nth-last-child(-n+2),
    .page-about .about-crew__roles > div:nth-last-child(-n+4) {
        border-bottom:
            1px solid
            rgba(242, 240, 234, .14);
    }


    .page-about .about-crew__roles > div:last-child {
        border-bottom: 0;
    }


    .page-about .about-crew__roles > div > strong {
        margin:
            16px
            0
            7px;

        font-size:
            clamp(
                1.55rem,
                7.5vw,
                2.2rem
            );
    }


    /* ============================================================
       LOGIC
       ============================================================ */

    .page-about .about-crew__logic {
        display: block;

        margin-top: 4.5rem;

        padding:
            24px
            0;
    }


    .page-about .about-crew__logic > div {
        margin-bottom: 22px;
    }


    .page-about .about-crew__logic > p {
        margin-top: 30px;

        font-size: .88rem;

        line-height: 1.56;
    }


    /* ============================================================
       CLOSING
       ============================================================ */

    .page-about .about-crew__closing {
        display: block;

        padding:
            4.75rem
            0
            4rem;
    }


    .page-about .about-crew__closing > span {
        display: block;

        margin-bottom: 20px;

        font-size: .55rem;
    }


    .page-about .about-crew__closing > strong {
        display: block;

        font-size:
            clamp(
                2.65rem,
                11vw,
                4rem
            );

        line-height: .87;
    }


    .page-about .about-crew__end {
        flex-direction: column;

        gap: 7px;

        font-size: .52rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-crew__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-about .about-crew__header h2 {
        font-size:
            clamp(
                3.35rem,
                16vw,
                4.7rem
            );
    }


    .page-about .about-crew__closing > strong {
        font-size:
            clamp(
                2.4rem,
                10.4vw,
                3.4rem
            );
    }

}

/* ==========================================================================
   WFIP_ABOUT_CREW_CORE_TITLE_FIT_V2
   About Crew — Prevent Core Crew Role Titles From Colliding
   ========================================================================== */

@media (min-width: 761px) {

    .page-about .about-crew__core-grid article {
        min-width: 0;
    }


    .page-about .about-crew__core-grid h3 {
        max-width: 100%;

        font-size:
            clamp(
                1.9rem,
                2.65vw,
                3.1rem
            );

        line-height: .89;

        letter-spacing: -.035em;
    }

}

/* ==========================================================================
   WFIP_ABOUT_WORKSTYLE_STYLE_V1
   About Page — Working Style / Client Side
   ========================================================================== */

.page-about .about-workstyle {
    position: relative;

    overflow: hidden;

    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-about .about-workstyle::before {
    content: "BRIEF";

    position: absolute;

    top:
        clamp(
            5rem,
            9vw,
            10rem
        );

    right:
        -2vw;

    z-index: 0;

    color:
        rgba(11, 12, 14, .035);

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

    font-size:
        clamp(
            11rem,
            24vw,
            28rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.075em;

    pointer-events: none;

    user-select: none;
}


.page-about .about-workstyle__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            6rem,
            9vw,
            10rem
        )
        0
        34px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.page-about .about-workstyle__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-about .about-workstyle__kicker {
    margin:
        0
        0
        20px;

    color:
        #67785f;

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

    font-size:
        .67rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-workstyle__header h2 {
    max-width: 940px;

    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            4.9rem,
            9vw,
            9.4rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.068em;

    text-transform: uppercase;
}


.page-about .about-workstyle__header h2 > span {
    display: block;
}


.page-about .about-workstyle__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(11, 12, 14, .78);

    text-stroke:
        1.5px
        rgba(11, 12, 14, .78);
}


.page-about .about-workstyle__intro {
    max-width: 420px;

    padding-bottom: .55rem;
}


.page-about .about-workstyle__intro > span {
    display: block;

    margin-bottom: 17px;

    color:
        #8f6226;

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

    font-size:
        .64rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-workstyle__intro p {
    margin: 0;

    color:
        rgba(11, 12, 14, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.66;
}


/* ==========================================================================
   WORKING AGREEMENT
   ========================================================================== */

.page-about .about-workstyle__agreement {
    margin-top:
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    border-top:
        2px solid
        var(--cut-black);

    border-bottom:
        2px solid
        var(--cut-black);
}


.page-about .about-workstyle__agreement-heading {
    min-height: 72px;

    padding:
        16px
        0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .20);
}


.page-about .about-workstyle__agreement-heading span,
.page-about .about-workstyle__agreement-heading strong {
    font-family:
        var(--font-mono);

    font-size:
        .64rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-workstyle__agreement-heading span {
    color:
        rgba(11, 12, 14, .46);
}


.page-about .about-workstyle__agreement-heading strong {
    color:
        var(--cut-black);
}


.page-about .about-workstyle__agreement-row {
    min-height: 154px;

    display: grid;

    grid-template-columns:
        64px
        minmax(240px, .8fr)
        minmax(320px, 1.2fr)
        minmax(120px, auto);

    gap:
        clamp(
            1.5rem,
            3vw,
            3.5rem
        );

    align-items: center;

    padding:
        22px
        0;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-about .about-workstyle__agreement-row:last-child {
    border-bottom: 0;
}


.page-about .about-workstyle__agreement-number {
    color:
        rgba(11, 12, 14, .34);

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

    font-size:
        .66rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-about .about-workstyle__agreement-row small {
    display: block;

    margin-bottom: 8px;

    color:
        #67785f;

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

    font-size:
        .57rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-workstyle__agreement-row strong {
    display: block;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            1.75rem,
            2.8vw,
            3rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-about .about-workstyle__agreement-row > p {
    max-width: 640px;

    margin: 0;

    color:
        rgba(11, 12, 14, .66);

    font-size:
        .92rem;

    line-height: 1.6;
}


.page-about .about-workstyle__agreement-status {
    justify-self: end;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(11, 12, 14, .24);

    color:
        rgba(11, 12, 14, .72);

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

    font-size:
        .52rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .09em;

    text-align: center;

    text-transform: uppercase;
}


/* ==========================================================================
   PROJECT SIGNAL
   ========================================================================== */

.page-about .about-workstyle__signals {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    border-top:
        2px solid
        var(--cut-black);

    border-bottom:
        2px solid
        var(--cut-black);
}


.page-about .about-workstyle__signals-heading {
    min-height: 72px;

    padding:
        16px
        0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .20);
}


.page-about .about-workstyle__signals-heading span,
.page-about .about-workstyle__signals-heading strong {
    font-family:
        var(--font-mono);

    font-size:
        .63rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-about .about-workstyle__signals-heading span {
    color:
        rgba(11, 12, 14, .46);
}


.page-about .about-workstyle__signals-heading strong {
    color:
        var(--cut-black);
}


.page-about .about-workstyle__signals-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


.page-about .about-workstyle__signal {
    position: relative;

    min-height: 205px;

    padding:
        24px
        24px
        26px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-about .about-workstyle__signal:first-child {
    padding-left: 0;
}


.page-about .about-workstyle__signal:last-child {
    border-right: 0;
}


.page-about .about-workstyle__signal > span,
.page-about .about-workstyle__signal > small {
    font-family:
        var(--font-mono);

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.page-about .about-workstyle__signal > span {
    font-size: .56rem;
}


.page-about .about-workstyle__signal--good > span {
    color:
        #67785f;
}


.page-about .about-workstyle__signal--bad > span {
    color:
        #a63a3a;
}


.page-about .about-workstyle__signal > strong {
    margin:
        auto
        0
        18px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            1.65rem,
            2.6vw,
            2.9rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-about .about-workstyle__signal > small {
    color:
        rgba(11, 12, 14, .46);

    font-size: .49rem;
}


/* ==========================================================================
   SIGNAL INDICATORS
   ========================================================================== */

.page-about .about-workstyle__signal::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;
}


.page-about .about-workstyle__signal--good::after {
    background:
        var(--night-vision);
}


.page-about .about-workstyle__signal--bad::after {
    background:
        var(--rec-red);
}


/* ==========================================================================
   REVISION PHILOSOPHY
   ========================================================================== */

.page-about .about-workstyle__revisions {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    display: grid;

    grid-template-columns:
        minmax(190px, .4fr)
        minmax(190px, .4fr)
        minmax(340px, 1.2fr);

    gap:
        clamp(
            2rem,
            5vw,
            6rem
        );

    align-items: start;

    padding:
        30px
        0;

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-about .about-workstyle__revisions div span,
.page-about .about-workstyle__revisions div strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-about .about-workstyle__revisions div span {
    margin-bottom: 8px;

    color:
        rgba(11, 12, 14, .42);

    font-size: .55rem;

    letter-spacing: .13em;
}


.page-about .about-workstyle__revisions div strong {
    color:
        var(--cut-black);

    font-size: .68rem;

    letter-spacing: .10em;
}


.page-about .about-workstyle__revisions div:nth-child(2) strong {
    color:
        #a63a3a;
}


.page-about .about-workstyle__revisions > p {
    max-width: 620px;

    margin: 0;

    color:
        rgba(11, 12, 14, .70);

    font-size:
        .94rem;

    line-height: 1.64;
}


/* ==========================================================================
   CLOSING STATEMENT
   ========================================================================== */

.page-about .about-workstyle__closing {
    padding:
        clamp(
            5rem,
            8vw,
            8.5rem
        )
        0
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    display: grid;

    grid-template-columns:
        minmax(180px, .32fr)
        minmax(0, 1.68fr);

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );
}


.page-about .about-workstyle__closing > span {
    color:
        #8f6226;

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

    font-size:
        .66rem;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-workstyle__closing > strong {
    max-width: 1080px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            3rem,
            5.7vw,
            6.3rem
        );

    font-weight: 950;

    line-height: .84;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-about .about-workstyle__closing > strong span {
    display: block;

    color:
        rgba(11, 12, 14, .32);
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-workstyle__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    color:
        rgba(11, 12, 14, .42);

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

    font-size:
        .61rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-workstyle__end span:last-child {
    color:
        rgba(11, 12, 14, .70);
}


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

@media (max-width: 1040px) {

    .page-about .about-workstyle__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-about .about-workstyle__agreement-row {
        grid-template-columns:
            48px
            minmax(210px, .8fr)
            minmax(270px, 1.2fr)
            auto;

        gap: 1.5rem;
    }


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


    .page-about .about-workstyle__signal:nth-child(2) {
        border-right: 0;
    }


    .page-about .about-workstyle__signal:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(11, 12, 14, .18);
    }


    .page-about .about-workstyle__signal:nth-child(3) {
        padding-left: 0;
    }

}


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

@media (max-width: 760px) {

    .page-about .about-workstyle::before {
        top: 7rem;

        right: -1.5rem;

        font-size: 10rem;
    }


    .page-about .about-workstyle__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            5rem
            0
            24px;
    }


    .page-about .about-workstyle__header {
        display: block;

        padding-bottom: 3.75rem;
    }


    .page-about .about-workstyle__kicker {
        font-size: .58rem;
    }


    .page-about .about-workstyle__header h2 {
        font-size:
            clamp(
                3.7rem,
                16.2vw,
                5.3rem
            );

        line-height: .80;
    }


    .page-about .about-workstyle__title-outline {
        -webkit-text-stroke:
            1px
            rgba(11, 12, 14, .80);

        text-stroke:
            1px
            rgba(11, 12, 14, .80);
    }


    .page-about .about-workstyle__intro {
        max-width: 520px;

        margin-top: 30px;

        padding: 0;
    }


    .page-about .about-workstyle__intro > span {
        font-size: .55rem;
    }


    .page-about .about-workstyle__intro p {
        font-size: .92rem;

        line-height: 1.58;
    }


    /* ============================================================
       AGREEMENT
       ============================================================ */

    .page-about .about-workstyle__agreement {
        margin-top: 4rem;
    }


    .page-about .about-workstyle__agreement-heading {
        min-height: auto;

        padding:
            15px
            0;

        display: block;
    }


    .page-about .about-workstyle__agreement-heading span,
    .page-about .about-workstyle__agreement-heading strong {
        display: block;

        font-size: .53rem;
    }


    .page-about .about-workstyle__agreement-heading strong {
        margin-top: 7px;
    }


    .page-about .about-workstyle__agreement-row {
        min-height: auto;

        padding:
            22px
            0
            24px;

        grid-template-columns:
            38px
            1fr;

        gap:
            8px
            14px;

        align-items: start;
    }


    .page-about .about-workstyle__agreement-number {
        grid-row:
            1 / 4;

        padding-top: 3px;

        font-size: .56rem;
    }


    .page-about .about-workstyle__agreement-row small {
        font-size: .51rem;
    }


    .page-about .about-workstyle__agreement-row strong {
        font-size:
            clamp(
                1.8rem,
                8vw,
                2.4rem
            );
    }


    .page-about .about-workstyle__agreement-row > p {
        grid-column: 2;

        margin-top: 8px;

        font-size: .85rem;

        line-height: 1.54;
    }


    .page-about .about-workstyle__agreement-status {
        grid-column: 2;

        justify-self: start;

        margin-top: 8px;

        font-size: .48rem;
    }


    /* ============================================================
       SIGNAL BOARD
       ============================================================ */

    .page-about .about-workstyle__signals {
        margin-top: 4.5rem;
    }


    .page-about .about-workstyle__signals-heading {
        min-height: auto;

        padding:
            15px
            0;

        display: block;
    }


    .page-about .about-workstyle__signals-heading span,
    .page-about .about-workstyle__signals-heading strong {
        display: block;

        font-size: .52rem;
    }


    .page-about .about-workstyle__signals-heading strong {
        margin-top: 7px;
    }


    .page-about .about-workstyle__signals-grid {
        grid-template-columns: 1fr;
    }


    .page-about .about-workstyle__signal {
        min-height: 118px;

        padding:
            18px
            0
            20px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(11, 12, 14, .18);
    }


    .page-about .about-workstyle__signal:nth-child(2),
    .page-about .about-workstyle__signal:nth-child(-n+2) {
        border-bottom:
            1px solid
            rgba(11, 12, 14, .18);
    }


    .page-about .about-workstyle__signal:last-child {
        border-bottom: 0;
    }


    .page-about .about-workstyle__signal > strong {
        margin:
            20px
            0
            10px;

        font-size:
            clamp(
                1.7rem,
                7.6vw,
                2.3rem
            );
    }


    /* ============================================================
       REVISIONS
       ============================================================ */

    .page-about .about-workstyle__revisions {
        display: block;

        margin-top: 4.5rem;

        padding:
            24px
            0;
    }


    .page-about .about-workstyle__revisions > div {
        margin-bottom: 22px;
    }


    .page-about .about-workstyle__revisions > p {
        margin-top: 30px;

        font-size: .88rem;

        line-height: 1.56;
    }


    /* ============================================================
       CLOSING
       ============================================================ */

    .page-about .about-workstyle__closing {
        display: block;

        padding:
            4.75rem
            0
            4rem;
    }


    .page-about .about-workstyle__closing > span {
        display: block;

        margin-bottom: 20px;

        font-size: .55rem;
    }


    .page-about .about-workstyle__closing > strong {
        display: block;

        font-size:
            clamp(
                2.6rem,
                10.8vw,
                3.9rem
            );

        line-height: .87;
    }


    .page-about .about-workstyle__end {
        flex-direction: column;

        gap: 7px;

        font-size: .52rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-workstyle__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-about .about-workstyle__header h2 {
        font-size:
            clamp(
                3.2rem,
                15.5vw,
                4.5rem
            );
    }


    .page-about .about-workstyle__closing > strong {
        font-size:
            clamp(
                2.35rem,
                10.2vw,
                3.3rem
            );
    }

}

/* ==========================================================================
   WFIP_ABOUT_FINAL_CTA_STYLE_V1
   About Page — Final Project CTA
   ========================================================================== */

.page-about .about-final {
    position: relative;

    overflow: hidden;

    color:
        var(--paper-white);

    background:
        var(--cut-black);
}


.page-about .about-final::before {
    content: "START";

    position: absolute;

    top:
        clamp(
            7rem,
            11vw,
            12rem
        );

    right:
        -2vw;

    z-index: 0;

    color:
        rgba(242, 240, 234, .025);

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

    font-size:
        clamp(
            11rem,
            24vw,
            29rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.075em;

    pointer-events: none;

    user-select: none;
}


.page-about .about-final__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            5.5rem,
            8vw,
            8rem
        )
        0
        34px;
}


/* ==========================================================================
   TOP STATUS RAIL
   ========================================================================== */

.page-about .about-final__rail {
    display: grid;

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

    border-top:
        1px solid
        rgba(242, 240, 234, .20);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .20);
}


.page-about .about-final__rail > div {
    min-width: 0;

    padding:
        15px
        20px
        16px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-about .about-final__rail > div:first-child {
    padding-left: 0;
}


.page-about .about-final__rail > div:last-child {
    border-right: 0;
}


.page-about .about-final__rail span,
.page-about .about-final__rail strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-about .about-final__rail span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .40);

    font-size: .58rem;

    letter-spacing: .13em;
}


.page-about .about-final__rail strong {
    color:
        var(--paper-white);

    font-size: .68rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   PRIMARY CTA
   ========================================================================== */

.page-about .about-final__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(290px, .6fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding:
        clamp(
            5rem,
            8vw,
            8rem
        )
        0
        clamp(
            5rem,
            8vw,
            8rem
        );
}


.page-about .about-final__kicker {
    margin:
        0
        0
        20px;

    color:
        var(--night-vision);

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

    font-size: .66rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-about .about-final__heading h2 {
    max-width: 980px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            4.5rem,
            8.2vw,
            8.8rem
        );

    font-weight: 950;

    line-height: .79;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.page-about .about-final__heading h2 > span {
    display: block;
}


.page-about .about-final__title-outline {
    margin-top: 12px;

    color: transparent;

    -webkit-text-stroke:
        1.4px
        rgba(242, 240, 234, .76);

    text-stroke:
        1.4px
        rgba(242, 240, 234, .76);
}


.page-about .about-final__copy {
    max-width: 430px;

    padding-bottom: .55rem;
}


.page-about .about-final__copy > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--practical-light);

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

    font-size: .63rem;

    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.page-about .about-final__copy p {
    margin:
        0
        0
        18px;

    color:
        rgba(242, 240, 234, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.64;
}


.page-about .about-final__copy p:last-of-type {
    margin-bottom: 30px;
}


/* ==========================================================================
   CTA BUTTON
   ========================================================================== */

.page-about .about-final__cta {
    min-height: 64px;

    padding:
        0
        20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        rgba(242, 240, 234, .32);

    color:
        var(--paper-white);

    background:
        rgba(242, 240, 234, .04);

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

    font-size: .64rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.page-about .about-final__cta:hover {
    color:
        var(--cut-black);

    background:
        var(--paper-white);

    border-color:
        var(--paper-white);
}


.page-about .about-final__cta span:last-child {
    font-size: 1rem;
}


/* ==========================================================================
   INTAKE STRIP
   ========================================================================== */

.page-about .about-final__intake {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        2px solid
        var(--paper-white);

    border-bottom:
        2px solid
        var(--paper-white);
}


.page-about .about-final__intake > div {
    min-height: 150px;

    padding:
        22px
        24px
        24px;

    display: flex;

    flex-direction: column;

    border-right:
        1px solid
        rgba(242, 240, 234, .15);
}


.page-about .about-final__intake > div:first-child {
    padding-left: 0;
}


.page-about .about-final__intake > div:last-child {
    border-right: 0;
}


.page-about .about-final__intake > div > span {
    color:
        rgba(242, 240, 234, .28);

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

    font-size: .56rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-about .about-final__intake > div > small {
    margin:
        auto
        0
        9px;

    color:
        var(--night-vision);

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

    font-size: .54rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-final__intake > div > strong {
    color:
        var(--paper-white);

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

    font-size:
        clamp(
            1.5rem,
            2.3vw,
            2.5rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   FINAL STATUS
   ========================================================================== */

.page-about .about-final__status {
    margin-top:
        clamp(
            4.5rem,
            7vw,
            7rem
        );

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-about .about-final__status > div {
    padding:
        16px
        20px
        17px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-about .about-final__status > div:first-child {
    padding-left: 0;
}


.page-about .about-final__status > div:last-child {
    border-right: 0;
}


.page-about .about-final__status span,
.page-about .about-final__status strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-about .about-final__status span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .38);

    font-size: .54rem;

    letter-spacing: .13em;
}


.page-about .about-final__status strong {
    color:
        rgba(242, 240, 234, .78);

    font-size: .62rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-about .about-final__end {
    margin-top:
        clamp(
            4rem,
            6vw,
            6rem
        );

    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    color:
        rgba(242, 240, 234, .38);

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

    font-size: .60rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-about .about-final__end span:last-child {
    color:
        rgba(242, 240, 234, .68);
}


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

@media (max-width: 1040px) {

    .page-about .about-final__main {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(260px, .8fr);

        gap: 3rem;
    }


    .page-about .about-final__heading h2 {
        font-size:
            clamp(
                4.4rem,
                8vw,
                7rem
            );
    }

}


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

@media (max-width: 760px) {

    .page-about .about-final::before {
        top: 8rem;

        right: -2rem;

        font-size: 10rem;
    }


    .page-about .about-final__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            4.75rem
            0
            24px;
    }


    .page-about .about-final__rail {
        grid-template-columns: 1fr;
    }


    .page-about .about-final__rail > div {
        padding:
            11px
            0
            12px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-about .about-final__rail > div:last-child {
        border-bottom: 0;
    }


    .page-about .about-final__main {
        display: block;

        padding:
            4rem
            0
            4.5rem;
    }


    .page-about .about-final__kicker {
        font-size: .56rem;
    }


    .page-about .about-final__heading h2 {
        font-size:
            clamp(
                3.35rem,
                15.5vw,
                4.9rem
            );

        line-height: .81;
    }


    .page-about .about-final__title-outline {
        margin-top: 9px;

        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .78);

        text-stroke:
            1px
            rgba(242, 240, 234, .78);
    }


    .page-about .about-final__copy {
        max-width: 520px;

        margin-top: 32px;

        padding: 0;
    }


    .page-about .about-final__copy > span {
        font-size: .55rem;
    }


    .page-about .about-final__copy p {
        font-size: .91rem;

        line-height: 1.58;
    }


    .page-about .about-final__cta {
        min-height: 58px;

        font-size: .57rem;
    }


    .page-about .about-final__intake {
        grid-template-columns: 1fr;
    }


    .page-about .about-final__intake > div {
        min-height: auto;

        padding:
            17px
            0
            19px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .14);
    }


    .page-about .about-final__intake > div:last-child {
        border-bottom: 0;
    }


    .page-about .about-final__intake > div > small {
        margin:
            18px
            0
            7px;
    }


    .page-about .about-final__intake > div > strong {
        font-size:
            clamp(
                1.7rem,
                8vw,
                2.3rem
            );
    }


    .page-about .about-final__status {
        margin-top: 4rem;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-about .about-final__status > div {
        padding:
            13px
            12px
            14px;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-about .about-final__status > div:nth-child(2) {
        border-right: 0;
    }


    .page-about .about-final__status > div:nth-child(3),
    .page-about .about-final__status > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-about .about-final__status > div:first-child,
    .page-about .about-final__status > div:nth-child(3) {
        padding-left: 0;
    }


    .page-about .about-final__end {
        margin-top: 3.75rem;

        flex-direction: column;

        gap: 7px;

        font-size: .51rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-about .about-final__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-about .about-final__heading h2 {
        font-size:
            clamp(
                3rem,
                14.7vw,
                4.2rem
            );
    }


    .page-about .about-final__status strong {
        font-size: .56rem;
    }

}

/* ==========================================================================
   WFIP_CONTACT_HERO_STYLE_V1
   Contact Page — Project Intake Hero
   ========================================================================== */

.page-contact .contact-hero {
    position: relative;

    overflow: hidden;

    min-height: 100svh;

    color:
        var(--paper-white);

    background:
        var(--cut-black);
}


.page-contact .contact-hero::before {
    content: "INTAKE";

    position: absolute;

    top:
        clamp(
            7rem,
            10vw,
            11rem
        );

    right:
        -2vw;

    z-index: 0;

    color:
        rgba(242, 240, 234, .025);

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

    font-size:
        clamp(
            10rem,
            22vw,
            26rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.075em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


.page-contact .contact-hero__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    min-height: 100svh;

    margin: 0 auto;

    padding:
        126px
        0
        34px;

    display: grid;

    grid-template-rows:
        auto
        auto
        auto
        auto
        auto;
}


/* ==========================================================================
   TOP INTAKE RAIL
   ========================================================================== */

.page-contact .contact-hero__rail {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(242, 240, 234, .20);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .20);
}


.page-contact .contact-hero__rail > div {
    min-width: 0;

    padding:
        14px
        18px
        15px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-contact .contact-hero__rail > div:first-child {
    padding-left: 0;
}


.page-contact .contact-hero__rail > div:last-child {
    border-right: 0;
}


.page-contact .contact-hero__rail span,
.page-contact .contact-hero__rail strong {
    display: block;

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

    font-weight: 900;

    line-height: 1.2;

    text-transform: uppercase;
}


.page-contact .contact-hero__rail span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .40);

    font-size: .58rem;

    letter-spacing: .13em;
}


.page-contact .contact-hero__rail strong {
    color:
        var(--paper-white);

    font-size: .68rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   PRIMARY HERO
   ========================================================================== */

.page-contact .contact-hero__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(280px, .58fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding:
        clamp(
            4.5rem,
            8vw,
            7.5rem
        )
        0
        clamp(
            4rem,
            7vw,
            6.5rem
        );
}


.page-contact .contact-hero__kicker {
    margin:
        0
        0
        20px;

    color:
        var(--night-vision);

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

    font-size: .66rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-contact .contact-hero__heading h1 {
    max-width: 980px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            4.8rem,
            9vw,
            9.6rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.068em;

    text-transform: uppercase;
}


.page-contact .contact-hero__heading h1 > span {
    display: block;
}


.page-contact .contact-hero__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, .78);

    text-stroke:
        1.5px
        rgba(242, 240, 234, .78);
}


.page-contact .contact-hero__intro {
    max-width: 430px;

    padding-bottom: .55rem;
}


.page-contact .contact-hero__intro > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--practical-light);

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

    font-size: .63rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-hero__intro p {
    margin:
        0
        0
        18px;

    color:
        var(--paper-white);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.1rem
        );

    line-height: 1.64;
}


.page-contact .contact-hero__intro p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   INITIAL BRIEF PROMPTS
   ========================================================================== */

.page-contact .contact-hero__prompts {
    display: grid;

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

    border-top:
        2px solid
        var(--paper-white);

    border-bottom:
        2px solid
        var(--paper-white);
}


.page-contact .contact-hero__prompts > div {
    position: relative;

    min-height: 220px;

    padding:
        22px
        24px
        25px;

    display: flex;

    flex-direction: column;

    border-right:
        1px solid
        rgba(242, 240, 234, .15);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .15);
}


.page-contact .contact-hero__prompts > div:nth-child(3n) {
    border-right: 0;
}


.page-contact .contact-hero__prompts > div:nth-last-child(-n+3) {
    border-bottom: 0;
}


.page-contact .contact-hero__prompts > div:first-child,
.page-contact .contact-hero__prompts > div:nth-child(4) {
    padding-left: 0;
}


.page-contact .contact-hero__prompts > div > span {
    color:
        rgba(242, 240, 234, .28);

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

    font-size: .56rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-contact .contact-hero__prompts > div > small {
    display: block;

    margin:
        auto
        0
        10px;

    color:
        var(--night-vision);

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

    font-size: .54rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-contact .contact-hero__prompts > div > strong {
    display: block;

    margin-bottom: 16px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            1.7rem,
            2.8vw,
            3rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-contact .contact-hero__prompts > div > p {
    max-width: 390px;

    margin: 0;

    color:
        rgba(242, 240, 234, .58);

    font-size: .84rem;

    line-height: 1.55;
}


/* ==========================================================================
   SMALL VISUAL SIGNALS
   ========================================================================== */

.page-contact .contact-hero__prompts > div::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    opacity: .45;
}


.page-contact .contact-hero__prompts > div:nth-child(1)::after,
.page-contact .contact-hero__prompts > div:nth-child(4)::after {
    background:
        var(--rec-red);
}


.page-contact .contact-hero__prompts > div:nth-child(2)::after,
.page-contact .contact-hero__prompts > div:nth-child(5)::after {
    background:
        var(--night-vision);
}


.page-contact .contact-hero__prompts > div:nth-child(3)::after,
.page-contact .contact-hero__prompts > div:nth-child(6)::after {
    background:
        var(--waveform-blue);
}


/* ==========================================================================
   EXPECTATION STRIP
   ========================================================================== */

.page-contact .contact-hero__expectations {
    margin-top:
        clamp(
            3.5rem,
            5vw,
            5rem
        );

    display: grid;

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

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-contact .contact-hero__expectations > div {
    padding:
        16px
        20px
        17px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-contact .contact-hero__expectations > div:first-child {
    padding-left: 0;
}


.page-contact .contact-hero__expectations > div:last-child {
    border-right: 0;
}


.page-contact .contact-hero__expectations span,
.page-contact .contact-hero__expectations strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-hero__expectations span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .38);

    font-size: .54rem;

    letter-spacing: .13em;
}


.page-contact .contact-hero__expectations strong {
    color:
        rgba(242, 240, 234, .78);

    font-size: .62rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-contact .contact-hero__end {
    margin-top:
        clamp(
            3rem,
            5vw,
            4.5rem
        );

    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    color:
        rgba(242, 240, 234, .38);

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

    font-size: .60rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-contact .contact-hero__end span:last-child {
    color:
        rgba(242, 240, 234, .68);
}


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

@media (max-width: 1040px) {

    .page-contact .contact-hero__main {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-contact .contact-hero__heading h1 {
        font-size:
            clamp(
                4.4rem,
                8vw,
                7rem
            );
    }


    .page-contact .contact-hero__prompts > div {
        min-height: 210px;
    }

}


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

@media (max-width: 760px) {

    .page-contact .contact-hero {
        min-height: auto;
    }


    .page-contact .contact-hero::before {
        top: 8rem;

        right: -2rem;

        font-size: 9rem;
    }


    .page-contact .contact-hero__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        min-height: auto;

        padding:
            110px
            0
            24px;
    }


    .page-contact .contact-hero__rail {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-contact .contact-hero__rail > div {
        min-height: 62px;

        padding:
            11px
            12px
            12px;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .12);
    }


    .page-contact .contact-hero__rail > div:nth-child(2) {
        border-right: 0;
    }


    .page-contact .contact-hero__rail > div:nth-child(3),
    .page-contact .contact-hero__rail > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-contact .contact-hero__rail > div:first-child,
    .page-contact .contact-hero__rail > div:nth-child(3) {
        padding-left: 0;
    }


    .page-contact .contact-hero__rail span {
        font-size: .52rem;
    }


    .page-contact .contact-hero__rail strong {
        font-size: .60rem;
    }


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

    .page-contact .contact-hero__main {
        display: block;

        padding:
            3.75rem
            0
            4rem;
    }


    .page-contact .contact-hero__kicker {
        font-size: .57rem;
    }


    .page-contact .contact-hero__heading h1 {
        font-size:
            clamp(
                3.45rem,
                16vw,
                5rem
            );

        line-height: .80;
    }


    .page-contact .contact-hero__title-outline {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .80);

        text-stroke:
            1px
            rgba(242, 240, 234, .80);
    }


    .page-contact .contact-hero__intro {
        max-width: 520px;

        margin-top: 30px;

        padding: 0;
    }


    .page-contact .contact-hero__intro > span {
        font-size: .55rem;
    }


    .page-contact .contact-hero__intro p {
        font-size: .91rem;

        line-height: 1.58;
    }


    /* ============================================================
       PROMPTS
       ============================================================ */

    .page-contact .contact-hero__prompts {
        grid-template-columns: 1fr;
    }


    .page-contact .contact-hero__prompts > div {
        min-height: auto;

        padding:
            20px
            0
            22px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .14);
    }


    .page-contact .contact-hero__prompts > div:nth-child(3n),
    .page-contact .contact-hero__prompts > div:nth-last-child(-n+3) {
        border-bottom:
            1px solid
            rgba(242, 240, 234, .14);
    }


    .page-contact .contact-hero__prompts > div:last-child {
        border-bottom: 0;
    }


    .page-contact .contact-hero__prompts > div > small {
        margin:
            20px
            0
            8px;
    }


    .page-contact .contact-hero__prompts > div > strong {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.5rem
            );
    }


    .page-contact .contact-hero__prompts > div > p {
        max-width: 520px;

        font-size: .84rem;
    }


    /* ============================================================
       EXPECTATIONS
       ============================================================ */

    .page-contact .contact-hero__expectations {
        margin-top: 3.5rem;

        grid-template-columns: 1fr;
    }


    .page-contact .contact-hero__expectations > div {
        padding:
            12px
            0
            13px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-contact .contact-hero__expectations > div:last-child {
        border-bottom: 0;
    }


    .page-contact .contact-hero__end {
        margin-top: 3.25rem;

        flex-direction: column;

        gap: 7px;

        font-size: .51rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-contact .contact-hero__inner {
        width:
            calc(100% - 1.5rem);

        padding-top: 104px;
    }


    .page-contact .contact-hero__heading h1 {
        font-size:
            clamp(
                3.05rem,
                15vw,
                4.35rem
            );
    }

}

/* ==========================================================================
   WFIP_CONTACT_BRIEF_STYLE_V1
   Contact Page — Project Brief Form
   ========================================================================== */

.page-contact .contact-brief {
    position: relative;

    overflow: hidden;

    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-contact .contact-brief::before {
    content: "BRIEF";

    position: absolute;

    top:
        clamp(
            8rem,
            13vw,
            13rem
        );

    right:
        -2vw;

    z-index: 0;

    color:
        rgba(11, 12, 14, .025);

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

    font-size:
        clamp(
            11rem,
            24vw,
            28rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.075em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


.page-contact .contact-brief__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            5.5rem,
            8vw,
            8rem
        )
        0
        clamp(
            5rem,
            8vw,
            8rem
        );
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.page-contact .contact-brief__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, .65fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4rem,
            6vw,
            6rem
        );
}


.page-contact .contact-brief__kicker {
    margin:
        0
        0
        20px;

    color:
        #596b53;

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

    font-size: .66rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-contact .contact-brief__heading h2 {
    max-width: 1050px;

    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            4.3rem,
            8.2vw,
            8.4rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.page-contact .contact-brief__heading h2 > span {
    display: block;
}


.page-contact .contact-brief__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(11, 12, 14, .68);

    text-stroke:
        1.5px
        rgba(11, 12, 14, .68);
}


.page-contact .contact-brief__header-copy {
    max-width: 430px;

    padding-bottom: .45rem;
}


.page-contact .contact-brief__header-copy > span {
    display: block;

    margin-bottom: 16px;

    color:
        #9a681c;

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

    font-size: .62rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-brief__header-copy p {
    margin: 0;

    color:
        rgba(11, 12, 14, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.08rem
        );

    line-height: 1.62;
}


/* ==========================================================================
   FORM FRAME
   ========================================================================== */

.page-contact .contact-brief__form {
    border-top:
        2px solid
        var(--cut-black);

    border-bottom:
        2px solid
        var(--cut-black);
}


/* ==========================================================================
   FORM STATUS RAIL
   ========================================================================== */

.page-contact .contact-brief__form-rail {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-bottom:
        1px solid
        rgba(11, 12, 14, .25);
}


.page-contact .contact-brief__form-rail > div {
    min-width: 0;

    padding:
        14px
        18px
        15px;

    border-right:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-contact .contact-brief__form-rail > div:first-child {
    padding-left: 0;
}


.page-contact .contact-brief__form-rail > div:last-child {
    border-right: 0;
}


.page-contact .contact-brief__form-rail span,
.page-contact .contact-brief__form-rail strong {
    display: block;

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

    font-weight: 900;

    line-height: 1.2;

    text-transform: uppercase;
}


.page-contact .contact-brief__form-rail span {
    margin-bottom: 6px;

    color:
        rgba(11, 12, 14, .42);

    font-size: .55rem;

    letter-spacing: .13em;
}


.page-contact .contact-brief__form-rail strong {
    color:
        var(--cut-black);

    font-size: .65rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   FIELDSETS / GROUPS
   ========================================================================== */

.page-contact .contact-brief__group {
    min-width: 0;

    margin: 0;

    padding:
        clamp(
            3.2rem,
            5vw,
            5rem
        )
        0;

    border: 0;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-contact .contact-brief__group legend {
    width: 100%;

    margin: 0;

    padding:
        0
        0
        clamp(
            2rem,
            3vw,
            3rem
        );

    display: grid;

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

    gap: 22px;

    align-items: start;
}


.page-contact .contact-brief__group legend > span {
    color:
        rgba(11, 12, 14, .38);

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

    font-size: .60rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .12em;
}


.page-contact .contact-brief__group legend > strong {
    color:
        var(--cut-black);

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

    font-size:
        clamp(
            2rem,
            3.6vw,
            4rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   FORM GRIDS
   ========================================================================== */

.page-contact .contact-brief__grid {
    display: grid;

    gap: 0;

    border-top:
        1px solid
        rgba(11, 12, 14, .20);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .20);
}


.page-contact .contact-brief__grid--two {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.page-contact .contact-brief__grid--two > .contact-field {
    border-right:
        1px solid
        rgba(11, 12, 14, .18);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-contact .contact-brief__grid--two > .contact-field:nth-child(2n) {
    border-right: 0;
}


.page-contact .contact-brief__grid--two > .contact-field:nth-last-child(-n+2) {
    border-bottom: 0;
}


/* ==========================================================================
   STANDARD FIELDS
   ========================================================================== */

.page-contact .contact-field {
    position: relative;

    min-width: 0;

    padding:
        19px
        22px
        21px;
}


.page-contact .contact-brief__grid > .contact-field:first-child,
.page-contact .contact-brief__grid > .contact-field:nth-child(3) {
    padding-left: 0;
}


.page-contact .contact-field > label {
    display: block;

    margin-bottom: 11px;

    color:
        rgba(11, 12, 14, .55);

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

    font-size: .57rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.page-contact .contact-field input,
.page-contact .contact-field select,
.page-contact .contact-field textarea {
    width: 100%;

    min-width: 0;

    margin: 0;

    padding:
        0;

    border: 0;

    border-radius: 0;

    outline: none;

    color:
        var(--cut-black);

    background:
        transparent;

    box-shadow: none;

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

    font-size:
        clamp(
            1.35rem,
            2.05vw,
            2.15rem
        );

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -.025em;

    text-transform: uppercase;

    appearance: none;

    -webkit-appearance: none;
}


.page-contact .contact-field input::placeholder,
.page-contact .contact-field textarea::placeholder {
    color:
        rgba(11, 12, 14, .28);

    opacity: 1;
}


.page-contact .contact-field input:focus,
.page-contact .contact-field select:focus,
.page-contact .contact-field textarea:focus {
    color:
        #263c83;
}


.page-contact .contact-field:focus-within::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    z-index: 2;

    height: 2px;

    background:
        var(--waveform-blue);
}


/* ==========================================================================
   SELECTS
   ========================================================================== */

.page-contact .contact-field:has(select)::before {
    content: "↓";

    position: absolute;

    right: 22px;

    bottom: 25px;

    z-index: 1;

    color:
        rgba(11, 12, 14, .48);

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

    font-size: .85rem;

    font-weight: 900;

    pointer-events: none;
}


.page-contact .contact-field select {
    padding-right: 40px;

    cursor: pointer;
}


.page-contact .contact-field select option {
    color:
        var(--cut-black);

    background:
        var(--paper-white);

    font-family:
        Arial,
        sans-serif;

    font-size: 1rem;

    font-weight: 700;
}


/* ==========================================================================
   DATE FIELD
   ========================================================================== */

.page-contact .contact-field input[type="date"] {
    min-height: 34px;
}


.page-contact .contact-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;

    opacity: .5;
}


/* ==========================================================================
   TEXTAREAS
   ========================================================================== */

.page-contact .contact-field--textarea {
    margin-top:
        clamp(
            1.5rem,
            2vw,
            2.25rem
        );

    padding:
        22px
        0
        20px;

    border-top:
        1px solid
        rgba(11, 12, 14, .20);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .20);
}


.page-contact .contact-field--textarea textarea {
    min-height: 150px;

    resize: vertical;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.15rem
        );

    font-weight: 500;

    line-height: 1.58;

    letter-spacing: 0;

    text-transform: none;
}


.page-contact .contact-field__note {
    display: block;

    margin-top: 16px;

    color:
        rgba(11, 12, 14, .42);

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

    font-size: .52rem;

    font-weight: 900;

    line-height: 1.5;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* ==========================================================================
   DELIVERABLE CHECKBOX GRID
   ========================================================================== */

.page-contact .contact-checks {
    display: grid;

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

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-contact .contact-check {
    position: relative;

    min-height: 150px;

    padding:
        22px
        24px;

    display: grid;

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

    gap: 18px;

    align-items: center;

    border-right:
        1px solid
        rgba(11, 12, 14, .18);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .18);

    cursor: pointer;
}


.page-contact .contact-check:nth-child(3n) {
    border-right: 0;
}


.page-contact .contact-check:nth-last-child(-n+3) {
    border-bottom: 0;
}


.page-contact .contact-check:first-child,
.page-contact .contact-check:nth-child(4) {
    padding-left: 0;
}


.page-contact .contact-check input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.page-contact .contact-check__box {
    width: 24px;
    height: 24px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(11, 12, 14, .56);

    transition:
        border-color .18s ease,
        background-color .18s ease;
}


.page-contact .contact-check__box::after {
    content: "×";

    color:
        var(--paper-white);

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

    font-size: .95rem;

    font-weight: 900;

    line-height: 1;

    opacity: 0;

    transform:
        scale(.5);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.page-contact .contact-check input:checked + .contact-check__box {
    border-color:
        var(--cut-black);

    background:
        var(--cut-black);
}


.page-contact .contact-check input:checked + .contact-check__box::after {
    opacity: 1;

    transform:
        scale(1);
}


.page-contact .contact-check input:focus-visible + .contact-check__box {
    outline:
        2px solid
        var(--waveform-blue);

    outline-offset: 3px;
}


.page-contact .contact-check__copy strong,
.page-contact .contact-check__copy small {
    display: block;

    text-transform: uppercase;
}


.page-contact .contact-check__copy strong {
    margin-bottom: 8px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            1.5rem,
            2.2vw,
            2.2rem
        );

    font-weight: 950;

    line-height: .9;

    letter-spacing: -.025em;
}


.page-contact .contact-check__copy small {
    color:
        rgba(11, 12, 14, .44);

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

    font-size: .51rem;

    font-weight: 900;

    line-height: 1.4;

    letter-spacing: .09em;
}


/* ==========================================================================
   BUDGET NOTE
   ========================================================================== */

.page-contact .contact-brief__scope-note {
    margin-top:
        clamp(
            2rem,
            3vw,
            3rem
        );

    display: grid;

    grid-template-columns:
        170px
        minmax(0, 620px);

    gap:
        clamp(
            2rem,
            5vw,
            5rem
        );

    padding-top: 21px;

    border-top:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-contact .contact-brief__scope-note span {
    color:
        #9a681c;

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

    font-size: .56rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-contact .contact-brief__scope-note p {
    margin: 0;

    color:
        rgba(11, 12, 14, .65);

    font-size: .92rem;

    line-height: 1.58;
}


/* ==========================================================================
   SUBMIT AREA
   ========================================================================== */

.page-contact .contact-brief__submit {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .7fr);

    grid-template-areas:
        "copy consent"
        "copy button";

    gap:
        22px
        clamp(
            3rem,
            8vw,
            8rem
        );

    align-items: end;

    padding:
        clamp(
            4rem,
            6vw,
            6rem
        )
        0;
}


.page-contact .contact-brief__submit-copy {
    grid-area: copy;

    max-width: 650px;
}


.page-contact .contact-brief__submit-copy > span {
    display: block;

    margin-bottom: 13px;

    color:
        #596b53;

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-brief__submit-copy > strong {
    display: block;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            2.6rem,
            4.6vw,
            5rem
        );

    font-weight: 950;

    line-height: .86;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.page-contact .contact-brief__submit-copy p {
    max-width: 520px;

    margin:
        20px
        0
        0;

    color:
        rgba(11, 12, 14, .62);

    font-size: .94rem;

    line-height: 1.58;
}


/* ==========================================================================
   CONSENT
   ========================================================================== */

.page-contact .contact-consent {
    grid-area: consent;

    position: relative;

    display: grid;

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

    gap: 14px;

    align-items: start;

    color:
        rgba(11, 12, 14, .66);

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

    font-size: .55rem;

    font-weight: 900;

    line-height: 1.45;

    letter-spacing: .08em;

    text-transform: uppercase;

    cursor: pointer;
}


.page-contact .contact-consent input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.page-contact .contact-consent__box {
    width: 21px;
    height: 21px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(11, 12, 14, .54);
}


.page-contact .contact-consent__box::after {
    content: "×";

    color:
        var(--paper-white);

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

    font-size: .85rem;

    font-weight: 900;

    line-height: 1;

    opacity: 0;
}


.page-contact .contact-consent input:checked + .contact-consent__box {
    border-color:
        var(--cut-black);

    background:
        var(--cut-black);
}


.page-contact .contact-consent input:checked + .contact-consent__box::after {
    opacity: 1;
}


.page-contact .contact-consent input:focus-visible + .contact-consent__box {
    outline:
        2px solid
        var(--waveform-blue);

    outline-offset: 3px;
}


/* ==========================================================================
   SEND BUTTON
   ========================================================================== */

.page-contact .contact-brief__button {
    grid-area: button;

    width: 100%;

    min-height: 72px;

    padding:
        0
        22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        var(--cut-black);

    border-radius: 0;

    color:
        var(--paper-white);

    background:
        var(--cut-black);

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

    font-size: .66rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .18s ease,
        background-color .18s ease;
}


.page-contact .contact-brief__button > span:last-child {
    font-size: 1rem;
}


.page-contact .contact-brief__button:hover,
.page-contact .contact-brief__button:focus-visible {
    color:
        var(--cut-black);

    background:
        transparent;
}


.page-contact .contact-brief__button:focus-visible {
    outline:
        2px solid
        var(--waveform-blue);

    outline-offset: 3px;
}


/* ==========================================================================
   FORM END RAIL
   ========================================================================== */

.page-contact .contact-brief__end {
    padding:
        17px
        0;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    color:
        rgba(11, 12, 14, .42);

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

    font-size: .57rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.page-contact .contact-brief__end span:last-child {
    color:
        rgba(11, 12, 14, .68);
}


/* ==========================================================================
   INVALID / VALID FIELD FEEDBACK
   ========================================================================== */

.page-contact .contact-field input:user-invalid,
.page-contact .contact-field select:user-invalid,
.page-contact .contact-field textarea:user-invalid {
    color:
        #9a2e2e;
}


.page-contact .contact-field:has(
    input:user-invalid,
    select:user-invalid,
    textarea:user-invalid
)::after {
    background:
        var(--rec-red);
}


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

@media (max-width: 1040px) {

    .page-contact .contact-brief__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-contact .contact-brief__heading h2 {
        font-size:
            clamp(
                4rem,
                7vw,
                6.6rem
            );
    }


    .page-contact .contact-check {
        padding:
            20px
            18px;
    }


    .page-contact .contact-check:first-child,
    .page-contact .contact-check:nth-child(4) {
        padding-left: 0;
    }


    .page-contact .contact-brief__submit {
        gap:
            22px
            4rem;
    }

}


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

@media (max-width: 760px) {

    .page-contact .contact-brief::before {
        top: 10rem;

        right: -2rem;

        font-size: 9rem;
    }


    .page-contact .contact-brief__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            4.75rem
            0
            5rem;
    }


    /* ============================================================
       HEADER
       ============================================================ */

    .page-contact .contact-brief__header {
        display: block;

        padding-bottom: 3.5rem;
    }


    .page-contact .contact-brief__heading h2 {
        font-size:
            clamp(
                3.25rem,
                14.5vw,
                4.8rem
            );

        line-height: .80;
    }


    .page-contact .contact-brief__title-outline {
        -webkit-text-stroke:
            1px
            rgba(11, 12, 14, .70);

        text-stroke:
            1px
            rgba(11, 12, 14, .70);
    }


    .page-contact .contact-brief__header-copy {
        max-width: 520px;

        margin-top: 28px;

        padding: 0;
    }


    /* ============================================================
       FORM RAIL
       ============================================================ */

    .page-contact .contact-brief__form-rail {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-contact .contact-brief__form-rail > div {
        min-height: 62px;

        padding:
            11px
            12px
            12px;

        border-bottom:
            1px solid
            rgba(11, 12, 14, .15);
    }


    .page-contact .contact-brief__form-rail > div:nth-child(2) {
        border-right: 0;
    }


    .page-contact .contact-brief__form-rail > div:nth-child(3),
    .page-contact .contact-brief__form-rail > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-contact .contact-brief__form-rail > div:first-child,
    .page-contact .contact-brief__form-rail > div:nth-child(3) {
        padding-left: 0;
    }


    /* ============================================================
       GROUP HEADINGS
       ============================================================ */

    .page-contact .contact-brief__group {
        padding:
            3.25rem
            0;
    }


    .page-contact .contact-brief__group legend {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 12px;

        padding-bottom: 2rem;
    }


    .page-contact .contact-brief__group legend > strong {
        font-size:
            clamp(
                1.9rem,
                8vw,
                2.7rem
            );
    }


    /* ============================================================
       INPUT GRIDS
       ============================================================ */

    .page-contact .contact-brief__grid--two {
        grid-template-columns: 1fr;
    }


    .page-contact .contact-brief__grid--two > .contact-field {
        padding:
            18px
            0
            19px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(11, 12, 14, .18);
    }


    .page-contact .contact-brief__grid--two > .contact-field:nth-last-child(-n+2) {
        border-bottom:
            1px solid
            rgba(11, 12, 14, .18);
    }


    .page-contact .contact-brief__grid--two > .contact-field:last-child {
        border-bottom: 0;
    }


    .page-contact .contact-field input,
    .page-contact .contact-field select {
        font-size:
            clamp(
                1.25rem,
                6vw,
                1.75rem
            );
    }


    .page-contact .contact-field:has(select)::before {
        right: 0;
    }


    .page-contact .contact-field--textarea {
        padding:
            20px
            0;
    }


    .page-contact .contact-field--textarea textarea {
        min-height: 165px;

        font-size: .95rem;
    }


    /* ============================================================
       DELIVERABLES
       ============================================================ */

    .page-contact .contact-checks {
        grid-template-columns: 1fr;
    }


    .page-contact .contact-check {
        min-height: auto;

        padding:
            19px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(11, 12, 14, .17);
    }


    .page-contact .contact-check:nth-last-child(-n+3) {
        border-bottom:
            1px solid
            rgba(11, 12, 14, .17);
    }


    .page-contact .contact-check:last-child {
        border-bottom: 0;
    }


    .page-contact .contact-check__copy strong {
        font-size:
            clamp(
                1.5rem,
                7vw,
                2rem
            );
    }


    /* ============================================================
       SCOPE NOTE
       ============================================================ */

    .page-contact .contact-brief__scope-note {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 2rem;
    }


    /* ============================================================
       SUBMIT
       ============================================================ */

    .page-contact .contact-brief__submit {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            3.75rem
            0;
    }


    .page-contact .contact-brief__submit-copy {
        margin-bottom: 2.5rem;
    }


    .page-contact .contact-brief__submit-copy > strong {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );
    }


    .page-contact .contact-consent {
        margin-bottom: 22px;
    }


    .page-contact .contact-brief__button {
        min-height: 66px;
    }


    .page-contact .contact-brief__end {
        flex-direction: column;

        gap: 7px;

        font-size: .50rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-contact .contact-brief__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-contact .contact-brief__heading h2 {
        font-size:
            clamp(
                2.95rem,
                14vw,
                4rem
            );
    }


    .page-contact .contact-brief__form-rail span {
        font-size: .49rem;
    }


    .page-contact .contact-brief__form-rail strong {
        font-size: .56rem;
    }


    .page-contact .contact-brief__group legend {
        grid-template-columns:
            34px
            minmax(0, 1fr);
    }


    .page-contact .contact-field > label {
        font-size: .52rem;
    }


    .page-contact .contact-check {
        grid-template-columns:
            22px
            minmax(0, 1fr);

        gap: 14px;
    }


    .page-contact .contact-check__box {
        width: 21px;
        height: 21px;
    }

}

/* ==========================================================================
   WFIP_CONTACT_BRIEF_DENSITY_FIX_V2
   Normalize Fieldset / Legend Spacing + Tighten Desktop Rhythm
   ========================================================================== */


/*
|--------------------------------------------------------------------------
| FIELDSET LEGEND NORMALIZATION
|--------------------------------------------------------------------------
|
| Browsers treat <legend> as a special fieldset element.
| Floating it restores predictable document flow and removes the large
| blank bands appearing between section headings and their content.
|
*/

.page-contact .contact-brief__group legend {
    float: left;

    width: 100%;

    margin: 0;

    padding:
        0
        0
        clamp(
            1.35rem,
            2vw,
            1.9rem
        );
}


.page-contact .contact-brief__group legend + * {
    clear: both;
}


/*
|--------------------------------------------------------------------------
| DESKTOP / TABLET SECTION RHYTHM
|--------------------------------------------------------------------------
*/

@media (min-width: 761px) {

    .page-contact .contact-brief__group {
        padding:
            clamp(
                2.7rem,
                3.8vw,
                3.8rem
            )
            0;
    }


    .page-contact .contact-brief__group legend {
        grid-template-columns:
            72px
            minmax(0, 1fr);

        gap: 22px;
    }


    .page-contact .contact-brief__group legend > strong {
        font-size:
            clamp(
                2rem,
                3.3vw,
                3.65rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | TEXTAREA GROUPS
    |--------------------------------------------------------------------------
    */

    .page-contact .contact-field--textarea {
        margin-top:
            clamp(
                1rem,
                1.4vw,
                1.4rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | DELIVERABLE GRID
    |--------------------------------------------------------------------------
    */

    .page-contact .contact-check {
        min-height: 138px;
    }


    /*
    |--------------------------------------------------------------------------
    | SCOPE NOTE
    |--------------------------------------------------------------------------
    */

    .page-contact .contact-brief__scope-note {
        margin-top:
            clamp(
                1.5rem,
                2vw,
                2rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE LEGEND FLOW
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .page-contact .contact-brief__group legend {
        float: left;

        width: 100%;

        padding-bottom: 1.5rem;
    }


    .page-contact .contact-brief__group legend + * {
        clear: both;
    }

}

/* ==========================================================================
   WFIP_CONTACT_NEXT_STYLE_V1
   Contact Page — What Happens Next
   ========================================================================== */

.page-contact .contact-next {
    position: relative;

    overflow: hidden;

    color:
        var(--paper-white);

    background:
        var(--edit-bay);
}


.page-contact .contact-next::before {
    content: "NEXT";

    position: absolute;

    top:
        clamp(
            7rem,
            10vw,
            10rem
        );

    right:
        -1vw;

    z-index: 0;

    color:
        rgba(242, 240, 234, .025);

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

    font-size:
        clamp(
            11rem,
            23vw,
            27rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.07em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


.page-contact .contact-next__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            5.5rem,
            8vw,
            8rem
        )
        0
        clamp(
            4.5rem,
            7vw,
            7rem
        );
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.page-contact .contact-next__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4rem,
            6vw,
            6rem
        );
}


.page-contact .contact-next__kicker {
    margin:
        0
        0
        20px;

    color:
        var(--night-vision);

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

    font-size: .65rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-contact .contact-next__heading h2 {
    max-width: 1050px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            4.4rem,
            8.3vw,
            8.5rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.page-contact .contact-next__heading h2 > span {
    display: block;
}


.page-contact .contact-next__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, .76);

    text-stroke:
        1.5px
        rgba(242, 240, 234, .76);
}


.page-contact .contact-next__intro {
    max-width: 430px;

    padding-bottom: .45rem;
}


.page-contact .contact-next__intro > span {
    display: block;

    margin-bottom: 16px;

    color:
        var(--practical-light);

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

    font-size: .61rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-next__intro p {
    margin:
        0
        0
        17px;

    color:
        rgba(242, 240, 234, .78);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.08rem
        );

    line-height: 1.62;
}


.page-contact .contact-next__intro p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   STATUS RAIL
   ========================================================================== */

.page-contact .contact-next__rail {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(242, 240, 234, .22);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .22);
}


.page-contact .contact-next__rail > div {
    min-width: 0;

    padding:
        15px
        18px
        16px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-contact .contact-next__rail > div:first-child {
    padding-left: 0;
}


.page-contact .contact-next__rail > div:last-child {
    border-right: 0;
}


.page-contact .contact-next__rail span,
.page-contact .contact-next__rail strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-next__rail span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .38);

    font-size: .54rem;

    letter-spacing: .13em;
}


.page-contact .contact-next__rail strong {
    color:
        var(--paper-white);

    font-size: .65rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   RESPONSE SEQUENCE
   ========================================================================== */

.page-contact .contact-next__steps {
    margin-top:
        clamp(
            4rem,
            6vw,
            6rem
        );

    border-top:
        2px solid
        var(--paper-white);
}


.page-contact .contact-next__step {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        160px
        minmax(0, 1fr)
        180px;

    gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    align-items: center;

    min-height:
        180px;

    padding:
        30px
        0;

    border-bottom:
        1px solid
        rgba(242, 240, 234, .20);
}


.page-contact .contact-next__step::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width:
        0;

    height:
        2px;

    transition:
        width .28s ease;
}


.page-contact .contact-next__step:nth-child(1)::after {
    background:
        var(--rec-red);
}


.page-contact .contact-next__step:nth-child(2)::after {
    background:
        var(--night-vision);
}


.page-contact .contact-next__step:nth-child(3)::after {
    background:
        var(--waveform-blue);
}


.page-contact .contact-next__step:nth-child(4)::after {
    background:
        var(--practical-light);
}


.page-contact .contact-next__step:hover::after {
    width: 100%;
}


.page-contact .contact-next__step-number {
    align-self: start;

    padding-top: 5px;

    color:
        rgba(242, 240, 234, .28);

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .13em;
}


.page-contact .contact-next__step-meta span,
.page-contact .contact-next__step-meta strong,
.page-contact .contact-next__step-status span,
.page-contact .contact-next__step-status strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-next__step-meta span,
.page-contact .contact-next__step-status span {
    margin-bottom: 7px;

    color:
        rgba(242, 240, 234, .36);

    font-size: .52rem;

    letter-spacing: .12em;
}


.page-contact .contact-next__step-meta strong {
    color:
        var(--night-vision);

    font-size: .61rem;

    letter-spacing: .08em;
}


.page-contact .contact-next__step-copy {
    max-width: 700px;
}


.page-contact .contact-next__step-copy h3 {
    margin:
        0
        0
        13px;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.8rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-contact .contact-next__step-copy p {
    max-width: 620px;

    margin: 0;

    color:
        rgba(242, 240, 234, .58);

    font-size: .90rem;

    line-height: 1.56;
}


.page-contact .contact-next__step-status {
    align-self: end;

    padding-bottom: 5px;
}


.page-contact .contact-next__step-status strong {
    color:
        rgba(242, 240, 234, .78);

    font-size: .58rem;

    line-height: 1.35;

    letter-spacing: .075em;
}


/* ==========================================================================
   EXPECTATION BOARD
   ========================================================================== */

.page-contact .contact-next__expectation {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    display: grid;

    grid-template-columns:
        minmax(300px, .85fr)
        minmax(0, 1.15fr);

    gap:
        clamp(
            4rem,
            8vw,
            9rem
        );

    padding:
        clamp(
            3.25rem,
            5vw,
            5rem
        )
        0;

    border-top:
        1px solid
        rgba(242, 240, 234, .22);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .22);
}


.page-contact .contact-next__expectation-heading > span {
    display: block;

    margin-bottom: 16px;

    color:
        var(--practical-light);

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-next__expectation-heading h3 {
    max-width: 620px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            2.7rem,
            4.7vw,
            5rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.page-contact .contact-next__expectation-heading em {
    display: block;

    color:
        transparent;

    font-style: normal;

    -webkit-text-stroke:
        1px
        rgba(242, 240, 234, .68);

    text-stroke:
        1px
        rgba(242, 240, 234, .68);
}


.page-contact .contact-next__expectation-grid {
    display: grid;

    grid-template-columns: 1fr;
}


.page-contact .contact-next__expectation-grid > div {
    padding:
        19px
        0
        20px;

    border-bottom:
        1px solid
        rgba(242, 240, 234, .15);
}


.page-contact .contact-next__expectation-grid > div:first-child {
    border-top:
        1px solid
        rgba(242, 240, 234, .15);
}


.page-contact .contact-next__expectation-grid span,
.page-contact .contact-next__expectation-grid strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-next__expectation-grid span {
    margin-bottom: 8px;

    color:
        rgba(242, 240, 234, .35);

    font-size: .52rem;

    letter-spacing: .13em;
}


.page-contact .contact-next__expectation-grid strong {
    color:
        var(--paper-white);

    font-size:
        clamp(
            .72rem,
            1vw,
            .86rem
        );

    letter-spacing: .08em;
}


/* ==========================================================================
   CLOSING
   ========================================================================== */

.page-contact .contact-next__closing {
    padding:
        clamp(
            5rem,
            8vw,
            8rem
        )
        0
        clamp(
            4rem,
            6vw,
            6rem
        );

    text-align: center;
}


.page-contact .contact-next__closing > span {
    display: block;

    margin-bottom: 17px;

    color:
        var(--night-vision);

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-next__closing > strong {
    display: block;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            3.2rem,
            6.8vw,
            7.2rem
        );

    font-weight: 950;

    line-height: .82;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-contact .contact-next__closing p {
    margin:
        14px
        0
        0;

    color:
        rgba(242, 240, 234, .48);

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

    font-size:
        clamp(
            2rem,
            4vw,
            4.3rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-contact .contact-next__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, .20);

    color:
        rgba(242, 240, 234, .40);

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

    font-size: .56rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.page-contact .contact-next__end span:last-child {
    color:
        rgba(242, 240, 234, .70);
}


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

@media (max-width: 1040px) {

    .page-contact .contact-next__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-contact .contact-next__heading h2 {
        font-size:
            clamp(
                4rem,
                7vw,
                6.7rem
            );
    }


    .page-contact .contact-next__step {
        grid-template-columns:
            50px
            125px
            minmax(0, 1fr)
            150px;

        gap: 1.5rem;
    }


    .page-contact .contact-next__step-copy h3 {
        font-size:
            clamp(
                1.9rem,
                3vw,
                3rem
            );
    }

}


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

@media (max-width: 760px) {

    .page-contact .contact-next::before {
        top: 8rem;

        right: -2rem;

        font-size: 9rem;
    }


    .page-contact .contact-next__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            4.75rem
            0
            4.5rem;
    }


    /* ============================================================
       HEADER
       ============================================================ */

    .page-contact .contact-next__header {
        display: block;

        padding-bottom: 3.5rem;
    }


    .page-contact .contact-next__heading h2 {
        font-size:
            clamp(
                3.25rem,
                14vw,
                4.8rem
            );

        line-height: .80;
    }


    .page-contact .contact-next__title-outline {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .78);

        text-stroke:
            1px
            rgba(242, 240, 234, .78);
    }


    .page-contact .contact-next__intro {
        max-width: 520px;

        margin-top: 28px;

        padding: 0;
    }


    /* ============================================================
       STATUS RAIL
       ============================================================ */

    .page-contact .contact-next__rail {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-contact .contact-next__rail > div {
        min-height: 62px;

        padding:
            11px
            12px
            12px;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-contact .contact-next__rail > div:nth-child(2) {
        border-right: 0;
    }


    .page-contact .contact-next__rail > div:nth-child(3),
    .page-contact .contact-next__rail > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-contact .contact-next__rail > div:first-child,
    .page-contact .contact-next__rail > div:nth-child(3) {
        padding-left: 0;
    }


    /* ============================================================
       STEPS
       ============================================================ */

    .page-contact .contact-next__steps {
        margin-top: 3.75rem;
    }


    .page-contact .contact-next__step {
        min-height: auto;

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

        grid-template-areas:
            "number meta"
            "number copy"
            "number status";

        gap:
            12px
            16px;

        align-items: start;

        padding:
            25px
            0;
    }


    .page-contact .contact-next__step-number {
        grid-area: number;
    }


    .page-contact .contact-next__step-meta {
        grid-area: meta;
    }


    .page-contact .contact-next__step-copy {
        grid-area: copy;

        margin-top: 8px;
    }


    .page-contact .contact-next__step-status {
        grid-area: status;

        margin-top: 9px;

        padding: 0;
    }


    .page-contact .contact-next__step-copy h3 {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.6rem
            );
    }


    .page-contact .contact-next__step-copy p {
        font-size: .84rem;
    }


    /* ============================================================
       EXPECTATION BOARD
       ============================================================ */

    .page-contact .contact-next__expectation {
        margin-top: 4.5rem;

        grid-template-columns: 1fr;

        gap: 3rem;

        padding:
            3.5rem
            0;
    }


    .page-contact .contact-next__expectation-heading h3 {
        font-size:
            clamp(
                2.6rem,
                11vw,
                3.8rem
            );
    }


    /* ============================================================
       CLOSING
       ============================================================ */

    .page-contact .contact-next__closing {
        padding:
            4.5rem
            0
            4rem;
    }


    .page-contact .contact-next__closing > strong {
        font-size:
            clamp(
                3rem,
                13vw,
                4.8rem
            );
    }


    .page-contact .contact-next__closing p {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.8rem
            );
    }


    .page-contact .contact-next__end {
        flex-direction: column;

        gap: 7px;

        font-size: .50rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-contact .contact-next__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-contact .contact-next__heading h2 {
        font-size:
            clamp(
                2.95rem,
                13.5vw,
                4rem
            );
    }


    .page-contact .contact-next__rail span {
        font-size: .49rem;
    }


    .page-contact .contact-next__rail strong {
        font-size: .56rem;
    }

}

/* ==========================================================================
   WFIP_CONTACT_AVAILABILITY_STYLE_V1
   Contact Page — Availability + Response Expectations
   ========================================================================== */

.page-contact .contact-availability {
    position: relative;

    overflow: hidden;

    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-contact .contact-availability::before {
    content: "OPEN";

    position: absolute;

    top:
        clamp(
            8rem,
            11vw,
            12rem
        );

    right:
        -2vw;

    z-index: 0;

    color:
        rgba(11, 12, 14, .025);

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

    font-size:
        clamp(
            11rem,
            23vw,
            27rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.07em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


.page-contact .contact-availability__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            5.5rem,
            8vw,
            8rem
        )
        0
        clamp(
            4.75rem,
            7vw,
            7rem
        );
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.page-contact .contact-availability__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding-bottom:
        clamp(
            4rem,
            6vw,
            6rem
        );
}


.page-contact .contact-availability__kicker {
    margin:
        0
        0
        20px;

    color:
        #596b53;

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

    font-size: .65rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-contact .contact-availability__heading h2 {
    max-width: 1080px;

    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            4.2rem,
            8vw,
            8.2rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.page-contact .contact-availability__heading h2 > span {
    display: block;
}


.page-contact .contact-availability__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(11, 12, 14, .68);

    text-stroke:
        1.5px
        rgba(11, 12, 14, .68);
}


.page-contact .contact-availability__intro {
    max-width: 430px;

    padding-bottom: .45rem;
}


.page-contact .contact-availability__intro > span {
    display: block;

    margin-bottom: 16px;

    color:
        #9a681c;

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

    font-size: .61rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-availability__intro p {
    margin: 0;

    color:
        rgba(11, 12, 14, .72);

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.08rem
        );

    line-height: 1.62;
}


/* ==========================================================================
   STATUS RAIL
   ========================================================================== */

.page-contact .contact-availability__rail {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(11, 12, 14, .24);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .24);
}


.page-contact .contact-availability__rail > div {
    min-width: 0;

    padding:
        15px
        18px
        16px;

    border-right:
        1px solid
        rgba(11, 12, 14, .16);
}


.page-contact .contact-availability__rail > div:first-child {
    padding-left: 0;
}


.page-contact .contact-availability__rail > div:last-child {
    border-right: 0;
}


.page-contact .contact-availability__rail span,
.page-contact .contact-availability__rail strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-availability__rail span {
    margin-bottom: 6px;

    color:
        rgba(11, 12, 14, .40);

    font-size: .54rem;

    letter-spacing: .13em;
}


.page-contact .contact-availability__rail strong {
    color:
        var(--cut-black);

    font-size: .65rem;

    letter-spacing: .08em;
}


/* ==========================================================================
   AVAILABILITY BOARD
   ========================================================================== */

.page-contact .contact-availability__board {
    margin-top:
        clamp(
            4rem,
            6vw,
            6rem
        );

    border-top:
        2px solid
        var(--cut-black);
}


.page-contact .contact-availability__item {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        160px
        minmax(0, 1fr)
        180px;

    gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    align-items: center;

    min-height:
        180px;

    padding:
        30px
        0;

    border-bottom:
        1px solid
        rgba(11, 12, 14, .20);
}


.page-contact .contact-availability__item::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 70px;
    height: 2px;
}


.page-contact .contact-availability__item:nth-child(1)::after {
    background:
        var(--rec-red);
}


.page-contact .contact-availability__item:nth-child(2)::after {
    background:
        var(--night-vision);
}


.page-contact .contact-availability__item:nth-child(3)::after {
    background:
        var(--waveform-blue);
}


.page-contact .contact-availability__item:nth-child(4)::after {
    background:
        var(--practical-light);
}


.page-contact .contact-availability__number {
    align-self: start;

    padding-top: 5px;

    color:
        rgba(11, 12, 14, .30);

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .13em;
}


.page-contact .contact-availability__label span,
.page-contact .contact-availability__label strong,
.page-contact .contact-availability__status span,
.page-contact .contact-availability__status strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-availability__label span,
.page-contact .contact-availability__status span {
    margin-bottom: 7px;

    color:
        rgba(11, 12, 14, .40);

    font-size: .52rem;

    letter-spacing: .12em;
}


.page-contact .contact-availability__label strong {
    color:
        #596b53;

    font-size: .61rem;

    letter-spacing: .08em;
}


.page-contact .contact-availability__copy {
    max-width: 720px;
}


.page-contact .contact-availability__copy h3 {
    margin:
        0
        0
        13px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            2rem,
            3.4vw,
            3.7rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.page-contact .contact-availability__copy p {
    max-width: 640px;

    margin: 0;

    color:
        rgba(11, 12, 14, .60);

    font-size: .90rem;

    line-height: 1.56;
}


.page-contact .contact-availability__status {
    align-self: end;

    padding-bottom: 5px;
}


.page-contact .contact-availability__status strong {
    color:
        rgba(11, 12, 14, .75);

    font-size: .58rem;

    line-height: 1.35;

    letter-spacing: .075em;
}


/* ==========================================================================
   FASTER RESPONSE PANEL
   ========================================================================== */

.page-contact .contact-availability__faster {
    margin-top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    display: grid;

    grid-template-columns:
        minmax(300px, .82fr)
        minmax(0, 1.18fr);

    gap:
        clamp(
            4rem,
            8vw,
            9rem
        );

    padding:
        clamp(
            3.5rem,
            5vw,
            5rem
        )
        0;

    border-top:
        1px solid
        rgba(11, 12, 14, .22);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-contact .contact-availability__faster-heading > span {
    display: block;

    margin-bottom: 16px;

    color:
        #9a681c;

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-availability__faster-heading h3 {
    max-width: 620px;

    margin: 0;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            2.7rem,
            4.6vw,
            4.9rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.04em;

    text-transform: uppercase;
}


.page-contact .contact-availability__faster-heading em {
    display: block;

    color: transparent;

    font-style: normal;

    -webkit-text-stroke:
        1px
        rgba(11, 12, 14, .62);

    text-stroke:
        1px
        rgba(11, 12, 14, .62);
}


.page-contact .contact-availability__faster-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(11, 12, 14, .18);

    border-left:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-contact .contact-availability__faster-grid > div {
    min-height: 150px;

    padding:
        20px
        22px;

    border-right:
        1px solid
        rgba(11, 12, 14, .18);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .18);
}


.page-contact .contact-availability__faster-grid span {
    display: block;

    margin-bottom:
        clamp(
            1.5rem,
            3vw,
            2.75rem
        );

    color:
        rgba(11, 12, 14, .34);

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

    font-size: .52rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.page-contact .contact-availability__faster-grid strong {
    display: block;

    margin-bottom: 9px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            1.45rem,
            2.2vw,
            2.25rem
        );

    font-weight: 950;

    line-height: .9;

    letter-spacing: -.025em;

    text-transform: uppercase;
}


.page-contact .contact-availability__faster-grid p {
    max-width: 320px;

    margin: 0;

    color:
        rgba(11, 12, 14, .54);

    font-size: .82rem;

    line-height: 1.52;
}


/* ==========================================================================
   REALITY CHECK
   ========================================================================== */

.page-contact .contact-availability__reality {
    display: grid;

    grid-template-columns:
        minmax(280px, .8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

    align-items: end;

    margin-top:
        clamp(
            4rem,
            6vw,
            6rem
        );

    padding:
        26px
        0
        28px;

    border-top:
        2px solid
        var(--cut-black);

    border-bottom:
        1px solid
        rgba(11, 12, 14, .22);
}


.page-contact .contact-availability__reality span {
    display: block;

    margin-bottom: 11px;

    color:
        #596b53;

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

    font-size: .55rem;

    font-weight: 900;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.page-contact .contact-availability__reality strong {
    display: block;

    max-width: 620px;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            1.9rem,
            3.2vw,
            3.4rem
        );

    font-weight: 950;

    line-height: .9;

    letter-spacing: -.03em;

    text-transform: uppercase;
}


.page-contact .contact-availability__reality > p {
    max-width: 680px;

    margin: 0;

    color:
        rgba(11, 12, 14, .62);

    font-size: .92rem;

    line-height: 1.58;
}


/* ==========================================================================
   CLOSING
   ========================================================================== */

.page-contact .contact-availability__closing {
    padding:
        clamp(
            5rem,
            8vw,
            8rem
        )
        0
        clamp(
            4rem,
            6vw,
            6rem
        );

    text-align: center;
}


.page-contact .contact-availability__closing > span {
    display: block;

    margin-bottom: 17px;

    color:
        #596b53;

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

    font-size: .58rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-availability__closing > strong {
    display: block;

    color:
        var(--cut-black);

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

    font-size:
        clamp(
            3.2rem,
            6.8vw,
            7.1rem
        );

    font-weight: 950;

    line-height: .82;

    letter-spacing: -.055em;

    text-transform: uppercase;
}


.page-contact .contact-availability__closing p {
    margin:
        14px
        0
        0;

    color:
        rgba(11, 12, 14, .42);

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

    font-size:
        clamp(
            2rem,
            4vw,
            4.2rem
        );

    font-weight: 950;

    line-height: .88;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-contact .contact-availability__end {
    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(11, 12, 14, .20);

    color:
        rgba(11, 12, 14, .40);

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

    font-size: .56rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.page-contact .contact-availability__end span:last-child {
    color:
        rgba(11, 12, 14, .68);
}


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

@media (max-width: 1040px) {

    .page-contact .contact-availability__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, .8fr);

        gap: 3rem;
    }


    .page-contact .contact-availability__heading h2 {
        font-size:
            clamp(
                4rem,
                7vw,
                6.6rem
            );
    }


    .page-contact .contact-availability__item {
        grid-template-columns:
            50px
            125px
            minmax(0, 1fr)
            150px;

        gap: 1.5rem;
    }


    .page-contact .contact-availability__copy h3 {
        font-size:
            clamp(
                1.9rem,
                3vw,
                3rem
            );
    }

}


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

@media (max-width: 760px) {

    .page-contact .contact-availability::before {
        top: 8rem;

        right: -2rem;

        font-size: 9rem;
    }


    .page-contact .contact-availability__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            4.75rem
            0
            4.5rem;
    }


    /* ============================================================
       HEADER
       ============================================================ */

    .page-contact .contact-availability__header {
        display: block;

        padding-bottom: 3.5rem;
    }


    .page-contact .contact-availability__heading h2 {
        font-size:
            clamp(
                3.15rem,
                13.8vw,
                4.7rem
            );

        line-height: .80;
    }


    .page-contact .contact-availability__title-outline {
        -webkit-text-stroke:
            1px
            rgba(11, 12, 14, .70);

        text-stroke:
            1px
            rgba(11, 12, 14, .70);
    }


    .page-contact .contact-availability__intro {
        max-width: 520px;

        margin-top: 28px;

        padding: 0;
    }


    /* ============================================================
       STATUS RAIL
       ============================================================ */

    .page-contact .contact-availability__rail {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-contact .contact-availability__rail > div {
        min-height: 62px;

        padding:
            11px
            12px
            12px;

        border-bottom:
            1px solid
            rgba(11, 12, 14, .14);
    }


    .page-contact .contact-availability__rail > div:nth-child(2) {
        border-right: 0;
    }


    .page-contact .contact-availability__rail > div:nth-child(3),
    .page-contact .contact-availability__rail > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-contact .contact-availability__rail > div:first-child,
    .page-contact .contact-availability__rail > div:nth-child(3) {
        padding-left: 0;
    }


    /* ============================================================
       AVAILABILITY BOARD
       ============================================================ */

    .page-contact .contact-availability__board {
        margin-top: 3.75rem;
    }


    .page-contact .contact-availability__item {
        min-height: auto;

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

        grid-template-areas:
            "number label"
            "number copy"
            "number status";

        gap:
            12px
            16px;

        align-items: start;

        padding:
            25px
            0;
    }


    .page-contact .contact-availability__number {
        grid-area: number;
    }


    .page-contact .contact-availability__label {
        grid-area: label;
    }


    .page-contact .contact-availability__copy {
        grid-area: copy;

        margin-top: 8px;
    }


    .page-contact .contact-availability__status {
        grid-area: status;

        margin-top: 9px;

        padding: 0;
    }


    .page-contact .contact-availability__copy h3 {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.6rem
            );
    }


    .page-contact .contact-availability__copy p {
        font-size: .84rem;
    }


    /* ============================================================
       FASTER RESPONSE
       ============================================================ */

    .page-contact .contact-availability__faster {
        margin-top: 4.5rem;

        grid-template-columns: 1fr;

        gap: 3rem;

        padding:
            3.5rem
            0;
    }


    .page-contact .contact-availability__faster-heading h3 {
        font-size:
            clamp(
                2.55rem,
                11vw,
                3.7rem
            );
    }


    .page-contact .contact-availability__faster-grid {
        grid-template-columns: 1fr;
    }


    .page-contact .contact-availability__faster-grid > div {
        min-height: auto;

        padding:
            19px
            20px;
    }


    .page-contact .contact-availability__faster-grid span {
        margin-bottom: 1.5rem;
    }


    /* ============================================================
       REALITY CHECK
       ============================================================ */

    .page-contact .contact-availability__reality {
        grid-template-columns: 1fr;

        gap: 24px;

        margin-top: 4rem;
    }


    .page-contact .contact-availability__reality strong {
        font-size:
            clamp(
                1.9rem,
                8vw,
                2.6rem
            );
    }


    /* ============================================================
       CLOSING
       ============================================================ */

    .page-contact .contact-availability__closing {
        padding:
            4.5rem
            0
            4rem;
    }


    .page-contact .contact-availability__closing > strong {
        font-size:
            clamp(
                2.9rem,
                12.5vw,
                4.6rem
            );
    }


    .page-contact .contact-availability__closing p {
        font-size:
            clamp(
                1.8rem,
                8vw,
                2.8rem
            );
    }


    .page-contact .contact-availability__end {
        flex-direction: column;

        gap: 7px;

        font-size: .50rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-contact .contact-availability__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-contact .contact-availability__heading h2 {
        font-size:
            clamp(
                2.85rem,
                13vw,
                3.9rem
            );
    }


    .page-contact .contact-availability__rail span {
        font-size: .49rem;
    }


    .page-contact .contact-availability__rail strong {
        font-size: .56rem;
    }

}

/* ==========================================================================
   WFIP_CONTACT_FINAL_NOTE_STYLE_V1
   Contact Page — Final Note
   ========================================================================== */

.page-contact .contact-final {
    position: relative;

    overflow: hidden;

    color:
        var(--paper-white);

    background:
        var(--cut-black);
}


.page-contact .contact-final::before {
    content: "SEND";

    position: absolute;

    top:
        clamp(
            5rem,
            8vw,
            8rem
        );

    right:
        -1vw;

    z-index: 0;

    color:
        rgba(242, 240, 234, .025);

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

    font-size:
        clamp(
            10rem,
            21vw,
            24rem
        );

    font-weight: 950;

    line-height: .72;

    letter-spacing: -.07em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;
}


.page-contact .contact-final__inner {
    position: relative;

    z-index: 1;

    width:
        min(
            var(--page-width),
            calc(100% - 3rem)
        );

    margin: 0 auto;

    padding:
        clamp(
            4.5rem,
            7vw,
            6.5rem
        )
        0
        30px;
}


/* ==========================================================================
   TOP STATUS RAIL
   ========================================================================== */

.page-contact .contact-final__rail {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(242, 240, 234, .20);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .20);
}


.page-contact .contact-final__rail > div {
    min-width: 0;

    padding:
        14px
        18px
        15px;

    border-right:
        1px solid
        rgba(242, 240, 234, .14);
}


.page-contact .contact-final__rail > div:first-child {
    padding-left: 0;
}


.page-contact .contact-final__rail > div:last-child {
    border-right: 0;
}


.page-contact .contact-final__rail span,
.page-contact .contact-final__rail strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-final__rail span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .38);

    font-size: .54rem;

    letter-spacing: .13em;
}


.page-contact .contact-final__rail strong {
    color:
        var(--paper-white);

    font-size: .64rem;

    line-height: 1.25;

    letter-spacing: .075em;
}


/* ==========================================================================
   MAIN FINAL MESSAGE
   ========================================================================== */

.page-contact .contact-final__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.38fr)
        minmax(280px, .62fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: end;

    padding:
        clamp(
            4rem,
            7vw,
            6.5rem
        )
        0;
}


.page-contact .contact-final__kicker {
    margin:
        0
        0
        18px;

    color:
        var(--night-vision);

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

    font-size: .63rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.page-contact .contact-final__heading h2 {
    max-width: 1040px;

    margin: 0;

    color:
        var(--paper-white);

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

    font-size:
        clamp(
            4rem,
            7.7vw,
            7.9rem
        );

    font-weight: 950;

    line-height: .78;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.page-contact .contact-final__heading h2 > span {
    display: block;
}


.page-contact .contact-final__title-outline {
    color: transparent;

    -webkit-text-stroke:
        1.5px
        rgba(242, 240, 234, .76);

    text-stroke:
        1.5px
        rgba(242, 240, 234, .76);
}


.page-contact .contact-final__copy {
    max-width: 430px;
}


.page-contact .contact-final__copy > span {
    display: block;

    margin-bottom: 16px;

    color:
        var(--practical-light);

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

    font-size: .60rem;

    font-weight: 900;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.page-contact .contact-final__copy p {
    margin:
        0
        0
        17px;

    color:
        rgba(242, 240, 234, .72);

    font-size:
        clamp(
            .96rem,
            1.05vw,
            1.06rem
        );

    line-height: 1.62;
}


.page-contact .contact-final__copy p:last-of-type {
    margin-bottom:
        28px;
}


/* ==========================================================================
   PROJECT BRIEF CTA
   ========================================================================== */

.page-contact .contact-final__button {
    min-height: 66px;

    padding:
        0
        20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    border:
        1px solid
        rgba(242, 240, 234, .72);

    color:
        var(--paper-white);

    background:
        transparent;

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

    font-size: .62rem;

    font-weight: 900;

    line-height: 1;

    letter-spacing: .09em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color .18s ease,
        background-color .18s ease;
}


.page-contact .contact-final__button > span:last-child {
    font-size: .95rem;
}


.page-contact .contact-final__button:hover,
.page-contact .contact-final__button:focus-visible {
    color:
        var(--cut-black);

    background:
        var(--paper-white);
}


.page-contact .contact-final__button:focus-visible {
    outline:
        2px solid
        var(--waveform-blue);

    outline-offset: 3px;
}


/* ==========================================================================
   FINAL STATUS GRID
   ========================================================================== */

.page-contact .contact-final__status {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    border-bottom:
        1px solid
        rgba(242, 240, 234, .18);
}


.page-contact .contact-final__status > div {
    min-width: 0;

    padding:
        16px
        18px
        17px;

    border-right:
        1px solid
        rgba(242, 240, 234, .13);
}


.page-contact .contact-final__status > div:first-child {
    padding-left: 0;
}


.page-contact .contact-final__status > div:last-child {
    border-right: 0;
}


.page-contact .contact-final__status span,
.page-contact .contact-final__status strong {
    display: block;

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

    font-weight: 900;

    text-transform: uppercase;
}


.page-contact .contact-final__status span {
    margin-bottom: 6px;

    color:
        rgba(242, 240, 234, .34);

    font-size: .52rem;

    letter-spacing: .13em;
}


.page-contact .contact-final__status strong {
    color:
        rgba(242, 240, 234, .76);

    font-size: .59rem;

    line-height: 1.35;

    letter-spacing: .07em;
}


/* ==========================================================================
   END RAIL
   ========================================================================== */

.page-contact .contact-final__end {
    margin-top:
        clamp(
            3rem,
            5vw,
            4.5rem
        );

    padding-top: 17px;

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    border-top:
        1px solid
        rgba(242, 240, 234, .18);

    color:
        rgba(242, 240, 234, .38);

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

    font-size: .55rem;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.page-contact .contact-final__end a {
    color:
        rgba(242, 240, 234, .68);

    text-decoration: none;
}


.page-contact .contact-final__end a:hover,
.page-contact .contact-final__end a:focus-visible {
    color:
        var(--paper-white);
}


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

@media (max-width: 1040px) {

    .page-contact .contact-final__main {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(250px, .85fr);

        gap: 3rem;
    }


    .page-contact .contact-final__heading h2 {
        font-size:
            clamp(
                3.9rem,
                6.8vw,
                6.4rem
            );
    }

}


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

@media (max-width: 760px) {

    .page-contact .contact-final::before {
        top: 7rem;

        right: -2rem;

        font-size: 8.5rem;
    }


    .page-contact .contact-final__inner {
        width:
            min(
                100% - 2rem,
                var(--page-width)
            );

        padding:
            4rem
            0
            24px;
    }


    /* ============================================================
       TOP RAIL
       ============================================================ */

    .page-contact .contact-final__rail {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-contact .contact-final__rail > div {
        min-height: 62px;

        padding:
            11px
            12px
            12px;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-contact .contact-final__rail > div:nth-child(2) {
        border-right: 0;
    }


    .page-contact .contact-final__rail > div:nth-child(3),
    .page-contact .contact-final__rail > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-contact .contact-final__rail > div:first-child,
    .page-contact .contact-final__rail > div:nth-child(3) {
        padding-left: 0;
    }


    /* ============================================================
       MAIN
       ============================================================ */

    .page-contact .contact-final__main {
        display: block;

        padding:
            3.75rem
            0
            3.75rem;
    }


    .page-contact .contact-final__heading h2 {
        font-size:
            clamp(
                3rem,
                13.7vw,
                4.65rem
            );

        line-height: .80;
    }


    .page-contact .contact-final__title-outline {
        -webkit-text-stroke:
            1px
            rgba(242, 240, 234, .78);

        text-stroke:
            1px
            rgba(242, 240, 234, .78);
    }


    .page-contact .contact-final__copy {
        max-width: 520px;

        margin-top: 30px;
    }


    .page-contact .contact-final__button {
        width: 100%;

        min-height: 64px;
    }


    /* ============================================================
       FINAL STATUS
       ============================================================ */

    .page-contact .contact-final__status {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .page-contact .contact-final__status > div {
        min-height: 70px;

        padding:
            13px
            12px
            14px;

        border-bottom:
            1px solid
            rgba(242, 240, 234, .13);
    }


    .page-contact .contact-final__status > div:nth-child(2) {
        border-right: 0;
    }


    .page-contact .contact-final__status > div:nth-child(3),
    .page-contact .contact-final__status > div:nth-child(4) {
        border-bottom: 0;
    }


    .page-contact .contact-final__status > div:first-child,
    .page-contact .contact-final__status > div:nth-child(3) {
        padding-left: 0;
    }


    .page-contact .contact-final__end {
        margin-top: 3rem;

        flex-direction: column;

        gap: 7px;

        font-size: .50rem;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-contact .contact-final__inner {
        width:
            calc(100% - 1.5rem);
    }


    .page-contact .contact-final__heading h2 {
        font-size:
            clamp(
                2.7rem,
                12.8vw,
                3.8rem
            );
    }


    .page-contact .contact-final__rail span,
    .page-contact .contact-final__status span {
        font-size: .48rem;
    }


    .page-contact .contact-final__rail strong,
    .page-contact .contact-final__status strong {
        font-size: .55rem;
    }

}

/* ==========================================================================
   WFIP_CONTACT_FORM_FEEDBACK_STYLE_V1
   Contact Page — Project Brief Submission Feedback
   ========================================================================== */


/* ==========================================================================
   BASE CONTAINER
   ========================================================================== */

.page-contact .contact-brief__feedback {
    margin: 0 0 clamp(2.5rem, 4vw, 4rem);
    border-top: 2px solid var(--cut-black);
    border-bottom: 2px solid var(--cut-black);
}

.page-contact .contact-brief__feedback[hidden] {
    display: none !important;
}


/* ==========================================================================
   INDIVIDUAL STATE
   ========================================================================== */

.page-contact .contact-brief__feedback-state {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 210px;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: 185px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(11, 12, 14, .18);
}

.page-contact .contact-brief__feedback-state:last-child {
    border-bottom: 0;
}

.page-contact .contact-brief__feedback-state[hidden] {
    display: none !important;
}


/* ==========================================================================
   LEFT STATUS CODE
   ========================================================================== */

.page-contact .contact-brief__feedback-code {
    align-self: start;
    padding-top: 4px;
    color: rgba(11, 12, 14, .42);
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ==========================================================================
   MAIN FEEDBACK COPY
   ========================================================================== */

.page-contact .contact-brief__feedback-copy {
    max-width: 760px;
}

.page-contact .contact-brief__feedback-copy > span {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: .56rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-contact .contact-brief__feedback-copy > strong {
    display: block;
    margin-bottom: 14px;
    color: var(--cut-black);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 950;
    line-height: .86;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.page-contact .contact-brief__feedback-copy p {
    max-width: 650px;
    margin: 0;
    color: rgba(11, 12, 14, .62);
    font-size: .92rem;
    line-height: 1.58;
}


/* ==========================================================================
   RIGHT STATUS
   ========================================================================== */

.page-contact .contact-brief__feedback-status {
    align-self: end;
    padding-bottom: 4px;
}

.page-contact .contact-brief__feedback-status span,
.page-contact .contact-brief__feedback-status strong {
    display: block;
    font-family: var(--font-mono);
    font-weight: 900;
    text-transform: uppercase;
}

.page-contact .contact-brief__feedback-status span {
    margin-bottom: 7px;
    color: rgba(11, 12, 14, .40);
    font-size: .52rem;
    letter-spacing: .12em;
}

.page-contact .contact-brief__feedback-status strong {
    color: rgba(11, 12, 14, .78);
    font-size: .58rem;
    line-height: 1.4;
    letter-spacing: .07em;
}


/* ==========================================================================
   SENT
   ========================================================================== */

.page-contact .contact-brief__feedback-state[data-brief-state="sent"] {
    box-shadow: inset 5px 0 0 var(--night-vision);
}

.page-contact .contact-brief__feedback-state[data-brief-state="sent"] .contact-brief__feedback-code,
.page-contact .contact-brief__feedback-state[data-brief-state="sent"] .contact-brief__feedback-copy > span {
    color: #596b53;
}


/* ==========================================================================
   ERROR
   ========================================================================== */

.page-contact .contact-brief__feedback-state[data-brief-state="error"] {
    box-shadow: inset 5px 0 0 var(--rec-red);
}

.page-contact .contact-brief__feedback-state[data-brief-state="error"] .contact-brief__feedback-code,
.page-contact .contact-brief__feedback-state[data-brief-state="error"] .contact-brief__feedback-copy > span {
    color: #9a2e2e;
}


/* ==========================================================================
   INVALID
   ========================================================================== */

.page-contact .contact-brief__feedback-state[data-brief-state="invalid"] {
    box-shadow: inset 5px 0 0 var(--practical-light);
}

.page-contact .contact-brief__feedback-state[data-brief-state="invalid"] .contact-brief__feedback-code,
.page-contact .contact-brief__feedback-state[data-brief-state="invalid"] .contact-brief__feedback-copy > span {
    color: #9a681c;
}


/* ==========================================================================
   FOCUS
   ========================================================================== */

.page-contact .contact-brief__feedback:focus-visible {
    outline: 2px solid var(--waveform-blue);
    outline-offset: 4px;
}


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

@media (max-width: 1040px) {

    .page-contact .contact-brief__feedback-state {
        grid-template-columns: 115px minmax(0, 1fr) 170px;
        gap: 2rem;
    }

    .page-contact .contact-brief__feedback-copy > strong {
        font-size: clamp(2.25rem, 3.8vw, 3.6rem);
    }

}


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

@media (max-width: 760px) {

    .page-contact .contact-brief__feedback {
        margin-bottom: 3rem;
    }

    .page-contact .contact-brief__feedback-state {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas:
            "code copy"
            "code status";
        gap: 15px 16px;
        min-height: auto;
        padding: 24px 0;
    }

    .page-contact .contact-brief__feedback-code {
        grid-area: code;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 0;
        font-size: .49rem;
    }

    .page-contact .contact-brief__feedback-copy {
        grid-area: copy;
    }

    .page-contact .contact-brief__feedback-copy > strong {
        font-size: clamp(2rem, 9vw, 2.9rem);
    }

    .page-contact .contact-brief__feedback-copy p {
        font-size: .84rem;
    }

    .page-contact .contact-brief__feedback-status {
        grid-area: status;
        margin-top: 10px;
        padding: 0;
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="sent"],
    .page-contact .contact-brief__feedback-state[data-brief-state="error"],
    .page-contact .contact-brief__feedback-state[data-brief-state="invalid"] {
        box-shadow: none;
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="sent"]::before,
    .page-contact .contact-brief__feedback-state[data-brief-state="error"]::before,
    .page-contact .contact-brief__feedback-state[data-brief-state="invalid"]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="sent"]::before {
        background: var(--night-vision);
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="error"]::before {
        background: var(--rec-red);
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="invalid"]::before {
        background: var(--practical-light);
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .page-contact .contact-brief__feedback-state {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 13px 13px;
    }

    .page-contact .contact-brief__feedback-copy > span,
    .page-contact .contact-brief__feedback-status span {
        font-size: .48rem;
    }

    .page-contact .contact-brief__feedback-status strong {
        font-size: .54rem;
    }

    .page-contact .contact-brief__feedback-copy > strong {
        font-size: clamp(1.85rem, 8.5vw, 2.6rem);
    }

}

/* ==========================================================================
   WFIP_CONTACT_FORM_FEEDBACK_FOCUS_FIX_V2
   Contact Form — Remove Programmatic Feedback Focus Ring
   ========================================================================== */

.page-contact .contact-brief__feedback:focus,
.page-contact .contact-brief__feedback:focus-visible {
    outline: none;
}

/* ==========================================================================
   WFIP_CONTACT_FORM_FEEDBACK_MOBILE_FIX_V3
   Contact Form — Mobile Feedback Refinement
   ========================================================================== */

@media (max-width: 760px) {

    .page-contact .contact-brief__feedback {
        margin: 0 0 2.5rem;
    }

    .page-contact .contact-brief__feedback-state {
        display: block;
        min-height: 0;
        padding: 22px 20px 20px;
        border-bottom: 0;
    }

    .page-contact .contact-brief__feedback-code {
        display: block;
        margin: 0 0 16px;
        padding: 0;
        writing-mode: horizontal-tb;
        transform: none;
        font-size: .52rem;
        line-height: 1.2;
        letter-spacing: .12em;
    }

    .page-contact .contact-brief__feedback-copy {
        width: 100%;
        max-width: none;
    }

    .page-contact .contact-brief__feedback-copy > span {
        margin-bottom: 9px;
        font-size: .51rem;
        line-height: 1.25;
    }

    .page-contact .contact-brief__feedback-copy > strong {
        margin-bottom: 12px;
        font-size: clamp(2rem, 9.5vw, 2.75rem);
        line-height: .9;
    }

    .page-contact .contact-brief__feedback-copy p {
        width: 100%;
        max-width: none;
        font-size: .84rem;
        line-height: 1.55;
    }

    .page-contact .contact-brief__feedback-status {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 18px;
        margin-top: 20px;
        padding: 14px 0 0;
        border-top: 1px solid rgba(11, 12, 14, .18);
    }

    .page-contact .contact-brief__feedback-status span {
        flex: 0 0 auto;
        margin: 0;
        font-size: .48rem;
    }

    .page-contact .contact-brief__feedback-status strong {
        max-width: 230px;
        margin-left: auto;
        text-align: right;
        font-size: .53rem;
        line-height: 1.35;
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="sent"],
    .page-contact .contact-brief__feedback-state[data-brief-state="error"],
    .page-contact .contact-brief__feedback-state[data-brief-state="invalid"] {
        box-shadow: none;
    }

    .page-contact .contact-brief__feedback-state[data-brief-state="sent"]::before,
    .page-contact .contact-brief__feedback-state[data-brief-state="error"]::before,
    .page-contact .contact-brief__feedback-state[data-brief-state="invalid"]::before {
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
    }

}

@media (max-width: 430px) {

    .page-contact .contact-brief__feedback-state {
        padding: 20px 16px 18px;
    }

    .page-contact .contact-brief__feedback-code {
        margin-bottom: 14px;
    }

    .page-contact .contact-brief__feedback-copy > strong {
        font-size: clamp(1.95rem, 10vw, 2.45rem);
    }

    .page-contact .contact-brief__feedback-status {
        display: block;
        margin-top: 18px;
        padding-top: 13px;
    }

    .page-contact .contact-brief__feedback-status span {
        margin-bottom: 6px;
    }

    .page-contact .contact-brief__feedback-status strong {
        max-width: none;
        margin: 0;
        text-align: left;
    }

}

/* ==========================================================================
   WFIP_CONTACT_FORM_FEEDBACK_LONG_STATUS_FIX_V4
   Contact Form — Mobile Long Status Refinement
   ========================================================================== */

@media (max-width: 560px) {

    .page-contact
    .contact-brief__feedback-state[data-brief-state="error"]
    .contact-brief__feedback-status,

    .page-contact
    .contact-brief__feedback-state[data-brief-state="invalid"]
    .contact-brief__feedback-status {
        display: block;
    }

    .page-contact
    .contact-brief__feedback-state[data-brief-state="error"]
    .contact-brief__feedback-status span,

    .page-contact
    .contact-brief__feedback-state[data-brief-state="invalid"]
    .contact-brief__feedback-status span {
        margin-bottom: 7px;
    }

    .page-contact
    .contact-brief__feedback-state[data-brief-state="error"]
    .contact-brief__feedback-status strong,

    .page-contact
    .contact-brief__feedback-state[data-brief-state="invalid"]
    .contact-brief__feedback-status strong {
        max-width: none;
        margin: 0;
        text-align: left;
        font-size: .56rem;
        line-height: 1.4;
        letter-spacing: .065em;
    }

}