/* CSS Reset | Published on 18 September 2023 by Andy Bell */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;  
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-decoration: none;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* iamfok.com CSS */

:root {
  --primary-font-color: rgba(0, 0, 0, 1);
  --primary-font-color-transparent: rgba(0, 0, 0, 0);
  --secondary-font-color: rgba(255, 255, 255, 1);
  --secondary-font-color-transparent: rgba(255, 255, 255, 0);
  --btn-primary-font-color: rgba(0, 0, 0, 1);
  --btn-secondary-font-color: rgba(255, 255, 255, 1);
  --primary-title-color: rgba(255, 255, 255,1);
  --secondary-title-color: rgba(0, 0, 0, 1);
  --body-background-color: rgba(255, 255, 255, 1);
  --footer-primary-background-color: rgba(255, 255, 255, 1);
  --footer-secondary-background-color: rgba(0, 0, 0, 1);
  --primary-font-family: 'Season', sans-serif;
  --body-text-size: 18px; 
  --h1-size: 6.5rem;
  --h2-size: 1rem;
  --h3-size: 1rem;
  --h4-size: 1rem;
  --h5-size: 1rem;
  --nav-size: 0.762rem;
}

@media (min-width: 1600px) {

  :root {
    --body-text-size: 21px;
  }

}

@media (max-width: 1024px) {

  :root {
    --body-text-size: 16px;
  }

}

html {
  font-size: var(--body-text-size);
}

body {
  background-color: rgba(255,255,255,1);
  font-family: var(--primary-font-family);
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  mix-blend-mode: difference;
  padding: 0 22px 0 19px;
}

header.mobile {
  display: none;
}

@media(max-width: 800px) {

  :root {
    --h1-size: 4.25rem;
  }

}

@media(max-width: 576px) {

  header {
    display: none;
  }

  header.mobile {
    display: flex;
    flex-direction: column;
  }

  header.mobile .first-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 24px;
    row-gap: 0;
  }

  header.mobile.scroll .first-row {
    justify-content: space-between;

  }

  header.mobile .first-row div:last-of-type {
    margin-top: -12px;
  }

  header.mobile.scroll .first-row div:last-of-type {
    margin-top: 0;
  }



}

@media(max-width: 470px) {

  :root {
    --h1-size: 4rem;
  }

}

header a {
  display: flex;
  justify-content: space-between;
}

h1 {
  margin-block-start: 0;
  margin-block-end: 0;
  color: rgb(255,255,255);
  font-size: var(--h1-size);
  line-height: 0.79;
  padding: 28px 0 0 0;
  font-family: 'Season', sans-serif;
  animation: none;
}

@keyframes animatedHeadline {
  0% {
    font-variation-settings: "SERF" 0, "wght" 100;
  }

  50% {
    font-variation-settings: "SERF" 100, "wght" 900;
  }

  100% {
    font-variation-settings: "SERF" 0, "wght" 100;
  }

}

@media (max-width: 576px) {

  h1 {
    animation: animatedHeadline 6s ease;
    animation-iteration-count: infinite;
  }

}

.smaller {
  font-size: 1rem;
  padding: 16px 0 0 0;
}

h2 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: var(--h2-size);
}

h2.section-caption {
  font-size: 2.15rem;
  text-transform: uppercase;
}

@media (max-width: 576px) {
  
  h2.section-caption {
    font-size: 1.75rem;
  }

}

h2.section-caption::before{
  content: '\2193\00A0\00A0';
  position: relative;
  top: 16px;
  left: 0;
}


h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: var(--h3-size);
  font-weight: 400;
}

footer {
  position: fixed;
  margin: 0 auto;
  z-index: 9999;
}

.nav {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
  background-color: var(--secondary-font-color);
}

.nav.invert {
  background-color: var(--primary-font-color);
}

.nav .menu {
  display: flex;
}

.nav .toggle {
  display: none;
}

.nav .contact div {
  display: flex;
  justify-content: center;
}

.nav .menu a,
.nav .toggle a,
.nav .contact a {
  display: flex;
  padding: 12px 24px 10px;
  letter-spacing: 0.030rem;
  font-size: var(--nav-size);
  font-variation-settings: "wght" 800, "SERF" 0;
  background-color: var(--body-background-color);
  color: var(--primary-font-color);
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 1024px) { 

  .nav .menu a,
  .nav .toggle a,
  .nav .contact a {
    letter-spacing: 0.015rem;
  }

}

@media (max-width: 992px) {

  .nav .menu a,
  .nav .toggle a,
  .nav .contact a {
    padding: 12px 24px 10px;
  }

}


@media (min-width: 1600px) {

  .nav .menu a,
  .nav .toggle a,
  .nav .contact a {
    padding: 20px 32px 16px;
    letter-spacing: 0.015rem;
    font-variation-settings: "wght" 800, "SERF" 0;
  }

   .nav.detail-page .menu a,
   .nav.detail-page .toggle a,
   .nav.detail-page .contact a {
    padding: 10px 24px 10px;
    letter-spacing: 0.025rem;
  }

}

.nav .menu a.active {
  color: var(--secondary-font-color);
  background-color: var(--primary-font-color);
}

.nav .contact .contact-item {
  display: none;
}

.nav .contact .contact-item a {
  display: flex;
  justify-content: flex-end;
  min-width: 232px;
}

@media (max-width: 992px) {

  .nav .contact .contact-item a {
    min-width: auto;
  }

}

.nav .contact .contact-item.visible {
  display: block;
}

.nav.invert a {
  background-color: var(--primary-font-color);
  color: var(--secondary-font-color);
}

.nav a:hover {
  color: var(--secondary-font-color);
  background-color: var(--primary-font-color);
}

.nav.invert a:hover {
  background-color: var(--secondary-font-color);
  color: var(--primary-font-color);
}

.mobile-menu {
  display: none;
}

.project-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  width: 100%;
  margin: 0;
  padding: 144px 24px 80px 24px;
}

@media(max-width: 767px) {

  .project-grid {
    padding: 120px 24px 104px 24px;
  }

}

@media(max-width: 576px) {

  .project-grid {
    padding: 168px 24px 104px 24px;
  }

}

@media (min-width: 1600px) {

  .project-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
    width: 100%;
    margin: 0;
    padding: 172px 24px 72px 24px;
  }

}

.project-grid-item {
  display: flex;
  flex-direction: column;
  width: 25%;
  padding: 0 8px;
  float: left;
}

@media(max-width: 1200px) {

  .project-grid-item {
    width: 33.3%;
  }

}

@media(max-width: 767px) {

  .project-grid-item {
    width: 50%;
  }

}

@media(max-width: 576px) {

  .project-grid-item {
    width: 100%;
  }

}

.project-grid-item img {
  height: auto;
}

.project-details {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0 0;
  gap: 2px;
}

.project-details h2 {
  font-weight: 700;
  text-transform: uppercase;
}

.project-details h3 {
  font-weight: 400;
  line-height: 1.35;
}

.project-details.filmtv h3::first-letter {
  text-transform: capitalize;
}

.video-wrap {
  position: relative;
  width: 1200px;
  height: 675px;
  opacity: 1;
  overflow: hidden;
  margin: 2.5rem auto 2.5rem;
  transition: all 0.8s ease-in-out;
}

@media (max-width: 1280px) {
  
  .video-wrap {
    width: 992px;
    height: 558px;
    margin: 3rem auto 3rem;
  }

}

@media (max-width: 1024px) {
  
  .video-wrap {
    width: 720px;
    height: 405px;
  }

}

@media (max-width: 768px) {
  
  .video-wrap {
    width: 540px;
    height: 304px;
  }

}

@media (max-width: 640px) {
  
  .video-wrap {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin: 4rem auto 2.5rem;
    transition: none;
  }

}

@media (min-width: 1600px) {
  
  .video-wrap {
    width: 1200px;
    margin: 4.5rem auto 4.5rem;
  }

}
 
.fourthree {
  width: 880px;
  height: 660px;
}

@media (max-width: 1200px) {
  
  .fourthree {
    width: 820px;
    height: 615px;
    margin: 4.5rem auto 4.5rem;
  }

}

@media (max-width: 1024px) {
  
  .fourthree {
    width: 700px;
    height: 525px;
    margin: 6rem auto 4.5rem;
  }

}

@media (max-width: 768px) {
  
  .fourthree {
    width: 540px;
    height: 405px;
    margin: 8.5rem auto 4.5rem;
  }

}

@media (max-width: 640px) {
  
  .fourthree {
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    margin: 4rem auto 2.5rem;
    transition: none;
  }

}

@media (min-width: 1600px) {
  
  .fourthree {
    width: 880px;
    height: 660px;
    margin: 4.5rem auto 4.5rem;
  }

}

.embed-video {
  width: 100%;
  height: 675px;
  display: block;
  
}

@media (max-width: 1280px) {
  
  .embed-video {
    height: 558px;
  }

}

@media (max-width: 1024px) {
  
  .embed-video {
    height: 405px;
  }

}

@media (max-width: 640px) {
  
  .embed-video {
    height: 304px;
  }

}

@media (max-width: 576px) {
  
  .embed-video {
    height: auto;
  }

}

.fourthree .embed-video {
  height: 900px;
}

@media (max-width: 1280px) {
  
.fourthree .embed-video {
    height: 744px;
  }

}

@media (max-width: 1024px) {
  
.fourthree .embed-video {
    height: 540px;
  }

}

@media (max-width: 640px) {
  
  .fourthree .embed-video {
    height: 405px;
  }

}

@media (max-width: 576px) {
  
  .embed-video {
    height: auto;
  }

}


.embed-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1111;
}


.embed-poster,
.yt-poster {
  display: flex;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2222;
  cursor: pointer !important;
  opacity: 1;
  width: 100%;
  height: 100%;
}

.embed-btn,
.yt-btn {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  padding: 9px 24px 8px;
  justify-content: center;
  align-items: center;
  background-color: var(--body-background-color);
  color: var(--btn-primary-font-color);
  font-variation-settings: "wght" 900, "SERF" 0;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 3333;
  transition: 0.4s;
  border-radius: 24px;
  text-decoration: none;
  /* pointer-events: none; */
}

@media (max-width: 576px) {

  .embed-btn,
  .yt-btn {
    font-size: 0.9375rem;
    padding: 10px 24px 8px;
  }

}

.section.film-detail-credits {
  display: flex;
  margin: 0;
  padding: 0;
}

.credits {
  width: fit-content;
  max-width: 50%; 
  padding-bottom: 240px;
  z-index: 8888;
  position: relative;
  padding-left: 4.25rem; 
}

@media (max-width: 820px) {

  .credits {
    width: auto;
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

}

@media (max-width: 576px) {

  .credits {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

}

.external-link.film-detail {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 32px auto 0 0;
  padding-left: 4.25rem;   
  padding-bottom: 48px;
  z-index: 8888;
  position: relative;
}

@media(max-width: 820px) {

  .external-link.film-detail {
    padding-left: 2.5rem;   
  }

}

@media(max-width: 576px) {

  .external-link.film-detail {
    padding-left: 2rem;   
  }

}

.external-link-btn-top h2 {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-variation-settings: "wght" 500, "SERF" 0;
  line-height: 1.25;
}

.external-link-btn-bottom h2 {
  padding: 0 0 0 0;
  font-size: 4rem;
  text-transform: uppercase;
  font-variation-settings: "wght" 900, "SERF" 0;
}

@media(max-width: 820px) {

  .external-link-btn-top h2 {
    font-size: 1.25rem;
  }

  .external-link-btn-bottom h2 {
    font-size: 3rem;
  }

}

@media(max-width: 576px) {

  .external-link-btn-bottom h2 {
    font-size: 2.5rem;
  }

}

.external-link-btn-bottom h2::after {
  content: '\2197';
  font-variation-settings: "wght" 900, "SERF" 100;
  position: relative;
  top: -15px;
  left: 8px;
}

.credits.film-detail {
  width: fit-content;
  max-width: 66.6%;
  margin: 0 0 0 auto;
  padding-right: 4.25rem; 
  padding-left: 0; 
  padding-bottom: 240px;
}

@media (max-width: 820px) {

  .credits.film-detail {
    width: auto;
    max-width: 75%;
    padding-right: 2rem;
  }

}

@media (max-width: 576px) {

  .credits.film-detail {
    width: auto;
    max-width: 100%;
    padding-left: 2rem;
  }

}

@media (min-width: 1600px) {

  .credits.film-detail {
    width: fit-content;
    max-width: 50%;
    margin: 0 0 0 auto;
    padding-right: 4.25rem; 
    padding-left: 0; 
    padding-bottom: 240px;
  }

}

.credits.film-detail.no-link {
  margin: 0 0 0 auto;
}

.credits p {
  margin-block-end: 0.75rem;
}

.credits p:first-of-type {
  margin-block-end: 0.75rem;
}

.credits p:last-of-type {
  margin-block-end: 0;
}

.credits p strong {
  text-transform: uppercase;
  font-family: var(--primary-font-family);
  font-variation-settings: "wght" 600, "SERF" 0;
}

.embrace {
  width: 66.6%;
  margin: 0 0 0 auto;
  padding-right: 4.25rem; 
}

.embrace .project-details h3::first-letter {
  text-transform: capitalize;
}

@media (max-width: 820px) {

  .embrace {
    padding-right: 2rem; 
  }

}

.embrace.film-detail {
  margin: 0 0 0 0;
  padding-left: 4.5rem; 
}

@media (max-width: 768px) {

  .embrace,
  .embrace.film-detail {
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
  }

}

.embrace h2.section-caption {
  text-align: right;
  padding-right: 0.5rem;
  line-height: 0.25;
  font-family: var(--primary-font-family);
  font-variation-settings: "wght" 700, "SERF" 100;
}

.embrace.film-detail h2.section-caption {
  text-align: left;
}

.embrace .project-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;
  margin: 48px auto 0;
  padding: 0 0 4rem 0;
}

@media (max-width: 576px) {

  .embrace .project-grid {
    flex-direction: column;
  }

}

.embrace .project-grid-item {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 0 8px;
  float: left;
}

@media (max-width: 768px) {

  .embrace .project-grid-item {
    padding: 0 8px 0 0;
  }

}

@media (max-width: 576px) {

  .embrace .project-grid-item {
    width: 100%;
    padding: 0;
  }

}

.section-biography {
  display: flex;
  height: 100vh;
  align-items: center;
}

.biography-wrap {
  height: calc(100vh - 164px);
  display: flex;
  align-items: center;
  margin: 80px 0 0 0;
}

.biography {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: calc(100% - 48px);
  margin: auto;
}

.biography-picture,
.biography-text {
  width: 50%;
}

.biography-picture {
  padding-bottom: 8px;
}

.biography-picture img {
  padding: 0;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.biography-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: auto 0 0 0;
}

@media(max-width: 1024px) {

  .section-biography {
    height: auto;
    align-items: flex-start;
  }
  
  .biography-wrap {
    height: auto;
    display: flex;
    align-items: center;
    margin: 164px 0 80px 0;
  }

  .biography-text {
    margin: 164px 0 0 0;
  }

}

@media(max-width: 992px) {

  .biography {
    flex-direction: column;
    margin: 0 auto;
  }

  .biography-picture {
    width: 100%;
  }

  .biography-picture img {
    height: 576px;
  }

  .biography-wrap {
    margin: 64px 0 80px 0;
  }

  .biography-text {
    width: auto;
    padding: 0;
    margin: 0;
  }

}

@media(max-width: 576px) {

  .biography-picture img {
    height: 768px;
  }

  .biography-text {
    margin: 0 0 16px 0;
  }

}

.biography-text h2 {
  text-transform: uppercase;
}

.biography-text p {
  margin-block-end: 0.75rem;
  text-transform: uppercase;
}

.biography-text p:first-of-type {
  margin-block-start: 1.5rem;
}

.biography-text p:last-of-type {
  margin-block-end: 0;
}

@media (min-width: 1600px) {

  .biography-wrap {
    height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    margin: 88px 0 0 0;
  }
  
  .biography {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: calc(100% - 48px);
    margin: auto;
  }

  .biography-picture {
    padding-bottom: 9px;
  }

  .biography-picture img {
    padding: 0;
    width: 100%;
    height: 576px;
    object-fit: cover;
  }

}

.section-featured {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-height: 667px) {

  .section-featured {
    touch-action: none;
  }

}

.featured-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
}

.featured-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.featured-item-picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.featured-item-picture.visible {
  display: block;
}

.featured-item-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile Menu */

@media (max-width: 820px) {

  .nav .menu,
  .nav .contact {
    display: none;
  }
  
  .nav {
    background-color: transparent;
    pointer-events: none;
  }

  .nav .toggle,
  .nav .toggle:hover {
    display: flex;
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding: 12px 0 10px;
    letter-spacing: 0.030rem;
    font-variation-settings: "wght" 750, "SERF" 0;
    background-color: var(--body-background-color);
    text-transform: uppercase;
    text-decoration: none;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer !important;
  }

  .nav.invert .toggle,
  .nav.invert .toggle:hover {
    background-color: var(--primary-font-color);
    color: var(--body-background-color);
  }

  .nav.invert .toggle a,
  .nav.invert .toggle a:hover {
    background-color: var(--primary-font-color);
    color: var(--body-background-color);
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s, opacity 0.4s linear;
    z-index: 9999;
  }
  
  .on-off {
    visibility: visible;
    opacity: 1;
  }

  .no-scroll {
    overflow: hidden;
  }

  .mobile-menu div {
    width: 100%;
    border-bottom: 1px solid var(--primary-font-color);
    height: 48px;
  }

  .mobile-menu.invert div {
    border-bottom: 1px solid var(--body-background-color);
  }

  .mobile-menu a {
    display: flex;
    padding: 12px 0 10px;
    letter-spacing: 0.030rem;
    font-variation-settings: "wght" 750, "SERF" 0;
    background-color: var(--body-background-color);
    text-transform: uppercase;
    text-decoration: none;
    justify-content: center;
    width: 100%;
    pointer-events: all;
  }

  .mobile-menu.invert a {
    background-color: var(--primary-font-color);
    color: var(--secondary-font-color);
  }

  .mobile-menu a.active {
    color: var(--primary-font-color);
    background-color: var(--secondary-font-color);
  }

  .mobile-menu .close {
    display: flex;
    padding: 12px 0 10px;
    letter-spacing: 0.030rem;
    font-variation-settings: "wght" 750, "SERF" 0;
    text-transform: uppercase;
    text-decoration: none;
    justify-content: center;
    background-color: var(--primary-font-color);
    color: var(--secondary-font-color);
    border: 0;
  }

  .mobile-menu.invert .close {
    background-color: var(--primary-font-color);
    color: var(--secondary-font-color);
    border: 0;
  }

}

/* Tweaks */

.featured-item-caption-wrap {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: transparent;
}

.featured-item-caption div {
  display: inline-block;
  width: fit-content;
  font-size: 1rem;
  justify-content: center;
  align-items: center;
  background-color: var(--body-background-color);
  color: var(--btn-primary-font-color);
  font-variation-settings: "wght" 900, "SERF" 0;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
  position: relative;
  z-index: 3333;
  transition: 0.4s;
  border-radius: 24px;
  margin: 0;
  padding: 9px 16px 8px;
}

@media (max-width: 767px) {

    .featured-item-caption-wrap {
      width: 100%;
      justify-content: center;
    }

}

@media (max-width: 576px) {

  .featured-item-caption-wrap {
    top: calc(100vh - 104px);
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
  }

  .featured-item-caption-wrap div {
    font-size: 0.9375rem;
  }

}

@media (max-height: 667px) {

  .featured-item-caption-wrap {
    top: 73%;
  }

}