/* =========================================================
   VIDEO PRODUCTION SERVICE PAGE
   Growth Digital Studio
   Premium Cinematic System
========================================================= */


/* =========================================================
   ROOT / PAGE
========================================================= */

.vp-page {

    --vp-black: #050507;
    --vp-black-soft: #09090d;
    --vp-panel: #0d0d12;
    --vp-panel-light: #131319;

    --vp-gold: #c9a45c;
    --vp-gold-light: #e5cb91;

    --vp-red: #d94b4b;
    --vp-red-soft: rgba(217,75,75,.16);

    --vp-white: #ffffff;
    --vp-text: #ededf1;
    --vp-muted: #9999a5;

    --vp-border:
        rgba(255,255,255,.09);

    --vp-gold-border:
        rgba(201,164,92,.20);

    --vp-radius: 22px;

    position: relative;

    width: 100%;

    background:
        radial-gradient(
            circle at 80% 8%,
            rgba(201,164,92,.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 15% 28%,
            rgba(217,75,75,.045),
            transparent 25%
        ),
        var(--vp-black);

    color:
        var(--vp-white);

}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.vp-container {

    width: min(
        1180px,
        calc(100% - 48px)
    );

    margin:
        0 auto;

}


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

.vp-hero {

    position: relative;

    min-height:
        820px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        140px 0 100px;

    background:
        linear-gradient(
            115deg,
            #050507 0%,
            #09090d 48%,
            #0b0909 100%
        );

}


/* cinematic horizontal lines */

.vp-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 74px,
            rgba(255,255,255,.018) 75px
        );

    pointer-events:
        none;

}


/* vignette */

.vp-hero::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at center,
            transparent 20%,
            rgba(0,0,0,.55) 100%
        );

    pointer-events:
        none;

}


.vp-hero-bg {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

}


.vp-film-grid {

    position:
        absolute;

    width:
        700px;

    height:
        700px;

    right:
        -260px;

    top:
        60px;

    border:
        1px solid
        rgba(201,164,92,.09);

    border-radius:
        50%;

    box-shadow:
        0 0 0 70px rgba(201,164,92,.018),
        0 0 0 140px rgba(201,164,92,.012),
        0 0 0 210px rgba(201,164,92,.008);

}


.vp-light-orb {

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    border-radius:
        50%;

    filter:
        blur(90px);

    opacity:
        .20;

}


.vp-light-orb-1 {

    top:
        10%;

    right:
        25%;

    background:
        rgba(201,164,92,.35);

}


.vp-light-orb-2 {

    bottom:
        -80px;

    left:
        25%;

    background:
        rgba(217,75,75,.18);

}


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

.vp-hero .vp-container {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, .95fr);

    align-items:
        center;

    gap:
        80px;

}


.vp-hero-content {

    max-width:
        650px;

}


.vp-eyebrow,
.vp-section-kicker {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--vp-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .20em;

}


.vp-eyebrow-dot,
.vp-section-kicker span {

    width:
        7px;

    height:
        7px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        var(--vp-gold);

    box-shadow:
        0 0 14px
        rgba(201,164,92,.65);

}


.vp-hero-title {

    margin:
        22px 0 24px;

    max-width:
        680px;

    font-size:
        clamp(52px, 6.4vw, 88px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

    font-weight:
        700;

}


.vp-hero-title span,
.vp-section-heading h2 span,
.vp-featured-content h2 span,
.vp-post-content h2 span,
.vp-why-intro h2 span,
.vp-faq-intro h2 span,
.vp-final-content h2 span {

    color:
        var(--vp-gold);

}


.vp-hero-text {

    max-width:
        570px;

    margin:
        0;

    color:
        var(--vp-muted);

    font-size:
        16px;

    line-height:
        1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.vp-hero-actions,
.vp-final-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        34px;

}


.vp-btn {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    padding:
        0 23px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;

}


.vp-btn span {

    font-size:
        17px;

}


.vp-btn-primary {

    background:
        var(--vp-gold);

    color:
        #080808;

    box-shadow:
        0 10px 35px
        rgba(201,164,92,.16);

}


.vp-btn-primary:hover {

    transform:
        translateY(-3px);

    background:
        var(--vp-gold-light);

    box-shadow:
        0 16px 45px
        rgba(201,164,92,.24);

}


.vp-btn-secondary {

    border-color:
        rgba(255,255,255,.15);

    color:
        var(--vp-white);

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

}


.vp-btn-secondary:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--vp-gold);

    color:
        var(--vp-gold-light);

    background:
        rgba(201,164,92,.05);

}


.vp-btn-large {

    min-height:
        58px;

    padding:
        0 28px;

}


/* =========================================================
   HERO TAGS
========================================================= */

.vp-hero-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        28px;

}


.vp-hero-tags span {

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        999px;

    color:
        #a9a9b3;

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

    font-size:
        10px;

    letter-spacing:
        .06em;

}


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

.vp-hero-visual {

    position:
        relative;

}


.vp-frame {

    position:
        relative;

    padding:
        13px;

    border:
        1px solid
        rgba(201,164,92,.20);

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

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.55);

    transform:
        rotate(1.2deg);

}


.vp-frame-top,
.vp-frame-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        9px 5px;

    color:
        #85858f;

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.vp-frame-top span:last-child {

    color:
        var(--vp-red);

}


.vp-video-placeholder {

    position:
        relative;

    min-height:
        470px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(201,164,92,.17),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #17171d,
            #070709 55%,
            #180d0e
        );

}


.vp-video-placeholder::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.07) 48%,
            transparent 62%
        );

    transform:
        translateX(-80%);

    animation:
        vp-light-sweep 7s ease-in-out infinite;

}


@keyframes vp-light-sweep {

    0%,
    55% {
        transform:
            translateX(-90%);
    }

    80%,
    100% {
        transform:
            translateX(90%);
    }

}


.vp-play-button {

    position:
        relative;

    z-index:
        2;

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius:
        50%;

    color:
        var(--vp-gold);

    background:
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 0 50px
        rgba(201,164,92,.16);

}


.vp-play-button span {

    margin-left:
        4px;

    font-size:
        22px;

}


.vp-play-ring {

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    border:
        1px solid
        rgba(201,164,92,.18);

    border-radius:
        50%;

    animation:
        vp-ring-pulse 3s ease-out infinite;

}


@keyframes vp-ring-pulse {

    0% {
        opacity: .8;
        transform: scale(.85);
    }

    100% {
        opacity: 0;
        transform: scale(1.25);
    }

}


.vp-floating-label {

    position:
        absolute;

    z-index:
        3;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(201,164,92,.20);

    background:
        rgba(5,5,7,.88);

    color:
        #aaaab3;

    font-size:
        8px;

    letter-spacing:
        .15em;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.35);

}


.vp-floating-label span {

    margin-right:
        7px;

    color:
        var(--vp-gold);

}


.vp-label-camera {

    top:
        18%;

    left:
        -35px;

}


.vp-label-edit {

    right:
        -30px;

    bottom:
        18%;

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.vp-scroll-line {

    position:
        absolute;

    bottom:
        25px;

    left:
        50%;

    z-index:
        4;

    width:
        1px;

    height:
        55px;

    overflow:
        hidden;

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

}


.vp-scroll-line span {

    display:
        block;

    width:
        100%;

    height:
        50%;

    background:
        var(--vp-gold);

    animation:
        vp-scroll-line 2s ease-in-out infinite;

}


@keyframes vp-scroll-line {

    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(200%);
    }

}


/* =========================================================
   SECTION HEADING
========================================================= */

.vp-section-heading {

    max-width:
        760px;

}


.vp-section-heading h2 {

    margin:
        18px 0;

    font-size:
        clamp(38px, 5vw, 64px);

    line-height:
        1.02;

    letter-spacing:
        -.045em;

}


.vp-section-heading > p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--vp-muted);

    font-size:
        15px;

    line-height:
        1.8;

}


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

.vp-services {

    position:
        relative;

    padding:
        130px 0;

    background:
        var(--vp-black);

}


.vp-services-grid {

    display:
        grid;

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

    gap:
        16px;

    margin-top:
        65px;

}


.vp-service-card {

    position:
        relative;

    min-height:
        300px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        28px;

    border:
        1px solid
        var(--vp-border);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    overflow:
        hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


.vp-service-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vp-gold),
            transparent
        );

    opacity:
        0;

    transition:
        opacity .35s ease;

}


.vp-service-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(201,164,92,.28);

    background:
        linear-gradient(
            145deg,
            rgba(201,164,92,.055),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.28);

}


.vp-service-card:hover::before {

    opacity:
        1;

}


.vp-service-number {

    color:
        rgba(201,164,92,.48);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.vp-service-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        30px 0 20px;

    border:
        1px solid
        rgba(201,164,92,.20);

    border-radius:
        14px;

    color:
        var(--vp-gold);

    background:
        rgba(201,164,92,.045);

    font-size:
        21px;

}


.vp-service-content {

    flex:
        1;

}


.vp-service-label {

    color:
        #777781;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.vp-service-card h3 {

    margin:
        8px 0 12px;

    color:
        var(--vp-white);

    font-size:
        22px;

    letter-spacing:
        -.025em;

}


.vp-service-card p {

    margin:
        0;

    color:
        var(--vp-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


.vp-service-arrow {

    position:
        absolute;

    right:
        25px;

    bottom:
        23px;

    color:
        rgba(201,164,92,.45);

    font-size:
        18px;

    transition:
        transform .3s ease,
        color .3s ease;

}


.vp-service-card:hover .vp-service-arrow {

    color:
        var(--vp-gold);

    transform:
        translate(3px,-3px);

}


/* =========================================================
   SERVICES FOOTER
========================================================= */

.vp-services-footer {

    display:
        grid;

    grid-template-columns:
        1fr auto auto;

    align-items:
        center;

    gap:
        30px;

    margin-top:
        55px;

}


.vp-services-line {

    height:
        1px;

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

}


.vp-services-footer p {

    margin:
        0;

    color:
        #888892;

    font-size:
        12px;

}


.vp-services-footer a {

    color:
        var(--vp-gold);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


/* =========================================================
   FEATURED
========================================================= */

.vp-featured {

    padding:
        130px 0;

    background:
        #08080c;

}


.vp-featured-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, .9fr);

    gap:
        90px;

    align-items:
        center;

}


.vp-featured-visual {

    perspective:
        1000px;

}


.vp-featured-frame {

    border:
        1px solid
        rgba(201,164,92,.18);

    background:
        #0d0d12;

    padding:
        12px;

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.45);

    transform:
        rotate(-1deg);

}


.vp-featured-top,
.vp-featured-bottom {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        9px 5px;

    color:
        #777780;

    font-size:
        8px;

    letter-spacing:
        .13em;

}


.vp-featured-screen {

    min-height:
        390px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            140deg,
            #17171d,
            #070708 55%,
            #170d0f
        );

}


.vp-featured-screen-content {

    width:
        100%;

    min-height:
        390px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

}


.vp-screen-label,
.vp-screen-meta {

    position:
        absolute;

    color:
        #777780;

    font-size:
        8px;

    letter-spacing:
        .14em;

}


.vp-screen-label {

    top:
        20px;

    left:
        22px;

}


.vp-screen-meta {

    bottom:
        20px;

    right:
        22px;

}


.vp-screen-play {

    width:
        72px;

    height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,164,92,.45);

    border-radius:
        50%;

    color:
        var(--vp-gold);

}


.vp-featured-timeline {

    display:
        flex;

    gap:
        4px;

    height:
        25px;

    padding:
        5px 0;

}


.vp-featured-timeline span {

    flex:
        1;

    background:
        rgba(201,164,92,.15);

}


.vp-featured-timeline span:nth-child(2n) {

    background:
        rgba(217,75,75,.15);

}


.vp-featured-content h2,
.vp-post-content h2 {

    margin:
        18px 0;

    font-size:
        clamp(38px, 4.5vw, 58px);

    line-height:
        1.04;

    letter-spacing:
        -.045em;

}


.vp-featured-content > p,
.vp-post-content > p,
.vp-why-intro > p {

    color:
        var(--vp-muted);

    font-size:
        15px;

    line-height:
        1.85;

}


.vp-featured-points {

    margin-top:
        34px;

}


.vp-featured-point {

    display:
        grid;

    grid-template-columns:
        45px 1fr;

    gap:
        15px;

    padding:
        18px 0;

    border-top:
        1px solid
        rgba(255,255,255,.07);

}


.vp-point-icon {

    color:
        var(--vp-gold);

    font-size:
        10px;

    letter-spacing:
        .08em;

}


.vp-featured-point strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--vp-white);

    font-size:
        14px;

}


.vp-featured-point p {

    margin:
        0;

    color:
        #80808b;

    font-size:
        12px;

    line-height:
        1.65;

}


.vp-text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        30px;

    color:
        var(--vp-gold);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;

    transition:
        gap .3s ease,
        color .3s ease;

}


.vp-text-link:hover {

    gap:
        16px;

    color:
        var(--vp-gold-light);

}


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

.vp-process {

    padding:
        130px 0;

    background:
        var(--vp-black);

}


.vp-process-heading {

    max-width:
        700px;

}


.vp-process-flow {

    display:
        grid;

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

    margin-top:
        75px;

}


.vp-process-step {

    position:
        relative;

    padding:
        0 20px;

    border-left:
        1px solid
        rgba(255,255,255,.08);

}


.vp-process-step:first-child {

    border-left:
        0;

}


.vp-process-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.vp-process-number {

    color:
        var(--vp-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.vp-process-icon {

    color:
        rgba(201,164,92,.55);

    font-size:
        18px;

}


.vp-process-line {

    width:
        100%;

    height:
        1px;

    margin:
        22px 0;

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

}


.vp-process-line span {

    display:
        block;

    width:
        35%;

    height:
        100%;

    background:
        var(--vp-gold);

}


.vp-process-label {

    color:
        #74747e;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.vp-process-step h3 {

    margin:
        10px 0 12px;

    font-size:
        19px;

    line-height:
        1.2;

}


.vp-process-step h3 span {

    display:
        block;

    color:
        var(--vp-gold);

}


.vp-process-step p {

    margin:
        0;

    color:
        var(--vp-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


.vp-process-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        35px;

    margin-top:
        55px;

}


.vp-process-progress {

    flex:
        1;

    height:
        1px;

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

}


.vp-process-progress span {

    display:
        block;

    width:
        70%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--vp-gold),
            transparent
        );

}


.vp-process-note {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.vp-process-note span {

    color:
        var(--vp-red);

    font-size:
        8px;

}


.vp-process-note p {

    margin:
        0;

    color:
        #70707a;

    font-size:
        8px;

    letter-spacing:
        .14em;

}


/* =========================================================
   POST PRODUCTION
========================================================= */

.vp-post {

    padding:
        130px 0;

    background:
        #08080c;

}


.vp-post-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        90px;

}


.vp-post-list {

    margin-top:
        30px;

}


.vp-post-item {

    display:
        grid;

    grid-template-columns:
        42px 1fr;

    gap:
        15px;

    padding:
        17px 0;

    border-top:
        1px solid
        rgba(255,255,255,.07);

}


.vp-post-index {

    color:
        var(--vp-gold);

    font-size:
        10px;

    font-weight:
        700;

}


.vp-post-item strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        14px;

}


.vp-post-item p {

    margin:
        0;

    color:
        #80808b;

    font-size:
        12px;

    line-height:
        1.6;

}


/* editing window */

.vp-editing-window {

    border:
        1px solid
        rgba(201,164,92,.18);

    background:
        #0c0c11;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.45);

}


.vp-editing-header,
.vp-editing-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 15px;

    color:
        #777780;

    font-size:
        8px;

    letter-spacing:
        .12em;

}


.vp-window-dots {

    display:
        flex;

    gap:
        5px;

}


.vp-window-dots i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #55555d;

}


.vp-window-dots i:last-child {

    background:
        var(--vp-red);

}


.vp-editing-preview {

    padding:
        12px;

    background:
        #050507;

}


.vp-preview-frame {

    position:
        relative;

    min-height:
        280px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            140deg,
            #17171d,
            #09090c 60%,
            #180d0f
        );

}


.vp-preview-corner,
.vp-preview-time {

    position:
        absolute;

    color:
        #74747d;

    font-size:
        8px;

    letter-spacing:
        .10em;

}


.vp-preview-corner {

    top:
        16px;

    left:
        18px;

}


.vp-preview-time {

    right:
        18px;

    bottom:
        16px;

}


.vp-preview-play {

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,164,92,.35);

    border-radius:
        50%;

    color:
        var(--vp-gold);

}


.vp-editing-timeline {

    padding:
        14px 12px;

}


.vp-track {

    display:
        grid;

    grid-template-columns:
        55px 1fr;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        7px;

}


.vp-track-label {

    color:
        #666670;

    font-size:
        7px;

    letter-spacing:
        .10em;

}


.vp-track-blocks {

    display:
        flex;

    gap:
        3px;

    height:
        22px;

}


.vp-track-blocks i {

    flex:
        1;

    border-radius:
        2px;

    background:
        rgba(201,164,92,.20);

}


.vp-track-video .vp-track-blocks i:nth-child(2n) {

    background:
        rgba(201,164,92,.34);

}


.vp-track-motion .vp-track-blocks i {

    background:
        rgba(217,75,75,.22);

}


.vp-track-audio .vp-track-blocks i {

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

}


/* =========================================================
   FORMATS
========================================================= */

.vp-formats {

    padding:
        130px 0;

    background:
        var(--vp-black);

}


.vp-format-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        60px;

}


.vp-format-card {

    position:
        relative;

    min-height:
        240px;

    padding:
        25px;

    border:
        1px solid
        var(--vp-border);

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

}


.vp-format-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,164,92,.30);

    background:
        rgba(201,164,92,.035);

}


.vp-format-number {

    position:
        absolute;

    top:
        22px;

    right:
        23px;

    color:
        rgba(201,164,92,.45);

    font-size:
        9px;

}


.vp-format-icon {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(201,164,92,.18);

    color:
        var(--vp-gold);

    font-size:
        20px;

}


.vp-format-card h3 {

    margin:
        0 0 8px;

    font-size:
        21px;

}


.vp-format-card p {

    margin:
        0;

    color:
        var(--vp-muted);

    font-size:
        12px;

    line-height:
        1.65;

}


.vp-format-size {

    position:
        absolute;

    left:
        25px;

    bottom:
        23px;

    color:
        #686871;

    font-size:
        8px;

    letter-spacing:
        .10em;

}


/* =========================================================
   WHY GDS
========================================================= */

.vp-why {

    padding:
        130px 0;

    background:
        #08080c;

}


.vp-why-grid {

    display:
        grid;

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

    gap:
        100px;

    align-items:
        start;

}


.vp-why-intro {

    position:
        sticky;

    top:
        120px;

}


.vp-why-list {

    border-top:
        1px solid
        rgba(255,255,255,.08);

}


.vp-why-item {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        20px;

    padding:
        27px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.vp-why-number {

    color:
        var(--vp-gold);

    font-size:
        10px;

    font-weight:
        700;

}


.vp-why-item h3 {

    margin:
        0 0 8px;

    font-size:
        18px;

}


.vp-why-item p {

    max-width:
        570px;

    margin:
        0;

    color:
        var(--vp-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   FAQ
========================================================= */

.vp-faq {

    padding:
        130px 0;

    background:
        var(--vp-black);

}


.vp-faq-grid {

    display:
        grid;

    grid-template-columns:
        minmax(260px, .72fr)
        minmax(0, 1.28fr);

    gap:
        90px;

    align-items:
        start;

}


.vp-faq-intro {

    position:
        sticky;

    top:
        120px;

}


.vp-faq-intro > p {

    color:
        var(--vp-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


.vp-faq-note {

    display:
        grid;

    grid-template-columns:
        40px 1fr;

    gap:
        13px;

    margin-top:
        35px;

    padding:
        18px;

    border:
        1px solid
        rgba(201,164,92,.14);

    background:
        rgba(201,164,92,.025);

}


.vp-faq-note > span {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        50%;

    color:
        var(--vp-gold);

}


.vp-faq-note strong {

    display:
        block;

    margin-bottom:
        4px;

    font-size:
        12px;

}


.vp-faq-note p {

    margin:
        0 0 9px;

    color:
        #777781;

    font-size:
        11px;

}


.vp-faq-note a {

    color:
        var(--vp-gold);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.vp-faq-list {

    border-top:
        1px solid
        rgba(255,255,255,.09);

}


.vp-faq-item {

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

}


.vp-faq-question {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        24px 0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--vp-white);

    text-align:
        left;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.45;

}


.vp-faq-question strong {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(201,164,92,.20);

    border-radius:
        50%;

    color:
        var(--vp-gold);

    font-size:
        17px;

    font-weight:
        400;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease;

}


.vp-faq-question:hover span {

    color:
        var(--vp-gold-light);

}


.vp-faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .45s
        cubic-bezier(.16,1,.3,1);

}


.vp-faq-answer p {

    min-height:
        0;

    overflow:
        hidden;

    margin:
        0;

    padding-right:
        65px;

    color:
        var(--vp-muted);

    font-size:
        14px;

    line-height:
        1.75;

}


.vp-faq-item.vp-faq-open
.vp-faq-answer {

    grid-template-rows:
        1fr;

}


.vp-faq-item.vp-faq-open
.vp-faq-answer p {

    padding-bottom:
        24px;

}


.vp-faq-item.vp-faq-open
.vp-faq-question strong {

    transform:
        rotate(45deg);

    background:
        var(--vp-gold);

    color:
        #080808;

    border-color:
        var(--vp-gold);

}


/* =========================================================
   FINAL CTA
========================================================= */

.vp-final {

    position:
        relative;

    min-height:
        580px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        110px 0;

    background:
        linear-gradient(
            120deg,
            #09090d,
            #100b0b 50%,
            #08080c
        );

}


.vp-final-bg {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

}


.vp-final-orb {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(100px);

}


.vp-final-orb-1 {

    width:
        400px;

    height:
        400px;

    top:
        -180px;

    right:
        10%;

    background:
        rgba(201,164,92,.10);

}


.vp-final-orb-2 {

    width:
        300px;

    height:
        300px;

    bottom:
        -150px;

    left:
        10%;

    background:
        rgba(217,75,75,.07);

}


.vp-final-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        800px;

    margin:
        0 auto;

    text-align:
        center;

}


.vp-final-content .vp-section-kicker {

    justify-content:
        center;

}


.vp-final-content h2 {

    margin:
        20px 0;

    font-size:
        clamp(45px, 6vw, 78px);

    line-height:
        .98;

    letter-spacing:
        -.055em;

}


.vp-final-content > p {

    max-width:
        620px;

    margin:
        0 auto;

    color:
        var(--vp-muted);

    font-size:
        15px;

    line-height:
        1.8;

}


.vp-final-actions {

    justify-content:
        center;

}


.vp-final-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        18px;

    margin-top:
        28px;

}


.vp-final-meta span {

    color:
        #696972;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


.vp-final-meta span::first-letter {

    color:
        var(--vp-gold);

}


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

@media (max-width: 1050px) {

    .vp-hero .vp-container {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .8fr);

        gap:
            45px;

    }


    .vp-services-grid {

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

    }


    .vp-process-flow {

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

        row-gap:
            45px;

    }


    .vp-process-step:nth-child(4) {

        border-left:
            0;

    }


    .vp-format-grid {

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

    }


    .vp-featured-grid,
    .vp-post-grid {

        gap:
            55px;

    }

}


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

@media (max-width: 767px) {

    .vp-container {

        width:
            calc(100% - 34px);

    }


    .vp-hero {

        min-height:
            auto;

        padding:
            125px 0 80px;

    }


    .vp-hero .vp-container {

        display:
            flex;

        flex-direction:
            column;

        gap:
            55px;

        align-items:
            stretch;

    }


    .vp-hero-title {

        font-size:
            clamp(45px, 14vw, 64px);

        letter-spacing:
            -.055em;

    }


    .vp-hero-text {

        font-size:
            14px;

        line-height:
            1.75;

    }


    .vp-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .vp-btn {

        width:
            100%;

    }


    .vp-hero-tags {

        gap:
            7px;

    }


    .vp-hero-tags span {

        font-size:
            8px;

        padding:
            7px 9px;

    }


    .vp-video-placeholder {

        min-height:
            300px;

    }


    .vp-frame {

        transform:
            none;

    }


    .vp-label-camera {

        left:
            -8px;

    }


    .vp-label-edit {

        right:
            -8px;

    }


    .vp-scroll-line {

        display:
            none;

    }


    .vp-services,
    .vp-featured,
    .vp-process,
    .vp-post,
    .vp-formats,
    .vp-why,
    .vp-faq {

        padding:
            85px 0;

    }


    .vp-section-heading h2,
    .vp-featured-content h2,
    .vp-post-content h2,
    .vp-why-intro h2,
    .vp-faq-intro h2 {

        font-size:
            clamp(35px, 10vw, 48px);

    }


    .vp-services-grid {

        grid-template-columns:
            1fr;

        margin-top:
            45px;

    }


    .vp-service-card {

        min-height:
            270px;

    }


    .vp-services-footer {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .vp-services-line {

        display:
            none;

    }


    .vp-featured-grid,
    .vp-post-grid,
    .vp-why-grid,
    .vp-faq-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .vp-featured-frame {

        transform:
            none;

    }


    .vp-featured-screen,
    .vp-featured-screen-content {

        min-height:
            290px;

    }


    .vp-process-flow {

        grid-template-columns:
            1fr;

        margin-top:
            50px;

    }


    .vp-process-step {

        padding:
            0 0 30px;

        border-left:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);

    }


    .vp-process-step:last-child {

        border-bottom:
            0;

    }


    .vp-process-footer {

        display:
            none;

    }


    .vp-post-grid {

        gap:
            45px;

    }


    .vp-preview-frame {

        min-height:
            220px;

    }


    .vp-format-grid {

        grid-template-columns:
            1fr;

        margin-top:
            45px;

    }


    .vp-format-card {

        min-height:
            215px;

    }


    .vp-why-intro {

        position:
            relative;

        top:
            auto;

    }


    .vp-why-item {

        grid-template-columns:
            35px 1fr;

        gap:
            12px;

    }


    .vp-faq-intro {

        position:
            relative;

        top:
            auto;

    }


    .vp-faq-question {

        gap:
            15px;

        padding:
            20px 0;

        font-size:
            14px;

    }


    .vp-faq-answer p {

        padding-right:
            42px;

        font-size:
            13px;

        line-height:
            1.7;

    }


    .vp-faq-item.vp-faq-open
    .vp-faq-answer p {

        padding-bottom:
            20px;

    }


    .vp-faq-note {

        margin-top:
            25px;

    }


    .vp-final {

        min-height:
            auto;

        padding:
            90px 0;

    }


    .vp-final-content h2 {

        font-size:
            clamp(43px, 12vw, 60px);

    }


    .vp-final-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .vp-final-meta {

        flex-direction:
            column;

        gap:
            10px;

    }

}


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

@media (max-width: 420px) {

    .vp-container {

        width:
            calc(100% - 28px);

    }


    .vp-hero {

        padding-top:
            110px;

    }


    .vp-hero-title {

        font-size:
            43px;

    }


    .vp-video-placeholder {

        min-height:
            250px;

    }


    .vp-play-button {

        width:
            65px;

        height:
            65px;

    }


    .vp-floating-label {

        font-size:
            7px;

        padding:
            8px 9px;

    }


    .vp-service-card {

        padding:
            23px;

    }


    .vp-featured-screen,
    .vp-featured-screen-content {

        min-height:
            250px;

    }


    .vp-editing-preview {

        padding:
            8px;

    }


    .vp-preview-frame {

        min-height:
            190px;

    }


    .vp-track {

        grid-template-columns:
            42px 1fr;

    }


    .vp-faq-question strong {

        width:
            29px;

        height:
            29px;

        flex-basis:
            29px;

    }

}


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

.vp-page a:focus-visible,
.vp-page button:focus-visible {

    outline:
        2px solid
        var(--vp-gold);

    outline-offset:
        4px;

}


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

    .vp-page *,
    .vp-page *::before,
    .vp-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}