:root,
[data-bs-theme="light"] {
    --bs-body-font-family: "InterVariable", sans-serif;
    /* --- CUSTOM COLORS --- */

    --bs-primary: #bbbbff;
    --bs-primary-rgb: 187, 187, 255;
    --bs-secondary: #5533aa;
    --bs-secondary-rgb: 85, 51, 170;

    --accent: #eeff00;
    --accent-rgb: 238, 255, 0;

    --bs-carousel-control-opacity: 1;
    --bs-carousel-control-color: #000;

    /* --bs-navbar-light-toggler-icon-bg: url("../../icons/bx/menu-kO70nXo.svg");
    --bs-navbar-dark-toggler-icon-bg: url("../../icons/bx/menu-kO70nXo.svg"); */

    --bs-font-weight-base: 550;

    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: none;
    --bs-accordion-border-color: none;
    --bs-accordion-inner-border-radius: 1rem;

    --bs-dropdown-bg: var(--bs-secondary-bg);

    --bs-btn-disabled-opacity: 0.35;
    --bs-btn-border-width: max(calc(var(--border) * 0.6666), 0.66667px);

    --bs-breakpoint-xs: 0;
    --bs-breakpoint-ms: 320px;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
    --bs-breakpoint-3xl: 1900px;

    --bs-border-radius: calc(clamp(0.25rem, 0.125rem + 0.4167vw, 0.5rem) / 2);

    --bs-link-hover-color: #6666cc;
    --bs-link-hover-color-rgb: 102, 102, 204;

    /* --- BOOTSTRAP VARIABLES --- */

    --bs-link-color: var(--bs-secondary);
    --bs-link-color-rgb: var(--bs-secondary-rgb);

    --bs-dropdown-bg: var(--bs-secondary-bg);

    --bs-btn-border: max(calc(var(--border) * 0.6666), 0.66667px);
    --bs-btn-border-color: #000;

    --bs-border-width: calc(var(--border) / 1.5);
    --bs-btn-border-width: var(--bs-border-width);

    .accordion {
        --bs-accordion-bg: var(--bs-secondary-bg);
    }

    /* 	--- Responsive font sizes (Min at around 480 px – Max at around 1440 px) --- */

    --fs-4xs: clamp(
        0.625rem,
        -0.8333vw + 0.5rem,
        0.5rem
    ); /* unused (Min 10px – Max 8px)*/

    --fs-3xs: clamp(
        0.625rem,
        -0.8333vw + 0.5rem,
        0.75rem
    ); /* P5 (Tiny) / (Min 12px – Max 10px)*/

    --fs-2xs: clamp(
        0.75rem,
        -0.417vw + 1rem,
        0.875rem
    ); /* P4 (Small) & L3 / (Min 14px – Max 12px)*/

    --fs-xs: clamp(
        0.875rem,
        0.583vw + 0.7rem,
        1.125rem
    ); /* H6, P3 & L2 / (Min 14px – Max 18px)*/

    --fs-sm: clamp(
        1rem,
        -0.18vw + 1.04rem,
        1.2rem
    ); /* H5, P2 (Default) & L2(Min 16px – Max 20px)*/

    --fs-md: clamp(
        1.25rem,
        0.31vw + 1.14rem,
        1.5rem
    ); /* H4 & P1 (Large) / (Min 20px – Max 24px)*/

    --fs-lg: clamp(
        1.5rem,
        1.22vw + 1.2rem,
        2.25rem
    ); /* H3 / (Min 24px – Max 36px)*/

    --fs-xl: clamp(
        1.75rem,
        2.83vw + 1.16rem,
        3.75rem
    ); /* H2 / (Min 28px – Max 60px)*/

    --fs-2xl: clamp(
        2rem,
        5.6vw + 0.955rem,
        6rem
    ); /* H1 & D4 / (Min 32px – Max 96px)*/

    --fs-3xl: clamp(
        2.5rem,
        -1.22rem + 11.64vw,
        9.25rem
    ); /* D3 / (Min 40px – Max 148px)*/

    --fs-4xl: clamp(
        2.75rem,
        18.16vw + -0.65rem,
        15rem
    ); /* D2 / (Min 44px – Max 240px)*/

    --fs-5xl: clamp(
        3.5rem,
        31.17vw + -2.65rem,
        25rem
    ); /* D1 / (Min 56px – Max 400px)*/

    --line: 1.5em;
    --caps-height: 0.67;
    --trac-wide: 0.15em;
    --trac-norm: 0.01em;
    --trac-cond: -0.025em;

    --container-margins: clamp(
        0rem,
        -2.5rem + 8.3333vw,
        5rem
    ); /* edge paddings/margins / (Min 8px – Max 80px) */

    --section-margins: clamp(
        2rem,
        1rem + 3.85vw,
        4.5rem
    ); /* section block paddings / (Min 32px – Max 72px)*/

    --speed: 150ms;
    --ease-in: cubic-bezier(0.6, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.6, 1);
    --ease-in-out: cubic-bezier(0.5, 0, 0.6, 1);
    --ease-in-snap: cubic-bezier(0, 0.2, 0.2, 0.2);

    --gap: clamp(0.75rem, 0.39rem + 1.2vw, 1.5rem);
    --border: clamp(0.1875rem, 0.1563rem + 0.1042vw, 0.25rem);
    --frame: 0rem;
    --radius: clamp(0.25rem, 0.125rem + 0.4167vw, 0.5rem);
    --stroke: 0.1rem;

    /* --- NAVIGATION HEIGHT NEEDS TO BE SET HERE --- */

    /* --- OPTIONALLY SET A MAX WIDTH OF CONTENT --- */
    --body-width: 100dvw;
    --content-width: 120rem;
    --nav-height: 3.625rem;
    --nav-item-gap: 0.75rem;
    --player-height: 6rem;

    --hero-heading-items: 4;
    --hero-item-height: clamp(
        52px,
        calc(
            100svh / var(--hero-heading-items) - var(--nav-height) /
                var(--hero-heading-items)
        ),
        520px
    );

    /* --- LOGO MIN (110px) MAX (220px) --- */
    --logo-size: clamp(6.875rem, 3.08rem + 11.85vw, 13.75rem);
    --bs-body-font-weight: 550;
    --font-weight-base: var(--bs-body-font-weight);
    --font-weight: 550;
    --control-btn-size: clamp(2rem, 0.75rem + 4.1667vw, 4.5rem);

    font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: "InterVariable", sans-serif;
    }
}

.btn {
    --bs-btn-disabled-opacity: 0.35;
    font-variation-settings: "wght" var(--font-weight-base);
    .badge {
        border-radius: calc(var(--radius) / 2.5);
    }
}

.btn-primary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: color-mix(
            in srgb,
            var(--bs-btn-bg) 80%,
            var(--bs-secondary-bg) 25%;
        )
        --bs-btn-hover-border-color: var(--bs-btn-hover-color);
    --bs-btn-focus-shadow-rgb: 159, 159, 217;
    --bs-btn-active-color: var(--bs-body-color);

    --bs-btn-active-bg: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 45%
    );

    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-body-color);
    --bs-btn-disabled-bg: #bbbbff;
    --bs-btn-disabled-border-color: #bbbbff;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: color-mix(
            in srgb,
            var(--bs-btn-bg) 80%,
            var(--bs-secondary-bg) 25%;
        )
        --bs-btn-hover-border-color: var(--bs-btn-hover-color);
    --bs-btn-focus-shadow-rgb: 159, 159, 217;
    --bs-btn-active-color: var(--bs-body-color);

    --bs-btn-active-bg: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 45%
    );

    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-body-color);
    --bs-btn-disabled-bg: #bbbbff;
    --bs-btn-disabled-border-color: #bbbbff;
}

.btn-secondary {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 25%
    );
    --bs-btn-hover-border-color: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 25%
    );
    --bs-btn-focus-shadow-rgb: 111, 82, 183;
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 45%
    );
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-body-bg);
    --bs-btn-disabled-bg: #5533aa;
    --bs-btn-disabled-border-color: #5533aa;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 25%
    );
    --bs-btn-hover-border-color: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 25%
    );
    --bs-btn-focus-shadow-rgb: 111, 82, 183;
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: color-mix(
        in srgb,
        var(--bs-secondary) 80%,
        var(--bs-secondary-bg) 15%
    );
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.btn-underline {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-emphasis-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: color-mix(
            in srgb,
            var(--bs-btn-bg) 80%,
            var(--bs-secondary-bg) 25%;
        )
        --bs-btn-hover-border-color: var(--bs-btn-hover-color);
    --bs-btn-focus-shadow-rgb: 5, 6, 6;
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: color-mix(
            in srgb,
            var(--bs-btn-bg) 80%,
            var(--bs-secondary-bg) 35%;
        )
        --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #000;

    border: 0 solid transparent;
    border-bottom: var(--bs-btn-border) solid var(--bs-btn-border-color);
    white-space: nowrap;
    border-radius: 0px !important;
    &:hover {
        border: 0 solid transparent;
        border-bottom: var(--bs-btn-border) solid
            color-mix(in srgb, var(--bs-btn-color), var(--bs-secondary-bg) 80%);
    }
}

.btn:hover,
.btn-check + .btn:hover {
    color: color-mix(in srgb, var(--bs-btn-color), var(--bs-secondary-bg) 20%);
    background-color: color-mix(
        in srgb,
        var(--bs-btn-bg) 80%,
        var(--bs-secondary-bg) 25%
    );
    border-color: color-mix(in srgb, currentColor, var(--bs-secondary-bg) 20%);
}

.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    border-color: color-mix(in srgb, currentColor, var(--bs-secondary-bg) 10%);
}

.btn > svg,
button svg {
    aspect-ratio: 1 / 1;
    min-width: 1rem;
    min-height: 1.25rem;
    max-height: 2em;
}

.btn:has(svg),
button:has(svg) {
    gap: calc(var(--gap) / 4);
    display: inline-flex;
    align-items: center;
    place-items: center;
    white-space: nowrap;
    border-radius: var(--bs-border-radius-sm);
}

.cookiebar {
    display: flex;
    position: fixed;
    bottom: 0;
    padding-inline: var(--container-margins);
    z-index: 2000;
    height: fit-content;
    min-height: calc(var(--hero-item-height) + var(--border));
    place-items: center;
    flex-wrap: wrap;
    align-content: center !important;
    justify-content: center !important;
    width: 100vw;
    -webkit-backdrop-filter: blur(10px); /* Fixes blur for Safari*/
    backdrop-filter: blur(10px);
    background-color: color-mix(
        in srgb,
        var(--bs-secondary-bg),
        transparent 30%
    );
    /* animation: cooki calc(var(--speed) * 2) var(--ease-out) forwards; */
    /* animation-iteration-count: 1; */
    /* transform: translateY(0%);
  transition-property: transform, opacity;
  transition-duration: calc(var(--speed) * 2);
  transition-timing-function: var(--ease-out); */

    box-shadow: var(--bs-box-shadow-lg);
}

.cookie-options {
    max-width: 100%;
    & > div {
        flex-grow: 1;
    }
}

/* @keyframes cooki {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0%);
  }
} */

html {
    interpolate-size: allow-keywords;
    scrollbar-width: thin;
    scrollbar-color: currentColor transparent;
    /* scrollbar-gutter: stable; */
    scroll-padding-top: calc(var(--nav-height) * 1.5);
    background-color: var(--footer-bg);
    overflow: auto;

    /* color-scheme: dark light; */
}

/* --- Make scrollbars not shift content vertically, kind of works XD --- */

html:has(.navbar-toggler:not(.collapsed)) {
    scrollbar-gutter: stable;
}

body {
    overflow-x: clip;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    width: 100%;
    background-color: var(--bs-secondary-bg, #e4e5e7);
    margin: auto auto;
    margin-block-end: auto;
    transition: margin-block-end calc(var(--speed) * 2) var(--ease-out);

    max-width: var(--body-width);

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

p strong {
    font-weight: normal;
    font-variation-settings: "wght" calc(var(--font-weight) + 200);
}

body:has(.player-elements.show:not(.d-none)) {
    margin-block-end: var(--player-height);
}

body:has(.cookiebar:not(.d-none)) {
    margin-block-end: var(--hero-item-height);
}

/* === SITE GENERAL VARIABLES === */

.toggle-admin-menu {
    z-index: 2100;
    margin-top: var(--nav-height);
    max-width: fit-content;
}

.adminbar {
    display: flex;
    z-index: 2050;
}

.turbo-progress-bar {
    background-color: var(--bs-primary);
}

/* --- SETUP FOR DARK/LIGHT THEMES - to be fixed later --- */

[data-bs-theme="dark"] {
    color-scheme: dark;

    /* .icon-invert {
    display: visible;
  }

  .icon-fill {
    display: none;
  }

  a:hover {
    color: hsl(from var(--bs-primary) h s calc(l - 5));
  }
   */
}

[data-bs-theme="light"] {
    color-scheme: light;

    /* .icon-invert {
    display: none;
  }

  .icon-fill {
    display: visible;
  } */
}

/* ==== GENERAL STYLES; PARAGRAPH, HEADINGS AND DISPLAY TITLES ADJUSTMENTS ==== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: normal;
    orphans: 4;
    widows: 2;
    text-wrap: balance;
}

p,
.p,
.p1,
.p2,
.p3,
.p4,
td,
ol {
    font-weight: normal;
    text-wrap: pretty;
    max-width: 70ch;
    word-break: break-word;
    hyphens: auto;
}

b,
strong {
    font-weight: 100 !important;
    font-variation-settings: "wght" calc(var(--font-weight) + 250);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-weight: 100;
    font-optical-sizing: auto;
    font-variation-settings:
        "slnt" 0,
        "wght" calc(var(--font-weight) + 75);
    font-feature-settings:
        "dlig",
        "ss02" 0,
        "cv01" 1,
        "cv02" 1,
        "cv03" 1,
        "cv04" 1,
        "cv11" 1;
}

hr {
    background-color: currentColor;
    border: 0 none;
    color: currentColor;
    height: calc(var(--border) / 2);
    margin: 0;
}

.vr {
    border: calc(var(--border) / 4) solid var(--bs-secondary-color);
    color: var(--bs-secondary-color);
    width: calc(var(--border) / 2);
    opacity: 0.6;
}

a:focus-visible,
.work-card:focus-visible {
    outline-offset: 0.25rem;
    outline-width: 0.5rem;
    outline-style: solid;
    outline-color: var(--bs-primary);
}

.bg-dark > li > a {
    color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1));
    text-decoration: none;
}

/* --- FIXES PROBLEMS FOUND IN BOOTSTRAP PAGE --- */

.badge {
    letter-spacing: 0.06em;
    border-radius: calc(var(--radius) / 3);
}

.dropdown-menu.show {
    z-index: 1021;
}

/* --- SET SECTION EDGE PADDINGS GLOBALLY --- */

section,
section > *:not(picture),
footer {
    padding-inline: var(--container-margins);
}

.filtered-actor-items section,
.filtered-actor-items section > div {
    padding-inline: 0rem;
    width: 100%;
}

.quick-filter .cta-heading {
    word-break: revert;
}

section:not(.hero) {
    padding-block: calc(var(--section-margins) / 2);

    /* ==== Limit content width ==== */
    max-width: var(--content-width);
    margin: auto;
    align-self: center;
    justify-self: center;
    place-self: center;
}

section:first-child:not(.hero) {
    padding-block-end: calc(var(--section-margins) / 2) !important;
}

/* --- SET CONTENT TO  GROW TO FILL SCREEN --- */

.content {
    flex-grow: 1;
    padding-block-start: var(--nav-height);
}

.page-content {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* ==== Limit content width ==== */
    margin: auto;
    align-self: center;
    justify-self: center;
    place-self: center;
}

/* --- BUTTON OVERRRIDES --- */

/* --- ALTERNATE WIDE FONT --- */

.wide {
    font-family: "Roboto Flex Variable", sans-serif;
    letter-spacing: 0.3em;
    font-variation-settings:
        "wdth" 150,
        "slnt" 0,
        "wght" calc(var(--font-weight) + 275),
        "XTRA" 600,
        "opsz" 8;
    color: color-mix(in srgb, currentColor, white 20%);
    text-transform: uppercase;
    word-break: break-word;
    hyphens: auto;
}

h2.wide,
.h2.wide {
    font-size: clamp(0.9375rem, 0.8438rem + 0.3125vw, 1.125rem);
    padding-block-end: var(--gap);
}

.lead {
    font-variation-settings: "wght" calc(var(--font-weight) + 60);
}

/* ==== HERO SECTION CSS ==== */

.hero {
    margin-block-end: calc(var(--section-margins) / 2) !important;
    color: var(--bs-emphasis-color);
    padding: 0;

    /* --- OPTIONAL BACKGROUND IMAGE --- */

    /* background:linear-gradient(0deg, var(--bs-secondary-bg), rgba(var(--primary-rgb), 0.75), rgba(var(--primary-rgb), 0.75), rgba(var(--primary-rgb), 0.5),var(--bs-secondary-bg)); */

    /* background: url("https://placehold.co/1920x1080/bbbbff/aae"); */

    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

a {
    transition-property:
        font-weight, font-variation-settings, height, width, position, margin,
        background-color, opacity, fill, color, padding;
    transition-duration: var(--speed);
    transition-timing-function: var(--ease-in-snap);
}

.hero-headings .logo {
    height: calc(var(--fs-3xl) * 1.25);
    max-height: 100%;
    color: var(--bs-emphasis-color);
    min-height: calc(var(--fs-3xl) * 0.85);
    transform: scale(1);
    transition: transform calc(var(--speed) * 2);
    padding-inline: calc(var(--gap) / 5);
    padding-block-end: calc(var(--gap) / 4);
    padding-block-start: min(calc(var(--gap) / 1.25), 2vh);

    margin-block-start: calc(var(--gap) / 5);
}

.logo svg,
.logo img {
    width: 100%;
    max-height: 100%;
    min-width: 52px;
    min-height: 26px;
    fill: currentColor;
}

.hero-type {
    font-optical-sizing: auto;
    font-size: var(--fs-3xl);
    line-height: 85%;
    letter-spacing: -0.04em;
    align-content: center;
    font-variation-settings: "wght" var(--font-weight);
    text-decoration: none;
    text-shadow: 0 0.15rem 0.75rem rgba(var(--bs-secondary-bg), 0.5); /* Imporve legibility when using background image; */
    color: var(--bs-emphasis-color);
    font-feature-settings:
        "dlig",
        "ss02" 0,
        "cv01" 1,
        "cv02" 1,
        "cv03" 1,
        "cv04" 1,
        "cv11" 1;
}

.hero-headings {
    display: flex;
    row-gap: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    box-shadow: inset 0 calc(var(--border) * -1 + -1px) 0 -1px currentColor;
    height: var(--hero-item-height);
    overflow: clip;
    text-overflow: ellipsis;
    min-height: calc(var(--fs-3xl) * 0.85);
    margin-inline: 0;
    padding-inline: calc(var(--bs-gutter-x) / 2 + var(--container-margins));
}

.hero-headings:has(a:hover) {
    color: var(--bs-link-color);
    box-shadow: inset 0 calc(var(--border) * -1 + -1px) 0 -1px currentColor;
}

.hero-headings:nth-child(2n) {
    text-align: left;
    justify-content: start;
}

.hero-headings:nth-child(3n) {
    text-align: right;
    justify-content: end;
}

.hero-headings:last-child {
    justify-content: space-between;
}

.hero-headings a:hover,
.hero-headings a:focus-visible {
    font-variation-settings: "wght" calc(var(--font-weight) + 80);
    color: var(--bs-link-color);
}

.hero-headings .logo:hover,
.hero-headings .logo:focus-visible {
    transform: scale(1.05);
}

.hero-headings a:hover:not(.logo, .scroll-arrow) {
    margin-inline: -0.06em -0.06em;
}

/* --- HERO SCROLL ANIMATION --- */

.vild-scrollbar {
    display: none;
}

@supports (animation-timeline: view()) {
    @media only screen and (min-width: 576px) {
        .section:not(.hero) {
            will-change: filter, transform, opacity;
            transform-origin: center bottom;

            animation: move-in var(--ease-in) forwards;
            animation-timeline: view();
            animation-range-start: 0%;
            animation-range-end: 20%;
            filter: blur(0);
        }

        .hero-headings {
            animation: move-out var(--ease-in) forwards;
            animation-timeline: view();
            animation-range-start: 75%;
            animation-range-end: 98%;
        }

        @keyframes move-out-right {
            to {
                opacity: 0;
                padding-inline: 0;
                --container-margins: 0rem;
            }
        }

        @keyframes move-out-left {
            to {
                padding-inline: 0;
                --container-margins: 0rem;
            }
        }

        @keyframes move-out {
            to {
                padding-inline: 0;
                --container-margins: 0rem;
            }
        }

        @keyframes move-in {
            to {
                padding-inline: 0;
                --container-margins: 0rem;
                filter: blur(1);
            }
        }
    }
}

/* --- HERO SECTION OVERRIDES FOR SMALLER SCREENS (--bs-breakpoint-sm) --- */

@media only screen and (max-width: 576px) {
    :root {
        --font-weight-base: 660;
        --hero-heading-items: 5;
    }

    .hero-headings .logo {
        height: calc(var(--hero-item-height) / 1.25);
        justify-content: center;
        margin: auto auto;
        width: 100%;
    }

    .hero-headings a {
        height: var(--hero-item-height);
        min-height: calc(var(--fs-3xl) * 0.85);
        letter-spacing: -0.02em;
    }

    .hero-headings,
    .hero-headings:nth-child(2n),
    .hero-headings:nth-child(3n) {
        justify-content: center;
        text-align: center;
    }

    .hero-headings:first-child {
        column-gap: 16rem;
        height: calc(var(--hero-item-height) * 2);
        align-content: end;
    }

    .hero-headings:nth-child(4) a:nth-child(2) {
        display: none;
    }

    .hero-type {
        width: 100%;
    }
}

/* ==== CLIENT TESTIMONIALS SECTION ==== */

.logo-carousel {
    margin: 0 auto;
    padding: 1rem 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 8vw,
        black calc(100% - 8vw),
        transparent
    );
}

.logo-carousel:hover .group {
    animation-play-state: paused;
}

.testimonials .card {
    color: var(--bs-emphasis-color);
    padding: 1rem;
    font-size: xx-large;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: min(25vw, 25rem);
    min-height: min(14vw, 14rem);

    background-color: transparent;
    background-clip: border-box;
    border: none;
}

.logo-group {
    display: flex;
    gap: 1rem;
    padding-right: 1rem;
    will-change: transform;
    animation: scrolling 40s linear infinite;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.carousel-content {
    display: grid;
    aspect-ratio: 3 / 1;
}

.carousel-content img {
    object-fit: cover;
}

.carousel-content > * {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    flex-direction: column;
    max-width: 90vw;
}

.carousel-inner {
    mask-image: linear-gradient(
        to right,
        transparent,
        black 8vw,
        black calc(100% - 8vw),
        transparent
    );
}

.carousel-quote {
    display: flex;
    flex: auto;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--control-btn-size) + var(--bs-gutter-x));
    padding-block-start: 5em;
}

.carousel-quote .lead {
    font-size: clamp(1rem, 0.75rem + 0.8333vw, 1.5rem);
    text-wrap: pretty;
    font-variation-settings: "wght" calc(var(--font-weight) - 120);
}

.carousel-quote p:before {
    content: "“";
    margin-inline-start: -0.3em;
}

.carousel-quote p:after {
    content: "”";
}

.carousel-details {
    display: flex;
    justify-content: space-evenly;
}

.carousel-content .vstack {
    flex: none;
    flex-direction: column;
    justify-content: center;
    min-width: 35vw;
}
.carousel-content .hstack {
    justify-content: end;
}

.carousel-control-prev,
.carousel-control-next {
    width: auto;
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: var(--control-btn-size);
    height: var(--control-btn-size);
    background-color: var(--bs-primary);
    border: var(--frame) solid var(--bs-emphasis-color);

    transition-property: background-color;
    transition-duration: var(--speed);
    transition-timing-function: var(--ease-in-snap);
}

.carousel-control-prev:hover > *,
.carousel-control-prev:focus-visible > *,
.carousel-control-next:hover > *,
.carousel-control-next:focus-visible > * {
    background-color: color-mix(in srgb, var(--bs-primary), white 20%);
    opacity: 1;
}

/* ==== CTA FRAME ==== */

.cta-heading {
    font-optical-sizing: auto;
    font-size: var(--fs-xl);
    line-height: 1;

    align-content: center;
    font-variation-settings: "wght" calc(var(--font-weight) + 120);
    text-decoration: none;

    text-shadow: 0 0.15rem 0.75rem rgba(var(--bs-secondary-bg), 0.5); /* Imporve legibility when using background image; */

    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(var(--bs-emphasis-color), var(--bs-emphasis-color));
    background-position:
        0% 100%,
        0% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size:
        0% calc(var(--border)),
        100% calc(var(--border));

    transition-property:
        padding-inline-start, background-color, background-size,
        background-position, background-image, color;
    transition-duration: calc(var(--speed) * 2);
    transition-timing-function: var(--ease-out);

    padding-block-end: calc(var(--border) + 0.1em);
    padding-block-start: calc(var(--border) + 0.05em);

    word-break: break-word;
    hyphens: auto;
}

a.cta-jumbo {
    color: var(--bs-emphasis-color);
    text-decoration: none;
    font-size: var(--fs-2xl);
}

.cta-jumbo .cta-heading {
    font-variation-settings: "wght" var(--font-weight);
    font-size: var(--fs-2xl);
}

a.cta-frame:hover,
a.cta-card:hover,
a.cta-jumbo:hover {
    color: var(--bs-link-color);
    background-color: color-mix(in srgb, var(--bs-primary), white 20%);

    text-decoration: none;
    background-position:
        0% 100%,
        0% 100%;
    background-size:
        100% calc(var(--border)),
        100% calc(var(--border));
    color: var(--bs-link-color);
}

a.cta-frame:hover .cta-heading,
a.cta-card:hover .cta-heading,
a.cta-jumbo:hover .cta-heading {
    text-decoration: none;
    background-position:
        0% 100%,
        0% 100%;
    background-size:
        100% calc(var(--border)),
        100% calc(var(--border));
    color: var(--bs-link-color);
}

a.cta-jumbo:hover .cta-heading {
    padding-inline-start: 0.5%;
    padding-inline-start: 0.1em;
    transition-duration: calc(var(--speed) / 1.5);
}

.cta-card {
    background-color: var(--bs-primary);
    border: var(--frame) solid var(--bs-emphasis-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    row-gap: 0.2rem;
    text-decoration: none;
    color: var(--bs-emphasis-color);
    padding-inline: calc(var(--gap) / 2);

    min-height: fit-content;

    transition-property: background-color, color;
    transition-duration: calc(var(--speed) * 4);

    border-radius: calc(var(--radius) / 1.5);
}

@media (width <= 1200px) {
    .cta-card {
        max-height: 30vh;
    }

    .work-card-grid,
    .talents {
        .cta-card {
            max-height: revert;
        }
    }
    .card-16-9 {
        aspect-ratio: auto !important;
        min-height: fit-content;
    }

    .link-list-card .cta-heading {
        margin-block: max(var(--container-margins), 1.25rem) !important;
    }
}

.cta-frame {
    display: flex;
    background-color: var(--bs-primary);
    border: var(--frame) solid var(--bs-emphasis-color);
    width: 100%;
    padding: max(calc(var(--container-margins) / 1.5), 1.25rem);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    text-decoration: none;
    color: var(--bs-emphasis-color);
    border-radius: calc(var(--radius) / 1.5);
}

.filtered-actor-cards .cta-frame {
    max-width: 80rem;
    place-self: center;
    justify-self: center;
}

.cta-card:hover {
    background-color: color-mix(in srgb, var(--bs-primary), white 20%);
    transition-duration: var(--speed);
}

.cta-card h3 {
    font-size: var(--fs-md);
}

.cta-card > * {
    margin: 0;
}

.cta-card-img {
    width: clamp(12rem, 6.24rem + 19.2vw, 24rem);
    padding: 0;
    margin: calc(var(--frame) / 4);
}

/* ==== GRIDS SETUP ==== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    grid-column-gap: var(--gap); /* Space between grid item columns*/
    grid-row-gap: var(--gap); /* Space between grid item rows*/
    padding-inline: var(--container-margins);
    width: 100%;

    @media (width <= 992px) {
        width: auto;
    }
}

.card-grid-scroll {
    grid-auto-flow: column;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    padding-block: 1rem;
    mask-image: linear-gradient(
        to right,
        transparent,
        black calc(var(--bs-gutter-x) + var(--container-margins) - 1rem),
        black
            calc(100% - (var(--bs-gutter-x) + var(--container-margins)) + 1rem),
        transparent
    );
    grid-template-columns: repeat(var(--link-count), 12rem);

    scroll-snap-type: x mandatory;
    scroll-padding: calc(var(--bs-gutter-x) / 2 + var(--container-margins));

    & > * {
        scroll-snap-align: start;
    }
}

.card-16-9 {
    aspect-ratio: 16 / 9;
    grid-column: span 1;
}

.card-1-1 {
    aspect-ratio: 1 / 1;
    grid-column: span 1;
}

.card-cta {
    grid-column: span 2;
    min-height: 8rem;
}

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

.accordion > .accordion-item,
.accordion-flush > .accordion-item {
    box-shadow: inset 0 calc((var(--border) / 2) * -1 + -1px) 0 -1px
        currentColor;
}

.accordion-item .accordion-button {
    font-variation-settings: "wght" calc(var(--font-weight) + 120);
}

.accordion-button:hover {
    color: var(--bs-link-color);
}

.accordion-item:has(.accordion-button:hover) {
    box-shadow: inset 0 calc((var(--border) / 2) * -1 + -1px) 0 -1px
        var(--bs-link-color);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button {
    --bs-accordion-active-color: currentColor;
    font-size: var(--fs-md);
    padding-block-end: 0.875rem;
    padding-inline: 0;
}

.accordion-button:not(.collapsed) {
    --bs-accordion-active-bg: var(--bs-primary);
    --bs-accordion-active-bg: transparent;
}

.accordion-body {
    padding-block-start: 0.25rem;
    padding-block-end: 1.875rem;
    padding-inline: 0;
}

/* LINK LISTS COUNTER SASS */

/*
@for $i from 1 through 10 {
  .link-list-card .link-count-#{$i} .cta-heading {
      font-size: max(calc(var(--fs-xl) / #{$i}), var(--fs-md));
      margin: 0.4rem;
    }
  .link-list-card .card-grid-scroll.link-count-#{$i} {
    grid-template-columns: repeat(#{$i}, minmax(12rem, 1fr));
    }
}

link-count-#{$i} {
  --link-count: #{$i};
}

*/

.link-list-card .link-count-1 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 1), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-1 {
    grid-template-columns: repeat(1, minmax(12rem, 1fr));
}

.link-list-card .link-count-2 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 2), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-2 {
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
}

.link-list-card .link-count-3 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 3), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-3 {
    grid-template-columns: repeat(3, minmax(12rem, 1fr));
}

.link-list-card .link-count-4 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 4), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-4 {
    grid-template-columns: repeat(4, minmax(12rem, 1fr));
}

.link-list-card .link-count-5 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 5), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-5 {
    grid-template-columns: repeat(5, minmax(12rem, 1fr));
}

.link-list-card .link-count-6 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 6), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-6 {
    grid-template-columns: repeat(6, minmax(12rem, 1fr));
}

.link-list-card .link-count-7 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 7), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-7 {
    grid-template-columns: repeat(7, minmax(12rem, 1fr));
}

.link-list-card .link-count-8 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 8), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-8 {
    grid-template-columns: repeat(8, minmax(12rem, 1fr));
}

.link-list-card .link-count-9 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 9), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-9 {
    grid-template-columns: repeat(9, minmax(12rem, 1fr));
}

.link-list-card .link-count-10 .cta-heading {
    font-size: max(calc(var(--fs-xl) / 10), var(--fs-md));
    margin: 0.4rem;
}

.link-list-card .card-grid-scroll.link-count-10 {
    grid-template-columns: repeat(10, minmax(12rem, 1fr));
}

.link-list-card .link-count-1 .cta-heading {
    place-self: start;
    align-self: start;
    margin: max(var(--container-margins), 1.25rem);
}

.link-list-card .link-count-1 li {
    aspect-ratio: auto;
}

/* TABLE quick fix */
.table {
    --bs-table-bg: var(--bs-secondary-body) !important;
    --bs-table-border-color: var(--bs-gray-600) !important;
}

/* CONTACT SUMMARY FIXES */

.contact-summary {
    .map-link {
        aspect-ratio: 16 / 10;
        height: 100%;
        width: 100%;
        display: inline-flex;
        overflow: hidden;
        border-radius: calc(var(--radius) / 1.5);

        max-height: 24vh;
    }

    .img-fluid {
        width: 100%;
        object-fit: cover;
        object-position: 100% 45%;
    }
}

/* ABOUT PAGE FIXES */

.team-about-section {
    padding-block-start: 0 !important;
}

.team-member {
    background-color: color-mix(in srgb, var(--bs-secondary-bg), white 30%);
    background-color: transparent;

    .picture {
        margin: var(--card-padding);
        margin-block-end: 0;
    }

    .team-member-image {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        margin: auto;
        padding: 0 !important;
        margin-block-end: calc(var(--card-padding) * -1);

        border-radius: calc(var(--radius) / 2);
        overflow-clip-margin: unset;
    }

    .card-title {
        font-size: var(--fs-md);
    }

    .card-text,
    .card-links {
        font-size: var(--fs-2xs) !important;
    }
}

/* IMAGE PROGRESSIVE ENHANCEMENTS - LAZY LOAD */

.progressive-media-container {
    position: relative;
    display: inline-block;
    overflow: hidden;

    &.aspect-square {
        aspect-ratio: 1 / 1;
    }

    &.aspect-video {
        aspect-ratio: 16 / 9;
    }
}

.progressive-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    filter: blur(5px);

    &.blur-sm {
        filter: blur(4px);
    }

    &.bg-gray-200 {
        background-color: #e5e7eb;
    }
}

.progressive-picture {
    transition: opacity 0.3s ease;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &.loaded {
        opacity: 1 !important;
    }
}

.progressive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    &.rounded-lg {
        border-radius: 0.5rem;
    }

    &.shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}