: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);

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

  .list-group-item.active {
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  }

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

  .accordion-button:not(.collapsed) {
    box-shadow: none;
  }


@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;
      min-height: 4em;
    }
  }
  .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: 6rem;
}

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