@font-face {
  font-family: light-font;
  src: url(../assets/fonts/StackSansHeadline-ExtraLight-DrnyAU8g.woff2)
    format("woff2");
}
@font-face {
  font-family: regular-font;
  src: url(../assets/fonts/StackSansHeadline-Regular-ud1Ia6Hx.woff2)
    format("woff2");
}
@font-face {
  font-family: ruthie;
  src: url(../assets/fonts/ruthie-BmbrwlET.woff2) format("woff2");
}
/* Cinzel (SIL Open Font License 1.1, see assets/fonts/Cinzel-OFL.txt): intro numerals and the hero LLAMAS */
@font-face {
  font-family: Cinzel;
  src: url(data:font/woff2;base64,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) format("woff2"); /* inlined (14 KB) so the intro numerals paint on the first frame; same file as assets/fonts/cinzel-latin-400-normal.woff2 */
  font-weight: 400;
  font-display: swap; /* numerals must be visible on the very first paint, even before the font decodes */
}
/* Llamas type pair (both SIL Open Font License 1.1; licences in assets/fonts/):
   Big Shoulders for the moving LLAMAS and major headings, Barlow for story text, labels and menu */
@font-face {
  font-family: "Big Shoulders";
  src: url(../assets/fonts/big-shoulders-latin-800-normal.woff2) format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders";
  src: url(../assets/fonts/big-shoulders-latin-900-normal.woff2) format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url(../assets/fonts/barlow-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url(../assets/fonts/barlow-latin-500-normal.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url(../assets/fonts/barlow-latin-600-normal.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
body {
  cursor: none !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: regular-font;
  background-color: #000;
}
html {
  font-size: 0.8333vw;
}
.body-container-of-site {
  width: 100vw;
  height: 100%;
}
/* Desktop menu: one row in the top-right corner, level with the logo's centre line.
   Same face at rest and on hover; a fine red underline draws in, and a click pulses. */
nav {
  position: fixed;
  top: clamp(34px, 4.4vw, 66px);
  right: clamp(28px, 3.8vw, 60px);
  z-index: 1000;
  display: flex;
}
@media (max-width: 800px) and (orientation: portrait) {
  nav {
    display: none;
  }
}
nav ul {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 42px);
  margin: 0;
  padding: 0;
}
nav ul li {
  position: relative;
  list-style: none;
  overflow: hidden; /* masks the letter reveal */
  padding: 0.35em 0 0.55em;
  font-size: clamp(15px, 1.3rem, 19px);
  line-height: 1;
}
nav ul li .plus-for-hover {
  display: none;
}
nav ul li a {
  display: inline-block;
  text-decoration: none;
  color: rgba(245, 240, 235, 0.86);
  cursor: none !important;
  font-family: Barlow, Arial, sans-serif;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); /* legible over red, black and photos alike */
  transition: color 0.35s ease, letter-spacing 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
nav ul li:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.16em; /* matches the trailing letter-spacing */
  bottom: 0.2em;
  height: 1px;
  background: #f5e6d8; /* warm off-white: reads on the red corner and on black */
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
nav ul li:hover a,
nav ul li:focus-within a {
  color: #fff;
}
nav ul li:hover:after,
nav ul li:focus-within:after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
nav ul li.is-pressed a {
  animation: navPress 0.5s ease;
}
nav ul li.is-pressed:after {
  animation: navPressLine 0.5s ease;
}
@keyframes navPress {
  35% {
    opacity: 0.55;
    letter-spacing: 0.2em;
  }
}
@keyframes navPressLine {
  35% {
    height: 2px;
  }
}
nav ul li:has(a[aria-disabled="true"]) {
  opacity: 0.5;
}
nav ul li:has(a[aria-disabled="true"]):after {
  display: none;
}
nav ul li a[aria-disabled="true"],
nav ul li:hover a[aria-disabled="true"] {
  color: rgba(245, 240, 235, 0.86);
}
.fixed-bar-ledger {
  position: fixed;
  bottom: 1%;
  display: flex;
  width: 100vw;
  z-index: 900;
  align-items: center;
  justify-content: space-around;
  color: #f5f5f5;
  font-weight: 300;
  font-size: 1.2rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .fixed-bar-ledger {
    font-size: 3rem;
  }
}
.fixed-bar-ledger .plus-rotate {
  transform: scale(0);
}
/* bottom-bar flames: red on dark backgrounds, black on red ones (set per flame by app.js) */
.ledger-flame {
  display: flex;
  color: #d60407;
  transition: color 0.45s ease;
}
.ledger-flame svg {
  display: block;
  width: clamp(11px, 1.05rem, 15px);
  height: clamp(18px, 1.68rem, 24px);
  overflow: visible;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
  animation: ledgerFlicker 1.8s ease-in-out infinite alternate;
  transition: filter 0.45s ease;
}
.ledger-flame:nth-of-type(2) svg {
  animation-duration: 2.1s;
  animation-delay: -0.6s;
}
.ledger-flame:nth-of-type(3) svg {
  animation-duration: 1.6s;
  animation-delay: -1.1s;
}
.ledger-flame:nth-of-type(4) svg {
  animation-duration: 2.3s;
  animation-delay: -0.3s;
}
.ledger-flame.tone-red {
  color: #0d0d0d;
}
.ledger-flame.tone-red svg {
  filter: drop-shadow(0 0 3px rgba(255, 70, 50, 0.6));
}
@keyframes ledgerFlicker {
  0% {
    transform: scale(1, 0.94) skewX(-3deg);
  }
  50% {
    transform: scale(0.96, 1.05) skewX(2deg);
  }
  to {
    transform: scale(1.02, 0.98) skewX(-1deg);
  }
}
@media (max-width: 800px) and (orientation: portrait) {
  .ledger-flame svg {
    width: 11px;
    height: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ledger-flame svg {
    animation: none;
  }
}
.main-canvas-a {
  height: 100vh !important;
  width: 100vw !important;
  position: relative;
  background-color: #f5f5f5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-canvas-a canvas {
  width: 100% !important;
  display: block;
  height: 100% !important;
}
.model-section {
  height: 100vh;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.model-section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scroll-section {
  height: 200vh;
}
.snp {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-color: #0d0d0d;
}
.heading-showreel {
  position: absolute;
  bottom: 2%;
  left: 2%;
  width: 30%;
}
.heading-showreel h1 {
  font-size: 5rem;
  font-weight: 400;
  overflow: hidden;
  line-height: 0.8;
  color: #f5f5f5;
  text-transform: uppercase;
}
.heading-showreel p {
  font-size: 1.2rem;
  font-weight: 200;
  color: #f5f5f5;
  margin-top: -1rem;
}
.showreel-flex {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.cta-main {
  border: 1px solid white;
  font-size: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  width: 2rem;
  align-items: center;
  border-radius: 50rem;
  padding: 2rem;
}
.cta-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-close-video {
  position: absolute !important;
  z-index: 10 !important;
  top: 0%;
  left: 0%;
  border: 1px solid white;
  font-size: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  width: 2rem;
  align-items: center;
  border-radius: 50rem;
  padding: 2rem;
  mix-blend-mode: difference;
  background-color: #ffffff28;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cta-close-video img {
  width: 50%;
  height: 50%;
  object-fit: cover;
}
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 800 !important;
  overflow: hidden;
}
.step {
  width: 45vw;
  height: 50vh;
  position: absolute;
  left: 28vw;
  background: #222;
  will-change: transform, opacity, filter;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-sizing: border-box;
}
@media (max-width: 800px) and (orientation: portrait) {
  .step {
    width: 90vw !important;
    left: 5vw;
    height: 45vh;
  }
}
.step img {
  width: 100%;
  height: 100%;
  scale: 1;
  object-fit: cover;
}
.container-scroll {
  height: 300vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
}
.bar-height {
  height: fit-content;
  width: 100vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 2rem;
  will-change: height;
  padding-bottom: 2rem;
  position: relative;
  gap: 5rem;
  border: 1px solid black;
}
.left-content {
  width: 35vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  justify-content: space-between;
}
.left-content p {
  opacity: 0;
}
.right-picture {
  height: 25vh;
  width: 40vw;
  position: relative;
  left: -10%;
  will-change: transform;
  overflow: hidden;
}
.right-picture img {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  will-change: width;
  object-fit: cover;
}
.container-upper {
  height: 50vh;
  width: 100vw;
}
.steps-overlay-bg-change {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  will-change: opacity;
  left: 0;
}
@media (max-width: 800px) and (orientation: portrait) {
  .steps-overlay-bg-change {
    display: none !important;
  }
}
.steps-overlay-bg-change img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
}
@media (max-wdth: 800px) {
  .steps-overlay-bg-change img {
    display: none !important;
  }
}
.text-chnage-on-steps {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 100%;
  padding: 3rem;
  pointer-events: none;
  will-change: transform;
  align-items: center;
  justify-content: space-between;
  display: flex;
  color: #fff;
}
.text-chnage-on-steps h1,
.text-chnage-on-steps p {
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  font-weight: 200;
  position: relative;
  margin-right: 0.3rem;
  z-index: 100000;
}
.text-chnage-on-steps p .word {
  overflow: hidden;
  will-change: transform;
  font-weight: 200;
  line-height: 1;
  position: relative;
  margin-right: 0.3rem;
  z-index: 100000;
}
.word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}
.text-chnage-on-steps h1 {
  font-size: 3rem;
  text-align: center;
  padding-left: 3rem;
  font-family: regular-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .text-chnage-on-steps h1 {
    font-size: 10rem;
    padding-left: 0;
  }
  .text-chnage-on-steps .word {
    display: inline-block;
    margin-right: 0.35em;
  }
  .text-chnage-on-steps .word:last-child {
    margin-right: 0;
  }
  .text-chnage-on-steps p {
    width: 90% !important;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1.6;
    word-break: normal;
    padding: 0;
    overflow-wrap: break-word;
    white-space: normal;
  }
}
@media (max-width: 800px) and (orientation: portrait) {
  .text-chnage-on-steps p {
    font-size: 4rem;
    letter-spacing: 0.02em;
    line-height: 1.2;
    width: 100%;
    padding: 0;
  }
}
@media (max-width: 800px) and (orientation: portrait) {
  .text-chnage-on-steps {
    flex-direction: column;
    justify-content: center;
    padding: 0;
    align-items: center;
    left: 0;
  }
  .case-study-side-bar {
    width: 100vw !important;
    padding: 0 !important;
  }
}
.sidebar-h1 {
  color: #fff;
  font-size: 3rem;
  font-family: regular-font;
  will-change: transform, opacity;
}
@media (max-width: 800px) and (orientation: portrait) {
  .sidebar-h1 {
    font-size: 7rem;
    font-weight: 100;
  }
}
.sidebar-p {
  font-family: regular-font;
  color: #fff;
  font-size: 1.3rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .sidebar-p {
    font-size: 4rem;
    font-weight: 100;
    width: 96%;
  }
}
.text-chnage-on-steps p {
  width: 20%;
  padding-right: 5rem;
  will-change: transform, opacity;
}
.time-steps-slider {
  height: 20vh;
  width: 20vh;
  font-family: ruthie;
  font-weight: 400;
  z-index: 200;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
  bottom: 20%;
  right: 3%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .time-steps-slider {
    bottom: 20% !important;
    right: 50%;
    transform: translate(50%);
  }
}
.time-steps-slider .circle-steps {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;
  border-radius: 50rem;
  position: relative;
}
.time-steps-slider svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -60%) rotate(-90deg);
  width: 100%;
  will-change: transform, opacity;
  height: 100%;
}
.time-steps-slider h1 {
  position: absolute;
  top: 50%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  will-change: transform, opacity;
  margin: 0;
}
@media (max-width: 800px) and (orientation: portrait) {
  .time-steps-slider h1 {
    font-size: 7rem;
  }
}
.circle-follow-view {
  position: fixed;
  z-index: 50000;
  font-family: ruthie;
  width: 80px;
  font-size: 1.5rem;
  height: 70px;
  color: #900;
  display: flex;
  left: 0;
  top: 0;
  transform: translate(-50% -50%);
  text-align: center;
  opacity: 0;
  justify-content: center;
  pointer-events: none;
  align-items: center;
  border-radius: 50rem;
}
.case-study-side-bar {
  width: 40vw;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #990000 #2b2b2b;
  overflow-x: hidden;
  overscroll-behavior: contain;
  left: 0;
  top: 0;
  clip-path: inset(100% 0% 0% 0%);
  position: fixed;
  padding: 1rem;
  will-change: transform, opacity;
  z-index: 2260 !important;
  background-color: #222;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 800px) and (orientation: portrait) {
  .case-study-side-bar {
    padding: 3rem !important;
  }
}
.image-hero-side {
  height: 40vh;
  width: 100%;
  will-change: transform, opacity;
  display: flex;
  gap: 1rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .image-hero-side {
    width: 95%;
  }
}
.image-hero-side img {
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  clip-path: inset(50% 50% 50% 50%);
  object-fit: cover;
}
.image-bg-hero {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  filter: blur(30px) brightness(0.7);
  z-index: -1;
}
@media (max-width: 800px) and (orientation: portrait) {
  .image-bg-hero {
    filter: blur(5px) brightness(0.3) !important;
  }
}
.image-bg-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.close-sidebar-contact {
  position: absolute;
  z-index: 50000;
  font-family:
    Bebas Neue,
    sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.445);
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: flex;
  right: 3%;
  top: 10%;
  transform: translate(-50% -50%);
  text-align: center;
  background-color: #ffffff10;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  transition: 0.1s;
  border-radius: 50rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .close-sidebar-contact {
    left: 73% !important;
    top: 10%;
    transform: translate(0) !important;
  }
}
@media (max-width: 800px) and (orientation: portrait) {
  .close-sidebar-blog {
    left: 80% !important;
    top: 50% !important;
    opacity: 1 !important;
  }
}
.close-sidebar-blog {
  position: absolute;
  z-index: 50000;
  font-family:
    Bebas Neue,
    sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.445);
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: flex;
  left: -30px;
  top: -30px;
  transform: translate(-50% -50%);
  text-align: center;
  background-color: #ffffff10;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  transition: 0.1s;
  border-radius: 50rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .close-sidebar-blog {
    left: 2%;
    top: 2%;
    opacity: 1 !important;
  }
}
.close-sidebar {
  position: absolute;
  z-index: 50000;
  font-family:
    Bebas Neue,
    sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.445);
  width: 70px;
  height: 70px;
  overflow: hidden;
  display: flex;
  left: 0;
  top: 0;
  transform: translate(-50% -50%);
  text-align: center;
  background-color: #ffffff10;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  transition: 0.1s;
  border-radius: 50rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .close-sidebar {
    left: 75%;
    top: 2%;
    position: fixed;
    opacity: 1 !important;
  }
}
.hero-section-home {
  height: 100vh;
  position: relative;
  z-index: 200;
  width: 100vw;
}
.scrolling-text {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
}
.scrolling-text .rail {
  display: flex;
  pointer-events: none;
  overflow: hidden;
  color: #fff;
}
.scrolling-text .rail h4 {
  white-space: nowrap;
  font-size: 19rem;
  transform: translateY(100%);
  font-weight: 500;
  text-transform: uppercase;
  font-family: light-font;
  letter-spacing: ls(120);
  line-height: 1em;
  margin: 0 30px 0 0;
  padding-right: 0.3em;
  color: var(--color-surface-white);
}
@media (max-width: 800px) and (orientation: portrait) {
  .scrolling-text .rail h4 {
    font-size: 35rem;
  }
}
/* hero LLAMAS: Big Shoulders black (the footer rail matches it, see css/llamas.css) */
.hero-section-home .scrolling-text .rail h4 {
  font-family: "Big Shoulders", Impact, sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding-right: 0.3em;
}
.my-face-animate {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  display: flex;
  justify-content: end;
  z-index: 2;
}
@media (max-width: 800px) and (orientation: portrait) {
  .my-face-animate {
    bottom: 0;
  }
}
.my-face-animate video {
  width: 100%;
  height: 100%;
  background-position: bottom;
  object-fit: cover;
  position: absolute;
}
.my-face-animate img {
  width: 100%;
  height: 100%;
  background-position: bottom;
  object-fit: cover;
}
.face-image {
  height: 110% !important;
  filter: brightness(0);
  /* scale from the top edge so the guitar neck always runs off the top of the screen */
  transform: scale(0.9);
  transform-origin: 50% 0;
}
@media (max-width: 800px) and (orientation: portrait) {
  /* whole guitar body in view so the rail text stays visible across the scene */
  .face-image {
    width: 200% !important;
    max-width: none;
    height: auto !important;
    position: absolute;
    top: 0;
    left: -50%;
  }
}
.shade {
  height: 55vh;
  z-index: 10;
  width: 100vw;
  position: absolute;
  bottom: -20%;
}
.shade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 800px) and (orientation: portrait) {
  .shade {
    height: 70vh;
  }
}
.para-introduce-hero {
  position: absolute;
  left: 3%;
  top: 21%;
  max-width: 35ch;
  width: 100%;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  word-break: normal;
  overflow-wrap: normal;
  font-family: light-font;
  color: #f5f5f5;
  will-change: transform, opacity, filter;
  text-align: left;
  text-wrap: pretty;
}
@media (max-width: 800px) and (orientation: portrait) {
  .para-introduce-hero {
    max-width: 30ch;
    font-size: 3.3rem;
    line-height: 1.3;
    top: 65%;
    left: 5%;
    z-index: 100;
  }
}
.expertise-text {
  position: absolute;
  font-size: 1.2rem;
  right: 3%;
  display: flex;
  flex-direction: column;
  top: 70%;
  z-index: 15;
  font-family: light-font;
  color: #f5f5f5;
  text-align: end;
}
@media (max-width: 800px) and (orientation: portrait) {
  .expertise-text {
    font-size: 4rem;
    top: 70%;
    line-height: 1.2;
    right: 5%;
    z-index: 100;
  }
}
/* hero promise: a Llamas maker's mark (flame, lead line, two quiet lines, red rule) */
.llamas-promise {
  /* anchored above the "Let's talk guitars" badge (fixed at bottom 10%) rather than at 70% */
  top: auto;
  bottom: calc(10% + 3.6rem + 4.5vh);
  align-items: flex-end;
  gap: 0.55rem;
  padding-right: 1.6rem;
  border-right: 1px solid rgba(214, 4, 7, 0.85);
  text-transform: uppercase;
}
.llamas-promise:before {
  content: "";
  display: block;
  width: 1.05rem;
  height: 1.68rem;
  margin-bottom: 0.9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160'%3E%3Cpath fill='%23d60407' fill-rule='evenodd' d='M50 2C54 22 66 34 76 50C88 68 92 86 88 106C84 132 68 152 50 156C32 152 16 134 12 108C9 88 16 72 26 60C28 72 33 80 40 84C36 64 40 40 50 2ZM52 52C58 70 70 82 72 104C74 126 64 142 50 146C36 142 28 128 30 110C31 98 37 90 42 84C44 94 47 98 52 100C49 86 48 70 52 52Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.llamas-promise .lp-lead {
  font-family: "Big Shoulders", Impact, sans-serif;
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #f5f0eb;
  margin-bottom: 0.35rem;
}
.llamas-promise .lp-line {
  font-family: light-font;
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  color: rgba(245, 240, 235, 0.8);
}
@media (max-width: 800px) and (orientation: portrait) {
  /* phone: tagline and promise move up under the rail, clear of the badge */
  .para-introduce-hero {
    top: 60%;
  }
  .llamas-promise {
    top: 66%;
    bottom: auto;
    gap: 1.6rem;
    padding-right: 4rem;
  }
  .llamas-promise:before {
    width: 3.4rem;
    height: 5.4rem;
    margin-bottom: 2.4rem;
  }
  .llamas-promise .lp-lead {
    font-size: 7.4rem;
    margin-bottom: 1rem;
  }
  .llamas-promise .lp-line {
    font-size: 2.9rem;
    letter-spacing: 0.24em;
  }
}
.face-2-unicorn {
  width: 100vw;
  height: 100vh;
  opacity: 0;
  position: absolute;
  z-index: 50;
}
.face-2-unicorn a {
  display: none !important;
}
.face-2-unicorn canvas {
  transform: translateY(5%);
  scale: 1;
}
.face-2-unicorn a[href*="unicorn.studio"] {
  display: none !important;
}
.about-us {
  height: 135vh;
  width: 100vw;
}
@media (max-width: 800px) and (orientation: portrait) {
  .about-us {
    height: 60vh;
  }
}
.intro-ab-section {
  display: flex;
  flex-direction: column;
  height: 125vh;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
@media (max-width: 800px) and (orientation: portrait) {
  .intro-ab-section {
    height: 50vh;
    z-index: 200;
  }
}
.intro-ab-section p {
  color: #d60407;
  text-transform: uppercase;
  font-size: 1.4rem;
  position: absolute;
  top: 0;
}
@media (max-width: 800px) and (orientation: portrait) {
  .intro-ab-section p {
    font-size: 5rem;
    z-index: 300;
    top: 0%;
  }
}
.intro-ab-section h1 {
  font-size: 16rem;
  font-family: light-font;
  text-transform: uppercase;
  line-height: 0.8;
  margin-top: -1rem;
  color: #d60407;
}
@media (max-width: 800px) and (orientation: portrait) {
  .intro-ab-section h1 {
    font-size: 22rem;
    margin-top: -60rem;
  }
}
.signs {
  position: absolute;
  bottom: 20%;
}
.about-us-pictures {
  display: flex;
  flex-direction: column;
  margin-top: -10%;
  align-items: center;
  justify-content: center;
}
.about-us-pictures p {
  color: #d60407;
  font-size: 2.5rem;
  width: 90%;
  margin-top: 5vh;
  text-transform: uppercase;
  position: relative;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .about-us-pictures p {
    font-size: 5rem;
    z-index: 300;
    font-weight: 600;
    margin-top: -7vh;
  }
}
.box-mg {
  height: 35vh;
  width: 25vw;
  overflow: hidden;
}
.box-mg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.space {
  display: inline-block;
  width: 25vw;
}
/* Meet Lou: first section after the hero. Section heights are unchanged so the
   butterfly's scroll timing stays the same. */
.meet-low .intro-ab-section {
  overflow: hidden;
}
.low-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46vw;
  height: 64vh;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background:
    radial-gradient(ellipse 34% 60% at 50% -8%, rgba(255, 235, 235, 0.07), transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 108%, rgba(170, 0, 0, 0.58), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 40%, #1a0303, #070707 70%);
  box-shadow: inset 0 0 12vw rgba(0, 0, 0, 0.9);
  clip-path: inset(0% 0% 0% 0%);
}
.low-stage .low-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.low-stage-light {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 43, 43, 0.1) 48%,
    rgba(255, 90, 90, 0.16) 50%,
    rgba(255, 43, 43, 0.1) 52%,
    transparent 60%
  );
  animation: lowLightSweep 9s ease-in-out infinite alternate;
}
@keyframes lowLightSweep {
  0% {
    transform: translateX(-22%);
  }
  to {
    transform: translateX(22%);
  }
}
.low-stage-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 4, 7, 0.75), transparent);
  box-shadow: 0 0 2.4rem 0.4rem rgba(214, 4, 7, 0.28);
}
.low-stage-grain {
  position: absolute;
  inset: 0;
  background: url(../assets/images/noise-texture.png);
  opacity: 0.09;
  mix-blend-mode: screen;
}
.meet-low .intro-ab-section .low-eyebrow {
  position: relative;
  top: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 3rem;
  color: #f5f5f5;
  font-family: light-font;
  font-size: 1.2rem;
  letter-spacing: 0.4em;
}
.low-eyebrow span {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.15em;
}
.low-eyebrow:before,
.low-eyebrow:after {
  content: "";
  width: 6rem;
  height: 1px;
  background: #d60407;
  transform: scaleX(var(--low-rule, 1));
}
.low-eyebrow:before {
  transform-origin: 100% 50%;
}
.low-eyebrow:after {
  transform-origin: 0% 50%;
}
.meet-low .intro-ab-section h1 {
  position: relative;
  z-index: 2;
  margin-top: 0;
  font-size: 22rem;
}
.meet-low .intro-ab-section h1 .fonts-c {
  font-size: 24rem;
  letter-spacing: 0;
  margin-top: -6rem;
  /* script capitals are hard to read; the model name stays "Lou" */
  text-transform: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .low-stage {
    top: 46%;
    width: 88vw;
    height: 40vh;
  }
  .meet-low .intro-ab-section .low-eyebrow {
    font-size: 3.4rem;
    gap: 3rem;
    margin: 0 0 6rem;
  }
  .low-eyebrow:before,
  .low-eyebrow:after {
    width: 8rem;
  }
  .meet-low .intro-ab-section h1 {
    margin-top: 0;
    font-size: 30rem;
  }
  .meet-low .intro-ab-section h1 .fonts-c {
    font-size: 36rem;
    margin-top: -10rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .low-stage-light {
    animation: none;
  }
}
.pre-loader-Container {
  position: fixed;
  z-index: 1800;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  overflow: hidden;
}
.pre-loader-Container .model-main-loader {
  width: 100%;
  height: 100vh;
  position: relative;
}
.loader-1 {
  position: absolute;
  display: flex;
  z-index: -10;
  background-color: #000;
  justify-content: center;
  align-items: center;
  right: 3%;
  bottom: 3%;
  color: #d60407;
  font-size: 15rem;
  letter-spacing: -10px;
}
.facts-figure-container {
  height: 250vh;
  overflow: hidden;
  width: 100vw;
  display: flex;
  background-color: #900;
  position: relative;
  justify-content: end;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 800px) and (orientation: portrait) {
  .facts-figure-container {
    height: 150vh;
  }
}
.facts-box {
  display: flex;
  align-items: center;
  transform: translateY(50%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  height: 40vh;
  width: 95vw;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.333);
  justify-content: space-between;
}
@media (max-width: 800px) and (orientation: portrait) {
  .facts-box {
    z-index: 300;
    transform: translateY(0);
  }
}
.facts-box h1 {
  font-size: 10rem;
  font-weight: 100;
  font-family: ruthie;
}
@media (max-width: 800px) and (orientation: portrait) {
  .facts-box h1 {
    font-size: 20rem;
  }
}
.facts-box p {
  font-size: 2rem;
  width: 28%;
  text-transform: uppercase;
  font-weight: 200;
}
@media (max-width: 800px) and (orientation: portrait) {
  .facts-box p {
    font-size: 5rem;
  }
}
.roman-statue-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100vw;
  pointer-events: none;
  height: 100vh;
  overflow: hidden;
}
.roman-statue-viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.fonts-c {
  display: inline-block;
  font-family: ruthie;
  position: relative;
  z-index: 300;
  font-size: 20rem;
  letter-spacing: -1rem;
  font-weight: 100;
}
@media (max-width: 800px) and (orientation: portrait) {
  .fonts-c {
    font-size: 28rem;
  }
}
.bigger-img {
  height: 50vh;
  width: 20vw !important;
}
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.cinematic-text .char {
  opacity: 0;
  display: inline-block;
  will-change: transform, opacity, filter;
}
.section-break-fire-2 {
  width: 100vw;
}
.section-break-fire-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-break-fire {
  height: 70vh;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100vw;
}
@media (max-width: 800px) and (orientation: portrait) {
  .section-break-fire {
    transform: translateY(-20%);
    height: auto;
  }
}
.section-break-fire img {
  width: 100%;
  transform: rotate(180deg);
  height: 100%;
  object-fit: cover;
}
/* The custom journey: replaces the facts rows in the red band between the fire edges.
   The band's height is unchanged, so later scroll timing (the butterfly's exit) is the same. */
.facts-figure-container.custom-journey {
  overflow: hidden;
  overflow: clip; /* clips like hidden, but lets the stage stick */
}
.journey {
  position: absolute;
  left: 0;
  right: 0;
  top: 15vh;
  bottom: 30vh;
  z-index: 5;
  color: #f5f5f5;
}
.journey-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 4vw;
  padding: 0 6vw;
  box-sizing: border-box;
}
.journey-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 3rem;
  font-family: light-font;
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.journey-eyebrow:before {
  content: "";
  width: 6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--journey-rule, 1));
  transform-origin: 0 50%;
}
.journey-eyebrow span {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.15em;
}
.journey-title {
  margin: 0;
  font-weight: 400;
  line-height: 0.9;
}
.jt-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.jt-line > span {
  display: inline-block;
}
.journey-title .jt-line:first-child {
  font-family: light-font;
  font-size: 11rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.journey-title .jt-script {
  font-family: ruthie;
  font-size: 15rem;
  font-weight: 100;
  margin-top: -2rem;
  padding-left: 0.4em;
}
.journey-text {
  max-width: 38ch;
  margin: 3.5rem 0 0;
  font-family: light-font;
  font-size: 1.8rem;
  line-height: 1.35;
}
.journey-list {
  position: relative;
  padding-left: 3rem;
}
.journey-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(245, 245, 245, 0.25);
}
.journey-progress:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f5f5f5;
  transform: scaleY(var(--journey-progress, 0));
  transform-origin: 50% 0;
}
.journey-words {
  list-style: none;
  margin: 0;
  padding: 0;
}
.journey-word {
  display: flex;
  align-items: baseline;
  gap: 2rem;
}
.jw-index {
  font-family: light-font;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  opacity: calc(0.4 + var(--fill, 0) * 0.6);
}
.jw-word {
  position: relative;
  display: inline-block;
  font-family: light-font;
  font-size: 12rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.jw-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 245, 245, 0.55);
}
.jw-fill {
  position: absolute;
  inset: 0;
  color: #f5f5f5;
  clip-path: inset(-10% calc((1 - var(--fill, 0)) * 100%) -10% 0);
}
@media (max-width: 800px) and (orientation: portrait) {
  .journey {
    top: 10vh;
    bottom: 18vh;
  }
  .journey-stage {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 7rem;
    padding: 12vh 7vw 6vh;
  }
  .journey-eyebrow {
    font-size: 3.4rem;
    gap: 3rem;
    margin-bottom: 5rem;
  }
  .journey-eyebrow:before {
    width: 8rem;
  }
  .journey-title .jt-line:first-child {
    font-size: 22rem;
  }
  .journey-title .jt-script {
    font-size: 30rem;
    margin-top: -4rem;
  }
  .journey-text {
    font-size: 4.6rem;
    margin-top: 5rem;
  }
  .journey-list {
    padding-left: 6rem;
  }
  .journey-word {
    gap: 4rem;
  }
  .jw-index {
    font-size: 3.2rem;
  }
  .jw-word {
    font-size: 24rem;
  }
}
.numbers-facts .char,
.para-facts .word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
}
#footer {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(-5deg, #d60407, #000 50%) !important;
  width: 100vw;
}
.fonts-change {
  font-family: ruthie !important;
  color: #900 !important;
}
.box-section-ups {
  width: 100%;
  height: 30vh;
  display: flex;
  justify-content: end;
  background-color: transparent;
  align-items: end;
}
.services-project {
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.services-project .para-services {
  position: absolute;
  top: 80%;
  left: 0;
  padding: 2rem;
  width: 30%;
  font-size: 1.2rem;
  color: #900;
}
@media (max-width: 800px) and (orientation: portrait) {
  .services-project .para-services {
    font-size: 3rem;
    width: 40%;
    display: none;
  }
}
.services-para {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: end;
  height: 100%;
  color: #900;
  padding: 2rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .services-para {
    width: 70%;
  }
}
.services-para p {
  padding-top: 3rem;
  text-align: right;
  position: relative;
  z-index: 100;
  font-size: 1.5rem;
  color: #900;
}
@media (max-width: 800px) and (orientation: portrait) {
  .services-para p {
    font-size: 4.5rem;
  }
}
.services-center-heading {
  font-size: 3rem;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 500;
  color: #900 !important;
  position: absolute;
}
.expertise-points {
  position: absolute;
  right: 2%;
  text-align: right;
  bottom: 15%;
  color: #900 !important;
}
.scroll-downn {
  position: absolute;
  width: 70%;
  height: 30rem;
  font-size: 1.2rem;
}
.services-heading {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  color: #900;
  height: fit-content;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  font-family: ruthie;
}
@media (max-width: 800px) and (orientation: portrait) {
  .services-heading {
    font-size: 13rem;
  }
}
.services-char {
  display: inline-block;
  will-change: transform, font-size;
}
.breaks {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  z-index: 100;
  transform: translate(80%);
}
@media (max-width: 800px) and (orientation: portrait) {
  .breaks {
    transform: translate(20%);
  }
}
/* The story behind Llamas: bridge strip heading */
.story-head {
  position: relative;
  z-index: 100;
  padding-top: 3rem;
  text-align: right;
}
.story-eyebrow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 1.6rem;
  color: #d60407;
  font-family: light-font;
  font-size: 1.2rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.story-eyebrow:before {
  content: "";
  width: 6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--story-rule, 1));
  transform-origin: 100% 50%;
}
.story-eyebrow span {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.15em;
}
.story-title {
  margin: 0;
  color: #f5f0eb;
  font-family: "Big Shoulders", Impact, sans-serif;
  font-weight: 900;
  font-size: 8.6rem;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0;
}
.st-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.st-line > span {
  display: inline-block;
}
/* pinned story scene: the large photo frame, centred */
.story-scene .story-cinema {
  position: absolute;
  z-index: 3;
  left: 12vw;
  top: 13vh;
  width: 76vw;
  height: 74vh;
  overflow: hidden;
  visibility: hidden;
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.6);
}
.story-scene .sc-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.story-scene .sc-frame + .sc-frame {
  clip-path: inset(100% 0% 0% 0%);
}
.story-scene .sc-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 60%;
}
.story-scene .story-cinema:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 35%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.story-scene .sc-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url(../assets/images/noise-texture.png);
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}
.story-scene .story-guitar img {
  transform-origin: 50% 55%;
}
/* the handwritten wordmark rides the name animation: 1em tall, so it grows with font-size */
.story-wordmark {
  display: block;
  height: 1.05em;
  width: auto;
}
@media (max-width: 800px) and (orientation: portrait) {
  .services-para.story-intro {
    width: 92%;
  }
  .story-eyebrow {
    font-size: 3rem;
    gap: 2.4rem;
    letter-spacing: 0.25em;
    white-space: nowrap;
  }
  .story-eyebrow:before {
    width: 6rem;
  }
  .story-title {
    font-size: 13rem;
  }
  .story-scene .story-cinema {
    left: 6vw;
    top: 18vh;
    width: 88vw;
    height: 52vh;
  }
}
/* Family and Ignacio: two dark panels with red accents (stacked on mobile) */
.family-maker {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 1.6rem;
  padding: 14vh 5vw;
  background: #0b0b0b;
}
.fm-card {
  position: relative;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #f5f0eb;
}
.fm-family {
  padding: 4.5rem 4.2rem;
}
.fm-copy {
  padding: 4.5rem 3.6rem;
}
.fm-maker {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.fm-eyebrow {
  display: flex;
  gap: 0.9em;
  margin: 0 0 2.4rem;
  color: #d60407;
  font-family: Barlow, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.fm-eyebrow span + span:before {
  content: "/";
  margin-right: 0.9em;
}
.fm-title {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Big Shoulders", Impact, sans-serif;
  font-weight: 900;
  font-size: 8.8rem;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f5f0eb;
}
.fm-title-red {
  color: #d60407;
}
.fm-sub {
  margin: 0.6rem 0 0;
  font-family: "Big Shoulders", Impact, sans-serif;
  font-weight: 800;
  font-size: 2.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fm-rule {
  display: block;
  width: 4.2rem;
  height: 3px;
  margin: 2.6rem 0;
  background: #d60407;
  transform-origin: 0 50%;
}
.fm-lines {
  margin: 0 0 2rem;
  font-family: Barlow, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.55;
  color: #f5f0eb;
}
.fm-text {
  max-width: 40ch;
  margin: 0;
  font-family: Barlow, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.65;
  color: #c9c2bc;
}
.fm-portrait {
  position: relative;
  margin: 0;
  min-height: 62vh;
  overflow: hidden;
}
.fm-portrait img {
  position: absolute;
  inset: -5% 0;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .family-maker {
    grid-template-columns: 1fr;
    gap: 5rem;
    padding: 12vh 5vw;
  }
  .fm-family,
  .fm-copy {
    padding: 10rem 8rem;
  }
  .fm-maker {
    grid-template-columns: 1fr;
  }
  .fm-eyebrow {
    font-size: 3.4rem;
    margin-bottom: 6rem;
  }
  .fm-title {
    font-size: 30rem;
  }
  .fm-sub {
    font-size: 6.4rem;
    margin-top: 2rem;
  }
  .fm-rule {
    width: 14rem;
    height: 3px;
    margin: 7rem 0;
  }
  .fm-lines,
  .fm-text {
    font-size: 5rem;
  }
  .fm-portrait {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}
.services-change-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #900;
  font-family: ruthie;
  font-size: 16rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .services-change-1 {
    font-size: 19rem;
    width: 120%;
  }
}
.services-change-1 .word1 {
  position: absolute;
  color: #900;
}
.word1,
.points {
  overflow: hidden;
  color: #900;
  display: inline-block;
}
.word1 span,
.points span {
  display: inline-block;
  transform: translateY(120%);
  will-change: transform;
}
.expertise-set {
  position: absolute;
  right: 4%;
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 1.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .expertise-set {
    font-size: 5rem;
    bottom: 25%;
  }
}
.another-fall {
  width: 60vw;
  height: 100vh;
  background-color: #000;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 1000 !important;
  transform: translateY(100%) scale(0.3);
}
@media (max-width: 800px) and (orientation: portrait) {
  .another-fall {
    width: 90vw;
  }
}
.another-fall .men-fall {
  height: 100%;
  overflow: hidden;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.another-fall .men-fall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pictures-services {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 800px) and (orientation: portrait) {
  .pictures-services {
    display: none;
  }
}
.pictures-services .uiux {
  height: 30vh;
  position: absolute;
  width: 15vw;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
}
@media (max-width: 800px) and (orientation: portrait) {
  .pictures-services .uiux {
    height: 20vh;
    width: 30vw;
  }
}
.pictures-services .uiux img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paper-tear {
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.paper-tear img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.9;
}
.fonts {
  font-weight: 100 !important;
  font-family: ruthie;
}
.content-section-fall {
  height: 100%;
  width: 95vw;
  position: absolute;
  z-index: 3;
  color: #000;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  display: flex;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-section-fall {
    flex-direction: column;
    color: #fff;
    justify-content: center;
    width: 95vw !important;
    align-items: center;
    text-align: center;
  }
}
.content-section-fall .heading-fall {
  color: #000;
  font-size: 5.5rem;
  line-height: 0.9;
  width: 40%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-section-fall .heading-fall {
    font-size: 10rem;
    color: #fff;
    width: 90% !important;
    text-align: center !important;
  }
}
.content-section-fall p {
  color: #000;
  width: 40%;
  font-size: 2rem;
  width: 20ch;
  line-height: 1.1;
  text-align: end !important;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-section-fall p {
    font-size: 5rem;
    color: #fff;
    width: 18ch;
    text-align: center !important;
  }
}
.heading-fall .line span,
.fall-para .line span {
  display: block;
  transform: translateY(120%);
}
.music-section {
  height: 100vh;
  width: 100vw;
  display: flex;
  z-index: 100;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
@media (max-width: 800px) and (orientation: portrait) {
  .music-section {
    height: 80vh;
  }
}
.music-section p {
  position: absolute;
  color: #fff;
  width: 30%;
  right: 3%;
  bottom: 10%;
  text-align: end;
}
.heading-music {
  color: #900;
  font-size: 7rem;
  left: 0%;
  top: 2%;
  line-height: 1;
  z-index: 10;
  padding: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  position: absolute;
}
@media (max-width: 800px) and (orientation: portrait) {
  .heading-music {
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    display: flex;
    left: 20%;
    font-size: 15rem;
    top: 10%;
    z-index: 1000;
  }
}
.music-center-disk {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 20rem;
  scale: 0.5;
}
.music-center-disk img {
  position: relative;
  z-index: 2;
  transform-origin: center;
  will-change: transform;
}
@media (max-width: 800px) and (orientation: portrait) {
  .music-center-disk img {
    scale: 0.7;
  }
}
.circle-blb {
  position: absolute;
  width: 70vh;
  opacity: 0;
  border-radius: 20rem;
  filter: blur(40px);
  height: 70vh;
  background-color: #900;
}
@media (max-width: 800px) and (orientation: portrait) {
  .circle-blb {
    scale: 0.7;
    border-radius: 100rem;
  }
}
.hand-left {
  position: absolute;
  left: 0;
  opacity: 0.5;
  width: 38%;
  transform: rotate(-10deg) translate(-120%);
}
@media (max-width: 800px) and (orientation: portrait) {
  .hand-left {
    display: none;
  }
}
.hand-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hand-right {
  position: absolute;
  right: 0;
  opacity: 0.5;
  width: 38%;
  transform: rotate(10deg) translate(120%);
}
@media (max-width: 800px) and (orientation: portrait) {
  .hand-right {
    display: none;
  }
}
.hand-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.music-section p,
.music-section p .line {
  overflow: hidden;
}
.music-section p .line span {
  display: block;
  transform: translateY(100%);
}
.heading-music .line {
  overflow: hidden;
}
.heading-music .line span {
  display: block;
  transform: translateY(100%);
}
.blog-section {
  height: 120vh;
  overflow: hidden;
  position: relative;
  z-index: 100;
  width: 100vw;
  margin-top: -28%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section {
    height: 160vh;
    margin-top: 0%;
  }
}
.blog-section .cards-blogs {
  width: 100vw;
  display: flex;
  height: 100%;
  gap: 1rem;
  justify-content: center;
  align-items: end;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section .cards-blogs {
    flex-direction: column;
    justify-content: end !important;
    align-items: center;
  }
}
.blog-section .cards-blogs .card-1 {
  width: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section .cards-blogs .card-1 {
    width: 90%;
  }
}
.blog-section .cards-blogs .card-1:nth-child(2) {
  transform: translateY(-90%);
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section .cards-blogs .card-1:nth-child(2) {
    transform: translateY(0) !important;
  }
}
.blog-section .cards-blogs .card-1 .image-blog {
  height: 25rem;
  width: 100%;
  overflow: hidden;
  transition: 0.5s ease;
  filter: brightness(0.5);
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section .cards-blogs .card-1 .image-blog {
    height: 67rem;
    filter: brightness(1);
  }
}
.blog-section .cards-blogs .card-1 .image-blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-section .cards-blogs .card-1 p {
  margin-top: 0.5rem;
  font-size: 1.3rem;
  color: #900;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section .cards-blogs .card-1 p {
    font-size: 4.5rem;
    margin-top: 0.5rem;
  }
}
.blog-section .cards-blogs .card-1 span {
  color: #ffffff65;
  margin-top: 0.6rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-section .cards-blogs .card-1 span {
    font-size: 3.5rem;
    margin-top: 0rem;
  }
}
.blog-section .cards-blogs .card-1:hover .image-blog {
  filter: brightness(1.1);
  transition: 0.5s ease;
}
.blogs-main-headings {
  position: absolute;
  color: #900;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  top: 0;
  display: flex;
  z-index: 2;
  padding: 1rem;
  justify-content: center;
  align-items: center;
  width: 100vw;
  justify-content: space-between;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blogs-main-headings {
    flex-direction: column;
    justify-content: center;
    padding: 0;
    line-height: 1;
    align-items: center;
  }
}
.blogs-main-headings p {
  font-size: 7rem;
  margin-left: 2rem;
  line-height: 1;
  margin-left: 3rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blogs-main-headings p {
    text-align: center;
    width: 100%;
    font-size: 15rem;
  }
}
.blogs-main-headings .points-blogs {
  width: 25%;
  padding-left: 3rem;
  margin-right: 3rem;
  font-size: 1.5rem;
  margin-right: 4rem;
  display: flex;
  text-align: end;
  flex-direction: column;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blogs-main-headings .points-blogs {
    font-size: 4rem;
    line-height: 1.1;
    margin-right: 0rem;
    width: 85%;
    text-wrap: wrap;
    text-align: center;
  }
}
.points-blogs {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
}
.blog-para .line {
  overflow: hidden;
}
.blog-para .line span {
  display: block;
  transform: translateY(120%);
  will-change: transform;
}
.blog-heading {
  color: #900;
  margin-top: -6%;
  width: 40vw;
  line-height: 1;
}
@media (max-width: 800px) and (orientation: portrait) {
  .blog-heading {
    margin-top: 0%;
  }
}
.modal-blogs {
  position: fixed;
  z-index: 2200;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #99000010;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: inset(50%);
  transform: rotate(-10deg) scale(0.7);
  pointer-events: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-blogs {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.content-blogs {
  width: 50%;
  display: flex;
  padding-top: 10%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  padding-left: 3%;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-blogs {
    width: 90%;
  }
}
.content-blogs .Date-blog {
  padding-bottom: 0.5rem;
  color: #ffffff8c;
  font-size: 1.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-blogs .Date-blog {
    font-size: 4rem;
  }
}
.content-blogs h1 {
  font-size: 3rem;
  color: #fff;
  font-weight: 100;
  letter-spacing: 0.09rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-blogs h1 {
    font-size: 5rem;
  }
}
.content-blogs p {
  font-size: 1.5rem;
  margin-top: 3rem;
  color: #fff;
  letter-spacing: 0.09rem;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-blogs p {
    font-size: 4.4rem;
    color: #faf8f8ee;
  }
}
.content-blogs .by-who {
  color: #fff;
  margin-top: 2rem;
  font-family: ruthie;
  font-size: 2.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .content-blogs .by-who {
    font-size: 7rem;
  }
}
.image-blog {
  width: 50%;
  height: 90%;
  overflow: hidden;
  padding: 3rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .image-blog {
    width: 90%;
    height: 40%;
  }
}
.image-blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.before-footer-cta {
  height: 100vh;
  width: 100vw;
  z-index: 200 !important;
  display: flex;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  transform-style: preserve-3d;
  align-items: center;
  position: relative;
  flex-direction: column;
}
.before-footer-cta .cta-footer {
  color: #900;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.before-footer-cta .cta-footer .ring-circle {
  position: absolute;
  top: 50%;
  pointer-events: none;
  transform-origin: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
  left: 50%;
  transform: translate(-50%, -50%);
}
.before-footer-cta .cta-footer .ring-circle img {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  scale: 4.5;
  transition: 0.3s;
  object-fit: cover;
}
.before-footer-cta .cta-footer:hover {
  box-shadow: none !important;
  text-shadow: 0px 0px 7px #990000;
}
.before-footer-cta .cta-footer:hover img {
  filter: brightness(2.5);
  transition: 0.3s;
  transform-origin: 50% 50%;
  object-fit: cover;
}
@media (max-width: 800px) and (orientation: portrait) {
  .before-footer-cta {
    height: 70vh;
  }
}
.before-footer-cta h1 {
  color: #e4e0e0;
  font-size: 7.5rem;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
  text-align: center;
  font-weight: 100;
  text-transform: uppercase;
  line-height: 0.79;
}
@media (max-width: 800px) and (orientation: portrait) {
  .before-footer-cta h1 {
    font-size: 15rem;
  }
}
.ring-circle img {
  animation: ringRotate 12s linear infinite;
}
.ring-circle {
  position: absolute;
  top: 50%;
  transform-origin: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center center;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ring-circle img {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  scale: 4;
  transition: 0.3s;
  object-fit: cover;
}
@keyframes ringRotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.cta-footer {
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 70rem;
  font-size: 1.5rem;
  right: 2%;
  flex-direction: column;
  text-align: center;
  height: 150px;
  z-index: 2000;
  position: absolute;
  bottom: 10%;
  transition: 0.5s;
  border: 1px solid black;
}
.cta-footer:hover {
  box-shadow: #900 0 0 20px;
  background-color: #000;
  transition: 0.5s;
  color: #900 !important;
  border: 1px solid #000000 !important;
}
@media (max-width: 800px) and (orientation: portrait) {
  .cta-footer {
    font-size: 5rem;
    bottom: -5% !important;
  }
}
#loader-canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}
.site-pre-loader {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 1970;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rem;
  font-family: ruthie;
  letter-spacing: -40px;
}
.site-pre-loader:after {
  content: "";
  position: absolute;
  top: -12.5%;
  left: -12.5%;
  z-index: 10;
  width: 125%;
  height: 125%;
  background: url(../assets/images/noise-texture.png) repeat center center;
  opacity: 1;
  animation: noiseMovement 0.09s steps(6) infinite;
}
@keyframes noiseMovement {
  0%,
  to {
    transform: translate(0);
  }
  10% {
    transform: translateY(-10%);
  }
  30% {
    transform: translate(-10%, 5%);
  }
  50% {
    transform: translateY(10%);
  }
  70% {
    transform: translate(10%, -5%);
  }
  90% {
    transform: translate(10%, 5%);
  }
}
/* Intro: the screen is dark until the burn-away takes over (the WebGL plane is the same colour) */
.site-pre-loader {
  background: #090201;
}
.site-pre-loader.is-burning {
  background: transparent;
}
.site-pre-loader:after {
  opacity: 0.35 !important;
  transition: opacity 0.8s ease;
}
.site-pre-loader.is-burning:after,
.site-pre-loader.is-fading:after {
  opacity: 0 !important;
}
.number-count {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  font-size: 13rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #f3ebe4;
  text-shadow:
    0 0 2.4rem rgba(255, 70, 20, 0.35),
    0 0 6rem rgba(214, 4, 7, 0.3);
  will-change: transform, opacity, filter;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .number-count {
    font-size: 30rem;
    top: 42%;
  }
}
/* one-line window over the strip; 13 positions, 0.2 s each, XIII held at the end */
.number-count {
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
}
.nc-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  animation: introCount 2.6s steps(13, jump-none) forwards;
}
.nc-strip span {
  display: block;
  height: 1.2em;
}
@keyframes introCount {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-92.3077%); /* 12 of 13 lines */
  }
}
/* flame parts are sized in em from this base; their bottoms sit on the top line */
.intro-flame {
  position: absolute;
  z-index: 4;
  left: 50%;
  /* flame base = numeral centre (44%) + half its 1.2em window (7.8rem) + gap (2.4rem)
     + flame height (7.36em x 1.6rem = 11.8rem): the gap holds on any screen shape */
  top: calc(44% + 22rem);
  width: 0;
  height: 0;
  font-size: 1.6rem;
  letter-spacing: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (max-width: 800px) and (orientation: portrait) {
  .intro-flame {
    /* 42% + 18rem (half the numeral window) + 6rem gap + 32.4rem flame */
    top: calc(42% + 56.4rem);
    font-size: 4.4rem;
  }
}
.intro-flame span {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: 50% 100%;
}
.intro-flame-glow {
  width: 46em;
  height: 26em;
  margin-left: -23em;
  bottom: -11em !important;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 4, 7, 0.32), rgba(120, 0, 0, 0.12) 55%, transparent);
  filter: blur(1.4em);
  animation: introGlow 3.4s ease-in-out infinite alternate;
}
.intro-flame .fl {
  width: 4.6em;
  height: 7.36em;
  margin-left: -2.3em;
}
.intro-flame .fl svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* silhouette: soft red halo plus a thin warm rim; sways from its base */
.intro-flame .fl-outer {
  filter: drop-shadow(0 0 1em rgba(214, 4, 7, 0.55)) drop-shadow(0 0 0.2em rgba(255, 90, 40, 0.5));
  animation: introFlicker1 2.3s ease-in-out infinite alternate;
}
.intro-ember {
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: #ffb36b;
  box-shadow: 0 0 0.6em 0.15em rgba(255, 90, 30, 0.7);
  opacity: 0;
  animation: introEmber 3.2s ease-out infinite;
}
/* embers start at the tongue tips and fade before reaching the numeral */
.intro-flame .intro-ember {
  bottom: 5em;
}
.intro-flame .e1 {
  margin-left: -0.6em;
}
.intro-flame .e2 {
  margin-left: 0.5em;
  animation-delay: 1.1s;
  animation-duration: 3.8s;
}
.intro-flame .e3 {
  margin-left: -0.1em;
  animation-delay: 2.2s;
  animation-duration: 2.9s;
}
/* subtle: each layer sways a degree or two and breathes a few percent */
/* irregular steps so the sway never looks like a metronome; all pivot on the base */
@keyframes introFlicker1 {
  0% {
    transform: scale(1, 0.98) skewX(-1.2deg);
  }
  23% {
    transform: scale(0.985, 1.025) skewX(1.4deg);
  }
  41% {
    transform: scale(1.01, 0.995) skewX(0.3deg);
  }
  67% {
    transform: scale(0.99, 1.03) skewX(-1.8deg);
  }
  84% {
    transform: scale(1.005, 0.99) skewX(0.8deg);
  }
  to {
    transform: scale(1, 1.01) skewX(-0.6deg);
  }
}
@keyframes introGlow {
  0% {
    opacity: 0.75;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes introEmber {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  to {
    transform: translate(0.6em, -5em);
    opacity: 0;
  }
}
/* set by the inline failsafe when js/app.js never ran: hero in its finished state */
.intro-failsafe .face-image {
  filter: none !important;
  transform: none !important;
}
.intro-failsafe .hero-section-home .scrolling-text .rail h4 {
  transform: none !important;
}
.intro-failsafe .logo-3d,
.intro-failsafe .cta-connect {
  opacity: 1 !important;
}
.intro-failsafe .fixed-bar-ledger .plus-rotate {
  transform: none !important;
}
.intro-failsafe .hero-section-home {
  background-image: linear-gradient(250deg, #d60407 0%, #000 100%);
}
@media (prefers-reduced-motion: reduce) {
  .intro-flame span {
    animation: none !important;
  }
  .intro-ember {
    display: none;
  }
}
.loader-text-reval {
  position: absolute;
  font-family: regular-font;
  z-index: 100;
  right: 3.5%;
  bottom: 3.5%;
  color: #0d0d0d;
  letter-spacing: 0px;
  font-size: 1.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .loader-text-reval {
    font-size: 3.8rem;
    right: 3.5%;
    bottom: 8.5%;
  }
}
.logo-3d {
  perspective: 1000px;
  /* full Llamas logo, 1446x740 */
  width: 200px;
  opacity: 0;
  height: 102px;
  filter: brightness(1);
  position: fixed;
  z-index: 2100;
  top: 3%;
  left: 2%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .logo-3d {
    width: 130px;
    height: 67px;
  }
}
.logo-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.logo-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
}
.front {
  transform: rotateY(0);
}
.back {
  /* no mirror: the Llamas wordmark must read correctly on the back half of the spin */
  transform: rotateY(180deg);
}
.logo-text {
  position: fixed;
  perspective: 1000px;
  z-index: 500;
  top: 3%;
  left: 2%;
  font-weight: 100;
  width: 6%;
  text-transform: uppercase;
  font-size: 4.4rem;
  color: #fff;
  font-family: ruthie;
}
.logo-text img {
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  object-fit: cover;
}
@media (max-width: 800px) and (orientation: portrait) {
  .logo-text {
    font-size: 10.4rem;
  }
}
.what-they-say-about-us {
  height: 100vh;
  width: 100vw;
  z-index: 100;
  gap: 3rem;
  display: flex;
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
@media (max-width: 800px) and (orientation: portrait) {
  .what-they-say-about-us {
    align-items: end;
    align-items: center;
    height: 70vh;
  }
}
.what-they-say-about-us h1 {
  width: 60%;
  position: absolute;
  font-size: 5rem;
  font-weight: 100;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  line-height: 0.8;
}
@media (max-width: 800px) and (orientation: portrait) {
  .what-they-say-about-us h1 {
    top: 10%;
    width: 90%;
    line-height: 1;
    font-size: 11rem;
  }
}
.client-name h1 {
  font-size: 2rem;
  text-align: start;
  position: relative;
  color: #000;
}
@media (max-width: 800px) and (orientation: portrait) {
  .client-name h1 {
    font-size: 5.5rem;
  }
}
.client-name p {
  font-size: 1rem;
  text-align: start;
  position: relative;
  color: #000;
}
@media (max-width: 800px) and (orientation: portrait) {
  .client-name p {
    font-size: 4rem;
  }
}
.card-testimonial {
  height: 50vh;
  position: relative;
  padding: 1.5rem;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  z-index: 10;
  background-color: #900;
  width: 420px;
}
@media (max-width: 800px) and (orientation: portrait) {
  .card-testimonial {
    height: 40vh;
    padding: 5rem;
    width: 300px;
  }
}
.image-client {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .image-client {
    width: 70px;
    height: 70px;
  }
}
.image-client img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review {
  position: absolute;
  bottom: 5%;
  width: 90%;
  left: 3%;
  margin-top: 1rem;
  font-size: 1.3rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.445);
}
@media (max-width: 800px) and (orientation: portrait) {
  .review {
    font-size: 4rem;
  }
}
.slider-card-s {
  display: flex;
  width: max-content;
  gap: 2rem;
  align-items: stretch;
}
.fancy {
  display: block;
  font-family: ruthie !important;
}
.svg-strokee {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  top: 0;
  left: 0;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
@media (max-width: 800px) and (orientation: portrait) {
  .svg-strokee {
    scale: 1;
  }
}
.svg-strokee svg {
  width: 100%;
  height: auto;
}
@media (max-width: 800px) and (orientation: portrait) {
  .svg-strokee svg {
    transform: rotate(90deg) scale(2.2);
  }
}
.svg-strokee svg * {
  fill: none;
  stroke: #900;
  stroke-width: 1;
}
.modal-contact-us {
  height: 100vh;
  width: 40vw;
  position: fixed;
  padding: 2rem;
  clip-path: inset(100% 0% 0% 0%);
  top: 0;
  background-color: #900;
  z-index: 5000;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us {
    width: 100vw;
    padding: 5rem;
  }
}
.modal-contact-us .cta-footer {
  color: #f5f5f5;
  font-size: 1.3rem;
  border: 1px solid #f5f5f5;
}
.modal-contact-us img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 100%;
  object-fit: cover;
}
.modal-contact-us h1 {
  color: #fff;
  font-size: 5rem;
  line-height: 1;
  font-weight: 100;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us h1 {
    font-size: 15rem;
  }
}
.modal-contact-us form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us form {
    gap: 10rem;
  }
}
.modal-contact-us form input {
  background: transparent;
  border: none;
  color: #f5f5f5;
  transition: border-color 0.35s ease;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-family: light-font;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.377);
  padding-bottom: 0.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us form input {
    font-size: 5rem;
  }
}
.modal-contact-us form input {
  outline: none;
}
.modal-contact-us form input::placeholder {
  color: #f5f5f5;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us form input::placeholder {
    font-size: 5rem;
    height: fit-content;
  }
}
.modal-contact-us form input:focus {
  outline: none;
  border-bottom-color: #900;
}
.modal-contact-us form textarea {
  background: transparent;
  border: none;
  height: 2vh;
  outline: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us form textarea {
    font-size: 5rem;
    margin-top: 10rem;
  }
}
.modal-contact-us form textarea::placeholder {
  color: #f5f5f5;
  text-transform: uppercase;
  font-size: 1.2rem;
  bottom: 1px solid white !important;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .modal-contact-us form textarea::placeholder {
    font-size: 5rem;
  }
}
.close-sidebar-contact svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.before-footer-cta .line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0;
}
.before-footer-cta .word {
  display: inline-block;
  overflow: hidden;
}
.before-footer-cta .char {
  display: inline-block;
  transform-origin: 50% 100%;
  color: #900;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.cta-submit {
  border-radius: 30rem;
  width: 100px;
  height: 100px;
  display: flex;
  position: absolute;
  transition: 0.5s ease;
  font-family: ruthie !important;
  bottom: -68%;
  font-weight: 400;
  border: 1px solid #f3f3f3 !important;
}
@media (max-width: 800px) and (orientation: portrait) {
  .cta-submit {
    font-size: 4rem !important;
  }
}
.cta-submit:hover {
  color: #000;
  transition: 0.5s ease;
  border: 1px solid #990000 !important;
  background-color: #900;
}
.cta-submit::placeholder {
  color: #900 !important;
}
.textarea {
  resize: none;
  overflow: auto;
  color: #e4e0e0;
  padding-bottom: 3rem;
  border: none;
  overflow-y: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.54) !important;
}
.textarea::placeholder {
  color: #e4e0e0;
}
.textarea:focus {
  outline: none;
  border-bottom: 1px solid #990000 !important;
}
.step-of-work {
  height: 400vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
@media (max-width: 800px) and (orientation: portrait) {
  .step-of-work {
    height: 170vh;
    margin-top: -20vh;
  }
}
.step-of-work img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
@media (max-width: 800px) and (orientation: portrait) {
  .step-of-work img {
    top: 10% !important;
  }
}
.step-of-work .heading-of-step-work {
  color: #e4e0e0;
  position: absolute;
  z-index: 5;
  right: 2%;
  top: 5%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 60%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .step-of-work .heading-of-step-work {
    left: 3%;
    mix-blend-mode: difference;
    width: 90%;
  }
}
.step-of-work .heading-of-step-work h1 {
  font-weight: 200;
  font-size: 5rem;
  line-height: 1;
  color: #900;
  overflow: hidden;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .step-of-work .heading-of-step-work h1 {
    font-size: 8rem !important;
    width: 100%;
    color: #fff;
    mix-blend-mode: difference;
    line-height: 1.1;
  }
}
.para-for-stepss {
  position: absolute;
  color: #900;
  width: 30%;
  top: 20%;
  left: 2%;
  font-family: light-font;
  z-index: 2;
  line-height: 1;
  overflow: hidden;
  font-size: 1.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .para-for-stepss {
    font-size: 4.5rem !important;
    width: 70%;
    top: 19%;
    color: #fff;
    left: 28%;
    text-align: end;
  }
}
.para-for-stepss .line {
  display: block;
  overflow: hidden;
}
.para-for-stepss .word {
  display: inline-block;
}
.para-for-stepss .char {
  display: inline-block;
  will-change: transform;
}
.heading-of-step-work h1,
.para-for-stepss {
  overflow: visible;
}
.line {
  display: block;
  overflow: hidden;
}
.word {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.boxes-for-step {
  width: 100vw;
  color: #900;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  height: 200vh;
  right: 15%;
  top: 30%;
  position: absolute;
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step {
    width: 95%;
    color: #fff;
  }
}
.boxes-for-step .box-step-main {
  position: absolute;
  left: 20%;
  width: 30%;
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step .box-step-main {
    width: 80%;
    left: 15%;
  }
}
.boxes-for-step .box-step-main:nth-child(2) {
  left: 80%;
  top: 20%;
  text-align: end;
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step .box-step-main:nth-child(2) {
    left: 35% !important;
    top: 15%;
  }
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step .box-step-main:nth-child(3) {
    left: 15% !important;
    top: 30% !important;
  }
}
.boxes-for-step .box-step-main:nth-child(4) {
  left: 80%;
  top: 55%;
  text-align: end;
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step .box-step-main:nth-child(4) {
    left: 35% !important;
    top: 45%;
  }
}
.boxes-for-step .box-step-main h1 {
  font-size: 6rem;
  font-weight: 100;
  line-height: 1.2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  font-family: ruthie;
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step .box-step-main h1 {
    font-size: 10.5rem !important;
  }
}
.boxes-for-step .box-step-main h1 .line {
  display: block;
  overflow: hidden;
}
.boxes-for-step .box-step-main h1 .word {
  display: inline-block;
}
.boxes-for-step .box-step-main h1 .char {
  display: inline-block;
  will-change: transform;
}
.boxes-for-step .box-step-main p {
  font-weight: 100;
  line-height: 1.1;
  overflow: hidden;
  margin-top: -2rem;
  font-family: light-font;
  font-size: 1.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .boxes-for-step .box-step-main p {
    font-size: 4.5rem !important;
    width: 95%;
  }
}
.boxes-for-step .box-step-main p .line {
  display: block;
  overflow: hidden;
}
.boxes-for-step .box-step-main p .word {
  display: inline-block;
}
.boxes-for-step .box-step-main p .char {
  display: inline-block;
  will-change: transform;
}
.box-step-main h1,
.box-step-main p {
  will-change: transform, opacity;
}
.navigation-menu {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  z-index: 2100;
  top: 0;
  pointer-events: none;
  visibility: hidden;
  left: 0;
  display: none !important;
}
@media (max-width: 800px) and (orientation: portrait) {
  .navigation-menu {
    display: block !important;
  }
}
.navigation-menu .menu-navigate-scroll {
  position: absolute;
  top: 20%;
  z-index: 100;
  left: 3%;
}
.navigation-menu .menu-navigate-scroll a {
  position: relative;
  font-family: "Big Shoulders", Impact, sans-serif;
  font-size: 16rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #0d0d0d;
  margin: 0 0 3rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1.05;
  overflow: hidden;
  transition: color 0.3s ease;
}
.navigation-menu .menu-navigate-scroll a .plus-rotates {
  display: none !important; /* SplitText sets an inline display on it */
}
.navigation-menu .menu-navigate-scroll a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.08em;
  width: 1.2em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.navigation-menu .menu-navigate-scroll a:hover,
.navigation-menu .menu-navigate-scroll a:active {
  color: #f5f0eb;
}
.navigation-menu .menu-navigate-scroll a:hover:after,
.navigation-menu .menu-navigate-scroll a:active:after {
  transform: scaleX(1);
}
.navigation-menu .menu-navigate-scroll a[aria-disabled="true"] {
  opacity: 0.45;
  color: #0d0d0d !important;
}
.navigation-menu .menu-navigate-scroll a[aria-disabled="true"]:after {
  display: none;
}
.plus-rotates.active {
  transform: scale(1.1) rotate(180deg);
}
.active-link-navigate {
  font-family: inherit;
}
/* Llamas details not yet provided (email, social profiles): hidden until filled in */
.llamas-pending {
  display: none !important;
}
.bottom-contact-ctas {
  position: absolute;
  bottom: 10%;
  left: 3%;
}
.bottom-contact-ctas .head-cta {
  font-size: 5rem;
}
.bottom-contact-ctas .head-cta a {
  text-decoration: none;
  color: #000;
  margin-top: -5rem;
}
.gapss {
  width: 100%;
  display: flex;
}
.gapss a {
  margin-right: 7rem;
}
.mailss {
  margin-top: -5rem;
}
.gapss-1 {
  display: flex;
  flex-direction: column-reverse;
}
.gapss-1 a {
  text-decoration: underline;
}
.menu-2-bar {
  position: fixed;
  top: 3%;
  right: 6%;
  opacity: 0;
  width: 82px;
  pointer-events: none;
  height: 82px;
  z-index: 2200;
  display: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .menu-2-bar {
    display: block !important;
  }
}
.line-m {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82px;
  height: 1.5px;
  background: #fff;
  transform-origin: center center;
}
.line-1 {
  transform: translate(-50%, -8px);
}
.line-2 {
  transform: translate(-50%, 8px);
}
.menu-navigate-scroll a,
.bottom-contact-ctas .head-cta p,
.bottom-contact-ctas .head-cta a {
  overflow: hidden;
  position: relative;
  z-index: 100;
}
.menu-navigate-scroll a span,
.bottom-contact-ctas .head-cta p span,
.bottom-contact-ctas .head-cta a span {
  display: inline-block;
  will-change: transform, filter, opacity;
  z-index: 100;
}
.bars-overlays {
  position: absolute;
  top: 0;
  pointer-events: none;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}
.bar-bgs {
  transform: scaleX(0);
  transform-origin: right center;
  height: 100%;
  background-color: #900;
  width: 100vw;
  position: relative;
  z-index: 10;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
html {
  scrollbar-width: none;
}
body {
  -ms-overflow-style: none;
}
.three-container {
  width: 100%;
  z-index: 0;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  mix-blend-mode: screen;
}
@media (max-width: 800px) and (orientation: portrait) {
  .three-container {
    display: none !important;
  }
}
.three-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cinematic-text {
  overflow: hidden;
}
.cinematic-text .word {
  display: inline-block;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.date-about-project {
  width: 100%;
}
.date-about-project p {
  font-size: 1.5rem;
  color: #fff;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .date-about-project p {
    font-size: 4rem;
    margin-top: 2rem;
  }
}
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem 0;
}
.project-tags span {
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: #ffffff0a;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: 0.35s ease;
}
@media (max-width: 800px) and (orientation: portrait) {
  .project-tags span {
    padding: 1rem 2.5rem;
    font-size: 2.75rem;
  }
}
.project-tags span:hover {
  background: #fff;
  color: #111;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .gallery-grid {
    gap: 3rem;
  }
}
.gallery-item {
  overflow: hidden;
  border-radius: 1px;
}
.gallery-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: 0.8s ease;
}
@media (max-width: 800px) and (orientation: portrait) {
  .gallery-item img {
    width: 95%;
  }
}
.gallery-item:hover img {
  transform: scale(1.05);
}
@media (max-width: 800px) and (orientation: portrait) {
  .gallery-item:hover img {
    transform: scale(1) !important;
  }
}
body.sidebar-open .case-study-side-bar {
  overflow-y: auto;
  pointer-events: auto;
}
body.sidebar-open {
  overflow: hidden;
}
.gallery-section h3 {
  font-size: 3rem;
  color: #fff;
  font-weight: 100;
  font-family: light-font;
}
@media (max-width: 800px) and (orientation: portrait) {
  .gallery-section h3 {
    font-size: 7rem;
    margin-top: 2rem;
  }
}
.project-role {
  margin-top: 4rem;
  padding-top: 2rem;
  margin-bottom: 5.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.section-heading {
  margin-bottom: 1.5rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .section-heading {
    margin-bottom: 2.5rem;
  }
}
.section-heading span {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #ffffff73;
}
@media (max-width: 800px) and (orientation: portrait) {
  .section-heading span {
    font-size: 3rem;
    margin-bottom: 3rem;
  }
}
.role-list li {
  position: relative;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
  font-family:
    Bebas Neue,
    sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  list-style: none;
  text-decoration: none;
}
@media (max-width: 800px) and (orientation: portrait) {
  .role-list li {
    font-size: 2.35rem;
    margin-bottom: 1rem;
  }
}
.role-list li:before {
  content: "";
  position: absolute;
  left: -5%;
  top: 50%;
  text-decoration: none;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3csvg%20width='21'%20height='22'%20viewBox='0%200%2021%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%2011.8077V10.1923H9.69231V0.5H11.3077V10.1923H21V11.8077H11.3077V21.5H9.69231V11.8077H0Z'%20fill='white'/%3e%3c/svg%3e")
    center/contain no-repeat;
}
.view-project-btn {
  margin-top: 4rem;
  width: 100%;
  height: 70px;
  font-family: light-font;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #ffffff08;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-decoration: none;
  color: #fff;
  transition: 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  position: relative;
}
.view-project-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(100%);
  transition: 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}
.view-project-btn span {
  position: relative;
  z-index: 2;
}
.btn-text {
  font-family:
    Bebas Neue,
    sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.view-project-btn:hover {
  color: #111;
}
.view-project-btn:hover:before {
  transform: translateY(0);
}
.view-project-btn:hover .btn-icon {
  transform: translate(8px, -8px) rotate(45deg);
}
@media (max-width: 800px) and (orientation: portrait) {
  .role-list {
    margin-bottom: 20.2rem !important;
  }
  .role-list li {
    font-family: regular-font;
    font-size: 3.9rem;
    margin-left: -5rem;
    margin-bottom: 3.2rem !important;
  }
  .view-project-btn {
    height: 60px;
    font-size: 3.5rem;
    padding: 0 1.2rem;
  }
}
.bg-vid {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  object-fit: cover;
}
.bg-vid video {
  width: 100%;
  height: 100%;
}
#fluid2 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  cursor: none;
  pointer-events: none;
  left: 0;
  opacity: 0.6;
  z-index: 400;
}
@media (max-width: 800px) and (orientation: portrait) {
  #fluid2 {
    display: none !important;
  }
}
.container-showreel-pixel {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: light-font;
  overflow: hidden;
  position: relative;
}
.container-showreel-pixel .centered-reel {
  height: 80vh;
  left: 50%;
  top: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 65vw;
  perspective: 2000px;
}
@media (max-width: 800px) and (orientation: portrait) {
  .container-showreel-pixel .centered-reel {
    height: 95vh;
    width: 93vw;
    border-radius: 0.5rem;
  }
}
.container-showreel-pixel .centered-reel video {
  transform-style: preserve-3d;
  transform: rotateY(0) rotateX(0);
  width: 100%;
  height: 100%;
  scale: 0.5;
  object-fit: cover;
}
.words-left {
  position: absolute;
  top: 17%;
  left: 6%;
  mix-blend-mode: difference;
  display: flex;
  z-index: 10;
  flex-direction: column;
  transform: translateY(-50%);
}
.words-left span {
  font-size: 7rem;
  color: #fff;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.09rem;
}
.words-left span:nth-child(2) {
  font-size: 2rem;
  opacity: 0.3;
}
@media (max-width: 800px) and (orientation: portrait) {
  .words-left {
    display: none !important;
  }
}
.words-right {
  position: absolute;
  top: 83%;
  mix-blend-mode: difference;
  right: 6%;
  display: flex;
  z-index: 10;
  flex-direction: column;
  transform: translateY(-50%);
}
.words-right span {
  font-size: 2rem;
  color: #fff;
  opacity: 0.3;
  text-align: end;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.09rem;
}
.words-right span:nth-child(2) {
  font-size: 7rem;
  opacity: 1;
}
@media (max-width: 800px) and (orientation: portrait) {
  .words-right {
    display: none !important;
  }
}
.reel-ctas {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 10;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: ruthie;
  font-size: 2.5rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 10rem;
  bottom: 50%;
  overflow: hidden;
  transform: translate(-50%, 50%);
  transform-style: preserve-3d;
  will-change: transform, left, top;
  color: #f3f3f3;
  border: 0.5px solid rgba(255, 255, 255, 0.4470588235);
}
@media (max-width: 800px) and (orientation: portrait) {
  .reel-ctas {
    width: 120px;
    border-radius: 30rem;
    font-size: 6.5rem;
    height: 120px;
  }
}
.label {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  will-change: transform, opacity;
}
.current {
  transform: translateY(0);
}
.next {
  transform: translateY(120%);
}
.words-left,
.words-right,
.words-left span,
.words-right span,
.centered-reel video {
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.reel-ctas {
  transform-style: preserve-3d;
  will-change: transform;
}
.moving-out {
  top: 35% !important;
}
.blog-heading .word,
.blog-para .word {
  display: inline-block;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform: translateY(120%);
  filter: blur(10px);
  opacity: 0;
}
.cta-connect {
  width: fit-content;
  height: fit-content;
  position: fixed;
  right: 2%;
  bottom: 10%;
  display: flex;
  opacity: 0;
  z-index: 1000;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(230, 225, 225, 0.486);
  color: #f1f1f1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (max-width: 800px) and (orientation: portrait) {
  .cta-connect {
    padding: 1.5rem 2rem;
    border: 1px solid rgba(230, 225, 225, 0.27);
  }
}
.cta-connect .icon {
  margin-right: 1rem;
  width: 2vw;
  height: 3.6vh;
  position: relative;
  overflow: hidden;
  background: #000;
}
@media (max-width: 800px) and (orientation: portrait) {
  .cta-connect .icon {
    width: 11vw;
    height: 5vh;
    margin-right: 2rem;
  }
}
.cta-connect .icon:before {
  content: "";
  position: absolute;
  inset: -100%;
  background: linear-gradient(135deg, #000, #120000, #900, #200, #000);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
}
.cta-connect .icon img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}
.cta-connect:hover {
  border: 1px solid rgba(221, 8, 8, 0.486);
  background-color: #cf0808;
  color: #000;
}
.live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .live {
    font-size: 2.8rem;
  }
}
.dots {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 32%;
  top: 16%;
  border-radius: 50%;
  background: #0f0f0f;
  animation: liveBlink 1.5s infinite ease-in-out;
}
@media (max-width: 800px) and (orientation: portrait) {
  .dots {
    width: 8px;
    height: 8px;
    top: 20%;
  }
}
@keyframes liveBlink {
  0% {
    background: #0c0c0c;
    box-shadow: 0 0 #111111b3;
    transform: scale(0.8);
  }
  50% {
    background: #ff2b2b;
    box-shadow: 0 0 0 8px #ff2b2b00;
    transform: scale(1);
  }
  to {
    background: #111;
    box-shadow: 0 0 #00ff4c00;
    transform: scale(0.8);
  }
}
.live-2 {
  font-size: 1.1rem;
}
@media (max-width: 800px) and (orientation: portrait) {
  .live-2 {
    font-size: 4.2rem;
  }
}
.icon img,
.live,
.live-2 {
  clip-path: inset(0% 0 0 0);
}
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
}
.custom-cursor img {
  width: 100%;
  height: 100%;
  display: block;
  transform: translate(-20px, -20px);
  object-fit: contain;
}
@media (max-width: 800px) and (orientation: portrait) {
  .custom-cursor {
    display: none !important;
  }
}
.image-slideshow {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
}
.image-slideshow .image-slider {
  overflow: hidden;
  height: 20vh;
  width: 10vw;
  opacity: 0;
  will-change: transform, opacity;
  right: 0;
  position: absolute;
}
.image-slideshow .image-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cinematic-title {
  perspective: 1000px;
}
.cinematic-title .title-letter {
  display: inline-block;
  will-change: transform, opacity;
}
.regonizations {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #090909;
}
.regonizations:before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 20% 30%, #990000 0%, transparent 35%),
    radial-gradient(circle at 30% 20%, #440004 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, #990000 0%, transparent 35%), #090909;
  filter: blur(50px);
  animation: regFluidGradient 12s ease-in-out infinite alternate;
  z-index: 0;
}
.regonizations > * {
  position: relative;
  z-index: 1;
}
@keyframes regFluidGradient {
  0% {
    transform: translate3d(-5%, -3%, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, 5%, 0) scale(1.08);
  }
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.15);
  }
}
.split-container-main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.split-panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.split-panel-left {
  left: 0;
  background-color: #000;
  justify-content: flex-end;
}
.split-panel-right {
  right: 0;
  background-color: #000;
  justify-content: flex-start;
}
.split-content {
  position: absolute;
  width: 200%;
  top: 50%;
  transform: translateY(-50%);
}
.split-panel-left .split-content {
  right: -100%;
}
.split-panel-right .split-content {
  left: -100%;
}
.split-content h2 {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 13rem;
  font-weight: 100;
  line-height: 0.85;
  color: #900;
  white-space: nowrap;
}
.regonizations-canvas {
  position: absolute;
  width: 100vw;
  inset: 0;
  height: 100vh;
  pointer-events: auto;
}
.regonizations-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.split-panel-right p {
  position: absolute;
  width: 60%;
  right: auto;
  bottom: 15%;
  transform: translate(-50%);
  margin: 0;
  font-size: 1.2rem;
  color: #900;
  line-height: 1;
  text-align: center;
}
@media (max-width: 800px) and (orientation: portrait) {
  .split-panel-right p {
    width: 100%;
    bottom: 35%;
    font-size: 3.5rem;
  }
}
.split-panel-left p {
  position: absolute;
  width: 60%;
  left: 100%;
  bottom: 15%;
  transform: translate(-50%);
  margin: 0;
  font-size: 1.2rem;
  color: #900;
  line-height: 1;
  text-align: center;
}
@media (max-width: 800px) and (orientation: portrait) {
  .split-panel-left p {
    width: 100%;
    bottom: 35%;
    font-size: 3.5rem;
  }
}