:root {
	--color-grey-100: rgba(26, 26, 26, 1);
	--color-grey-80: rgba(71, 71, 71, 1);
	--color-grey-50: rgba(117, 117, 117, 1);
	--color-grey-15: rgba(217, 217, 217, 1);
	--color-grey-10: rgba(230, 230, 230, 1);
	--color-grey-5: rgba(242, 242, 242, 1);

	--color-white-100: rgba(255, 255, 255, 1);
	--color-white-60: rgba(255, 255, 255, 0.6);

	--color-text-primary: var(--color-grey-100);
	--color-text-secondary: var(--color-grey-80);
	--color-text-tertiary: var(--color-grey-50);

	--spacer-1: 8px;
	--spacer-2: 16px;
	--spacer-3: 24px;
	--spacer-4: 32px;
	--spacer-5: 40px;
	--spacer-8: 64px;
	--spacer-12: 96px;
	--spacer-16: 128px;
	--spacer-24: 192px;
}




* {
	box-sizing: border-box;
}




html {
	height: 100%;
	margin: 0px;
	font-size: 16px;
}

body {
	height: 100%;
	margin: 0px;
	/*
	font-family: "Inclusive Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	*/
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

main {
	max-width: 960px;
	padding: 80px var(--spacer-5);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.image-wrapper {
		width: 100%;
		display: block;
		padding: 4px;
		margin: 0 0 var(--spacer-8);
	  border-radius: 16px;
	  background: linear-gradient(to bottom, var(--color-grey-5), var(--color-grey-15));

	  img {
		  width: 100%;
			display: block;
			margin: 0;
		  border-radius: 12px;
		  border: 4px solid var(--color-white-100);
		}

		video {
			width: 100%;
			display: block;
			margin: 0;
		  border-radius: 12px;
		  border: 4px solid var(--color-white-100);
		}
	}


@media (max-width: 768px) {
	main {
		padding: 80px var(--spacer-2);
	}
}




/* ------------------------------- */
/* HEADER
/* ------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  border-bottom: 1px solid var(--color-grey-10);
  background: var(--color-white-100);
  z-index: 1000;

  .header-content {
	  max-width: 960px;
	  height: 100%;
	  padding: 0 40px;
	  margin: auto auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;

	  .logo img {
		  height: 32px;
		  width: auto;
		  display: block;
		  border-radius: 0px;
		  margin: 0;
		}

		.home-button {
			height: 40px;
			padding: 0 24px 0 16px;
			display: inline-flex;
		  align-items: center;
		  gap: 8px;
			font-weight: 500;
			text-decoration: none;
			color: var(--color-text-primary);
			border-radius: 100px;
			border: 2px solid var(--color-white-100);
			background: var(--color-white-100);
			transition: border 0.25s ease;

			svg {
			  width: 20px;
			  height: 20px;
			}
		}

		.home-button:hover {
			border: 2px solid var(--color-grey-10);
		}

		.contact-button {
			height: 40px;
			padding: 0 24px 0 16px;
			display: inline-flex;
		  align-items: center;
		  gap: 8px;
			font-weight: 500;
			text-decoration: none;
			color: var(--color-text-primary);
			border-radius: 100px;
			border: 2px solid var(--color-grey-5);
			background: var(--color-grey-5);
			transition: background 0.25s ease, border 0.25s ease;

			svg {
			  width: 20px;
			  height: 20px;
			  transform: rotate(-10deg);
			  transition: transform 0.25s ease;
			}
		}

		.contact-button:hover {
			border: 2px solid var(--color-grey-10);
			background: var(--color-white-100);
		}

		.contact-button:hover svg {
		  transform: rotate(0deg);
		}
	}
}


@media (max-width: 768px) {
	.header-content {
		padding: 0 var(--spacer-2);
	}
}




/* ------------------------------- */
/* FOOTER
/* ------------------------------- */

.site-footer {
  background-color: var(--color-white-100);
  padding: 24px 0;
  border-top: 1px solid var(--color-grey-10);
  color: var(--color-grey-100);

  .footer-content {
	  max-width: 960px;
	  padding: 0 40px;
	  margin: 0 auto;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;

	  .footer-icon {
		  width: 24px;
		  height: 24px;
		  color: var(--color-grey-100);
		}

		.footer-item {
		  font-size: 1rem;
		  text-align: center;
		  text-decoration: none;
		}
	}
}


@media (max-width: 768px) {
	
}




/* ------------------------------- */
/* HOME
/* ------------------------------- */


/* -------- HERO -------- */

.hero {
    padding: var(--spacer-16) var(--spacer-16);

    h1 {
	    width: 100%;
	    padding: 0;
			margin: 0 auto var(--spacer-4);
			font-family: "Rubik", sans-serif;
			font-size: 4rem;
			font-weight: 700;
			line-height: 1.2;
			color: var(--color-text-primary);
	  }

	  p {
	    padding: 0;
	    margin: 0;
	    font-size: 1.875rem;
	    color: var(--color-text-primary);
	  }
  }


@media (max-width: 768px) {
	.hero {
    padding: var(--spacer-12) var(--spacer-2);

	  h1 {
	  	font-size: 2.5rem;
	  }

	  p {
	  	font-size: 1.5rem;
	  }
	}
}




/* -------- PERSONAL PROJECT -------- */

.key-project {
  margin: 0 0 var(--spacer-16);

  .key-project-item {
  	text-decoration: none;

  	.image-wrapper {
		width: 100%;
		display: block;
		padding: 4px;
		margin: 0 0 var(--spacer-3);
		border-radius: 16px;
		background: linear-gradient(to bottom, var(--color-grey-5), var(--color-grey-15));

		img {
			width: 100%;
			display: block;
			margin: 0;
			border-radius: 12px;
			border: 4px solid var(--color-white-100);
		}

		video {
			width: 100%;
			display: block;
			margin: 0;
			border-radius: 12px;
			border: 4px solid var(--color-white-100);
		}
	}

	h2 {
		margin-bottom: var(--spacer-1);
		padding: 0 var(--spacer-16);
		font-family: "Rubik", sans-serif;
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 1.2;
		color: var(--color-text-primary);
	}

	.label {
		padding: 0 var(--spacer-16);
		margin: 0;
		font-size: 1.25rem;
		font-weight: 500;
		text-transform: uppercase;
		color: var(--color-text-tertiary);
	}
  }

  .key-project-item:hover {
  	.image-wrapper {
  		background: linear-gradient(to bottom, var(--color-grey-15), var(--color-grey-50));
  	}

  	h2 {
	  	text-decoration: underline;
	  	text-decoration-color: var(--color-text-primary);
  	}
  }
}


@media (max-width: 768px) {
	.key-project {
		.key-project-item {
	  	h2 {
	  		padding: 0 var(--spacer-2);
	  	}

	  	.label {
				padding: 0 var(--spacer-2);
	  	}
	  }
  }
}




/* -------- NDA MESSAGE -------- */

.nda-message {
	padding: 0 var(--spacer-16);
  margin: 0 0 var(--spacer-16);
  display: flex;
  flex-direction: column;
  align-items: center;

  .bubble {
	  max-width: 100%;
	  width: fit-content;
	  display: inline-flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	  gap: var(--spacer-2);
	  padding: 20px 40px 20px 32px;
	  margin: 0 auto;
	  font-size: 1.25rem;
	  font-weight: 500;
	  line-height: 1.3;
	  color: var(--color-text-secondary);
	  border-radius: 9999px;
	  background: var(--color-grey-5);

	  svg {
	  	width: 24px;
	  	height: 24px;
	  	flex-shrink: 0;
	  }

	  p {
	  	margin: 0;
	  	color: var(--color-text-secondary);
	  }
	}

	p {
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--color-text-secondary);

		a {
  		color: var(--color-text-secondary);
  	}

  	a:hover {
  		color: var(--color-text-primary);
  	}
	}
}


@media (max-width: 768px) {
	.nda-message {
		padding: 0;
		margin: 0 0 var(--spacer-8);

		.bubble {
			padding: 20px 40px 20px 24px;
			gap: 12px;
		}

			p {
				/*font-size: 1rem;*/
		}
	}
}




/* -------- PROJECTS -------- */

.project-grid {
  display: flex;
  flex-direction: row;
  gap: var(--spacer-3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 0 var(--spacer-5);

  .project-item {
  	text-decoration: none;

		.image-wrapper {
			width: 100%;
			display: block;
			padding: 4px;
			margin: 0 0 var(--spacer-2);
		  border-radius: 16px;
		  background: linear-gradient(to bottom, var(--color-grey-5), var(--color-grey-15));

		  img {
			  width: 100%;
				display: block;
				aspect-ratio: 2 / 3;
		  	object-fit: cover;
				margin: 0;
			  border-radius: 12px;
			  border: 4px solid var(--color-white-100);
			}

			img.project-01 {
				object-position: 7%;
			}

			img.project-02 {
				object-position: 55%;
			}

			img.project-03 {
				object-position: center center;
			}

		  video {
			  width: 100%;
			  display: block;
			  margin: 0;
			  border-radius: 12px;
			  border: 4px solid var(--color-white-100);
			}
		}

		p {
			padding: 0 var(--spacer-3);
			margin: 0;
			color: var(--color-text-primary);
			font-size: 1.5rem;
		  font-weight: 700;
		  line-height: 1.2;
		}
	}

	.project-item:hover {
		.image-wrapper {
			background: linear-gradient(to bottom, var(--color-grey-15), var(--color-grey-50));
		}

		p {
			color: var(--color-text-primary);
			text-decoration: underline;
  		text-decoration-color: var(--color-text-primary);
		}
  }
}


@media (max-width: 768px) {
	.project-grid {
	  display: flex;
	  flex-direction: column;
	  gap: var(--spacer-4);

	  .project-item {
  		p {
				padding: 0 var(--spacer-2);
			}

	  	.image-wrapper {
		  	margin: 0 0 var(--spacer-1);

		  	img {
		  		aspect-ratio: 3 / 2;
		  	}
			}
		}
	}
}


/* -------- ABOUT -------- */

.about {
  padding: 0 var(--spacer-16);
  margin: 0 0 var(--spacer-16);
  display: flex;
  flex-direction: row;
  gap: var(--spacer-5);
  align-items: center;

  img {
	  margin: 0;
	  flex: 0.3;
	}

	.about-text {
		flex: 0.7;
		font-size: 1.25rem;
		font-weight: 400;
		line-height: 1.5;
		color: var(--color-text-primary);

		p {
			margin: 0 0 var(--spacer-4);
		}

		p:last-child {
			margin: 0;
		}
	}
}


@media (max-width: 768px) {
	.about {
		padding: 0;
		margin: 0 0 var(--spacer-8);
		flex-direction: column;
		gap: var(--spacer-3);

		.about-text {
			padding: 0 var(--spacer-2);
		}
	}
}




/* ------------------------------- */
/* PROJECT DETAILS
/* ------------------------------- */

/* -------- PROJECT KEY VISUAL -------- */

section.key-visual {
	margin: var(--spacer-5) 0;

	img {
		margin: 0px;
	}
}


@media (max-width: 768px) {
	section.key-visual {
		margin: var(--spacer-2) 0 var(--spacer-5);
	}
}


/* -------- PROJECT TITLE -------- */

section.project-title {
	margin-bottom: var(--spacer-8);
}

h1 {
	width: 100%;
	margin: 0 auto var(--spacer-2);
	font-family: "Rubik", sans-serif;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.0;
	color: var(--color-text-primary);
}

.client {
	width: 100%;
	margin: 0 auto;
	font-size: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--color-text-tertiary);
}


@media (max-width: 768px) {
	section.project-title {
		padding: 0 var(--spacer-2) 0;

		h1 {
			font-size: 2.5rem;
		}

		.client {
			font-size: 1rem;
		}
	}
}


/* -------- PROJECT KEY VISUAL -------- */

img, video {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--spacer-8) 0;
  border-radius: 8px;
}


@media (max-width: 768px) {
	img, video {
		margin: var(--spacer-4) 0;
	}
}




/* -------- PROJECT META -------- */

section.project-meta {
	width: 100%;
	padding: 0 var(--spacer-16);
	margin: 0 0 var(--spacer-8);

	.meta-row {
		  display: flex;
		  padding: var(--spacer-2) 0;
		  border-bottom: 1px solid var(--color-grey-10);

		  dt {
				line-height: 1.5;
			  text-transform: uppercase;
			  color: var(--color-text-tertiary);
			  flex-basis: 50%;
			}

			dd {
				line-height: 1.5;
			  margin: 0;
			  color: var(--color-text-primary);
			  flex-basis: 50%;
			  text-align: left;
			}
		}

	.meta-row:last-child {
	  border-bottom: none;
	}
}


@media (max-width: 768px) {
	section.project-meta {
		padding: 0 var(--spacer-2);
	}
}




/* -------- INTRODUCTION -------- */

section.project-introduction {
	padding: 0 var(--spacer-16);
	margin: 0 auto var(--spacer-16);

	p {
		margin: 0 0 var(--spacer-4);
		font-size: 1.875rem;
		font-weight: 350;
		line-height: 1.5;
		color: var(--color-text-primary);
	}

	p:last-child {
		margin-bottom: 0;
	}
}


@media (max-width: 768px) {
	section.project-introduction {
		padding: 0 var(--spacer-2);
		margin-bottom: var(--spacer-12);

		p {
			font-size: 1.5rem;
		}
	}
}




/* -------- CASE SECTION -------- */

.case-section {
	margin: 0 0 var(--spacer-16);

	.caption {
		padding: 0 var(--spacer-16);
		margin: 0 auto var(--spacer-1);
		font-size: 1.25rem;
		font-weight: 500;
		text-transform: uppercase;
		color: var(--color-text-tertiary);
	}

	h2 {
		width: 100%;
		padding: 0 var(--spacer-16);
		margin: 0 auto var(--spacer-4);
		font-family: "Rubik", sans-serif;
		font-size: 2.5rem;
		font-weight: 700;
		line-height: 1.0;
		color: var(--color-text-primary);
	}

	p {
		padding: 0 var(--spacer-16);
		margin: 0 auto var(--spacer-4);
		font-size: 1.25rem;
		font-weight: 350;
		line-height: 1.5;
		color: var(--color-text-primary);
	}

	p:last-child {
		margin: 0;
	}

	.image-wrapper {
		margin: var(--spacer-4) 0 var(--spacer-8);
	}
}


@media (max-width: 768px) {
	.case-section {
		margin: 0 0 var(--spacer-12);

		.caption {
			font-size: 1rem;
			padding: 0 var(--spacer-2);
		}

		h2 {
			font-size: 1.75rem;
			padding: 0 var(--spacer-2);
			margin-bottom: var(--spacer-3);
		}

		p {
			padding: 0 var(--spacer-2);
		}

		.image-wrapper {
			margin: 0 0 var(--spacer-4);
		}
	}
}




/* -------- CASE SUB SECTION -------- */

.sub-section {
	margin: var(--spacer-8) 0 var(--spacer-16);

	h3 {
		width: 100%;
		padding: 0 var(--spacer-16);
		margin: 0 auto var(--spacer-1);
		font-family: "Rubik", sans-serif;
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.0;
		color: var(--color-text-primary);	
	}

	p {
		padding: 0 var(--spacer-16);
	}

	p:last-child {
		margin: 0;
	}

	.image-wrapper {
		margin-top: 0;
	}
}

.sub-section:last-child {
	margin-bottom: 0;
}


@media (max-width: 768px) {
	.sub-section {
		margin: var(--spacer-4) 0 var(--spacer-8);

		/*.image-wrapper {
				margin: var(--spacer-4) 0;
		}*/

		h3 {
			font-size: 1.5rem;
			padding: 0 var(--spacer-2);
		}

		p {
			padding: 0 var(--spacer-2);
		}
	}
}




/* -------- NEXT PROJECT BUTTON -------- */

section.next-project {
	padding: 0 var(--spacer-16);
	margin-bottom: var(--spacer-16);

	.next-project-button {
		height: 112px;
		padding: 0 var(--spacer-8);
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-decoration: none;
		color: var(--color-white-100);
		border-radius: 9999px;
		border: 4px solid var(--color-grey-100);
		background: var(--color-grey-100);
		transition: padding 0.25s ease;

	  .text {
	  	display: flex;
	  	flex-direction: column;

	  	.label {
	  		font-size: 1rem;
			  font-weight: 500;
			  text-transform: uppercase;
			  color: var(--color-white-60);
	  	}

	  	.title {
	  		font-size: 1.5rem;
			  font-weight: 600;
	  	}
	  }

	  svg {
		  width: 40px;
		  height: 40px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
	}

	.next-project-button::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  border-radius: 9999px;
	  background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
	  opacity: 0.2;
	  pointer-events: none;
	  transition: opacity 0.25s ease;
	  z-index: 0;
	}

	.next-project-button:hover {
		padding-right: 48px;
	}

	.next-project-button:hover::before {
	  opacity: 0.25
	}
}


@media (max-width: 768px) {
	section.next-project {
		padding: 0;
		margin-bottom: var(--spacer-12);

		.next-project-button {
		  margin: 0;
		  padding: var(--spacer-2) var(--spacer-4);
		}

		.next-project-button:hover {
			padding-right: var(--spacer-3);
		}
	}
}




/* -------- GET IN TOUCH -------- */

.contact-cta {
  padding: var(--spacer-8) var(--spacer-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacer-4);
  align-items: center;
  text-align: center;
  border-radius: 16px;
  background: var(--color-grey-5);

  .cta-text {
	  margin: 0;
	  font-size: 1.25rem;
	  line-height: 1.5;
	  color: var(--color-grey-80);
	}

	.cta-button {
	  height: 88px;
	  padding: 0 56px 0 48px;
	  display: inline-flex;
	  align-items: center;
	  gap: 12px;
	  position: relative;
	  font-size: 1.5rem;
	  font-weight: 600;
	  color: var(--color-white-100);
	  background: var(--color-grey-100);
	  border-radius: 9999px;
	  border: 4px solid var(--color-grey-100);
	  text-decoration: none;

	  svg {
	  	width: 40px;
		  height: 40px;
		  flex-shrink: 0;
		  transform: rotate(-10deg);
		  transition: transform 0.25s ease;
	  }
	}

	.cta-button::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  border-radius: 9999px;
	  background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
	  opacity: 0.2;
	  pointer-events: none;
	  transition: opacity 0.25s ease;
	  z-index: 0;
	}

	.cta-button:hover::before {
	  opacity: 0.25
	}

	.cta-button:hover svg {
	  transform: rotate(0deg);
	}
}


@media (max-width: 768px) {
	.contact-cta {
	  padding: var(--spacer-4) var(--spacer-3);
	  gap: var(--spacer-3);

	  .cta-button {
	  	font-size: 1.25rem;

	  	svg {
		  	width: 32px;
		  	height: 32px;
		  }
	  }
	}
}