:root {
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - 20rem) / 2240);
  --step--2: calc(0.75625rem + 5.54 * var(--fluid-bp));
  --step--1: calc(0.869375rem + 8.31 * var(--fluid-bp));
  --step-0: calc(1rem + 12 * var(--fluid-bp));
  --step-1: calc(1.15rem + 16.88 * var(--fluid-bp));
  --step-2: calc(1.3225rem + 23.29 * var(--fluid-bp));
  --step-3: calc(1.520625rem + 31.68 * var(--fluid-bp));
  --step-4: calc(1.74875rem + 42.59 * var(--fluid-bp));
  --step-5: calc(2.01125rem + 56.74 * var(--fluid-bp));
  --step-6: calc(2.313125rem + 75.03 * var(--fluid-bp));
  --step-7: calc(2.66rem + 98.61 * var(--fluid-bp));
  --step-8: calc(3.05875rem + 128.94 * var(--fluid-bp));
  --step-9: calc(3.518125rem + 167.84 * var(--fluid-bp));
  --step-10: calc(4.045625rem + 217.67 * var(--fluid-bp));
  --space-3xs: calc(0.25rem + 3 * var(--fluid-bp));
  --space-2xs: calc(0.5rem + 6 * var(--fluid-bp));
  --space-xs: calc(0.75rem + 9 * var(--fluid-bp));
  --space-s: calc(1rem + 12 * var(--fluid-bp));
  --space-m: calc(1.5rem + 18 * var(--fluid-bp));
  --space-l: calc(2rem + 24 * var(--fluid-bp));
  --space-xl: calc(3rem + 36 * var(--fluid-bp));
  --space-2xl: calc(4rem + 48 * var(--fluid-bp));
  --space-3xl: calc(6rem + 72 * var(--fluid-bp));
  --space-4xl: calc(8rem + 96 * var(--fluid-bp));
  --space-3xs-2xs: calc(0.25rem + 10 * var(--fluid-bp));
  --space-2xs-xs: calc(0.5rem + 13 * var(--fluid-bp));
  --space-xs-s: calc(0.75rem + 16 * var(--fluid-bp));
  --space-s-m: calc(1rem + 26 * var(--fluid-bp));
  --space-m-l: calc(1.5rem + 32 * var(--fluid-bp));
  --space-l-xl: calc(2rem + 52 * var(--fluid-bp));
  --space-xl-2xl: calc(3rem + 64 * var(--fluid-bp));
  --space-2xl-3xl: calc(4rem + 104 * var(--fluid-bp));
  --space-3xl-4xl: calc(6rem + 128 * var(--fluid-bp));
  --space-s-xl: calc(1rem + 68 * var(--fluid-bp));
  --space-xs-m: calc(0.75rem + 30 * var(--fluid-bp));
  --space-xl-3xl: calc(3rem + 120 * var(--fluid-bp));
  --container-padding: var(--space-s-xl);
  --container-padding-bottom: 100px;
  --gutter-x: var(--space-s);
  --gutter-y: var(--space-s);
  --body-font-family: Nunito-Regular, Roboto, sans-serif;
  --body-font-family-bold: Nunito-Bold, Roboto, sans-serif;
  --title-font-family: Rantera, Roboto, sans-serif;
  --font-size-small: 14px;
  --space-section: calc(var(--space-xl-3xl) * 1.2);
  --space-label: var(--step-1);
  --logo-height: 80px;
  --heading-line-height: 1.25;
  --site-header-padding: 20px;
  --site-header-height: calc(
    var(--logo-height) + var(--site-header-padding) * 2
  );
  --border-radius: 15px;
  --column-width: calc(
    (100vw - var(--container-padding) * 2 - var(--gutter-x) * 11) / 12
  );
  --column-width-gutter: calc(var(--column-width) + var(--gutter-x));
  --column-width-2-gutter: calc(var(--column-width) + var(--gutter-x) * 2);
  --color-brown: #251912;
  --color-light: #f7f3ed;
  --color-blue: #2238ff;
  --color-beige: #c3b091;
  --dark-hover-color: rgba(0, 0, 0, 0.2);
  --color-light-reduced-opacity: #f7f3ed4a;
}

@font-face {
  font-family: Rantera;
  src: url(/assets/fonts/Rantera.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Nunito-Regular;
  src: url(/assets/fonts/Nunito-ExtraLight.woff) format("woff");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Nunito-Bold;
  src: url(/assets/fonts/Nunito-SemiBold.woff) format("woff");
  font-style: normal;
  font-display: swap;
}

/* Locomotive scroll disappearing elements fix */

html.has-scroll-smooth {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Prevent animations on load */

.preload * {
  animation-duration: 0s !important;
}

/* Basic body styling */

body {
  font-family: var(--body-font-family);
  font-size: var(--font-size-small);
  color: var(--color-light);
  background-color: var(--color-brown);
}

.c-scrollbar_thumb {
  background-color: var(--color-light);
}

.container {
  margin-left: auto;
  margin-right: auto;
}

.container-padding {
  padding: 0 var(--container-padding) var(--container-padding-bottom);
}

.container-padding-x2 {
  padding: 0 calc(var(--container-padding) * 2) var(--container-padding-bottom);
}

/* Logo color */

.cls-1 {
  fill: var(--color-light);
}
.cls-2 {
  fill: var(--color-blue);
}

/* Page titles */

.title-section {
  display: flex;

  .page-title {
    font-family: var(--title-font-family);
    font-size: var(--step-10);
    line-height: 1;
    padding: 100px 0 150px 0;
  }
}

.separator {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--step-6);
  gap: var(--space-m);

  .line {
    width: 100%;
    height: 1px;
    background-color: var(--color-light);
  }
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
  grid-template-columns: repeat(var(--columns, 12), minmax(0, 1fr));
  grid-gap: var(--gutter-y) var(--gutter-x);
}

.grid > * {
  grid-column: auto/span var(--column-span, 1);
  grid-column-start: var(--column-start, auto);
  grid-row: auto/span var(--row-span, 1);
  grid-row-start: var(--row-start, auto);
}

/* Revealing page elements on scroll animation */

.reveal {
  transform: translateY(var(--space-xl));
  opacity: 0.001;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s;
  transition-delay: calc(
    var(--index-delay, 0.05s) * 3 + var(--stagger-delay, 0.05s) *
      var(--stagger, 0)
  );
}

.reveal-childs > * {
  transform: translateY(var(--space-xl));
  opacity: 0.001;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1.2s;
  transition-delay: calc(
    var(--index-delay, 0.05s) * 3 + var(--stagger-delay, 0.05s) *
      var(--stagger, 0)
  );
}

.reveal-childs > *:nth-child(1) {
  --stagger: 1;
  --stagger-delay: 0.1s;
}
.reveal-childs > *:nth-child(2) {
  --stagger: 2;
  --stagger-delay: 0.1s;
}
.reveal-childs > *:nth-child(3) {
  --stagger: 3;
  --stagger-delay: 0.1s;
}
.reveal-childs > *:nth-child(4) {
  --stagger: 4;
  --stagger-delay: 0.1s;
}

.reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.reveal-childs.is-inview > * {
  opacity: 1;
  transform: translateY(0);
}

.figure-zoom {
  opacity: 0.001;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.9s;
  transform: scale(0.6);
}

.image-zoom {
  transition: inherit;
  transform: scale(1.8);
}

.figure-zoom.is-inview {
  opacity: 1;
  transform: scale(1);
}

.image-zoom.is-inview {
  transform: scale(1);
}

/* Fixed image animation */

.fixed-image-section {
  .scale-image {
    scale: 1.4;
  }

  .overflow-hidden {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .vh {
    height: 80vh;
  }

  .scale-image {
    height: 100%;
  }

  .scaled-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Buttons hover animation */

button {
  transition: 0.3s;
  background-color: transparent;
  color: var(--light-color);
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: var(--dark-hover-color);
  }
}

/* Links hover animation */

a[data-title] {
  position: relative;
  overflow: hidden;
  display: inline-flex;
}

a[data-title] .link-text {
  transition: transform 1.05s cubic-bezier(0.3, 0.86, 0.36, 0.95);
}

a[data-title]:after {
  content: attr(data-title);
  position: absolute;
  transform: translateY(110%);
  left: 0;
  color: currentColor;
  transition: transform 1.05s cubic-bezier(0.3, 0.86, 0.36, 0.95);
}

a[data-title]:hover .link-text {
  transform: translateY(-125%);
}

a[data-title]:hover:after {
  transform: translateY(0);
}

@media screen and (width <= 768px) {
  .fixed-image-section {
    .vh {
      height: 100vh;
    }

    .scale-image {
      height: 100%;

      .scaled-img {
        height: 100%;
      }
    }
  }
  .container-padding, .container-padding-x2 {
      --container-padding-bottom: 50px;
    }
}