:root {
            --blk-accent: #cfd3d8;
            --blk-accent-2: #8f98a1;
            --blk-bg: #0a0a0b;
            --blk-panel: #111214;
            --blk-border: rgba(255,255,255,.08);
        }
        html { scroll-behavior: smooth; }
        body { background: var(--blk-bg); }
        .loader-bg { background: #050506; }
        .loader:before, .loader:after {
            border-color: rgba(255, 255, 255, 0.7) !important;
        }
        .navbar.nav-line .navbar-nav .nav-link,
        .side-nav .navbar-nav .nav-link,
        .text-pink,
        .sub-heading.text-pink,
        .company-about a,
        .footer-social .social-icon:hover,
        .social-icons-simple .social-icon:hover,
        .scroll-down:hover,
        .icon-quotes i,
        .testimonial-tittle h3,
        .standalone .sub-heading,
        .stand-img-des .sub-heading {
            color: var(--blk-accent) !important;
        }
        .bg-pink,
        .progress-bar.bg-pink,
        .btn-pink,
        .btn-pink:hover,
        .btn-pink:focus,
        .btn-pink:active,
        .btn-trans:hover,
        .btn-trans:focus,
        .btn-trans:active {
            background: var(--blk-accent) !important;
            border-color: var(--blk-accent) !important;
            color: #0b0c0e !important;
            box-shadow: none !important;
        }
        .btn-trans {
            border-color: rgba(255,255,255,.55) !important;
        }
        .navbar.nav-line .navbar-nav .nav-link:before,
        .navbar.nav-line .navbar-nav .nav-link.active:before,
        .navbar.nav-line .navbar-nav .nav-link:hover:before {
            background: var(--blk-accent) !important;
        }
        .main-font, .alt-font { letter-spacing: .02em; }
        .logo img {
            /*max-height: 34px;*/
            width: auto; }
        .hero-tag {
            display: inline-block;
            margin-bottom: 1rem;
            font-size: 14px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(255,255,255,.78);
        }
        .hero-copy p {
            max-width: 620px;
            color: rgba(255,255,255,.88);
        }
        .title p, .para_text, .paragraph, .company-about, .stand-img-des p, .standalone-detail p {
            color: #a7adb3 !important;
        }
        .section-shell {
            padding: 120px 0;
            position: relative;
            background: #0b0c0d;
        }
        .section-shell.alt {
            background: #101114;
        }
        .section-shell .title {
            margin-bottom: 3.5rem;
        }
        .film-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
            margin-top: 2rem;
        }
        .btn-outline-blk {
            display: inline-block;
            padding: 12px 34px;
            border-radius: 40px;
            border: 1px solid rgba(255,255,255,.25);
            color: #fff;
            transition: .3s ease;
        }
        .btn-outline-blk:hover {
            border-color: var(--blk-accent);
            color: var(--blk-accent);
        }
        .film-statement {
            max-width: 860px;
            margin: 0 auto;
        }
        .standalone-detail { padding-top: 0; }
        .standalone-area {
            margin-top: 30px;
            border-top: 1px solid var(--blk-border);
            border-bottom: 1px solid var(--blk-border);
        }
        .standalone-row {
            padding: 54px 0;
            border-bottom: 1px solid var(--blk-border);
        }
        .standalone-row:last-child { border-bottom: 0; }
        .standalone-row .image img {
            width: 100%;
            height: auto;
            border-radius: 2px;
            display: block;
        }
        .stand-img-des {
            padding: 30px 50px;
        }
        .stand-img-des .heading-text {
            margin-bottom: 18px;
        }
        .process-label {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: .16em;
            color: var(--blk-accent) !important;
            margin-bottom: 12px;
        }
        .blkcormorant-panel {
            background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
            border: 1px solid var(--blk-border);
            padding: 55px 0;
            border-radius: 2px;
        }
        .blkcormorant-mark {
            max-width: 160px;
            opacity: .95;
        }
        .response-wrap {
            max-width: 760px;
            margin: 0 auto;
        }

        /* parallax - response */

        #response.response-bg {
            background-image: linear-gradient(rgba(8, 8, 10, 0.30), rgba(8, 8, 10, 0.30)), url("../images/parallax-img.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center 32%;
            /*background-position: center -180px;*/
            background-attachment: scroll;
            padding: 120px 0;
        }

        @media (max-width: 1200px) {
            #response.response-bg {
                background-position: center 28%;
            }
        }

        @media (max-width: 991px) {
            #response.response-bg {
                background-position: center 24%;
            }
        }

        @media (max-width: 575px) {
            #response.response-bg {
                background-position: center 20%;
            }
        }


        .response-meta {
            color: #90979f;
            font-size: 14px;
            letter-spacing: .04em;
        }
        .response-meta a {
            color: var(--blk-accent);
        }
        .testimonial-img {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            margin: 28px auto 0;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.08);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .testimonial-img i {
            color: var(--blk-accent);
            font-size: 24px;
        }
        .footer {
            background: #09090a;
            border-top: 1px solid var(--blk-border);
            padding: 60px 0;
        }
        .footer-social .social-icon,
        .social-icons .social-icon {
            border-color: rgba(255,255,255,.18) !important;
            color: rgba(255,255,255,.8) !important;
        }
        .footer-social .social-icon:hover,
        .social-icons .social-icon:hover {
            border-color: var(--blk-accent) !important;
            background: transparent !important;
        }
        .scroll-down { bottom: 32px; }
        .scroll-top-arrow, .go-top {
            background: rgba(255,255,255,.08);
        }
        .go-top.active { background: #15171a; }
        .hero-socials {
            right: 25px;
            left: auto;
        }
        .hero-socials li { margin: 8px 0; }
        .hero-socials .social-icon i { font-size: 15px; }
        @media (max-width: 991px) {
            .stand-img-des { padding: 30px 0 0; }
            .blkcormorant-panel { padding: 36px 24px; }
            .hero-socials { display: none !important; }
        }



/*  darren's custom css below
    ---------------------------------------------------- */


body {
    color: #a7adb3;
}

/*.response-bg {
    background-image: linear-gradient(rgba(8, 8, 10, 0.30), rgba(8, 8, 10, 0.30)), url("../images/parallax-img.jpg");
    background-size: 120% auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll;
}*/


/*  Fonts
    ---------------------------------------------------- */
    .BLK-NoW {
        font-family: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 0.95;
        text-transform: uppercase;
    }


/*  Logo
    ---------------------------------------------------- */
.logo-badge {
    --logo-size: 140px;
    --logo-stroke: 1.5px;
    --logo-stroke-color: rgba(255, 255, 255, 0.95);
    --logo-scale: 0.9;
    --logo-x: -30px;
    --logo-y: 3px;

    position: relative;
    display: inline-block;
    width: var(--logo-size);
    height: var(--logo-size);
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}

.logo-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*border-radius: 50%;*/
    transform: translate(var(--logo-x), var(--logo-y)) scale(var(--logo-scale));
    transform-origin: center center;
}

.logo-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: var(--logo-stroke) solid var(--logo-stroke-color);
    pointer-events: none;
    box-sizing: border-box;
}

/* size variants */
.logo-badge--menu {
    --logo-size: 42px;
    --logo-stroke: 0.5px;
    --logo-scale: 1;
    --logo-y: 6px;
}

.logo-badge--sidenav {
    --logo-size: 80px;
    --logo-stroke: 1px;
    --logo-scale: 1.15;
    --logo-y: 12px;
}

/* Side-nav logo: exclude badge images from theme's .side-menu img rule */
.side-menu .sidenav-logo-wrap img {
    position: static !important;
    transform: none !important;
    max-width: none !important;
}

.sidenav-logo-wrap {
    text-align: center;
    margin-bottom: 2.5rem;
}

.sidenav-logo-wrap a {
    display: inline-block;
}

.logo-badge--small {
    --logo-size: 80px;
    --logo-stroke: 1.25px;
}

.logo-badge--medium {
    --logo-size: 140px;
    --logo-stroke: 1.5px;
}

.logo-badge--large {
    --logo-size: 220px;
    --logo-stroke: 0.75px;
}

.logo-badge.logo-badge--large {
    --logo-scale: 1;
    --logo-x: 0px;
    --logo-y: 3px;
}


@media (min-width: 992px) {
    .navbar-top-default .container {
        align-items: center;
    }

    .navbar-top-default .logo.scroll {
        display: flex;
        align-items: center;
        margin-right: 18px;
        line-height: 1;
    }

    .navbar-top-default #megaone {
        margin-right: 0;
        margin-left: 10px;
    }

    .navbar-top-default .blk-main-nav {
        margin-left: 6px;
    }

    .navbar-top-default .blk-main-nav .nav-link {
        padding-left: 1.35rem;
        padding-right: 1.35rem;
        text-align: left;
    }

    .logo-badge--menu {
        --logo-size: 42px;
        --logo-stroke: 0.5px;
        --logo-scale: 1;
        --logo-y: 4px;
        --logo-x: -7px;
    }
}



/*  Panel
    ---------------------------------------------------- */

.blkcormorant-panel {
    background: none;
    border: none;
    padding: none;
    border-radius: 0;
}


/*  Custom
    ---------------------------------------------------- */

/* Hide carousel tp-bullets */
.tp-bullets.agency.vertical.nav-pos-hor-left.nav-pos-ver-center.nav-dir-vertical {
    display: none;
}


/* ----------------------------------------------------
   Final white / neutral replacements for remaining magenta
---------------------------------------------------- */

/* 1. Menu rollover / active underline = white */
.line:hover:after,
.line.active:after,
.navbar.nav-line .navbar-nav .nav-link:hover:before,
.navbar.nav-line .navbar-nav .nav-link.active:before {
    border-color: #f2f2f2 !important;
    background: #f2f2f2 !important;
}

/* Side menu underline too, if used */
.side-nav .navbar-nav .nav-link::after {
    background: #ffffff !important;
}

/* Hamburger hover = white, not magenta */
.sidemenu_btn:hover span,
.header-appear .navigation-toggle:hover span {
    background: #ffffff !important;
}

.btn-primary {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #f2f2f2 !important;
    border-color: #ffffff !important;
    color: #333333 !important;
    box-shadow: none !important;
}

/* Optional: slightly brighter border on hover */
.film-actions .btn.btn-pink:hover,
.film-actions .btn.btn-pink:focus {
    border-color: rgba(255,255,255,.55) !important;
}

/* 3. Text selection = white */
::selection {
    background: #ffffff !important;
    color: #000000 !important;
}

::-moz-selection {
    background: #ffffff !important;
    color: #000000 !important;
}

/* 4. Scrollbar = neutral grey */
::-webkit-scrollbar-thumb {
    background: #f2f2f2 !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #7a7a7a !important;
}

::-webkit-scrollbar-track {
    background: #111111 !important;
}

/* Optional cleanup for any remaining pink hover flashes */
a:hover,
a:active {
    color: inherit;
}

/* Optional: scroll down arrow white too */
.scroll-down,
.scroll-down i,
.scroll-down:hover {
    color: #ffffff !important;
}

/* Optional: go-top button neutral */
.go-top,
.go-top::before,
.go-top.active {
    background: #151515 !important;
}


/* icons - external site */
.link-external-icon {
    margin-left: 0.55rem;
    font-size: 0.78em;
    vertical-align: middle;
    line-height: 1;
    opacity: 0.9;
}


/* hero text wrapping */
.hero-copy {
    white-space: normal !important;
}

/* padding - processes */
#process .standalone-row:nth-child(4) .stand-img-des {
    padding-left: 0;
    padding-right: 30px;
}


/* credite link */
small a:hover {
    text-decoration: underline;
}


/* hero text */
#slider-section span.hero-tag {
    font-size: 1.3rem !important;
    text-transform: none;
}
/* Slider title */
/*#slider-section h1 {
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
    font-size: 3.6rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 0.92;
}*/

#slider-section h1 {
    font-family: "EB Garamond", serif;
    font-size: 3.6rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 0.92;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.04);
}

@media (max-width: 767px) {
    #slider-section h1 {
        font-size: 2.6rem !important;
        line-height: 0.95;
    }
}

@media (max-width: 480px) {
    #slider-section h1 {
        font-size: 2.2rem !important;
    }
}

.footer-contact {
    margin-top: 12px;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #a7adb3;
}

.footer-contact a {
    color: #a7adb3;
    text-decoration: none;
}

.footer-contact a:hover {
    color: #ffffff;
}

/* artist note */
blockquote.artist-note {
    max-width: 740px;
    margin: 3rem auto;
    padding-left: 2rem;
    border-left: 2px solid rgba(255, 255, 255, 0.65);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    line-height: 1.45;
    font-style: italic;
    color: rgba(255, 255, 255, 0.88);
}



/* testimonials */
#response p {
    color: #f2f2f2 !important;
    font-size: 2rem;
    font-style: italic;
    line-height: 2.4rem;
}


/*footer */
#footer p {
    text-transform: uppercase;
}
#footer p .BLKc {
    text-transform: none;
}
#footer p.footer-contact {
    text-transform: none;
}
.side-menu .side-footer p {
    color: #f2f2f2;
    font-size: 0.8rem;
}



/* ── Hero laurel badge ───────────────────────────────────────────────────────
   Positioned outside RevSlider so its JS cannot override image sizing.
   Wraps in .container so left-alignment tracks Bootstrap breakpoints,
   keeping it in sync with the rest of the site layout.
   Vertical: RevSlider voffset is from 50% centre; top: calc(50% - Xpx).
   Laurel natural size 1300x760px; at 110px wide height ~64px, half = ~32px.
────────────────────────────────────────────────────────────────────────────── */
#slider-section {
    position: relative; /* required so .hero-laurel-badge anchors here */
}

.hero-laurel-badge {
    position: absolute;
    top: calc(50% - 210px); /* sits above hero-tag at voffset -95, with ~83px breathing room */
    left: 0;
    right: 0;
    z-index: 200;
    pointer-events: none;
}

.hero-laurel-badge .container {
    /* inherits Bootstrap padding/max-width - no overrides needed */
}

/* Laurels are sized by HEIGHT, not width, so festivals with different laurel
   proportions still read as the same optical size when sat side by side.
   64px height matches the previous single-laurel look (110px wide at 1300x760). */
.hero-laurels {
    display: flex;
    align-items: center;
    gap: 22px;
}

.hero-laurel {
    display: block;
    height: 64px;
    width: auto;
    opacity: 0.7;
}

/* RevSlider centres its text below 1260px (its own first breakpoint).
   Bootstrap container doesn't switch there, so we force centre manually. */
@media (max-width: 1260px) {
    .hero-laurels {
        justify-content: center;
    }
}

/* Smaller mobile adjustments */
@media (max-width: 767px) {
    .hero-laurel-badge {
        top: calc(50% - 210px);
    }
    .hero-laurels {
        gap: 18px;
    }
    .hero-laurel {
        height: 54px;
    }
}

/* Three laurels at 46px height and a 14px gap measure ~269px, which clears a
   320px viewport by only 21px once container padding is taken off. Reduced to
   42px and 12px, bringing the strip to ~244px. */
@media (max-width: 575px) {
    .hero-laurel-badge {
        top: calc(50% - 188px);
    }
    .hero-laurels {
        gap: 12px;
    }
    .hero-laurel {
        height: 42px;
    }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Festival selections band ────────────────────────────────────────────────
   Sits between #film and #process. Shares #film's background, separated by a
   hairline rather than a colour change, so it reads as part of the film block.
   Laurels sized by height so mismatched festival artwork stays optically even.
────────────────────────────────────────────────────────────────────────────── */
.selections {
    padding: 72px 0 84px;
    border-top: 1px solid var(--blk-border);
}

.selections .sub-heading {
    color: var(--blk-accent) !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 46px;
}

.selection-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 48px 76px;
}

.selection-item {
    flex: 0 1 300px;
    text-align: center;
}

.selection-laurel {
    display: block;
    height: 92px;
    width: auto;
    margin: 0 auto 20px;
    opacity: .85;
}

.selection-title {
    color: #ffffff !important;
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.selection-meta {
    color: #a7adb3 !important;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .selections { padding: 60px 0 68px; }
    .selection-list { gap: 42px; }
    .selection-laurel { height: 80px; }
}

@media (max-width: 575px) {
    .selections { padding: 52px 0 58px; }
    .selection-laurel { height: 72px; }
    .selection-meta { font-size: 13px; }
}

/* Source order is the STACKED order: Seattle, Reply, Seoul. That is what a
   screen reader hears and what shows with CSS off. From 992px the row is
   reordered visually to Reply, Seattle, Seoul so the win holds centre and the
   band matches the poster. Cosmetic reordering only; meaning is unchanged. */
@media (min-width: 992px) {
    .selection-item--reply   { order: 1; }
    .selection-item--seattle { order: 2; }
    .selection-item--seoul   { order: 3; }
}

/* Below 992px three 300px columns cannot fit. The md container leaves 690px,
   which forces each item down to ~179px against a laurel that is ~163px wide
   at 92px tall. Stack to a single column instead. */
@media (max-width: 991px) {
    .selection-list {
        flex-direction: column;
        align-items: center;
        gap: 44px;
    }
    .selection-item {
        flex: 0 1 auto;
        max-width: 340px;
    }
}
/* ─────────────────────────────────────────────────────────────────────────── */