.studio-page {
    color : var(--d-text)
}

.studio-page section {
        border-bottom: 1px solid var(--d-border)
    }

.studio-page .container {
    display : flex;
    flex-direction : column;
    align-items : center;
    text-align : center;
}

.section-hero {
    background: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--pb-red-hover) 30%, transparent) 0%, transparent 65% ), var(--d-bg)
}

.video-section,
.service-section,
.cases-section { 
    background : var(--d-bg)
}

.steps-section {
    background: radial-gradient(circle at 90% 0%, color-mix(var(--pb-red) 15%, transparent), transparent 75%), var(--d-bg)
}

.metodology-section {
    background: linear-gradient( to bottom, color-mix(in srgb, var(--pb-red-hover) 10%, transparent) 1000%, transparent 100% ), var(--d-bg)
}

.studio-hero {
    color : var(--d-text);
    align-items : center;
    text-align : center;    
    display : flex;
    flex-direction : column;
    gap : var(--s-3)
}

.studio-hero .hero-actions {
    display : flex;
    justify-content : center
}

    .studio-hero .eyebrow {
        padding: var(--s-2);
    }

    .studio-hero .hero-notice,
    .studio-hero .body-text {
        color: var(--d-text-2);
        width : 100%;
        max-width : 65ch
    }

    .studio-hero .eyebrow,
    .studio-hero .notice-icon {
        color: var(--pb-red-hover)
    }

.studio-hero .hero-notice {
    font-size : 12px;
    display : flex;
    align-items : center;
    flex-direction : row;
    padding : var(--s-2);
    background : var(--d-surface);
    border : 1px solid var(--d-border-2);
    border-radius : var(--r-md)
}

.studio-hero .hero-notice strong{
    color : var(--d-text)
}

    .studio-hero .notice-icon {
        background: color-mix(in srgb, var(--pb-red-hover) 30%, transparent);
        border-radius: 50%;
        flex-shrink: 0;
        width: 25px;
        height : 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: var(--s-2);
    }

.studio-hero .agenda-warning {
    margin : 0px
}

.video-section .subheader {
    color : var(--d-text-2)
}

.video-section .video-card {
    border : 1px solid var(--d-border);
    border-radius : var(--r-lg);
    display : flex;
    flex-direction : column;
    width : 90%;
    min-height : 600px
}

.video-section .video-card .video-frame {
    display : flex;
    width : 100%;
    flex : 1;
    position : relative;
}

    .video-section .video-card .video-frame iframe {
        position : absolute;
        top : 0;
        object-fit : cover;
        left : 0;
        border-radius: var(--r-lg);
        border: none;
        width: 100%;
        height: 100%;
    }

.video-section .video-open-fallback {
    padding : var(--s-2) var(--s-5);
    display : flex;
    flex-direction : row;
    color : var(--d-text-2);
    gap : var(--s-4)
}

    .video-section .video-open-fallback a {
        margin-left : auto;
        text-decoration : underline
    }

        .video-section .video-open-fallback a:hover {
            color : var(--d-text)
        }
    
    .video-section .video-open-fallback strong {
        color : var(--d-text)
    }

.service-content {
    align-items : flex-start !important
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3)
}

.service-chip {
    padding: var(--s-3) var(--s-4);
    background-color: var(--d-surface);
    border-radius : var(--r-md);
    border: 1px solid var(--d-border);
    display: flex;
    align-items: center;
    color: var(--d-text-2);
    transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast);
}

.service-chip:hover {
    border-color : var(--d-text);
    color : var(--d-text);
    background-color : var(--d-surface-2)
}
.metodology-content {
    align-items : flex-start !important
}

.method-row {
    color : var(--d-text-2);
    display : flex;
    flex-direction : row;
    padding-top : var(--s-6);
    gap : var(--s-7);
    min-height : 120px;
    border-block : 1px solid var(--d-border)
}

.method-row p {
    text-align : left;
    padding : 0px;
    margin : 0px
}

.method-row p strong {
    color : var(--d-text)
}

.method-row .method-letter{
    text-align : left;
    min-width : 45px;
    font-size : var(--s-6);
    color : var(--pb-red)
}

.cases-content {
    align-items : flex-start !important
}

.cases-grid {
    flex-wrap : wrap;
    display : flex;
    flex-direction : row;
    align-items : stretch;
    gap : var(--s-4)
}

.work-card {
    display : flex;
    flex-direction : column;
    margin-left : auto;
    margin-right : auto;
    border-radius : var(--r-md);
    background : var(--d-surface) 
}

.quote-card {
    padding : var(--s-4);
    background : var(--d-surface);
    color : var(--d-text-2)
}

    .quote-card .quote {
        text-align : left;
        padding : var(--s-4)

    }

    .quote-card strong {
        color : var(--d-text)
    }

.quote-icon {
    color : var(--pb-red);
    font-size : 56px;
    text-align : left
}

.work-caption {
    padding : var(--s-3);
    display : flex;
    flex-direction : row;
    gap : var(--s-5);
    color : var(--d-text-2)
}

.work-link:hover {
    color : inherit;
    text-decoration : none
}

.quote-caption {
    display : flex;
    flex-direction : column;
}

.quote-author {
    display : flex;
    flex-direction : column;
    padding : var(--s-4) var(--s-5);
    border-top : 1px solid var(--d-border);
    text-align : left
}

.work-caption strong {
   color : var(--d-text);
   margin-left : auto
}

.work-card--video,
.work-card .site-frame {
    min-width : 500px;
    min-height : 750px;
    border-radius : var(--r-md);
}

.work-card .site-frame iframe {
    border-radius : var(--r-md);
    object-fit : contain;
    height : 100%;
    width : 100%
}

.quote-card {
    flex : 1 1 100%;
    width : 100%
}

.work-card--video iframe {
    border-radius: var(--r-md);
    flex : 1;
    border: none
}

    .work-card--video iframe,
    .work-card--video button img {
        overflow: hidden;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.steps-content {
    color : var(--d-text-2);
    display : flex;
    gap : var(--s-5);
    flex-direction : column;
    align-items : center !important;
    text-align : center
}

.steps-content h2,
.steps-content h3 {
    color : var(--d-text)
}

.steps-intro {
    align-self : center;
    max-width : 64ch
}

.steps-grid {
    width : 75%;
    align-self : center;
    display : grid;
    grid-template-columns : repeat(3, 1fr);
    gap : var(--s-3)
}

.step-card {
    background : var(--d-surface);
    border-radius : var(--r-md);
    padding : var(--s-5)
}

.step-num {
    color : var(--pb-red)
}

.step-content,
.step-num {
    text-align : left
}

.step-content {
    padding : var(--s-2);
}

@media (max-width: 760px) {

    .method-letter {
        margin-bottom : var(--s-5)
    }

    .studio-page .container {
        width: min(100% - var(--s-4), 1184px);
        margin-inline: auto;
    }

    .studio-hero .hero-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--s-3);
    }

        .studio-hero .hero-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .studio-hero .hero-notice {
        width: 100%;
        justify-content: center;
    }

    .video-section .video-card {
        width: 100%;
        min-height: 360px;
    }

        .video-section .video-card .video-frame {
            width: 100%;
            min-height: 280px;
            flex: 1;
        }

            .video-section .video-card .video-frame iframe {
                display: block;
                width: 100%;
                height: 100%;
            }

    .video-section .video-open-fallback {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--s-2);
        padding: var(--s-3);
    }

        .video-section .video-open-fallback a {
            margin-left: 0;
        }

    .services-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .service-chip {
        justify-content: center;
        width: 100%;
    }

    .steps-grid { 
        gap : var(--s-4)
    }

    .method-row {
        flex-direction: column;
        gap: var(--s-3);
        min-height: auto;
        padding-top: var(--s-4);
        padding-bottom: var(--s-4);
    }

        .method-row .method-letter {
            min-width: 0;
        }

    .cases-grid {
        width: 100%;
        flex-direction: column;
    }

    .work-card {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

        .work-card--video,
        .work-card .site-frame {
            min-width: 0;
            width: 100%;
            min-height: 420px;
        }

    .work-card--video {
        min-height: 520px;
    }

    .work-card .site-frame,
    .work-card--video {
        overflow: hidden;
    }

        .work-card .site-frame iframe,
        .work-card--video iframe {
            display: block;
            width: 100%;
            height: 100%;
            min-height: inherit;
            border: 0;
        }

    .quote-card {
        width: 100%;
        padding: var(--s-3);
    }

        .quote-card .quote {
            padding: var(--s-3);
        }

    .work-caption {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--s-2);
    }

        .work-caption strong {
            margin-left: 0;
        }

    .quote-author {
        padding: var(--s-3);
    }

    .steps-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .step-card {
        padding: var(--s-4);
    }

    .steps-section .container {
        width: min(100% - var(--s-4), 1184px);
        margin-inline: auto;
    }
}