/* ==========================================================
   LEEP PROJECTS
   MASTER SITE STYLESHEET
   ========================================================== */


/* ==========================================================
   ROOT VARIABLES
   ========================================================== */

:root {
    --ink: #080a0d;
    --paper: #f2efe7;
    --acid: #d7ff42;
    --ember: #ff6b43;
    --violet: #8e7cff;
    --muted: #9ca3ad;
    --line: rgba(255,255,255,.14);
    --panel: #11151b;
    --panel2: #171c23;
    --max: 1480px;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
}

body.modal-open {
    overflow: hidden;
}

.hidden {
    display: none;
}

.loading {
    color: var(--muted);
}


/* ==========================================================
   FILM GRAIN
   ========================================================== */

.grain {
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    opacity: .05;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}


/* ==========================================================
   TOP BAR
   ========================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px clamp(22px,4vw,70px);

    background: rgba(8,10,13,.8);
    backdrop-filter: blur(18px);

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

.brand {
    display: flex;
    gap: 12px;
    align-items: center;

    color: #fff;
    text-decoration: none;

    font-weight: 700;
    letter-spacing: .08em;
}

.brand b {
    color: var(--muted);
    font-weight: 400;
}

.brand-mark {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 1px solid #fff;
    border-radius: 50%;

    font-family: Georgia, serif;
    font-style: italic;
}

.topbar nav {
    display: flex;
    gap: 28px;
}

.topbar nav a,
.text-link {
    color: #fff;
    text-decoration: none;
}


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

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 999px;

    padding: 15px 24px;

    background: var(--acid);
    color: #0a0c0f;

    text-decoration: none;
    font-weight: 800;

    cursor: pointer;
}

.pill.small {
    padding: 10px 17px;
    font-size: 13px;
}

.pill.wide {
    width: 100%;
    font-size: 16px;
}

.ghost {
    border: 1px solid var(--line);
    border-radius: 10px;

    padding: 10px 16px;

    background: transparent;
    color: #fff;

    cursor: pointer;
}


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

.hero {
    position: relative;

    min-height: 88vh;

    padding:
        clamp(110px,14vw,220px)
        clamp(24px,6vw,96px)
        90px;

    overflow: hidden;
}

.eyebrow,
.section-no,
.summary-label {
    color: var(--acid);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .24em;
}

.hero h1 {
    position: relative;

    max-width: 1250px;

    margin: 25px 0 30px;

    font-size: clamp(54px,8.5vw,150px);
    line-height: .86;
    letter-spacing: -.055em;
}

.hero h1 em {
    color: transparent;

    font-family: Georgia, serif;
    font-weight: 400;

    -webkit-text-stroke:
        1px rgba(255,255,255,.76);
}

.hero-copy {
    max-width: 710px;

    color: #c5cad1;

    font-size: clamp(18px,2vw,27px);
}

.hero-actions {
    display: flex;
    gap: 24px;
    align-items: center;

    margin-top: 38px;
}

.hero-stat {
    position: absolute;
    right: 7vw;
    bottom: 60px;

    display: flex;
    align-items: center;
    gap: 18px;
}

.hero-stat strong {
    color: var(--acid);

    font-family: Georgia, serif;
    font-size: 70px;
    font-style: italic;
}

.hero-stat span {
    max-width: 160px;
    color: var(--muted);
}

.hero-orbit {
    position: absolute;

    border: 1px solid rgba(215,255,66,.32);
    border-radius: 50%;

    filter: blur(.1px);
}

.orbit-a {
    width: 58vw;
    height: 58vw;

    right: -16vw;
    top: 2vw;
}

.orbit-b {
    width: 36vw;
    height: 36vw;

    right: -5vw;
    top: 14vw;

    border-color: rgba(142,124,255,.35);
}


/* ==========================================================
   MAIN PAGE SECTIONS
   ========================================================== */

.manifesto,
.packages-section,
.builder {
    max-width: var(--max);
    margin: auto;

    padding:
        110px
        clamp(24px,5vw,75px);
}

.manifesto {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8vw;

    border-top: 1px solid var(--line);
}

h2 {
    margin: 14px 0;

    font-size: clamp(42px,5vw,78px);
    line-height: .96;
    letter-spacing: -.04em;
}

.manifesto-copy {
    padding-top: 45px;

    color: #c8ccd2;

    font-size: 22px;
}

.section-heading,
.builder-intro {
    display: flex;
    gap: 35px;
    align-items: flex-start;

    margin-bottom: 55px;
}

.section-heading p,
.builder-intro p {
    color: var(--muted);
    font-size: 18px;
}


/* ==========================================================
   PACKAGE CARDS
   BIBEKA APPROVED LEEP ASCENT
   ========================================================== */

.packages-section {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    padding:
        clamp(78px, 7vw, 120px)
        clamp(45px, 6vw, 105px)
        clamp(92px, 8vw, 135px);

    background: #000000;

    scroll-margin-top: 90px;
}


.packages-section .section-heading {
    display: block;

    margin:
        0
        0
        clamp(34px, 4vw, 56px);
}


.packages-section .section-no {
    display: none;
}


.packages-section .section-heading h2 {
    margin:
        0
        0
        10px;

    color: #ffffff;

    font-size:
        clamp(
            44px,
            4vw,
            68px
        );

    font-weight: 800;

    line-height: .96;

    letter-spacing: -.045em;
}


.packages-section .section-heading p {
    margin: 0;

    color: #c6c6c6;

    font-size:
        clamp(
            13px,
            1vw,
            16px
        );

    line-height: 1.5;
}


.package-rail {
    display: grid;

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

    gap:
        clamp(
            10px,
            1vw,
            16px
        );

    width: 100%;

    padding:
        0
        0
        42px;

    overflow: visible;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 2%,
            #e5ae29 2%,
            #e5ae29 82%,
            #3a3a3a 82%,
            #3a3a3a 97%,
            transparent 97%,
            transparent 100%
        )
        left bottom / 100% 3px
        no-repeat;
}


.package-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 510px;

    padding:
        22px
        20px
        18px;

    overflow: hidden;

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

    border-radius: 17px;

    background:
        #141310;

    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}


/*
 * Bibeka package illustration area.
 *
 * The existing JavaScript remains untouched.
 * Each dynamically generated card receives its
 * approved artwork by package position.
 */

.package-card::before {
    content: "";

    display: block;

    width: 100%;
    height: 170px;

    margin:
        5px
        auto
        18px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    flex: 0 0 auto;
}


.package-card:nth-child(1)::before {
    background-image:
        url("/assets/leep-v3/icons/ascent/leep_exposure.png");
}


.package-card:nth-child(2)::before {
    background-image:
        url("/assets/leep-v3/icons/ascent/story_leep.png");
}


.package-card:nth-child(3)::before {
    background-image:
        url("/assets/leep-v3/icons/ascent/instant_leep_oomph.png");
}


.package-card:nth-child(4)::before {
    background-image:
        url("/assets/leep-v3/icons/ascent/leep_bonanza.png");
}


.package-card:nth-child(5)::before {
    background-image:
        url("/assets/leep-v3/icons/ascent/leep_blockbuster.png");
}


.package-card:nth-child(6)::before {
    background-image:
        url("/assets/leep-v3/icons/ascent/ultimate_leep.png");
}


.package-card .order {
    position: absolute;

    left: 20px;
    top: 18px;

    z-index: 2;

    color: #e5ae29;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;
    font-weight: 800;
    font-style: normal;

    letter-spacing: .04em;
}


.package-card h3 {
    margin:
        0
        0
        10px;

    min-height: 52px;

    color: #ffffff;

    font-size:
        clamp(
            19px,
            1.35vw,
            24px
        );

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -.025em;
}


.package-card .tag {
    min-height: 42px;

    margin-bottom: 12px;

    color: #e5ae29;

    font-size:
        clamp(
            12px,
            .82vw,
            14px
        );

    font-weight: 800;

    line-height: 1.25;
}


.package-card > p {
    margin:
        0
        0
        18px;

    color: #c9c9c9;

    font-size:
        clamp(
            11px,
            .73vw,
            13px
        );

    line-height: 1.48;
}


.package-card .metric {
    display: none;
}


.package-card button,
.package-card .pill {
    width: 100%;

    min-height: 38px;

    margin-top: auto;

    padding:
        8px
        12px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #d99a13,
            #f1be3f,
            #d99a13
        );

    color: #090909;

    font-size:
        clamp(
            10px,
            .68vw,
            12px
        );

    font-weight: 800;

    line-height: 1.1;

    text-align: center;

    cursor: pointer;

    transition:
        transform .18s ease,
        filter .18s ease;
}


.package-card button:hover,
.package-card .pill:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.08);
}


.package-card button:focus-visible,
.package-card .pill:focus-visible {
    outline:
        2px solid
        #87CEEB;

    outline-offset: 3px;
}


/* ==========================================================
   LEEP ASCENT RESPONSIVE
   ========================================================== */

@media (max-width: 1250px) {

    .package-rail {
        grid-template-columns:
            repeat(
                6,
                minmax(205px, 1fr)
            );

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: thin;

        scroll-snap-type:
            x proximity;

        padding-bottom: 35px;
    }


    .package-card {
        scroll-snap-align: start;
    }

}


@media (max-width: 700px) {

    .packages-section {
        padding:
            68px
            20px
            82px;
    }


    .packages-section .section-heading {
        margin-bottom: 30px;
    }


    .packages-section .section-heading h2 {
        font-size:
            clamp(
                42px,
                13vw,
                60px
            );
    }


    .package-rail {
        grid-template-columns:
            repeat(
                6,
                minmax(
                    250px,
                    78vw
                )
            );

        gap: 14px;

        margin-right: -20px;

        padding-right: 20px;
        padding-bottom: 34px;

        background:
            linear-gradient(
                90deg,
                #e5ae29 0%,
                #e5ae29 72%,
                #3a3a3a 72%,
                #3a3a3a 94%,
                transparent 94%
            )
            left bottom / 100% 3px
            no-repeat;
    }


    .package-card {
        min-height: 500px;

        padding:
            21px
            19px
            18px;
    }


    .package-card::before {
        height: 155px;
    }


    .package-card h3 {
        min-height: auto;

        font-size: 22px;
    }


    .package-card .tag {
        min-height: auto;

        font-size: 13px;
    }


    .package-card > p {
        font-size: 12px;
    }


    .package-card .metric strong {
        font-size: 21px;
    }

}




/* ==========================================================
   BIBEKA APPROVED BUILD YOUR LEEP INTRODUCTION
   ========================================================== */

.builder {
    position: relative;

    width: 100%;

    padding:
        clamp(82px, 8vw, 135px)
        clamp(45px, 6vw, 105px)
        70px;

    background:
        linear-gradient(
            rgba(0,0,0,.18),
            rgba(0,0,0,.32)
        ),
        url("/assets/leep-v3/images/design_image_05.png")
        center center / cover
        no-repeat;

    scroll-margin-top: 90px;

    /*
     * overflow:hidden created a containing scroll context that
     * prevented YOUR LEEP from following the desktop viewport.
     *
     * clip preserves the intended visual clipping without
     * creating that scrolling context, allowing position:sticky
     * to operate normally.
     */
    overflow: clip;
}


.builder-intro.v3-build-intro {
    display: grid;

    grid-template-columns:
        minmax(230px, .72fr)
        minmax(280px, 1fr)
        minmax(360px, 1.35fr);

    align-items: center;

    gap:
        clamp(
            34px,
            4.5vw,
            86px
        );

    width: 100%;
    max-width: 1700px;

    margin:
        0
        auto
        clamp(65px, 7vw, 110px);

    position: relative;
}


.v3-build-heading {
    position: relative;
}


.v3-build-heading .section-no {
    display: block;

    margin-bottom: 20px;

    color: var(--acid);

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

    letter-spacing: .14em;
}


.v3-build-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            48px,
            4.4vw,
            82px
        );

    font-weight: 800;

    line-height: .86;

    letter-spacing: -.055em;
}


.v3-build-copy {
    align-self: center;

    max-width: 460px;
}


.v3-build-copy p {
    margin: 0;

    color: #d3d3d3;

    font-size:
        clamp(
            14px,
            1.05vw,
            18px
        );

    line-height: 1.55;
}


.v3-build-art {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height:
        clamp(
            260px,
            25vw,
            430px
        );
}


.v3-build-art img {
    display: block;

    width: 118%;
    height: auto;

    max-width: 900px;

    object-fit: contain;
}


/* ==========================================================
   BUILD INTRODUCTION RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {

    .builder-intro.v3-build-intro {
        grid-template-columns:
            minmax(220px, .8fr)
            minmax(240px, 1fr);

        gap: 36px;
    }


    .v3-build-art {
        grid-column:
            1 / -1;

        min-height: auto;
    }


    .v3-build-art img {
        max-width: 620px;
    }

}


@media (max-width: 700px) {

    .builder {
        padding:
            68px
            20px
            60px;
    }


    .builder-intro.v3-build-intro {
        grid-template-columns: 1fr;

        gap: 26px;

        margin-bottom: 55px;
    }


    .v3-build-heading h2 {
        font-size:
            clamp(
                46px,
                14vw,
                66px
            );
    }


    .v3-build-copy {
        max-width: none;
    }


    .v3-build-art {
        width: 100%;
    }


    .v3-build-art img {
        width: 112%;
        max-width: 620px;

        margin: 0 auto;
    }

}






/* ==========================================================
   BIBEKA BUILD FULL WIDTH BACKGROUND
   ========================================================== */

.builder {
    max-width: none !important;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    width: 100vw;
}

.builder > .builder-intro,
.builder > #bookingForm {
    width: min(
        calc(100% - 48px),
        1700px
    );

    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   BUILD MOUNTAIN CONTENT LAYER
   ========================================================== */

.builder > * {
    position: relative;
    z-index: 2;
}



/* ==========================================================
   BIBEKA CONFIGURE PANEL GLASS TREATMENT
   ========================================================== */

.configuration-card {
    background:
        rgba(
            12,
            18,
            24,
            .72
        ) !important;

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

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

    -webkit-backdrop-filter:
        blur(9px);

    backdrop-filter:
        blur(9px);
}


/*
 * Keep the internal package selectors slightly translucent too,
 * so the mountain remains visible without harming legibility.
 */

.configuration-card .selector-card,
.configuration-card .configuration-summary-grid > div {
    background:
        rgba(
            16,
            23,
            31,
            .58
        );
}

/* ==========================================================
   BUILDER
   ========================================================== */

.builder {
    padding-top: 70px;
}

.builder-intro {
    max-width: 850px;
}

.builder-layout {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        370px;

    gap: 28px;
}

.builder-main {
    display: grid;
    gap: 18px;
}

.step-card {
    padding:
        clamp(22px,3vw,42px);

    border: 1px solid var(--line);
    border-radius: 22px;

    background: var(--panel);
}

.step-title {
    display: flex;
    gap: 18px;
    align-items: flex-start;

    margin-bottom: 28px;
}

.step-title > b {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--acid);
    border-radius: 50%;

    color: var(--acid);
}

.step-title h3 {
    margin: 0;
    font-size: 27px;
}

.step-title p {
    margin: 5px 0;
    color: var(--muted);
}


/* ==========================================================
   PACKAGE AND PLAN SELECTORS
   ========================================================== */

.selector-grid,
.plan-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px;
}

.plan-grid {
    margin-top: 16px;
}

.choice {
    padding: 17px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--panel2);

    cursor: pointer;

    transition: .2s;
}

.choice:hover,
.choice.active {
    border-color: var(--acid);

    box-shadow:
        0 0 0 1px
        var(--acid)
        inset;
}

.choice h4 {
    margin: 0 0 5px;
}

.choice p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}

.choice .price {
    display: block;

    margin-top: 12px;

    font-size: 20px;
    font-weight: 800;
}


/* ==========================================================
   PAYMENT OPTION SAVINGS
   ========================================================== */

.payment-saving {
    margin-top: 8px;

    color: var(--acid);

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
}

.payment-saving-regular {
    color: var(--muted);
}


/* ==========================================================
   GENERAL FORM CONTROLS
   ========================================================== */

label {
    display: grid;
    gap: 7px;

    font-size: 13px;
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;

    padding: 13px;

    border: 1px solid #343b46;
    border-radius: 10px;

    background: #0b0e12;
    color: #fff;

    font: inherit;
}

textarea {
    resize: vertical;
}

.fields {
    display: grid;
    gap: 14px;

    margin-top: 14px;
}

.fields.two {
    grid-template-columns:
        1fr 1fr;
}

.fields.three {
    grid-template-columns:
        1fr 1fr 1fr;
}

.check {
    grid-template-columns:
        auto 1fr;

    align-items: flex-start;
}

.check input {
    width: 18px;
    height: 18px;

    margin-top: 3px;
}

.filter-row {
    display: flex;
    gap: 10px;

    margin-bottom: 14px;
}

.filter-row input {
    flex: 1;
}


/* ==========================================================
   ADVANCED PRODUCTION CREW LIST
   ========================================================== */

.addon-list {
    display: grid;
    gap: 8px;

    max-height: 760px;

    padding-right: 5px;

    overflow: auto;
}

.addon-row {
    display: grid;
    grid-template-columns:
        1fr auto;

    gap: 18px;

    align-items: center;

    padding: 16px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: #0d1116;
}

.addon-row h4 {
    margin: 0 0 4px;
}

.addon-row p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}

.addon-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.addon-controls input {
    width: 70px;
}

.level-badge {
    color: var(--acid);
    font-size: 11px;
}


/* ==========================================================
   ADVANCED PRODUCTION CREW CHECKBOX SELECTOR
   ========================================================== */

.crew-service-selector {
    margin-top: 18px;
}


/* Sticky guidance */

.crew-service-selector-header {
    position: sticky;
    top: 0;
    z-index: 20;

    margin-bottom: 18px;
    padding: 12px 14px;

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

    border-radius: 10px;

    background:
        rgba(10,12,15,.96);

    backdrop-filter:
        blur(8px);
}

.crew-selected-count {
    display: block;

    margin-bottom: 6px;

    color: var(--acid);

    font-weight: 800;
}

.crew-selector-help {
    display: block;

    color: #90D5FF;

    line-height: 1.45;
}


/* Two column alphabetical grid */

.crew-service-selector-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 12px 18px;
}

.crew-service-checkbox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 10px;

    width: 100%;

    padding: 12px 14px;

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

    border-radius: 10px;

    cursor: pointer;

    text-align: left;
}

.crew-service-checkbox input[type="checkbox"] {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin: 2px 0 0;

    accent-color: var(--acid);
}

.crew-service-checkbox-name {
    flex: 1 1 auto;

    min-width: 0;

    text-align: left;
}

.crew-service-checkbox.selected {
    border-color: var(--acid);
}

.crew-service-checkbox.selected
.crew-service-checkbox-name {
    color: var(--acid);
    font-weight: 700;
}


/* ==========================================================
   SELECTED CREW SERVICES
   ========================================================== */

.crew-selected-services {
    display: grid;
    gap: 16px;

    margin-top: 24px;
}

.crew-selected-services-heading h4 {
    margin: 0;

    color: var(--acid);

    font-size: 20px;
}

.crew-selected-services-empty {
    margin-top: 18px;
    padding: 16px;

    border:
        1px dashed
        rgba(255,255,255,.16);

    border-radius: 12px;

    color: var(--muted);
}

.crew-priced-addon {
    width: 100%;
    min-width: 0;
}

.crew-priced-addon-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.crew-remove-service,
.personnel-group-remove {
    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 8px;

    padding: 7px 10px;

    background: transparent;
    color: #fff;

    cursor: pointer;

    font-size: 12px;
}

.crew-remove-service:hover,
.personnel-group-remove:hover {
    border-color: var(--ember);
    color: var(--ember);
}


/* ==========================================================
   PERSONNEL GROUP
   ========================================================== */

.personnel-groups {
    display: grid;
    gap: 16px;

    margin-top: 18px;
}

.personnel-group {
    padding: 16px;

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

    border-radius: 12px;

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

.personnel-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 4px;
}

.personnel-group-header strong {
    color: #fff;
}


/* ==========================================================
   CAST / CREW THREE CONTROL ROW
   ========================================================== */

.crew-selection-row {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 18px;

    align-items: end;

    margin-top: 18px;
}

.crew-selection-field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}

.crew-selection-field > span {
    color: #90D5FF;

    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
}

.crew-selection-field select,
.crew-selection-field input {
    width: 100%;
    min-height: 48px;

    padding: 10px 12px;

    border-radius: 10px;

    color: var(--acid);

    font: inherit;
    font-weight: 700;
}

.crew-selection-field select option {
    background: #11151a;
    color: var(--acid);
}

.crew-selection-field select:disabled,
.crew-selection-field input:disabled {
    opacity: .55;
    cursor: not-allowed;
}


/* ==========================================================
   CAST / CREW PRICE DISPLAY
   ========================================================== */

.crew-selected-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;

    margin-top: 16px;

    text-align: right;
}

.crew-price-line {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    gap: 8px;

    width: auto;
}

.crew-price-line span {
    color: #90D5FF;
}

.crew-price-line span::after {
    content: " =";
}

.crew-price-line strong {
    color: #90D5FF;

    font-style: italic;
}

.crew-subtotal-line {
    padding-top: 8px;

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

.crew-subtotal-line strong {
    color: var(--acid);

    font-style: normal;
    font-weight: 800;
}


/* ==========================================================
   PERSONNEL GROUP ACTION
   ========================================================== */

.personnel-group-actions {
    margin-top: 16px;
}

.add-personnel-group {
    border-color: var(--acid);

    background: var(--acid);
    color: #0a0c0f;

    font-weight: 800;
}

.add-personnel-group:hover,
.add-personnel-group:focus {
    border-color: var(--acid);

    background: var(--acid);
    color: #0a0c0f;
}


/* ==========================================================
   CAST / CREW SERVICE TOTAL
   ========================================================== */

.crew-service-total {
    margin-top: 18px;

    color: var(--acid);

    text-align: right;
    text-decoration: underline;

    font-weight: 800;
}

.crew-service-total span,
.crew-service-total strong {
    color: var(--acid);
    font-weight: 800;
}

.crew-service-total strong {
    margin-left: 6px;
}


/* ==========================================================
   ADVANCED CAMERA GEAR
   ========================================================== */

.camera-levels {
    display: grid;
    gap: 12px;
}

.camera-level {
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 15px;
}

.camera-level summary {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    padding: 18px;

    background: var(--panel2);

    cursor: pointer;

    list-style: none;
}

.camera-level summary::-webkit-details-marker {
    display: none;
}

.camera-level .camera-options {
    display: grid;
    gap: 8px;

    padding: 12px;
}


/* ==========================================================
   ADVANCED CAMERA GEAR OPTION ROW
   Checkbox | Camera Name | Price
   ========================================================== */

.camera-option {
    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items: center;

    gap: 18px;

    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--line);
    border-radius: 10px;
}


/*
 * The label occupies the entire first
 * grid column.
 *
 * Inside it:
 *
 * checkbox | camera name
 */

.camera-option label {
    display: grid;
    grid-template-columns:
        20px
        minmax(0,1fr);

    align-items: center;

    gap: 12px;

    width: 100%;
    min-width: 0;

    margin: 0;
}


/* Checkbox */

.camera-option label
input[type="checkbox"] {
    position: static;

    display: block;

    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;

    justify-self: start;

    accent-color: var(--acid);
}


/* Camera name */

.camera-option label span {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--acid);
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    text-align: left;
    line-height: 1.4;
}


/* Price */

.camera-option > strong {
    display: block;

    margin: 0;

    color: var(--acid);

    white-space: nowrap;

    text-align: right;

    font-weight: 800;
}


/* ==========================================================
   CONTRACT
   ========================================================== */

.contract-copy {
    padding: 20px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: #0c1015;
    color: #c8ccd2;
}

.contract-copy h4 {
    color: #fff;
    font-size: 20px;
}




/* ==========================================================
   BUILD RESPONSIVE ORDER
   Configure first, summary second
   ========================================================== */

@media (max-width: 1100px) {

    .builder-layout {
        display: flex;
        flex-direction: column;
    }

    .builder-main {
        order: 1;
        width: 100%;
    }

    .summary-card {
        order: 2;
        width: 100%;
    }

    .summary-sticky {
        position: relative;
        top: auto;
        width: 100%;
        max-width: none;
    }

}

/* ==========================================================
   BOOKING SUMMARY
   ========================================================== */

.summary-card {
    position: relative;
}

.summary-sticky {
    position: sticky;
    top: 95px;

    padding: 25px;

    border-radius: 22px;

    background: var(--paper);
    color: #111;
}

.summary-sticky h3 {
    font-size: 27px;
}

.summary-lines {
    margin: 16px 0;
    padding: 15px 0;

    border-top: 1px solid #c9c6bd;
    border-bottom: 1px solid #c9c6bd;
}

.summary-line {
    display: flex;
    justify-content: space-between;

    gap: 15px;

    padding: 6px 0;

    font-size: 13px;
}

.summary-line span:last-child {
    font-weight: 800;
}

.summary-total,
.summary-due {
    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-top: 13px;
}

.summary-total strong {
    font-size: 28px;
}

.summary-due {
    margin-bottom: 20px;
    color: #53565b;
}

.summary-due strong {
    font-size: 20px;
}

.micro {
    color: #6f7379;
    font-size: 11px;
    text-align: center;
}

.form-message {
    margin-top: 10px;

    color: #a20;

    font-size: 12px;
}




/* ==========================================================
   BIBEKA BUILD SUMMARY LABEL
   ========================================================== */

.summary-sticky .summary-label {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-bottom: 12px;

    padding:
        6px
        10px;

    border-radius: 999px;

    background: var(--acid);

    color: #090909;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .18em;

    line-height: 1;
}

/* ==========================================================
   PAYMENT PAGE
   ========================================================== */

.payment-shell {
    display: grid;
    grid-template-columns:
        1fr 380px;

    gap: 25px;

    max-width: 1180px;

    margin: 0 auto;
    padding: 90px 24px;
}

.payment-card,
.schedule-card {
    padding: 30px;

    border: 1px solid var(--line);
    border-radius: 22px;

    background: var(--panel);
}

.payment-card h1 {
    margin: 20px 0;

    font-size: clamp(44px,6vw,80px);
    line-height: .95;
}

.payment-amount {
    display: grid;
    gap: 5px;

    margin: 30px 0;
    padding: 24px;

    border-radius: 18px;

    background: var(--paper);
    color: #111;
}

.payment-amount strong {
    font-size: 36px;
}

.payment-amount small {
    color: #666;
}

.gateway-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.gateway {
    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 14px;

    background: var(--panel2);
    color: #fff;

    text-align: left;

    cursor: pointer;
}

.gateway strong,
.gateway span {
    display: block;
}

.gateway span {
    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}

.gateway.active {
    border-color: var(--acid);
}

.gateway-panel {
    margin-top: 20px;
    padding-top: 20px;

    border-top: 1px solid var(--line);
}

.schedule-card {
    height: max-content;
}

.schedule-row {
    display: grid;
    grid-template-columns:
        1fr auto;

    gap: 8px;

    padding: 16px 0;

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

.schedule-row span small {
    display: block;
    color: var(--muted);
}

.schedule-row em {
    grid-column: 1 / -1;

    font-size: 10px;
    font-style: normal;
    letter-spacing: .12em;
}

.status.paid {
    color: var(--acid);
}

.status.due {
    color: #ffb05c;
}

.paid-banner {
    margin: 25px 0;
    padding: 18px;

    border:
        1px solid
        rgba(215,255,66,.4);

    border-radius: 12px;

    background:
        rgba(215,255,66,.12);
}


/* ==========================================================
   PIN PAYMENTS
   ========================================================== */

.pin-secure-header {
    margin-bottom: 24px;
}

.pin-secure-kicker {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;

    opacity: .7;
}

.pin-secure-header h2 {
    margin: 0 0 10px;
    font-size: 28px;
}

.pin-secure-header p {
    margin: 0;

    line-height: 1.6;

    opacity: .82;
}

.pin-payment-summary {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap: 12px;

    margin: 22px 0 26px;
}

.pin-payment-summary > div {
    padding: 16px;

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

    border-radius: 14px;

    background:
        rgba(255,255,255,.035);
}

.pin-payment-summary span {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .6;
}

.pin-payment-summary strong {
    display: block;

    font-size: 16px;
    line-height: 1.35;
}

.pin-secure-form {
    margin-top: 10px;
}

.pin-fields {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 18px;

    margin: 20px 0;
}

.pin-field {
    display: block;
}

.pin-field-wide {
    grid-column: 1 / -1;
}

.pin-field-label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

.pinbox {
    position: relative;

    width: 100%;
    min-height: 54px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;

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

    overflow: hidden;

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

.pinbox iframe {
    display: block;

    width: 100% !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

.pinbox:focus-within {
    border-color: rgba(255,255,255,.5);

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

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.06);
}

.pin-field-error {
    display: block;

    min-height: 18px;

    margin-top: 6px;

    color: #ff8068;

    font-size: 12px;
}

.pin-security-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;

    margin: 20px 0;
    padding: 14px 16px;

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

    border-radius: 12px;

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

.pin-security-note strong {
    white-space: nowrap;
}

.pin-security-note span {
    line-height: 1.45;
    opacity: .72;
}


/* ==========================================================
   CONFIGURATION MODAL
   ========================================================== */

.leep-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.leep-modal.hidden {
    display: none;
}

.leep-modal-backdrop {
    position: absolute;
    inset: 0;

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

    backdrop-filter:
        blur(10px);
}

.leep-modal-dialog {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width:
        min(
            1080px,
            100%
        );

    max-height:
        calc(
            100vh - 48px
        );

    overflow: hidden;

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

    border-radius: 24px;

    background: #11161c;

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

.leep-modal-header {
    padding:
        30px
        34px
        22px;

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

.leep-modal-header h2 {
    margin: 8px 0;

    font-size:
        clamp(
            30px,
            4vw,
            52px
        );

    line-height: 1;
}

.leep-modal-header p {
    max-width: 720px;

    margin: 0;

    line-height: 1.6;

    opacity: .75;
}

.leep-modal-progress {
    display: grid;
    grid-template-columns:
        repeat(4,1fr);

    gap: 10px;

    padding: 18px 34px;

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

.modal-progress-step {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    appearance: none;

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

    border-radius: 14px;

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

    color: inherit;

    text-align: left;

    cursor: pointer;
}

.modal-progress-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

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

    border-radius: 50%;
}

.modal-progress-step.active {
    border-color: #d7ff2f;

    background:
        rgba(215,255,47,.06);
}

.modal-progress-step.active span {
    border-color: #d7ff2f;
}

.leep-modal-body {
    padding:
        30px
        34px
        34px;

    overflow-y: auto;
}

.leep-modal-stage {
    display: block;
}

.leep-modal-stage.hidden {
    display: none;
}

.modal-stage-heading {
    display: flex;
    gap: 18px;
    align-items: flex-start;

    margin-bottom: 24px;
}

.modal-stage-heading .section-no {
    margin-top: 5px;
}

.modal-stage-heading h3 {
    margin: 0 0 8px;
    font-size: 28px;
}

.modal-stage-heading p {
    margin: 0;

    line-height: 1.55;

    opacity: .72;
}

.modal-choice-bar {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 22px;
}

.modal-choice-bar .gateway {
    width: 100%;
    min-height: 78px;

    text-align: left;
}

.modal-actions {
    margin-top: 28px;
}

.modal-actions-split {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


/* ==========================================================
   CONFIGURATION REVIEW
   ========================================================== */

.modal-review-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}

.modal-review-grid > div {
    padding: 18px;

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

    border-radius: 14px;

    background:
        rgba(255,255,255,.03);
}

.modal-review-grid span {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .58;
}

.modal-review-grid strong {
    display: block;

    font-size: 17px;
    line-height: 1.4;
}

.configuration-summary {
    margin-top: 26px;
    padding-top: 22px;

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

.configuration-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 18px;
}

.configuration-summary-head h4 {
    margin: 7px 0 0;
}

.configuration-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);

    gap: 12px;
}

.configuration-summary-grid > div {
    padding: 16px;

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

    border-radius: 12px;

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

.configuration-summary-grid span {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;

    opacity: .58;
}

.configuration-summary-grid strong {
    display: block;
    line-height: 1.4;
}


/* ==========================================================
   MODAL WARNINGS
   ========================================================== */

.leep-modal
.form-message:not(.hidden) {
    margin: 18px 0;
    padding: 14px 16px;

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

    border-radius: 12px;

    background:
        rgba(255,110,110,.16);

    color: #ffdede;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.modal-close-warning {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

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

    backdrop-filter:
        blur(8px);
}

.modal-close-warning.hidden {
    display: none;
}

.modal-close-warning-card {
    width:
        min(
            560px,
            100%
        );

    padding: 30px;

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

    border-radius: 20px;

    background: #171c23;

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

.modal-close-warning-card h3 {
    margin: 0 0 12px;
    font-size: 28px;
}

.modal-close-warning-card p {
    margin: 0;

    color: #c8ccd2;

    font-size: 15px;
    line-height: 1.6;
}


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

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

    gap: 20px;

    padding:
        50px
        clamp(24px,5vw,75px);

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

    color: var(--muted);
}

.v3-menu-toggle {
    display: none;

    justify-self: end;

    width: 42px;
    height: 42px;

    padding: 9px;

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

    border-radius: 8px;

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

    cursor: pointer;
}


.v3-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 4px 0;

    background: #ffffff;

    border-radius: 2px;
}


.v3-mobile-menu {
    display: none;
}

/* ==========================================================
   RESPONSIVE
   LARGE TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .builder-layout {
        grid-template-columns: 1fr;
    }

    .summary-card {
        order: 2;
    }

    .summary-sticky {
        position: relative;
        top: 0;
    }

    .manifesto {
        grid-template-columns: 1fr;
    }

    .topbar nav {
        display: none;
    }
}


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

@media (max-width: 900px) {

    .crew-selection-row {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .crew-selection-field:last-child {
        grid-column: 1 / -1;
    }

    .crew-service-selector-header {
        padding: 11px 12px;
    }

    .crew-selector-help {
        font-size: .92rem;
    }

    .camera-option {
        gap: 14px;
        padding: 14px;
    }

    .camera-option label {
        grid-template-columns:
            18px
            minmax(0,1fr);

        gap: 10px;
    }
}


/* ==========================================================
   RESPONSIVE
   PAYMENT
   ========================================================== */

@media (max-width: 850px) {

    .payment-shell {
        grid-template-columns: 1fr;
    }

    .gateway-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   RESPONSIVE
   CONFIGURATION MODAL
   ========================================================== */

@media (max-width: 820px) {

    .leep-modal {
        padding: 12px;
    }

    .leep-modal-dialog {
        max-height:
            calc(
                100vh - 24px
            );

        border-radius: 18px;
    }

    .leep-modal-header,
    .leep-modal-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .leep-modal-progress {
        grid-template-columns:
            1fr 1fr;

        padding-left: 20px;
        padding-right: 20px;
    }

    .modal-choice-bar,
    .modal-review-grid,
    .configuration-summary-grid {
        grid-template-columns: 1fr;
    }

    .configuration-summary-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-actions-split {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-actions-split .ghost,
    .modal-actions-split .pill {
        width: 100%;
    }
}


/* ==========================================================
   RESPONSIVE
   PIN PAYMENT
   ========================================================== */

@media (max-width: 760px) {

    .pin-payment-summary {
        grid-template-columns: 1fr;
    }

    .pin-fields {
        grid-template-columns: 1fr;
    }

    .pin-field-wide {
        grid-column: auto;
    }

    .pin-security-note {
        display: block;
    }

    .pin-security-note strong {
        display: block;
        margin-bottom: 4px;
    }
}


/* ==========================================================
   RESPONSIVE
   CREW CHECKBOXES
   ========================================================== */

@media (max-width: 700px) {

    .crew-service-selector-grid {
        grid-template-columns: 1fr;
    }
}

.v3-menu-toggle {
    display: block;

    justify-self: end;

    margin-right: 12px;
}


.v3-topbar {
    grid-template-columns:
        1fr
        auto
        auto;
}


.v3-mobile-menu {
    position: absolute;

    z-index: 300;

    top: 74px;
    right: 18px;

    display: none;

    min-width: 190px;

    padding: 10px;

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

    border-radius: 12px;

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

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


.v3-mobile-menu.open {
    display: grid;

    gap: 4px;
}


.v3-mobile-menu a {
    display: block;

    padding:
        12px
        14px;

    border-radius: 8px;

    color: #ffffff;

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

    text-decoration: none;
}


.v3-mobile-menu a:hover {
    background:
        rgba(255,255,255,.10);

    color: #f4c95f;
}

/* ==========================================================
   RESPONSIVE
   GENERAL SMARTPHONE
   ========================================================== */

@media (max-width: 680px) {

    .hero {
        min-height: auto;
    }

    .hero-stat {
        position: static;
        margin-top: 55px;
    }

    .selector-grid,
    .plan-grid,
    .fields.two,
    .fields.three {
        grid-template-columns: 1fr;
    }

    .addon-row {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 14px 18px;
    }

    .topbar .pill {
        display: none;
    }

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

    footer {
        flex-direction: column;
    }
}


/* ==========================================================
   RESPONSIVE
   SMARTPHONE
   ========================================================== */

@media (max-width: 600px) {

    /*
     * Sticky Crew Guidance
     */

    .crew-service-selector-header {
        padding: 10px 11px;
        border-radius: 8px;
    }

    .crew-selected-count {
        margin-bottom: 4px;
        font-size: .95rem;
    }

    .crew-selector-help {
        font-size: .84rem;
        line-height: 1.4;
    }


    /*
     * Crew Controls
     */

    .crew-selection-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .crew-selection-field:last-child {
        grid-column: auto;
    }

    .crew-selection-field select,
    .crew-selection-field input {
        min-height: 50px;
    }


    /*
     * Crew Prices
     */

    .crew-selected-price {
        align-items: stretch;
        text-align: left;
    }

    .crew-price-line {
        justify-content: flex-start;
        flex-wrap: wrap;
    }


    /*
     * Camera Gear
     *
     * On narrow screens the price goes
     * beneath the camera name instead
     * of crushing the name.
     */

    .camera-option {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .camera-option > strong {
        margin-left: 30px;

        text-align: left;

        justify-self: start;
    }
}

/* ==========================================================
   PIN PAYMENT ERROR MESSAGE
   ========================================================== */

.pin-payment-message {
    display: block;

    margin-top: 16px;
    padding: 15px 18px;

    border: 2px solid #ffffff;
    border-radius: 12px;

    background: rgba(190, 45, 45, 0.28);

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;

    text-align: left;
}

.pin-payment-message.hidden {
    display: none;
}

/* ==========================================================
   PHYSICAL ELECTRONIC SIGNATURE
   ========================================================== */

.signature-capture {
    margin-top: 8px;
}

.signature-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.signature-pad-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: #ffffff;
}

.signature-pad {
    display: block;
    width: 100%;
    height: 180px;
    cursor: crosshair;
    touch-action: none;
    background: #ffffff;
}

.signature-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.signature-clear {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.signature-clear:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(215, 255, 66, 0.55);
}

.signature-clear:active {
    transform: translateY(1px);
}

.signature-help {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 1.4;
}

.signature-pad-wrap.signature-error {
    border-color: #ff7a7a;
    box-shadow: 0 0 0 2px rgba(255, 122, 122, 0.12);
}

@media (max-width: 720px) {
    .signature-pad {
        height: 150px;
    }

    .signature-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* ==========================================================
/* ==========================================================
   LEEP V3
   BIBEKA APPROVED DESIGN
   CANONICAL STYLES
   ========================================================== */

:root {
    --leep-v3-gold: #d5a42f;
    --leep-v3-gold-light: #f4c95d;
    --leep-v3-black: #000000;
    --leep-v3-link-dark: #87CEEB;
}


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

.v3-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: 200;

    display: grid;

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

    align-items: center;

    min-height: 118px;

    padding:
        18px
        clamp(36px, 4.5vw, 78px);

    border: 0;

    background: transparent;

    backdrop-filter: none;
}


/* Large Bibeka LEEP mark */

.v3-brand {
    justify-self: start;

    display: block;

    width:
        clamp(
            280px,
            21vw,
            410px
        );
}


.v3-brand img {
    display: block;

    width: 100%;
    height: auto;

    max-height: none;

    object-fit: contain;

    object-position: left center;
}


/* Menu toward right */

.v3-nav {
    justify-self: end;

    display: flex;
    align-items: center;

    gap:
        clamp(
            24px,
            2.1vw,
            42px
        );

    margin-right: 22px;
}


.v3-nav a {
    color: #ffffff;

    font-size:
        clamp(
            11px,
            .82vw,
            15px
        );

    font-weight: 700;

    text-decoration: none;

    text-transform: none;

    letter-spacing: 0;
}


.v3-nav a:hover {
    color: var(--leep-v3-gold-light);
}


.v3-book-button {
    justify-self: end;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 118px;

    padding:
        10px
        22px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #f3c85f,
            #b98119
        );

    color: #000000;

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

    text-decoration: none;
}


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

.v3-cinematic-hero {
    position: relative;

    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #000000;
}


.v3-stage-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        url('/assets/leep-v3/images/design_image_01.png');

    background-repeat: no-repeat;

    background-position:
        center center;

    background-size: cover;
}


.v3-stage-background::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.03) 0%,
            rgba(0,0,0,.01) 48%,
            rgba(0,0,0,.05) 70%,
            rgba(0,0,0,.26) 100%
        );
}


.v3-hero-overlay {
    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 100vh;

    margin: 0 auto;
}


/* ==========================================================
   CENTRAL HEADLINES
   ========================================================== */

.v3-hero-heading {
    position: absolute;

    top: 22%;

    z-index: 10;

    /*
     * Bibeka layout:
     * central artwork fills the physical space between
     * the two projector frames.
     */

    left:
        calc(
            3.2% +
            clamp(300px, 23vw, 445px) +
            12px
        );

    right:
        calc(
            3.2% +
            clamp(300px, 23vw, 445px) +
            12px
        );

    width: auto;

    transform: none;

    text-align: center;
}


.v3-story-heading-art {
    width: 100%;
}


.v3-feel-heading-art {
    width: 104%;

    margin:
        -10%
        0
        0
        -2%;

    transform: none;
}


/* ==========================================================
   PROJECTOR COMPOSITION
   Bibeka approved independent screen geometry
   ========================================================== */

.v3-projector-layer {
    position: absolute;

    z-index: 8;

    top: 26%;

    left: 0;

    width: 100%;
    height: 31%;

    pointer-events: none;
}


/* Each projector is now independently positioned */

.v3-projector {
    position: absolute;

    top: 0;

    width:
        clamp(
            300px,
            23vw,
            445px
        );

    aspect-ratio: 1644 / 1157;

    overflow: hidden;
}


/*
 * Bibeka places both projectors inward,
 * framing the central headline rather than
 * attaching them to the browser edges.
 */

.v3-projector-left {
    left: 3.2%;

    transform:
        rotate(1.7deg);
}


.v3-projector-right {
    right: 3.2%;

    transform:
        rotate(-1.7deg);
}


/* Designer frame */

.v3-projector-frame {
    position: absolute;

    z-index: 3;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
}


/* Dynamic media surface */

.v3-projector-media {
    position: absolute;

    z-index: 2;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #050505;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-position: center;
    mask-position: center;
}

/*
 * Final containment masks for dynamic projector media.
 *
 * The Bibeka projector overlay remains the visible frame.
 * These masks only prevent the underlying photo/video
 * from appearing through tiny transparent corner areas
 * around the upper screen aperture.
 */
 
 .v3-projector-left .v3-projector-media {
    -webkit-mask-image:
        url('/assets/leep-v3/processed/projector_left_screen_alpha.png');

    mask-image:
        url('/assets/leep-v3/processed/projector_left_screen_alpha.png');
}


.v3-projector-right .v3-projector-media {
    -webkit-mask-image:
        url('/assets/leep-v3/processed/projector_right_screen_alpha.png');

    mask-image:
        url('/assets/leep-v3/processed/projector_right_screen_alpha.png');
}

.v3-projector-media img,
.v3-projector-media video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


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

.v3-hero-copy-bibeka {
    position: absolute;

    z-index: 12;

    left: 4%;

    bottom: 6%;

    width:
        min(
            440px,
            31vw
        );

    margin: 0;

    text-align: left;
}


.v3-hero-copy-bibeka p {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            13px,
            .95vw,
            17px
        );

    line-height: 1.55;
}


.v3-hero-actions {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 15px;

    margin-top: 20px;
}


.v3-primary-action,
.v3-secondary-action {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding:
        8px
        17px;

    border-radius: 999px;

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

    text-decoration: none;
}


.v3-primary-action {
    background:
        linear-gradient(
            135deg,
            #f4c95f,
            #b47d18
        );

    color: #000000;
}


.v3-secondary-action {
    border:
        1px solid
        rgba(255,255,255,.38);

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

    color: #ffffff;
}


/* ==========================================================
   SECTION 2
   WHERE EXPERIENCES BECOME STORIES
   ========================================================== */

/* ==========================================================
   WHERE EXPERIENCES BECOME STORIES
   Bibeka approved Experience section
   ========================================================== */

.v3-story-section {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    padding:
        clamp(72px, 7vw, 120px)
        clamp(45px, 6vw, 105px);

    background: #000000;

    scroll-margin-top: 90px;
}


.v3-story-top {
    display: grid;

    grid-template-columns:
        minmax(300px, .70fr)
        minmax(0, 1.30fr);

    align-items: center;

    gap:
        clamp(
            70px,
            7vw,
            135px
        );
}


.v3-story-content {
    position: relative;

    z-index: 2;
}


.v3-story-content h2 {
    margin:
        0
        0
        28px;

    color: #ffffff;

    font-size:
        clamp(
            54px,
            5vw,
            92px
        );

    font-weight: 800;

    line-height: .92;

    letter-spacing: -.055em;
}


.v3-story-content .v3-primary-action {
    min-height: 42px;

    padding:
        10px
        20px;

    font-size: 12px;
}


.v3-story-image {
    position: relative;
}


.v3-story-image img {
    display: block;

    width: 100%;
    height: auto;

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

    border-radius: 30px;

    object-fit: cover;
}


.v3-story-feature {
    position: relative;

    overflow: hidden;

    width: 100%;

    margin-top:
        clamp(
            55px,
            6vw,
            95px
        );

    border-radius: 30px;

    background: #050705;
}


.v3-story-feature > img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


.v3-story-feature::after {
    content: '';

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.86) 19%,
            rgba(0,0,0,.53) 35%,
            rgba(0,0,0,.12) 55%,
            rgba(0,0,0,0) 72%
        );

    pointer-events: none;
}


.v3-story-feature-copy {
    position: absolute;

    z-index: 2;

    left:
        clamp(
            38px,
            7vw,
            115px
        );

    top: 50%;

    width:
        min(
            500px,
            38%
        );

    transform:
        translateY(-50%);

    color: #ffffff;
}


.v3-story-feature-copy p {
    margin:
        0
        0
        22px;

    font-size:
        clamp(
            14px,
            1.15vw,
            19px
        );

    line-height: 1.55;
}


@media (max-width: 1000px) {

    .v3-story-top {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .v3-story-content {
        max-width: 720px;
    }


    .v3-story-feature-copy {
        width:
            min(
                520px,
                52%
            );
    }

}


@media (max-width: 700px) {

    .v3-story-section {
        padding:
            64px
            20px;
    }


    .v3-story-content h2 {
        font-size:
            clamp(
                48px,
                13vw,
                70px
            );

        line-height: .90;
    }


    .v3-story-image img {
        border-radius: 20px;
    }


    .v3-story-feature {
        margin-top: 42px;

        border-radius: 20px;
    }


    .v3-story-feature > img {
        min-height: 520px;

        object-fit: cover;

        object-position: 67% center;
    }


    .v3-story-feature::after {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.12) 0%,
                rgba(0,0,0,.36) 42%,
                rgba(0,0,0,.91) 71%,
                rgba(0,0,0,.98) 100%
            );
    }


    .v3-story-feature-copy {
        left: 24px;
        right: 24px;

        top: auto;
        bottom: 24px;

        width: auto;

        transform: none;
    }


    .v3-story-feature-copy p {
        font-size: 14px;

        line-height: 1.5;
    }

}

/* ==========================================================
   LINK STANDARD ON DARK BACKGROUNDS
   ========================================================== */

.v3-cinematic-hero a:not(.v3-primary-action):not(.v3-secondary-action),
.v3-story-section a:not(.v3-primary-action) {
    color: #87CEEB;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {

    .v3-topbar {
        grid-template-columns:
            210px
            1fr
            auto;

        min-height: 92px;
    }


    .v3-brand {
    justify-self: start;

    display: block;

    width:
        clamp(
            300px,
            24vw,
            465px
        );

    overflow: visible;
    }


    .v3-nav {
        gap: 20px;

        margin-right: 20px;
    }


    .v3-hero-heading {
    position: absolute;

    top: 20.5%;

    z-index: 10;

    /*
     * Match Bibeka:
     * headline fills the space between the two projector
     * screens, leaving approximately 12px breathing room.
     */

    left:
        calc(
            3.2% +
            clamp(300px, 23vw, 445px) +
            12px
        );

    right:
        calc(
            3.2% +
            clamp(300px, 23vw, 445px) +
            12px
        );

    width: auto;

    transform: none;

    text-align: center;
}


    .v3-projector-layer {
        left: -10%;

        width: 120%;
    }


    .v3-story-section {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .v3-story-content {
        grid-column: 1;
        grid-row: 1;

        max-width: 760px;
    }


    .v3-story-image {
        grid-column: 1;
        grid-row: 2;
    }

}


@media (max-width: 700px) {

    .v3-topbar {
    grid-template-columns:
        1fr
        auto
        auto;

    min-height: 74px;

    padding:
        10px
        14px;
}


.v3-brand {
    width: 145px;
}


.v3-nav {
    display: none;
}


.v3-menu-toggle {
    display: block;

    justify-self: end;

    margin-right: 8px;
}


.v3-book-button {
    justify-self: end;

    min-width: 102px;

    padding:
        9px
        14px;

    margin: 0;
}


    .v3-hero-heading {
        top: 24%;
    
        left: 50%;
        right: auto;
    
        width: 88vw;
    
        transform:
            translateX(-50%);
    
        text-align: center;
    }


    .v3-projector-layer {
    top: 41%;

    left: 0;

    width: 100%;
    height: 210px;
}


.v3-projector {
    width: 215px;
}


.v3-projector-left {
    left: -72px;

    right: auto;

    transform:
        rotate(1.7deg);
}


.v3-projector-right {
    right: -72px;

    left: auto;

    transform:
        rotate(-1.7deg);
}


    .v3-hero-copy-bibeka {
        left: 7%;
        right: 7%;

        bottom: 5%;

        width: auto;
    }


    .v3-story-section {
        padding:
            70px
            20px;
    }


    .v3-story-content h2 {
        font-size:
            clamp(
                52px,
                14vw,
                78px
            );

        line-height: .88;
    }


    .v3-story-image img {
        border-radius: 20px;
    }

}

@media (max-width: 700px) {

    .builder {
        background-position:
            center top;
    }

}



@media (max-width: 700px) {

    .builder > .builder-intro,
    .builder > #bookingForm {
        width:
            calc(
                100% - 40px
            );
    }

    .configuration-card {
        background:
            rgba(
                12,
                18,
                24,
                .78
            ) !important;

        -webkit-backdrop-filter:
            blur(7px);

        backdrop-filter:
            blur(7px);
    }

}


/* ==========================================================
   PRODUCTION BRIEF BROWSER CORRECTIONS
   ========================================================== */

.production-brief-name-grid {
    display: grid;
    grid-template-columns:
        minmax(105px, 0.65fr)
        minmax(180px, 1.2fr)
        minmax(180px, 1fr)
        minmax(180px, 1.2fr);
    gap: 14px;
    align-items: end;
}


.production-brief-phone-grid {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.9fr)
        minmax(130px, 0.7fr)
        minmax(220px, 1.4fr);
    gap: 14px;
    align-items: end;
}


.production-brief-heading {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #c7ff16;
    color: #050505;
    font-size: inherit;
    line-height: 1.2;
}


.phone-field-label,
.repeatable-card-header strong,
.production-brief-help {
    color: #c7ff16;
}


.production-brief-inline-error {
    margin-top: 8px;
    color: #ff5a5a;
    font-weight: 700;
    line-height: 1.35;
}


.production-brief-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.78);
}


.production-brief-modal.hidden {
    display: none;
}


.production-brief-modal-panel {
    width: min(620px, 100%);
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    background: #10151b;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}


.production-brief-modal-panel h4 {
    margin: 0 0 14px;
    color: #ff5252;
    font-size: 22px;
}


.production-brief-modal-panel p {
    margin: 0 0 22px;
    color: #ff6b6b;
    font-weight: 700;
    line-height: 1.55;
}


.production-brief-modal-ok {
    min-width: 110px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px;
    background: #c7ff16;
    color: #050505;
    font-weight: 800;
    cursor: pointer;
}


#authorizedPersonsSection.authority-blocking-active
    ~ .production-brief-group {
    opacity: 0.32;
    pointer-events: none;
    user-select: none;
}


#preferredProductionDate {
    color-scheme: dark;
}


#preferredProductionDate::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
}


@media (max-width: 980px) {

    .production-brief-name-grid {
        grid-template-columns:
            minmax(100px, 0.7fr)
            1fr
            1fr
            1fr;
    }

    .production-brief-phone-grid {
        grid-template-columns:
            0.9fr
            0.7fr
            1.3fr;
    }
}


@media (max-width: 760px) {

    .production-brief-name-grid,
    .production-brief-phone-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   PRODUCTION BRIEF BROWSER CORRECTIONS 2
   ========================================================== */

/*
 * Field labels
 */

#productionBriefStep label {
    color: #f5e400;
}


#productionBriefStep .required-star {
    color: #ff4d4d;
    font-weight: 900;
}


/*
 * DOB
 */

.production-brief-dob-group .fields {
    grid-template-columns: minmax(260px, 420px);
}


#dateOfBirth {
    text-align: center;
    color-scheme: dark;
}


/*
 * Numeric phone warning
 */

.production-phone-warning {
    margin-top: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    background: rgba(160,160,160,0.16);
    color: #ff5a5a;
    font-weight: 800;
    line-height: 1.3;
}


/*
 * Preferred production date
 */

#preferredProductionDate {
    text-align: center;
}


.preferred-production-date-display {
    min-height: 22px;
    margin-top: 8px;
    text-align: center;
    color: #c7ff16;
    font-weight: 800;
}


/*
 * Hard booking block
 *
 * Contract and payment controls remain visible so the customer
 * understands where they are in the booking, but are unavailable
 * while legal authority or age requirements are unresolved.
 */

body.production-brief-hard-block #contractStep,
body.production-brief-hard-block .summary-card {
    opacity: 0.30;
    pointer-events: none;
    user-select: none;
}


body.production-brief-hard-block #createBooking {
    pointer-events: none;
    opacity: 0.35;
}


/*
 * Keep the current part of the Production Brief editable so the
 * customer can correct the blocking answer without reloading.
 */

body.production-brief-hard-block
#productionBriefStep
.production-brief-group {
    transition:
        opacity 160ms ease;
}



/* ==========================================================
   PRODUCTION BRIEF FINAL VISUAL LANGUAGE
   ========================================================== */

/*
 * Field labels:
 * Sky Blue
 */

#productionBriefStep label,
#productionBriefStep .phone-field-label {
    color: #87CEEB;
}


/*
 * Required indicator:
 * red and retained immediately beside the label text.
 */

#productionBriefStep .required-star {
    display: inline;
    color: #ff4d4d;
    font-weight: 900;
    white-space: nowrap;
    vertical-align: baseline;
}


/*
 * Informational and instructional copy:
 * white, normal weight.
 */

#productionBriefStep .production-brief-help,
#productionBriefStep .field-note {
    color: #ffffff;
    font-weight: 400;
}


/*
 * Genuine subheadings remain Acid Green.
 */

#productionBriefStep .repeatable-card-header strong,
#productionBriefStep .phone-field-label {
    font-weight: 700;
}


/*
 * Established LEEP warning treatment:
 * red border, translucent red background,
 * white bold text.
 */

#productionBriefStep .production-phone-warning,
#productionBriefStep .production-brief-inline-error,
#productionBriefStep .production-brief-warning {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 82, 82, 0.92);
    border-radius: 10px;
    background: rgba(124, 28, 36, 0.38);
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
}


/*
 * Underage:
 * everything after the DOB group becomes unavailable.
 * Identity and DOB remain editable so the customer can correct it.
 */

body.production-brief-underage-block
#productionBriefStep
.production-brief-dob-group
~ .production-brief-group {
    opacity: 0.30;
    pointer-events: none;
    user-select: none;
}


/*
 * Templates do not need interaction during an underage block.
 */

body.production-brief-underage-block
#productionBriefStep
template {
    pointer-events: none;
}


/*
 * Contract and summary/payment remain inaccessible
 * during either hard blocking state.
 */

body.production-brief-hard-block #contractStep,
body.production-brief-hard-block .summary-card {
    opacity: 0.30;
    pointer-events: none;
    user-select: none;
}


/*
 * Preferred production date:
 * approximately one third for the native picker,
 * readable long date alongside it.
 */

.preferred-production-date-row {
    display: grid;
    grid-template-columns:
        minmax(190px, 0.34fr)
        minmax(320px, 0.66fr);
    gap: 18px;
    align-items: center;
}


#preferredProductionDate {
    width: 100%;
    text-align: center;
}


.preferred-production-date-display {
    min-height: 22px;
    margin-top: 0;
    text-align: left;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.4;
}


/*
 * Keep section headings authoritative.
 */

#productionBriefStep .production-brief-heading {
    background: #c7ff16;
    color: #050505;
}


/*
 * Responsive fallback.
 */

@media (max-width: 760px) {

    .preferred-production-date-row {
        grid-template-columns: 1fr;
    }

    .preferred-production-date-display {
        text-align: center;
    }
}


/* ==========================================================
   PRODUCTION BRIEF FINAL STAR / EMAIL ALIGNMENT
   ========================================================== */

/*
 * The global form stylesheet uses display:grid on every label.
 * That causes the label text and required star span to become
 * separate anonymous/grid items.
 *
 * Step 4 uses normal block flow instead so the star remains
 * immediately beside its corresponding field name.
 */

#productionBriefStep label {
    display: block;
}


/*
 * Restore the intended vertical spacing that the global
 * label grid previously supplied.
 */

#productionBriefStep label > input,
#productionBriefStep label > select,
#productionBriefStep label > textarea,
#productionBriefStep label > .preferred-production-date-row {
    margin-top: 7px;
}


/*
 * The red required marker always remains inline with its label.
 */

#productionBriefStep .required-star {
    display: inline !important;
    white-space: nowrap;
    vertical-align: baseline;
}


/*
 * Email mismatch belongs to the complete Email Addresses
 * section, not only the Confirm Email column.
 */

#productionBriefStep .production-brief-full-warning {
    width: 100%;
    margin-top: 12px;
    box-sizing: border-box;
}


/* ==========================================================
   PRODUCTION BRIEF GOLD SECTION DIVIDERS
   ========================================================== */

/*
 * Every major Production Brief section after the first receives
 * a restrained metallic gold divider to improve visual separation.
 *
 * The first section, CUSTOMER Full Name and Principal Owner /
 * Company Director, intentionally has no divider above it.
 */

#productionBriefStep
.production-brief-group
+ .production-brief-group {
    position: relative;
    margin-top: 18px;
    padding-top: 18px;
}


#productionBriefStep
.production-brief-group
+ .production-brief-group::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: #b9923b;
    opacity: 0.95;
}


/*
 * Conditional sections also receive the divider when visible.
 */

#productionBriefStep
.production-brief-conditional:not(.hidden) {
    position: relative;
}


/*
 * Preserve comfortable space above and below the line.
 */

#productionBriefStep
.production-brief-group
+ .production-brief-group
> :first-child {
    margin-top: 6px;
}


/* ==========================================================
   MULTI SIGNATORY CONTRACT OF ENGAGEMENT
   ========================================================== */

.contract-signatories {
    display: grid;
    gap: 26px;
    margin-top: 22px;
}


.contract-signatory-card {
    padding: 22px;
    border: 1px solid rgba(185, 146, 59, 0.72);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}


.contract-signatory-card.hidden {
    display: none;
}


.contract-signatory-heading {
    margin-bottom: 18px;
}


.contract-signatory-heading h4 {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: 20px;
}


.contract-signatory-name-grid {
    display: grid;
    grid-template-columns:
        minmax(105px, 0.65fr)
        minmax(180px, 1.2fr)
        minmax(180px, 1fr)
        minmax(180px, 1.2fr);
    gap: 14px;
    margin-bottom: 16px;
}


.contract-signatory-card label {
    color: #87CEEB;
}


.contract-signatory-card .required-star {
    display: inline !important;
    color: #ff4d4d;
    font-weight: 900;
    white-space: nowrap;
}


.contract-signatory-card label > input,
.contract-signatory-card label > select {
    margin-top: 7px;
}


.contract-signatory-card .signature-label {
    color: #87CEEB;
}


.contract-signatory-card
.signature-pad-wrap.signature-error {
    border-color: #ff5252;
    box-shadow:
        0 0 0 2px
        rgba(255, 82, 82, 0.16);
}


@media (max-width: 900px) {

    .contract-signatory-name-grid {
        grid-template-columns:
            minmax(100px, 0.7fr)
            1fr
            1fr
            1fr;
    }
}


@media (max-width: 720px) {

    .contract-signatory-name-grid {
        grid-template-columns: 1fr;
    }

    .contract-signatory-card {
        padding: 16px;
    }
}


/* ==========================================================
   CONTRACT FINAL VISUAL AND LINK CORRECTIONS
   ========================================================== */

/*
 * Contract labels use normal block flow so the required
 * marker remains immediately beside its field name.
 */

.contract-signatory-card label {
    display: block;
    color: #87CEEB;
}


.contract-signatory-card .required-star {
    display: inline !important;
    color: #ff4d4d;
    font-weight: 900;
    white-space: nowrap;
    vertical-align: baseline;
}


.contract-signatory-card label > input,
.contract-signatory-card label > select {
    display: block;
    width: 100%;
    margin-top: 7px;
}


/*
 * The physical signature heading also retains its required
 * marker on the same line.
 */

.contract-signatory-card .signature-label {
    display: block;
    color: #87CEEB;
}


/*
 * Contract links remain Sky Blue irrespective of browser
 * visit history.
 */

#contractStep a:link,
#contractStep a:visited,
#contractStep a:hover,
#contractStep a:focus,
#contractStep a:active {
    color: #87CEEB;
}


#contractStep a:hover,
#contractStep a:focus {
    text-decoration-thickness: 2px;
}


/*
 * Secondary agreement heading.
 */

.contract-copy .contract-subheading {
    margin-top: 24px;
    margin-bottom: 12px;
}


/* ==========================================================
   CONTRACT SIGNATURE LOCAL VALIDATION
   ========================================================== */

.contract-signature-warning {
    margin-top: 10px;
    padding: 12px 14px;

    border:
        1px solid
        rgba(255, 82, 82, 0.92);

    border-radius: 10px;

    background:
        rgba(
            124,
            28,
            36,
            0.38
        );

    color: #ffffff;

    font-weight: 700;
    line-height: 1.4;
}


.contract-signature-warning strong {
    color: #ffffff;
    font-weight: 900;
}


.contract-signature-warning.hidden {
    display: none;
}



/* ==========================================================
   CONTRACTUAL DOCUMENT EVIDENCE INTERFACE
   ========================================================== */

.contract-document-notice,
.promotional-use-election {
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: 14px;
}


.contract-document-notice {
    border:
        1px solid
        rgba(185, 146, 59, 0.78);

    background:
        rgba(185, 146, 59, 0.08);
}


.promotional-use-election {
    border:
        1px solid
        rgba(135, 206, 235, 0.50);

    background:
        rgba(135, 206, 235, 0.05);
}


.contract-document-notice h4,
.promotional-use-election h4 {
    margin-top: 0;
}


.contract-information-copy {
    color: #ffffff;
    font-weight: 400;
}


.promotional-use-options {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}


.promotional-use-option {
    padding: 10px 12px;
    border-radius: 10px;

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


.contract-signatory-acknowledgment {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 14px 16px;

    border:
        1px solid
        rgba(185, 146, 59, 0.62);

    border-radius: 12px;

    background:
        rgba(185, 146, 59, 0.06);
}


.contract-signatory-acknowledgment
.check {
    margin: 0;
}


.contract-signatory-acknowledgment
a,
.contract-signatory-acknowledgment
a:visited,
.contract-document-notice
a,
.contract-document-notice
a:visited {
    color: #87CEEB;
}


.signature-disabled {
    opacity: 0.42;
    cursor: not-allowed;
}


.contract-signatory-card
.signatory-clear-signature:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}



/* ==========================================================
   CONTRACT REQUIRED SIGNATORIES
   ========================================================== */

.required-signatories-election {
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 18px 20px;

    border:
        1px solid
        rgba(185, 146, 59, 0.72);

    border-radius: 14px;

    background:
        rgba(185, 146, 59, 0.06);
}


.required-signatories-election label {
    display: block;
    color: #87CEEB;
    font-weight: 700;
}


.required-signatories-election select {
    display: block;
    width: 100%;
    margin-top: 10px;
}


/* ==========================================================
   SIGNATORY ACKNOWLEDGMENT CHECKBOX ALIGNMENT
   ========================================================== */

.contract-signatory-acknowledgment
.check {
    display: grid;

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

    align-items: start;

    gap: 12px;

    margin: 0;
}


.contract-signatory-acknowledgment
.check
input[type="checkbox"] {
    margin-top: 4px;
}


/* ==========================================================
   DEFAULT LEEP FOOTER
   ========================================================== */

.leep-site-footer {
    display: block;
    width: 100%;
}


.leep-footer-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(360px, 1.6fr)
        minmax(240px, 1fr);

    align-items: center;

    gap: 28px;

    width: 100%;
}


.leep-footer-left {
    justify-self: start;
}


.leep-footer-center {
    justify-self: stretch;
    text-align: center;
}


.leep-footer-center p,
.leep-footer-right p {
    margin: 0;
}


.leep-footer-right {
    justify-self: end;
    text-align: right;
}


.leep-footer-legal {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-top: 8px;

    text-align: center;
}


.leep-footer-legal a,
.leep-footer-legal a:visited {
    color: #87CEEB;
    text-decoration: underline;
}


.leep-footer-legal span {
    color: rgba(
        255,
        255,
        255,
        0.60
    );
}


@media (max-width: 900px) {

    .leep-footer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    .leep-footer-left,
    .leep-footer-center,
    .leep-footer-right {
        justify-self: center;
        text-align: center;
    }


    .leep-footer-legal {
        flex-wrap: wrap;
    }
}