: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-x is set to -30px on .logo-badge above, tuned for the 140px
   size. Any variant that does not override it inherits that -30px, and
   at small sizes it pushes the mark clean out of the circle. The navbar
   badge only ever received the correct value inside the
   @media (min-width: 992px) block further down, so below 992px it was
   shifting a 42px-wide mark 30px to the left: an empty ring on every
   phone and small tablet. The value now lives here, at every width, and
   the duplicate in the media query has been removed so the two cannot
   drift apart again. */
.logo-badge--menu {
    --logo-size: 42px;
    --logo-stroke: 0.5px;
    --logo-scale: 1;
    --logo-x: -7px;
    --logo-y: 4px;
}

/* --logo-y was tuned here but --logo-x was not, so this variant still
   inherits -30px at every width. At 80px and scale 1.15 the rendered
   mark is about 92px wide, so -30px cuts roughly a third off its left
   side. -15px is the proportional equivalent of the -7px used on the
   42px badge. Open the side menu; if the mark sits off-centre,
   uncomment the line. Left commented rather than applied because I
   have not seen it rendered.

   --logo-x: -15px;
*/
.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 removed. Its values now sit on the base rule in
       the size variants block above and apply at every width. */
}



/*  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).

   Gap dropped 22px -> 18px when the strip went from three laurels to four.
   The assets average ~1.74:1, so four at 64px plus three gaps measures about
   500px against a title that sets around 750px on the xl container. At the
   old 22px gap it was 512px, close enough to the title width to make the top
   of the hero feel front-heavy. If four still reads too wide in situ, drop
   the height to 58px here rather than cutting the gap further; below about
   16px the laurels start to merge into one band. */
.hero-laurels {
    display: flex;
    align-items: center;
    gap: 18px;
}

.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. Four at 54px plus three 14px gaps is ~418px,
   which still clears the 576px container comfortably. */
@media (max-width: 767px) {
    .hero-laurel-badge {
        top: calc(50% - 210px);
    }
    .hero-laurels {
        gap: 14px;
    }
    .hero-laurel {
        height: 54px;
    }
}

/* Below 576px the strip switches from height-driven to WIDTH-driven sizing.
   Fixing a height here means the total width is a fixed number that either
   fits the viewport or does not: four at 42px was ~328px against roughly
   290px of usable width on a 320px screen, and flex-shrink would have
   squeezed the widths while the fixed height stayed put, distorting the
   wreaths. Dividing the row instead means the strip fits any viewport down
   to a folded phone, and height follows each asset's own aspect ratio.

   The two ratios in the set (1.77:1 and 1.71:1) leave a ~3% height
   difference between assets at this size, which is not visible.

   max-width caps them at the 42px-tall equivalent so they do not inflate
   on a 575px screen where there is spare room. */
@media (max-width: 575px) {
    .hero-laurel-badge {
        top: calc(50% - 188px);
    }
    .hero-laurels {
        gap: 8px;
    }
    .hero-laurel {
        height: auto;
        width: calc((100% - 24px) / 4);
        max-width: 72px;
        min-width: 0;
    }
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── 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;
}

/* Grid rather than flex-wrap. With four items, `flex: 0 1 300px` and a 76px
   gap needed 1428px to sit on one row against a 1140px container, so it wrapped
   3 + 1 and left an orphan centred under the row. An explicit column count
   cannot do that: the layout is either four across, two by two, or stacked,
   and nothing in between. */
.selection-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    column-gap: 40px;
    row-gap: 54px;
}

.selection-item {
    width: 100%;
    max-width: 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;
}

/* Four across only holds at the xl container (1140px), where 40px gutters
   leave 255px per column against a laurel ~157px wide at 92px tall. The lg
   container is 960px, which would squeeze the columns to 210px and push
   .selection-meta to five lines, so lg drops to two by two instead. */
@media (max-width: 1199px) {
    .selection-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 60px;
        row-gap: 56px;
    }
    .selection-item { max-width: 360px; }
}

/* Below 992px two columns leave ~330px each inside the md container, which is
   workable, but the laurel plus a three-line caption at that width reads as
   two cramped cards rather than one list. Single column instead. */
@media (max-width: 991px) {
    .selection-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }
    .selection-item { max-width: 340px; }
}

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

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

/* ============================================================
   TRAILER
   ============================================================ */

#film .film-trailer-row {
    margin-top: 5rem;
}

#film .video-frame {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 2.75rem auto 0;
    aspect-ratio: 16 / 9;

    background: #000;
    border: 1px solid var(--blk-border);
    border-radius: 2px;

    overflow: hidden;
}

#film .video-frame iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
    border: 0;
}

@supports not (aspect-ratio: 16 / 9) {
    #film .video-frame {
        height: 0;
        padding-bottom: 56.25%;
    }
}

#film .video-label {
    margin: 0;
    font-size: 13px;

    text-transform: uppercase;
    letter-spacing: 0.16em;

    color: var(--blk-accent) !important;
}

#film .video-caption {
    margin-top: 1rem;
    font-size: 14px;
    letter-spacing: 0.03em;
}

/* ============================================================
   SOCIAL LINKS
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

#slider-section .hero-socials {
    position: absolute !important;

    top: 50% !important;
    right: 28px !important;
    left: auto !important;

    transform: translateY(-50%) !important;

    z-index: 500 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

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

    list-style: none !important;
}

#slider-section .hero-socials li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

#slider-section .hero-socials a {
    width: 42px !important;
    height: 42px !important;

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

    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 50% !important;

    color: #ffffff !important;
    background: rgba(0,0,0,.12) !important;

    text-decoration: none !important;

    transition: all .25s ease !important;
}

#slider-section .hero-socials a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

#slider-section .hero-socials i {
    color: inherit !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    #slider-section .hero-socials {
        display: none !important;
    }
}


/* ── Side menu ─────────────────────────────────────────────── */

.side-menu .menu-socials {
    display: flex;

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

    gap: 12px;

    margin: 0 0 14px;
    padding: 0;

    list-style: none;
}

.side-menu .menu-socials li {
    margin: 0;
    padding: 0;

    opacity: 0;
    transform: translateY(16px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}

.side-menu.side-menu-active .menu-socials li {
    opacity: 1;
    transform: translateY(0);
}

.side-menu.side-menu-active .menu-socials li:nth-child(1) {
    transition-delay: .55s;
}

.side-menu.side-menu-active .menu-socials li:nth-child(2) {
    transition-delay: .75s;
}

.side-menu.side-menu-active .menu-socials li:nth-child(3) {
    transition-delay: .95s;
}

.side-menu .menu-socials a {
    width: 42px;
    height: 42px;

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

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

    color: #ffffff !important;
    background: transparent;

    text-decoration: none;

    transition: all .25s ease;
}

.side-menu .menu-socials a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

.side-menu .menu-socials i {
    color: inherit !important;
    font-size: 20px;
    line-height: 1;
}


/* ── Footer ────────────────────────────────────────────────── */

#footer .footer-socials {
    display: flex;

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

    gap: 12px;

    margin: 0 0 20px;
    padding: 0;

    list-style: none;
}

#footer .footer-socials li {
    margin: 0;
    padding: 0;
}

#footer .footer-socials a {
    width: 42px;
    height: 42px;

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

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

    color: #ffffff !important;
    background: transparent;

    text-decoration: none;

    transition: all .25s ease;
}

#footer .footer-socials a:hover {
    background: rgba(255,255,255,.95) !important;
    border-color: #ffffff !important;
    color: #111111 !important;
}

#footer .footer-socials i {
    color: inherit !important;
    font-size: 20px;
    line-height: 1;
}


/* Current Line Awesome bundle predates the native X glyph. */
.la-twitter.x-icon::before {
    content: "𝕏" !important;
    font-family: sans-serif !important;
    font-weight: bold;
    font-style: normal;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .side-menu .menu-socials li {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Quality floor ───────────────────────────────────────────
   The reduced-motion block below previously covered only the side-menu
   socials, so a visitor with the OS setting on still received every WOW
   animation on the page. WOW also sets visibility: hidden until it
   fires, which means a script failure leaves the page blank rather than
   unanimated; forcing .wow visible here makes that failure mode benign.

   Keyboard focus had no visible indicator anywhere on the site. On a
   near-black page the browser default is close to invisible.
──────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-outline-blk:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .wow, .animated {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


.selections-actions {
    margin-top: 3.25rem;
}