/*
Theme Name:   Liquidthought
Theme URI:    https://www.liquidthought.co.za/
Description:  Theme for https://www.liquidthought.co.za/
Author:  Liquid Thought
Author URI:  https://www.liquidthought.co.za/
Version:  1.0.0
Text Domain:  liquidthought
*/
:root {
	--lt-30-blake-charcoal: #454440;
	--lt-30-cararra-grey: #EEECE7;
  }

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

  html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
  }

  body {
	min-height: 100vh;
	margin: 0;
	font-family: "Inter", Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	text-rendering: geometricPrecision;
  color:var(--lt-30-blake-charcoal);
  }

  img,
  picture,
  svg,
  video,
  canvas {
	display: block;
	max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
	font: inherit;
  }

  button {
	cursor: pointer;
  }

  a {
	color: inherit;
	text-decoration-thickness: from-font;
	text-underline-offset: 0.15em;
  }

  .besley {
	font-family: "Besley", Georgia, serif;
  }

  .host-grotesk,
  h1,
  h2,
  h3, 
  ul.nav, header a, .nav-link, footer p, footer ul.socials a, .footer-date  {
	font-family: "Host Grotesk", Arial, sans-serif;
  }

  .inter p,
  ul {
	font-family: "Inter", Arial, sans-serif;
  }

ul.nav {
  background: white;
  width: 100%;
  right: 0;
  position: fixed;
  top: 0;
  z-index: 100;
  list-style: none;
  margin:0;
  padding:56px 40px 48px 40px;
  transform:translateX(100%);
  transition: transform .3s ease-out;
}

ul.nav a {text-decoration:none;font-size:24px;line-height:1;pointer-events: all;}
ul.nav li:nth-last-of-type(n + 2) {margin-bottom:24px;}
header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  top: 0;
  pointer-events: none;
}
header .logo {margin:16px 0 0 16px;display:inline-block;pointer-events: all;position:relative;}
header .lt-logo.condensed:hover {transform:rotate(180deg);}
header .logo,
header .hamburger,
header .nav-talk {
  color: #fff;
  transition: color 180ms ease;
  pointer-events: all;
}
header.is-over-light .logo,
header.is-over-light .hamburger,
header.is-over-light .nav-talk {
  color: var(--lt-30-blake-charcoal);
}
header.is-over-dark .logo,
header.is-over-dark .hamburger,
header.is-over-dark .nav-talk{
  color: #fff;
}
header.is-over-collapsed-services-video .logo {
  color: #fff;
}
header .logo img,
header .logo svg path {

  fill: currentColor;
  /* stroke: currentColor; */
}
header:not(.is-over-light) .logo img {
  filter: brightness(0) invert(1);
}
header.is-over-light .logo img {
  filter: brightness(0);
}

.mobile-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.mobile-open ul.nav {transform:translateX(0);}
.nav-link {cursor:pointer;font-size:15px;padding:24px 16px;position:fixed;top:0;line-height:1;}
.nav-close {display:none;right:0px;z-index:101;pointer-events: all;}
.hamburger {right:67px;}
.mobile-open .nav-close {display:block;}
.video-expanded .nav-link {opacity:0;pointer-events: none;}
.video-expanded header .logo img, .video-expanded header .logo svg path {fill:white;}
.video-expanded header {mix-blend-mode: difference;pointer-events: none;}
/* .video-expanded header .lt-logo {position:fixed;top:10px;left:10px;z-index:1000;} */

.nav-link.nav-talk {perspective: 220px;right:0;padding-top:12px;width:83px;}
.nav-link.nav-talk span {
  display: inline-block;
  font-size: 0;
  height: 39px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1520ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 51px;
}
.nav-link.nav-talk:hover span,
.nav-link.nav-talk:focus-visible span,
.nav-link.nav-talk.is-flipping span {
  transform: rotateY(180deg);
}
.nav-link.nav-talk span::before,
.nav-link.nav-talk span::after,
.nav-link.nav-talk span i {
  align-items: center;
  backface-visibility: hidden;
  background: #1B1A19;
  color: #fff;
  content: attr(data-front);
  display: flex;
  font-size: 15px;
  height: 100%;
  justify-content: center;
  left: 0;
  line-height: 1;
  padding: 12px;
  position: absolute;
  top: 0;
  width: 100%;
}
.nav-link.nav-talk span::before {
  transform: translateZ(10px);
}
.nav-link.nav-talk span::after {
  content: attr(data-back);
  transform: rotateY(180deg) translateZ(10px);
}
.nav-link.nav-talk span i {
  font-size: 0;
  left: calc(100% - 10px);
  padding: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  width: 12px;
}


@media screen and (min-width:768px){
  .nav-link {font-size:20px;}
  .nav-link.nav-talk {width:94px;}
  .nav-link.nav-talk span {height:44px;width:62px;}
  .nav-link.nav-talk span::before,
  .nav-link.nav-talk span::after {font-size:20px;}
  ul.nav {width:50%;height:100vh;padding:0 0 0 100px;display:flex;flex-direction: column;justify-content: center;}
  ul.nav a {transition:opacity .3s ease;font-size:40px;}
  ul.nav a:hover {opacity:0.5;}
  .hamburger {right:78px;}
}
@media screen and (min-width:1200px){
  ul.nav {padding:0 0 0 200px;}
}

footer {background:white;padding:48px 24px 24px 24px;}
footer .main-width {max-width:920px;width:100%;margin:auto;display:flex;flex-direction: column;gap:16px;}
footer p {margin-top:0;margin-bottom:10px;font-size:16px;line-height:1.1;}
footer ul.socials  {display:flex;gap:16px;list-style:none;margin:0;padding:0;}
footer ul.socials a {letter-spacing: -0.48px;font-size:15px;text-underline-offset: 2px;}
.footer-date {margin-top:65px;letter-spacing: -0.45px;}

@media screen and (min-width:576px){
  footer br {display:none;}
  footer {background:white;padding:70px 24px 24px 24px;}
}
@media screen and (min-width:768px){
  footer .main-width {flex-direction: row;gap:30px;}
  footer p {margin-top:0;margin-bottom:10px;font-size:22px;}
  footer ul.socials a {font-size:16px;}
}

/* Logo animation */

.lt-logo {
  --lt-logo-full-width: 167px;
  --lt-logo-condensed-width: 42px;
  display: inline-block;
  width: var(--lt-logo-full-width);
  overflow: visible;
  transition: width 320ms ease, transform 320ms ease;
}

.lt-logo.condensed {
  width: var(--lt-logo-condensed-width);
}

.lt-logo svg {
  width: var(--lt-logo-full-width);
  height: auto;
  max-width: none;
  overflow: visible;
  transform-origin: 20px center;
  transition: transform 320ms ease;
  transition-delay: 0ms;
}

.lt-logo.condensed svg {
  transform: scale(1) rotate(-180deg);
  transition-delay: 820ms;
}
.lt-logo.scaled.condensed svg {
  transform: scale(1.5) rotate(-180deg);
  transition-delay: 820ms;
}

.lt-logo.rotate svg {
  transform: scale(1) rotate(360deg);
  transition-delay: 800ms;
}

.lt-logo.scaled.rotate svg {
  transform: scale(1.5) rotate(180deg);
  transition-delay: 800ms;
}

.lt-logo path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

.lt-logo.condensed path:not(.L):not(.T) {
  opacity: 0;
  transform: scale(0.85) translateX(-90%) ;
}

.lt-logo.condensed .L,
.lt-logo.condensed .T {
  opacity: 1;
  transform: scale(1);
}

.lt-logo.condensed .T {
  transform: translateX(-79px) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .lt-logo svg,
  .lt-logo path {
    transition: none;
  }
}

@media screen and (min-width:768px){
  .lt-logo {
    --lt-logo-full-width: 216px;
    --lt-logo-condensed-width: 36px;
  }
}