/*
Theme Name: FUSS
Theme URI: https://8hcollective.com
Author: 8H Collective Corporation
Author URI: https://8hcollective.com/
Description: This theme was created for 8H Collective to use as a starting place for all sites designed by 8H Collective.
Version: 2025
License: This template is Intellectual Property of 8H Collective Corporation
Tags: one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready, starting-point, boiler-plate, template, foundation, theme,
Contact: phillip@8hcollective.com

pinkhouses WordPress Theme © 2021-Present 8H Collective Corporation
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


@font-face {
  font-family: "Faktum";
  font-style: normal;
  src: url('./assets/fonts/NeueFaktum-Regular.otf');
  font-weight: 400;
}

@font-face {
  font-family: "Faktum";
  font-style: italic;
  src: url('./assets/fonts/NeueFaktum-RegularItalic.otf');
  font-weight: 400;
}

@font-face {
  font-family: "Faktum";
  font-style: normal;
  src: url('./assets/fonts/NeueFaktum-Medium.otf');
  font-weight: 500;
}

@font-face {
  font-family: "Faktum";
  font-style: italic;
  src: url('./assets/fonts/NeueFaktum-MediumItalic.otf');
  font-weight: 500;
}

@font-face {
  font-family: "Faktum";
  font-style: normal;
  src: url('./assets/fonts/NeueFaktum-SemiBold.otf');
  font-weight: 600;
}

@font-face {
  font-family: "Faktum";
  font-style: italic;
  src: url('./assets/fonts/NeueFaktum-SemiBoldItalic.otf');
  font-weight: 600;
}


/* Desktop layout: Universal */

html {
	scroll-behavior: smooth;
	background-color: #121117;
	color: #E7E9E0;
    font-family: "Faktum";
}

html, body {
  overscroll-behavior: none;
}

/* body {
  cursor: url('./assets/images/cursor.png'), auto;	
} */

a {
	font-family: "Faktum";
	color: #E7E9E0;
	text-decoration: none;
}

.radius {
	border-radius: 3px;
	overflow: hidden;
}

.highlighted {
	color: #1AE32F;
}

.button {
	border-radius: 50px;
}

h1,h2,h3 {
	text-rendering: geometricPrecision;
}

p {
	line-height: 1.15em;
	font-size: .8125em;
	line-height: 1.15em;
	padding-bottom: 9px;
}

h3 {
	font-weight: 500;
}

/* Desktop Header */

header {
	max-width: 375px;
	width: 100%;
	position: fixed;
	top: 0;
	bottom: 0;
	padding: 15px;
	box-sizing: border-box;
	overflow-y: auto;
	height: 100vh;
	scrollbar-width: none; 
	-ms-overflow-style: none; 
	z-index: 20;
}

header::-webkit-scrollbar {
  display: none;
}

.scrollSite {
    display: none;
    position: fixed;
    z-index: 200;
    width: 100vw;
    background-color: #F1F2EC;
    height: 100vh;
    box-sizing: border-box;
    color: #121117;
    top: 0;
    overflow-y: scroll;
    opacity: 0;
}

.headerheader {
	position: fixed;
	width: 100%;
	background-color: #121117;
	top: 0;
	width: calc(375px - 30px);
	padding: 15px 0;
	display: flex;
	justify-content: space-between;
	z-index: 100;
}

.scrollSiteHeader {
	background: none;
	padding: 15px 0;
	left: 15px;
}


.scrollInfo {
	margin-top: 4rem;
	width: 100%;
    padding: 0 15px;
}

.scrollInfoButton {
	color: #121117;
    leading-trim: both;
    text-edge: cap;
    font-family: "Faktum";
    font-size: 1.6em;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0rem;
    background: white;
    transition: .3s;
    padding: 15px 21px;
    display: block;
    text-decoration: none;
    text-align: left;
	border-radius: 5px;
}

.scrollInfo a:hover {
	color: #E7E9E0;
	background-color: #121117;
}

.scrollInfo, .scrollProjects {
	opacity: 0;
}

.scrollProjects {
	margin: 15px auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    padding: 0 15px;
    gap: 6px;
}

.scrollProject {
	flex: 0 0 calc(25% - 5px);
    box-sizing: border-box;
    text-decoration: none !important;
    color: #121117;
    border-radius: 5px;
    padding: 9px;
    background-color: white;
}

.scrollProject:hover {
	background-color: var(--hover-bg) !important;
	color: var(--hover-color) !important;
	border-color: var(--hover-stroke) !important;
	transition: .3s;
}

.scrollProject:hover h1, .scrollProject:hover p {
	color: var(--hover-color) !important;
}

.spImageWrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.5%; /* 16:9 ratio (9/16 * 100%) */
  overflow: hidden;
}

.spImageWrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.spdetails {
	width: 100%;
}

.spdetails h1 {
	color: #121117;
    leading-trim: both;
    text-edge: cap;
    font-family: "Faktum";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.03rem;
    margin: 12px 6px 6px 0;
    display: inline-block;
	display: inline-block;
}

.spdetails p {
	color: #121117;
    font-family: "Faktum";
    font-size: .8825rem;
    font-style: normal;
    font-weight: 400;
    line-height: 115%;
    letter-spacing: -0.00813rem;
    margin-top: 0;
    max-width: 17rem;
    padding-bottom: 0;
}

.spdetails .work-taxonomy {
	margin-top: 0;
	display: inline-block;
}

.spdetails .work-taxonomy h1 {
	color: #121117;
	leading-trim: both;
	text-edge: cap;
	font-family: "Faktum";
	font-size: .8125rem;
	font-style: normal;
	font-weight: 400;
	line-height: 115%; /* 0.93438rem */
	letter-spacing: -0.00813rem;
	text-transform: capitalize;
	padding: 0;
	margin: 0;
	display: inline-block;
}

.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.scrollSiteHeader svg {
	fill: #121117;
}

.scrollSiteHeader .navMenu {
	fill: #121117;
	width: 36px;
}

.scrollSiteHeader .navMenu:hover {
	fill: #1AE32F;
}

.scrollSite .infoFooter {
	background-color: #121117;
}

.scrollSite .infoFooter svg, .scrollSite .infoFooter svg path {
	fill: #E7E9E0 !important;
}

.scrollsite .infofooter {
	color: #E7e9e0;
}

.scrollSite .studioInfo, .scrollSite .studioInfo h1, .scrollSite .studioInfo h2, .scrollSite .studioInquiries, .scrollSite .studioInquiries h1 {
    color: #E7E9E0;
}

#branding {
	display: inline-block;
	vertical-align: middle;
}

#site-title svg {
  overflow: visible;
}

.menu-main-menu-container{
	vertical-align: middle;
}

.menu-main-menu-container a {
	color: #e7e9e0;
	font-size: 1.125em;
}

.whoisfuss {
	margin: 120px 0;
}

.whoisfuss h1 {
	font-size: 1.5em;
	text-rendering: geometricPrecision;
}

.whoisfuss a {
	font-size: .8125rem;
	text-decoration: underline;
}

.whoisfuss a:hover {
	color: #1AE32F;
}

.npwlink h1, .npwlink p{
}

.navProjectWrapper {
	width: 100%;
	margin-bottom: 15px;
	border: 0px solid #121117;
}

.navSVGwrapper {
	width: 105px;
	height: 105px;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.navSVGwrapper::before {
	content: ' ';
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

.navSVGwrapper svg {
	max-width: 68px;
	width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.navProjectTitle {
	display: inline-block;
	vertical-align: top;
	padding: 15px 0 0 15px;
	width: 100%;
	max-width: calc(100% - 115px);
}

.navProjectTitle h1 {
	font-weight: 500;
	font-size: 1.125em;
	padding-bottom: 6px;
}

.navProjectTitle p {
	font-size: .8125em;
	text-rendering: geometricPrecision;
}

#headerfooter {
	margin-top: 30px;
}

.navProjectWrapper:hover {
	background-color: var(--hover-bg) !important;
	color: var(--hover-color) !important;
	border-color: var(--hover-stroke) !important;
	transition: .3s;
}

.navMenu {
	width: 33px;
	height: auto;
	fill: #E7E9E0;
	transition: .3s;
}

.navMenu:hover {
	fill: #1AE32F;
}

/* Preview Window */

#container {
	max-width: calc(100% - 375px);
	width: 100%;
	background-color: #000;
	margin-left: auto;
	position: relative;
	box-sizing: border-box;
	height: 100%;
}

.home #container::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100vh;
	margin-left: -0.27em;
}

.home #content {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
    height: 100%;
}

#landingRoller {
	display: none;
	width: calc(100% - 30px);
	height: calc(100vh - 30px);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0px;
	left: 0;
	overflow: hidden;
	z-index: 10;
	pointer-events: none;
	margin: 15px;
}

#landingRoller img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#memory-game {
	height: 100%;
}

/* HEADER FOOTER */

#footerhone, .footercopysymbol {
	display: inline-block;
	font-size: .8125em;
	text-transform: uppercase;
}



/* animation tests: animating logo svg */

#site-title svg path {
  transform-box: fill-box; /* Use the element's content box as reference */
  transform-origin: center; /* Center of the path */
}


/* Define the keyframes for the wave animation */
@keyframes wave {
  0% {
    transform: translateY(0) rotateY(0deg);
  }
  10% {
    transform: translateY(-10px) rotateY(0deg);
  }
  20% {
    transform: translateY(0) rotateY(0deg);
  }
  30% {
    transform: translateY(0) rotateY(0deg);
  }
  40% {
    transform: translateY(0) rotateY(0deg);
  }
  100% {
    transform: translateY(0) rotateY(0deg);
  }
}

/* Apply the animation to every path inside #site-title svg */
#site-title svg path {
  animation: wave 8s ease-in-out;
}

/* Stagger the animation for each letter (adjust delay as needed) */
#site-title svg path:nth-child(1) {
  animation-delay: 0s;
}
#site-title svg path:nth-child(2) {
  animation-delay: 0.2s;
}
#site-title svg path:nth-child(3) {
  animation-delay: 0.4s;
}
#site-title svg path:nth-child(4) {
  animation-delay: 0.6s;
}
#site-title svg path:nth-child(5) {
  animation-delay: 0.8s;
}
/* Add more if your logo has more paths */




/* Project Page */

#projectSynopsis {
	background-color: rgba(0, 0, 0, .9);
	position: fixed;
	top: 0;
	width: 100%;
	max-width: calc(100% - 375px);
	z-index: 20;
}

.collapsedSynopsis {
  display: none;
}

#projectSynopsis h6 {
	font-size: .92em;
	padding: 15px;
	text-decoration: underline;
}

#projectSynopsis h6:hover {
	color: #1AE32F;
}

#content {
	position: relative;
}

.work-content {
	max-width: 900px;
	margin: 60px auto;
}

.theContent {
	display: inline-block;
	vertical-align: text-top;
	max-width: 600px;
	margin-right: 30px;
}

.servicePeople {
	display: inline-block;
	vertical-align: text-top;
}

.work-content .logo-svg svg {
	width: 100px;
	height: auto;
	margin-bottom: 30px;
}

.work-content .logo-svg svg path{
	fill: #E7E9E0 !important;
}

.work-content .logo-svg .revertlayer path {
	fill: revert-layer !important;
}

.work-content p {
	font-size: 15px;
	line-height: 1.4em;
	font-weight: 300;
	text-rendering: geometricPrecision;
	letter-spacing: .01rem;
	font-family: Faktum, sans-serif;
}

.work-taxonomy h1 {
	padding-top: 5px;
}

.work-taxonomy h2 {
	font-weight: 600;
	margin-bottom: 3px;
}

.work-taxonomy h3 {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .8125rem;
    margin-bottom: 6px;
}

.credits h3 {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .8125rem;
    margin-top: 30px;
}

.credits h2 {
	margin: 12px 0 6px;
}

.talents {
	margin-bottom: 30px;
}

.credits ul li, .credits ul li a {
	font-size: .8125empx;
	margin-top: 3px;
	font-weight: 400;
}

.case-build {
	margin-top: 30px;
	padding: 15px;
	background-color:black;
	position: relative;
	z-index: 11;
}

.full-width-image, .full-width-video, .side-by-side {
	margin-bottom: 15px;
}

.full-width-image {
	width: 100%;	
}

.full-width-image img {
	width: 100%;	
}

.side-by-side {
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
}

.left-side, .right-side {
	 flex: 1;
	 display: flex;
	 flex-direction: column;
	 gap: 15px;
	 border-radius: 3px;
	 overflow: hidden;
}

.left-side img, .right-side img {
	max-width: 100%;
	flex: 1 1 50%;
}

.hero-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}

.hero-video {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.hero-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.left-side-video, .right-side-video {
  width: 100%;
  position: relative;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  height: 0;
  overflow: hidden;

}

.left-side-video iframe, .right-side-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

/* Info page ///////////////////////////////////// */

.infoHeader {
	color: #E7E9E0;
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: "faktum";
	font-size: 5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 3rem */
	letter-spacing: -0.09rem;
	max-width: 55rem;
	margin: 0 auto;
	margin-bottom: 2.8125rem;
	padding-top: 7rem;
}

.infoSubHead {
	color: #E7E9E0;
	text-align: center;
	font-family: "Faktum";
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 400;
	line-height: 125%; /* 1.40625rem */
	max-width: 27rem;
	margin: 0 auto;
}

.serviceSection {
	margin: 7em 0;
}

.studioServices {
	text-align: center;
	max-width: 30rem;
	margin: 0 auto;
}

@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Target your SVG element - adjust the selector to match your actual SVG */
.studioServices svg {
  animation: slowRotate 7.5s linear infinite;
  transform-origin: center; /* Makes it rotate around its center */
	margin: 3rem 0;
}

.serviceTitle {
	color: #E7E9E0;
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: "Faktum";
	font-size: 3rem;
	font-style: normal;
	font-weight: 400;
	line-height: 115%; /* 3.45rem */
	letter-spacing: -0.06rem;
	text-transform: uppercase;
}

.infoStrategy {
	color: #E7E9E0;
	text-align: center;
	font-family: "Faktum";
	font-size: 2.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 125%; /* 2.8125rem */
	max-width: 55rem;
	margin: 0 auto 4rem;
}

.psFlexer {
	display: flex;
	flex-direction: row;
	gap: 30px;
	max-width: 55rem;
	margin: 0 auto 8rem;
}

.psLeft .infoSubHead {
	text-align: left;
}

.psRight div {
	margin-bottom: 3px;
}

.psRight span {
	vertical-align: middle;
	color: #E7E9E0;
	leading-trim: both;
	text-edge: cap;
	font-family: "Faktum";
	font-size: 1.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 90%; /* 1.6875rem */
	letter-spacing: -0.05625rem;
	text-transform: uppercase;
	text-rendering: geometricPrecision;
}

.psRight span svg {
	margin-right: 6px;
}

.infoCTA {
	border-radius: 12.5rem;
	background: #E7E9E0;
	padding: 0.5625rem 1.5rem;
	text-align: center;
	gap: 0.625rem;
	color: #121117;
	font-family: "Faktum";
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 400;
	line-height: 130%; /* 0.975rem */
	text-decoration: none;
	margin-top: 30px;
	display: inline-block;
}

.infoCTA:hover {
	background-color: #1AE32F;
}

.founderCard {
	max-width: 100%;
	display: flex;
	flex-direction: row;
}

.founderPhoto img {
	width: 100%;
	height: auto;
}

.founderPhoto {
	max-width: 50%;
}

.founderInfo {
	background-color: #E7E9E0;
	padding: 15px;
	margin: 0;
	color: #121117;
	width: 100%;
}

.founderInfo h1 {
	leading-trim: both;
	text-edge: cap;
	font-family: "Faktum";
	font-size: 1.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 130%; /* 2.4375rem */
	letter-spacing: -0.05625rem;
}

.founderInfo h2 {
	margin: 0 0 .75rem 0;
	font-weight: 500;
}

.founderInfo h2 {
	color: #121117;
	leading-trim: both;
	text-edge: cap;
	font-family: "Faktum";
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	line-height: 125%; /* 0.9375rem */
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	margin-bottom: .56rem;
	margin-top: 1.25rem;
}

.founderInfo p {
	color: #121117;
	leading-trim: both;
	text-edge: cap;
	font-family: "Faktum";
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 400;
	line-height: 125%; /* 1.01563rem */
	max-width: 20rem;
}

.infoFooter {
	background: #1AE32F;
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	margin-top: 15px;
}

.fwLogo {
	margin-top: 3.5rem;
}

.fwLogo svg {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.studioInfo, .studioInquiries {
	display: inline-block;
	margin-right: 30px;
	vertical-align: top;
}

.studioInfo, .studioInfo h1, .studioInfo h2, .studioInquiries, .studioInquiries h1 {
	color: #121117;
	font-family: "Faktum";
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; /* 1.05rem */
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	text-rendering: geometricPrecision;
}

.socialIcons {
	margin-top: 1rem;
}

.studioInfo .socialIcons svg {
	width: 1.5rem;
	height: 1.50944rem;
	flex-shrink: 0;
	aspect-ratio: 24.00/24.15;
	margin-right: 1rem;
}

strong {
	font-family: "Faktum";
	font-weight: 600 !important;
}

/* ///////////////////////////////////////////////// query 1280 ///////////////////////////////////////////////////// */

@media only screen and (max-width: 1440px) {

	.scrollProject {
		flex: 0 0 calc(33.3% - 4px);
	}

}

/* ///////////////////////////////////////////////// query 1280 ///////////////////////////////////////////////////// */

@media only screen and (max-width: 1280px) {
	.serviceTitle {
		font-size: 2.4em;
	}

	.psFlexer {
		gap: 15px;
	}

	.psLeft {
		flex-basis: 50%;
	}

	.psLeft .infoSubHead {
		font-size: 1rem;
	}

	.psRight span {
		font-size: 1rem;
	}

	.infoSection, .serviceSection, .processSection {
		padding: 15px;
	}

	.infoFooter {
		margin: 0;
	}

	.work-content {
		padding: 15px;
	}
	
	.scrollProject {
    	flex: 0 0 calc(50% - 3px);
	}
}


/* ///////////////////////////////////////////////// query 980 ///////////////////////////////////////////////////// */

@media only screen and (max-width: 1023px) {

	#landingRoller {
		display: none !important;
	}

	.home #header {
		position: relative;
        height: auto;
        overflow: auto;
	}

	.home .headerheader {
		position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        padding: 9px;
	}

	.home #container {
		display: none!important;
	}

	#header {
		max-width: 100%;
        width: 100%;
        position: fixed;
        padding: 9px;
        height: auto;
        bottom: unset;
        top: 0;	
        z-index: 11;
        background-color: #121117;
    }

	.headerheader {
		max-width: 100%;
		width: 100%;
		padding: 0;
		position: relative;
	}

	.scrollSiteHeader {
		max-width: 100%;
        width: 100%;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        padding: 9px;
        background: #;
    }

	.scrollProject {
    	flex: 0 0 100%;
	}

	.scrollInfo {
    	padding: 0 9px;
	}

	.scrollProjects {
	    gap: 9px;
	    padding: 0 9px;
	}

	#header .headerbody, #header #headerfooter {
		display: none !important;
	}

	.home #header .headerbody, .home #header #headerfooter {
		display: block !important;
	}

	.navProjectWrapper {
		margin-bottom: 9px;
	}

	#container {
		max-width: 100%;
		background: none;
	}

	.infoHeader {
		font-size: 3rem;
	    text-align: center;
	    text-rendering: optimizeSpeed;
	    line-height: 115%;
	    letter-spacing: -0.02em;
	}

	.psLeft .infoSubHead {
		text-align: left;
		margin: 0;
	}

	.serviceSection {
		margin: 5em 0;
	}

	.serviceTitle {
		font-size: 1.8rem;
	}

	.infoStrategy {
		font-size: 1.8rem;
	    text-align: left;
	    text-rendering: optimizeSpeed;
	    line-height: 115%;
	    letter-spacing: -0.02em;
	    margin-bottom: 9px;
	}

	.psFlexer {
		flex-direction: column;
		gap: 2.8125rem;
		margin-bottom: 5rem;
	}

	.founderCard {
		flex-direction: column;
	}

	.founderPhoto {
		width: 100%;
		max-width: 100%;
	}

	.founderInfo {
		padding: 9px 9px 2.8125rem;
	}

	.infoFooter {
		padding: 9px;
		margin-top: 0;
	}

	.infoPage {
		padding: 9px;
	}

	.psRight {
		display: none;
	}

	#projectSynopsis {
	    max-width: 100%;
	    position: static;
	    top: unset;
	}

	.case-build {
	    margin-top:0px;
	    padding: 9px;
	}

	.hero-section, .full-width-image, .full-width-video, .side-by-side {
		margin-bottom: 9px;
		position: static;
	}

	.side-by-side {
		gap: 9px;
	}

	.work-content {
		width: 100%;
	    margin: 0;
	    padding: 9px;
	}

	.work-content p {
		font-size: 1rem;
	}

	.work-template-default #container {
		margin-top: 49px;
	}


}