/* Work with us Section */
#work-with-us {
    background-color: #000;
}

.work-with-us-image-container {
    grid-column: 1 / 3;  /* Bands 1 + 2 only */
    grid-row: 1 / -1;  /* Full height */
    position: relative;
    overflow: hidden;
}

.work-with-us-image-container .background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.work-with-us-headline {
    position: absolute;
    top: calc(var(--gutter) + var(--desktop-cell-height) + var(--gutter)); /* start of cell 2 */
    left: var(--gutter);
    z-index: 2;
    font-size: var(--font-work-with-us-headline);
    line-height: var(--font-what-we-do-line-height);
    letter-spacing: -6px;
    font-weight: 700;
    color: #000;
    opacity: 0;
    text-align: left;
}

.work-with-us-text-container {
    grid-column: 3 / 5;  /* Band 3 + nav strip */
    grid-row: 1 / -1;  /* Full height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    background-color: #fff;
    padding: 0 var(--gutter);
    padding-top: calc(var(--gutter) + var(--desktop-cell-height) + var(--gutter)); /* start of cell 2 */
    padding-bottom: calc(var(--gutter) + var(--desktop-cell-height) + var(--gutter)); /* end of cell 6 */
}

.contact-line {
    opacity: 0;
    margin-bottom: 0; /* NO base spacing - add explicitly where needed */
    font-size: var(--font-work-with-us-body);
    line-height: var(--font-believe-line-height);
    color: #000;
}

/* Add spacing where copy has empty lines */
.contact-line[data-index="0"],
.contact-line[data-index="1"],
.contact-line[data-index="2"] {
    margin-bottom: var(--font-believe-line-height);
}

/* CTA Button (now a direct child of body for blend mode to work across all sections) */
.contact-cta {
    position: fixed;
    right: calc(31.4vw + var(--nav-strip) - var(--gutter) - var(--button-width));
    bottom: calc(2 * var(--gutter) + var(--desktop-cell-height));  /* Bottom of button aligns with bottom of second-to-last cell */
    z-index: var(--z-menu);

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-width);
    height: var(--button-height);
    background-color: #fff;  /* White for blend mode */
    color: #000;              /* Black for blend mode */
    border-radius: var(--button-radius);
    font-size: var(--font-button);
    font-weight: 700;
    text-decoration: none;

    /* Apply blend mode for color inversion across all sections */
    mix-blend-mode: difference;

    /* Start hidden */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.3s ease; /* Opacity unified with FADE_PARAGRAPH, transform stays responsive */
}

.contact-cta:hover {
    transform: translateY(-2px);
}

/* Hide button on splash screen */
.contact-cta.hidden {
    opacity: 0;
    pointer-events: none;
}