@import url("https://fonts.googleapis.com/css2?family=Allura&family=Syncopate:wght@400;700&family=Tangerine:wght@700&display=swap");
html,
body {
  height: 100%;
  width: 100%;
  scrollbar-width: none;
  padding: 0;
  margin: 0;
  background: #000;
}

::-webkit-scrollbar {
  width: 0px;
}

#scrollPath {
  position: fixed;
  background-color: rgb(0, 0, 0);
  box-shadow: -2px 0px 5px rgb(0, 0, 0);
  z-index: 999;
  right: 0px;
  width: 5px;
  height: 100%;
  right: 0px;
}

#progressbar {
  position: fixed;
  z-index: 1000;
  transition: 1000ms;
  top: 0px;
  right: 0;
  width: 5px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.25);
  height: 0%;
  background: rgb(255, 255, 255);
}

.containSeparator {
  width: calc(100% - 5px);
  height: 16px;
  background: rgb(0, 0, 0);
  position: relative;
}
.containSeparator .separator {
  background: white;
  box-shadow: 0px 0px 2px white;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
  height: 1px;
  margin: 0;
}


.navbar {
  padding: 0px 0px;
  position: fixed;
  z-index: 1000;
  width: calc(100% - 5px);
}
.navbar .navbar-nav {
  position: absolute;
  right: 0;
  width: 100%;
  justify-content: center;
}
.navbar .navbar-nav .nav-item {
  color: rgb(148, 148, 148);
  background: transparent;
  margin-left: 65px;
  box-shadow: 0px -2px 0px rgb(255, 255, 255);
  border: 1px solid transparent;
  transition: 500ms;
  outline: none;
  position: relative;
}
.navbar .navbar-nav .nav-item .spans_container {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.navbar .navbar-nav .nav-item .spans_container span:nth-child(1) {
  position: absolute;
  top: 0%;
  left: -100%;
  height: 10px;
  width: 100%;
  background-image: linear-gradient(90deg, transparent, rgb(255, 255, 255));
}
.navbar .navbar-nav .nav-item .spans_container span:nth-child(2) {
  position: absolute;
  right: 0%;
  top: -100%;
  height: 100%;
  width: 10px;
  background-image: linear-gradient(180deg, transparent, rgb(255, 255, 255));
}
.navbar .navbar-nav .nav-item .spans_container span:nth-child(3) {
  position: absolute;
  bottom: 0%;
  right: -100%;
  height: 10px;
  width: 100%;
  background-image: linear-gradient(90deg, rgb(255, 255, 255), transparent);
}
.navbar .navbar-nav .nav-item .spans_container span:nth-child(4) {
  position: absolute;
  left: 0%;
  bottom: -100%;
  height: 100%;
  width: 10px;
  background-image: linear-gradient(180deg, rgb(255, 255, 255), transparent);
}
.navbar .navbar-nav .nav-item .wing {
  position: absolute;
  text-shadow: 10px 10px white;
  width: 50px;
  top: -6px;
  -webkit-filter: drop-shadow(0px 0px 2px rgb(255, 255, 255));
  filter: drop-shadow(0px 0px 2px rgb(255, 255, 255));
  transition: 500ms;
  pointer-events: none;
}
.navbar .navbar-nav .nav-item .left_wing {
  left: -52px;
  transform: translate(0, 50px) rotate(-90deg);
}
.navbar .navbar-nav .nav-item .right_wing {
  right: -52px;
  transform: translate(0, 50px) rotate(90deg);
}
.navbar .navbar-nav .nav-item::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.999);
  height: 1px;
  width: 0%;
  left: 10%;
  bottom: 2px;
  transition: 250ms;
}
.navbar .navbar-nav .nav-item .white {
  display: block;
  opacity: 0;
  transition: 500ms;
}
.navbar .navbar-nav .nav-item:hover {
  background: transparent;
  box-shadow: 0px -2px 0px rgb(255, 255, 255);
}
.navbar .navbar-nav .nav-item:hover .spans_container span:nth-child(1) {
  left: 100%;
  transition-duration: 150ms;
}
.navbar .navbar-nav .nav-item:hover .spans_container span:nth-child(2) {
  top: 100%;
  transition-duration: 150ms;
  transition-delay: 150ms;
}
.navbar .navbar-nav .nav-item:hover .spans_container span:nth-child(3) {
  right: 100%;
  transition-duration: 150ms;
  transition-delay: 300ms;
}
.navbar .navbar-nav .nav-item:hover .spans_container span:nth-child(4) {
  bottom: 100%;
  transition-duration: 150ms;
  transition-delay: 450ms;
}
.navbar .navbar-nav .nav-item:hover .wing {
  transform: translate(0, 0);
}
.navbar .navbar-nav .nav-item:hover .right_wing {
  animation: wings_animated2 3000ms linear infinite;
}
@keyframes wings_animated2 {
  0% {
    transform: rotate(0) skew(0) skewY(0) skewX(0) translate(0, 0);
  }
  25% {
    transform: rotate(-5deg) skew(0) skewY(0) skewX(0) translate(0px, -2px);
  }
  50% {
    transform: rotate(-10deg) skew(0) skewY(0) skewX(0) translate(0px, -3px) scale(1.05);
  }
  75% {
    transform: rotate(-15deg) skew(0) skewY(0) skewX(0) translate(-2px, -6px);
  }
  100% {
    transform: rotate(0) skew(0) skewY(0) skewX(0) translate(0, 0);
  }
}
.navbar .navbar-nav .nav-item:hover .left_wing {
  animation: wings_animated1 3000ms linear infinite;
}
@keyframes wings_animated1 {
  0% {
    transform: rotate(0) skew(0) skewY(0) skewX(0) translate(0, 0);
  }
  25% {
    transform: rotate(5deg) skew(0) skewY(0) skewX(0) translate(0px, -2px);
  }
  50% {
    transform: rotate(9deg) skew(0) skewY(0) skewX(0) translate(-1px, -3px) scale(1.06);
  }
  75% {
    transform: rotate(15deg) skew(0) skewY(0) skewX(0) translate(2px, -6px);
  }
  100% {
    transform: rotate(0) skew(0) skewY(0) skewX(0) translate(0, 0);
  }
}
.navbar .navbar-nav .nav-item:hover .black {
  opacity: 1;
}
.navbar .navbar-nav .nav-item:hover .white {
  opacity: 1;
}
.navbar .navbar-nav .nav-item:hover > .nav-link {
  color: white;
  background: rgba(0, 0, 255, 0);
}
.navbar .navbar-nav .nav-item:hover::after {
  width: 80%;
}
.navbar .navbar-nav .nav-item .nav-link {
  padding: 1px 12px;
  transition: 250ms;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0px 0px 3px rgb(255, 255, 255), 0px 0px 10px rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
}

#canvasBezier {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.water {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: calc(100% - 5px);
  z-index: 1;
  pointer-events: none;
}
.water img {
  opacity: 0.05;
  pointer-events: none;
}
.water canvas {
  pointer-events: none;
}

.indexAboveWater {
  z-index: 2;
}

.centerFlex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.fullscreen {
  width: 100%;
  height: 100%;
}

.backgroundBlack {
  background: black;
}

.bgHalf {
  opacity: 0.15;
}

.fitMeH {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.fitMeW {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.weird2 {
  cursor: pointer;
  position: relative;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: rgba(255, 255, 255, 0.75);
  padding: 5px 30px;
  transition: 250ms;
  border-radius: 5px;
  box-shadow: 0px 0px 3px white;
}
.weird2 i {
  color: white;
  text-shadow: 0px 0px 3px white;
}
.weird2:hover {
  color: white;
  border: 1px solid white;
}

.containSuccessMessage {
  position: relative;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  outline: 1px solid white;
  box-shadow: 0px 0px 3px white;
}
.containSuccessMessage h1 {
  color: white;
  margin: 0;
  text-shadow: 0px 0px 3px white;
  font-size: 16px;
  padding: 20px 30px;
}
.containSuccessMessage .weird {
  padding-bottom: 10px;
}
.containSuccessMessage h2 {
  font-size: 12px;
}
.containSuccessMessage hr {
  color: rgb(255, 255, 255);
  width: 80%;
  box-shadow: 0px 0px 3px white;
}
.containSuccessMessage br {
  display: block;
  line-height: 15px;
}

.home-a {
  background: url("/images/landing_page/profile_mercury.jpg") center center/cover no-repeat;
  background-position: 0vh;
  height: calc(100vh + 1px);
  width: calc(100% - 5px);
  right: 4px;
  /* center the tagline+crest+wordmark lockup in the SAFE BAND between the
     navbar (top) and the FOLLOW ME pill (bottom) — border-box keeps the hero
     at exactly 100vh with both paddings carved out inside it */
  box-sizing: border-box;
  padding-top: 80px;
  padding-bottom: 150px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid white;
}
.home-a h5 {
  color: white;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 0);
  text-shadow: 0px 0px 3px white;
  animation: blinkText 3000ms infinite;
  font-size: 15px;
  opacity: 0;
  transition: 1000ms;
}
@keyframes blinkText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.home-a .background_wings {
  transform: translateY(0%);
  position: relative;
  z-index: 4;
  width: 75%;
  background-size: 90% 90%;
  display: flex;
  align-content: center;
  justify-content: center;
}
.home-a .background_wings .images_logo {
  opacity: 1;
  top: 3.5px;
  position: relative;
  width: 90%;
  height: 90%;
}
.home-a .background_wings .images_logo img {
  cursor: pointer;
  position: absolute;
  -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.85));
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.85));
  transition: ease-in 3000ms;
  transform: translate(0, 0) rotate(0deg) scale(1) skewX(0deg) skewY(0deg);
}
@keyframes hoverScale {
  from {
    transform: translate(0, 0) rotate(0deg) scale(1) skewX(0deg) skewY(0deg);
  }
  to {
    transform: translate(0, 0) rotate(0deg) scale(1.1) skewX(0deg) skewY(0deg);
  }
}
@keyframes hoverScaleOut {
  from {
    transform: translate(0, 0) rotate(0deg) scale(1.1) skewX(0deg) skewY(0deg);
  }
  to {
    transform: translate(0, 0) rotate(0deg) scale(1) skewX(0deg) skewY(0deg);
  }
}
@keyframes wingLand {
  to {
    transform: translate(0, 0) rotate(0deg) scale(1) skewX(0deg) skewY(0deg);
  }
}
.home-a .background_wings .images_logo .wing_left_top {
  position: absolute;
  transform: translate(100vw, -50vh) rotate(90deg) scale(2) skewX(30deg);
  top: 0;
  left: 0;
  width: 40.75%;
}
.home-a .background_wings .images_logo .wing_left_middle {
  position: absolute;
  transform: translate(100vw, 0vh) rotate(60deg) scale(2) skewX(30deg);
  width: 36.12%;
  left: 6.5%;
  top: 28%;
}
.home-a .background_wings .images_logo .wing_left_bottom {
  position: absolute;
  transform: translate(100vw, 30vh) rotate(80deg) scale(2) skewX(40deg) skewY(60deg);
  width: 34%;
  top: 59.2%;
  left: 10.35%;
}
.home-a .background_wings .images_logo .wing_right_top {
  position: absolute;
  transform: translate(-200vw, 10vh) rotate(100deg) scale(3) skewX(30deg) skewY(50deg);
  top: 0;
  right: 0;
  width: 40.75%;
}
.home-a .background_wings .images_logo .wing_right_middle {
  position: absolute;
  transform: translate(100vw, -50vh) rotate(80deg) skewX(50deg);
  width: 36.12%;
  right: 6.5%;
  top: 28%;
}
.home-a .background_wings .images_logo .wing_right_bottom {
  position: absolute;
  transform: translate(-100vw, 75vh) rotate(100deg) skewY(40deg);
  width: 34%;
  top: 59.2%;
  right: 10.35%;
}
.home-a .background_wings .images_logo .tip_right_small {
  position: absolute;
  transform: translate(100vw, -90vh) rotate(100deg) scale(2) skewY(60deg);
  width: 3.131%;
  right: 29.4%;
  bottom: 7.9%;
}
.home-a .background_wings .images_logo .tip_right_medium {
  position: absolute;
  transform: translate(-100vw, 80vh) rotate(100deg) scale(2) skewX(60deg);
  width: 2.91%;
  right: 34%;
  bottom: 2%;
}
.home-a .background_wings .images_logo .tip_right_large {
  position: absolute;
  transform: translate(0, 100vh) rotate(90deg) skewY(40deg);
  width: 7.5302%;
  bottom: 0;
  right: 38.122%;
}
.home-a .background_wings .images_logo .tip_left_small {
  position: absolute;
  transform: translate(100vw, -100vh) rotate(80deg) scale(2) skewX(40deg) skewY(30deg);
  width: 3.131%;
  left: 29.4%;
  bottom: 7.9%;
}
.home-a .background_wings .images_logo .tip_left_medium {
  position: absolute;
  transform: translate(-50vw, -100vh) rotate(80deg) skewX(40deg) skewY(30deg);
  width: 2.91%;
  left: 34%;
  bottom: 2%;
}
.home-a .background_wings .images_logo .tip_left_large {
  position: absolute;
  transform: translate(100vw, 100vh) scale(2) skewX(180deg) skewY(40deg);
  width: 7.5302%;
  bottom: 0;
  left: 38.122%;
}
.home-a .background_wings .images_logo .v_left {
  position: absolute;
  transform: translate(-100px, 100vh) rotate(30deg);
  width: 8.9216%;
  top: 24%;
  right: 50%;
}
.home-a .background_wings .images_logo .v_right {
  position: absolute;
  transform: translate(100px, -100vh) rotate(30deg);
  left: 50%;
  width: 8.9216%;
  top: 24%;
}
.home-a .landingPageText {
  position: relative;
  margin-top: 110px;
  text-align: center;
  z-index: 4;
  opacity: 0;
  transition: all 3000ms ease;
}
.home-a .landingPageText svg {
  position: relative;
  overflow: visible;
  height: 200px;
  bottom: 0px;
  transition: 1000ms;
}
.home-a .landingPageText svg path {
  -webkit-filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
  filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
  position: relative;
  transition: 3000ms ease-in;
  stroke-width: 0.5px;
  fill: white;
  stroke: rgb(255, 255, 255);
  opacity: 0;
}
.home-a .landingPageText h2 {
  padding: 0;
  margin: 0;
  color: rgb(255, 255, 255);
}
.home-a .landingPageText h2 {
  font-size: 20px;
  position: relative;
  font-family: "Tangerine";
  top: 50px;
}
.home-a .landingPageText .sub_text {
  letter-spacing: 0px;
  text-shadow: 0px 0px 1px white;
  transition: 1000ms;
}



.bg-navbar {
  background-color: rgba(0, 0, 0, 0);
}


.hiddenOverflow {
  overflow: hidden;
}

.title_section {
  position: absolute;
  cursor: default;
  z-index: 4;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.title_section h1,
.title_section h2 {
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  font-size: 15px;
  text-align: center;
  font-weight: 700;
  padding: 0px 10px;
  margin: 0px;
  position: relative;
  z-index: 4;
}
.title_section div {
  background: black;
  border: 2px solid white;
  position: absolute;
  top: 0%;
  left: 50%;
  height: 35px;
  width: 35px;
  z-index: 1;
  box-shadow: 0px 0px 3px white;
}
.title_section .rightTriangle {
  transform: translate(-50%, -50%) rotate(45deg) translateX(60px) translateY(-60px);
}
.title_section .leftTriangle {
  transform: translate(-50%, -50%) rotate(-45deg) translateX(-60px) translateY(-60px);
}
.title_section .leftTriangle2 {
  transform: translate(-50%, -50%) rotate(-45deg) translateX(-50px) translateY(-50px);
}
.title_section .rightTriangle2 {
  transform: translate(-50%, -50%) rotate(-45deg) translateX(50px) translateY(50px);
}
.title_section .centeredRectangle {
  width: 135px;
  height: 21px;
  border: none;
  box-shadow: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  background: rgb(0, 0, 0);
  transform: translate(-50%, 0%);
  -webkit-box-shadow: 0 2px 3px -2px #ffffff;
  -moz-box-shadow: 0 2px 3px -2px #ffffff;
  box-shadow: 0 2px 3px -2px #ffffff;
}

.parentJob {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  position: relative;
  height: 165px;
  width: calc(100% - 5px);
  background: rgb(0, 0, 0);
}
.parentJob .containJob {
  height: 100%;
  transition: 3000ms;
}
.parentJob svg {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  overflow: visible;
  filter: drop-shadow(0px 0px 3px white);
  transition: 500ms;
}
.parentJob svg:nth-child(1) {
  opacity: 1;
}
.parentJob svg:nth-child(2) {
  opacity: 1;
}
.parentJob svg:nth-child(3) {
  opacity: 1;
}
.sliderContainer {
  position: relative;
  background: black;
  height: 75vh;
  width: calc(100% - 5px);
  overflow: hidden;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.sliderContainer .textSectionRoom {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sliderContainer .textSectionRoom h1,
.sliderContainer .textSectionRoom h2 {
  transition: 1000ms;
}
.sliderContainer .textSectionRoom h1,
.sliderContainer .textSectionRoom h2 {
  text-align: center;
  color: rgb(255, 255, 255);
}
.sliderContainer .textSectionRoom h1,
.sliderContainer .textSectionRoom h2 {
  font-size: 10vw;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 5px white;
  cursor: default;
}
.sliderContainer .buttonsForSlides {
  position: absolute;
  z-index: 10;
  bottom: 30px;
  height: 20px;
  width: 200px;
  background: rgba(26, 26, 26, 0.25);
  border: 1px solid white;
  box-shadow: 0px 0px 1px white;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0px;
}
.sliderContainer .buttonsForSlides div {
  width: 0px;
  height: 0px;
  cursor: pointer;
}
.sliderContainer .buttonsForSlides .gbutton {
  position: absolute;
  box-shadow: 0px 0px 2px white;
  top: 50%;
  height: calc(100% - 6px);
  border-radius: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 500ms;
}
.sliderContainer .buttonsForSlides .gbutton:hover {
  opacity: 1;
}
.sliderContainer .buttonsForSlides .g-slide_1 {
  left: 22%;
  width: 30px;
  background: rgb(255, 255, 255);
}
.sliderContainer .buttonsForSlides .g-slide_2 {
  left: 50%;
  width: 30px;
  background: rgb(255, 255, 255);
}
.sliderContainer .buttonsForSlides .g-slide_3 {
  left: 78%;
  width: 30px;
  background: rgb(255, 255, 255);
}
.sliderContainer .buttonsForSlides .active-button {
  width: 10px;
  height: 10px;
  box-shadow: 0px 0px 2px white;
  border-radius: 0px;
  transform: translate(-50%, -50%) rotate(405deg);
  background: rgb(255, 255, 255);
}
.sliderContainer .slide {
  position: absolute;
  transition: 1000ms;
  z-index: 0;
  height: 100%;
  width: 100%;
}
.sliderContainer .slide1 {
  left: -100%;
  top: 0;
  background: url("/images/New Studio Pics/studiooooozakkkk.jpg") center center/cover no-repeat;
}
.sliderContainer .slide2 {
  left: 0;
  top: 0;
  background: url("/images/second.JPG") center center/cover no-repeat;
}
.sliderContainer .slide3 {
  left: 100%;
  top: 0;
  background: url("/images/New Studio Pics/editaudiostudio.jpg") center center/cover no-repeat;
}

.parentHardware {
  position: relative;
  height: 550px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  border-top: 1px solid white;
  width: calc(100% - 5px);
}
.parentHardware .childHardware {
  position: relative;
  width: 100%;
  text-align: center;
}
.parentHardware .childHardware h3 {
  padding: 0;
  margin: 0;
  text-shadow: 0px 0px 3px white;
  color: white;
  font-size: 23px;
}
.parentHardware .childHardware h1 {
  position: relative;
  font-size: 90px;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 10px white;
  cursor: default;
  margin: 0;
}
.parentHardware .childHardware h2 {
  position: relative;
  display: block;
  color: white;
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
  font-size: 20px;
  cursor: default;
}
.parentHardware .childHardware:nth-child(1) {
  background: rgb(0, 0, 0);
}
.parentHardware .childHardware:nth-child(1) svg {
  position: relative;
  height: 90px;
  box-shadow: 0px 0px 3px white;
}
.parentHardware .childHardware:nth-child(1) .speakerLeft {
  right: 50px;
}
.parentHardware .childHardware:nth-child(1) .speakerRight {
  left: 50px;
}
.parentHardware .childHardware:nth-child(2) {
  background: rgb(0, 0, 0);
}
.parentHardware .childHardware:nth-child(3) {
  background: rgb(0, 0, 0);
}
.parentHardware .childHardware:nth-child(3) svg {
  width: 100px;
  height: 100px;
  box-shadow: none;
}
.parentHardware .childHardware:nth-child(3) svg path {
  fill: white;
  filter: drop-shadow(0px 0px 3px white);
}
.parentHardware svg {
  overflow: visible;
  bottom: 0%;
  position: relative;
  height: 225px;
  box-shadow: inset 0px 0px 3px white;
}

.parentSoftware {
  background: rgb(0, 0, 0);
  height: 600px;
  width: calc(100% - 6px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 2px;
}
.parentSoftware .childSoftware {
  position: relative;
  text-align: center;
  overflow: hidden;
  flex-direction: column;
}
.parentSoftware .childSoftware img {
  position: relative;
  transition: 100ms;
  filter: drop-shadow(0px 0px 5px white);
}
.parentSoftware .childSoftware .img1 {
  height: 125px;
  width: 125px;
}
.parentSoftware .childSoftware .img2 {
  top: calc(50% - 70px);
  height: 50px;
  width: 300px;
}
.parentSoftware .childSoftware .img3 {
  height: 125px;
  width: 125px;
}
.parentSoftware .childSoftware h1,
.parentSoftware .childSoftware h2,
.parentSoftware .childSoftware a {
  text-align: center;
  position: relative;
  transition: 100ms;
  z-index: 2;
  cursor: pointer;
  text-shadow: 0px 0px 3px white;
}
.parentSoftware .childSoftware h1,
.parentSoftware .childSoftware h2 {
  color: white;
  cursor: default;
}
.parentSoftware .childSoftware h1 {
  font-size: 23px;
}
.parentSoftware .childSoftware h2 {
  font-size: 15px;
}
.parentSoftware .childSoftware h2,
.parentSoftware .childSoftware a {
  text-shadow: 0px 0px 2px rgb(255, 255, 255);
}
.parentSoftware .childSoftware a {
  color: white;
}
.parentSoftware .childSoftware a:hover {
  color: rgba(255, 255, 255, 0.5);
}

.parentAllEquipment {
  background: rgb(0, 0, 0);
  width: 100%;
  position: relative;
  height: 65px;
  border-bottom: 1px solid white;
}
.parentAllEquipment a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: white;
  padding: 3px 20px;
  padding-left: 21px;
  box-shadow: inset 0px 0px 3px white;
  transition: 500ms;
}
.parentAllEquipment a:hover {
  background: white;
  color: black;
  box-shadow: 0px 0px 3px white;
}
.parentAllEquipment a:hover .button__horizontal {
  width: 0px;
}
.parentAllEquipment a:hover .button__horizontal::after {
  width: 0px;
}
.parentAllEquipment a:hover .button__horizontal::before {
  width: 0px;
}
.parentAllEquipment a:hover .button__vertical {
  height: 0px;
}
.parentAllEquipment a:hover .button__vertical::after {
  height: 0px;
}
.parentAllEquipment a:hover .button__vertical::before {
  height: 0px;
}
.parentAllEquipment a .button__horizontal {
  position: absolute;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: calc(100% + (2 * 5px));
  height: 100%;
  background: rgba(0, 255, 128, 0);
  pointer-events: none;
  box-shadow: 0px 0px 3px white;
  transition: 500ms;
}
.parentAllEquipment a .button__horizontal::after, .parentAllEquipment a .button__horizontal::before {
  box-shadow: 0px 0px 3px white;
}
.parentAllEquipment a .button__horizontal::after {
  content: "";
  height: 1px;
  left: 5px;
  width: calc(100% - (2 * 5px));
  position: absolute;
  top: calc(-1px - 5px);
  background: white;
  transition: 500ms;
}
.parentAllEquipment a .button__horizontal::before {
  content: "";
  height: 1px;
  left: 5px;
  width: calc(100% - (2 * 5px));
  position: absolute;
  bottom: calc(-1px - 5px);
  background: white;
  transition: 500ms;
}
.parentAllEquipment a .button__vertical {
  position: absolute;
  border-left: 1px solid white;
  border-right: 1px solid white;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  height: calc(100% + (2 * 5px));
  width: 100%;
  background: rgba(0, 255, 128, 0);
  pointer-events: none;
  box-shadow: 0px 0px 3px white;
  transition: 500ms;
}
.parentAllEquipment a .button__vertical::after, .parentAllEquipment a .button__vertical::before {
  box-shadow: 0px 0px 3px white;
}
.parentAllEquipment a .button__vertical::after {
  content: "";
  width: 1px;
  left: calc(-1px - 5px);
  height: calc(100% - (2 * 5px));
  position: absolute;
  top: calc(5px);
  background: white;
  transition: 500ms;
}
.parentAllEquipment a .button__vertical::before {
  content: "";
  width: 1px;
  right: calc(-1px - 5px);
  height: calc(100% - (2 * 5px));
  position: absolute;
  top: calc(5px);
  background: white;
  transition: 500ms;
}

.parentPW {
  position: relative;
  width: calc(100% - 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  flex-direction: column;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
}
.parentPW .first_work {
  margin-top: 30px;
}
.parentPW .second_work {
  margin-top: 0;
}
.parentPW .gs {
  filter: none;
}


.backgroundImg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
}
.backgroundImg img {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  height: 100%;
}

.translucent {
  opacity: 1;
}

.parentForm {
  position: relative;
  padding-top: 40px;
  background: rgb(0, 0, 0);
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
.parentForm .invisible {
  opacity: 0;
  position: absolute;
}
.parentForm .firsth6 {
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .firstlinebreak {
  background: rgb(255, 255, 255) !important;
  box-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .secondh6 {
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .secondlinebreak {
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .bringup {
  z-index: 4 !important;
}
.parentForm h6 {
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
  margin: 20px 0px;
  color: rgb(255, 255, 255);
  text-align: center;
  z-index: 4;
}
.parentForm .noMargin {
  margin-top: 0;
}
.parentForm .line-break {
  height: 1px;
  width: 80%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.parentForm .genericInputsContainer {
  position: relative;
  height: 420px;
}
.parentForm .genericInputsContainer .containTextArea {
  position: relative;
  width: 100%;
  height: 130px;
}
.parentForm .genericInputsContainer .containTextArea textarea {
  position: absolute;
  outline: none;
  background: rgba(0, 0, 0, 0);
  padding: 0px 5px;
  border: 1px solid white;
  color: white;
  text-shadow: 0px 0px 0px white;
  width: 300px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 250ms;
  box-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .genericInputsContainer .containTextArea textarea[isfocused=yes] {
  border: 1px solid rgb(255, 255, 255);
  box-shadow: 0px 0px 3px rgba(255, 255, 255, 0);
}
.parentForm .genericInputsContainer .containTextArea textarea[isfocused=yes]::placeholder {
  position: relative;
  z-index: 10;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
  opacity: 1; /* Firefox */
}
.parentForm .genericInputsContainer .containTextArea textarea[isfocused=yes]:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .genericInputsContainer .containTextArea textarea[isfocused=yes]::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(255, 255, 255);
}
.parentForm .genericInputsContainer .containTextArea textarea::placeholder {
  position: relative;
  z-index: 10;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0);
  opacity: 1; /* Firefox */
}
.parentForm .genericInputsContainer .containTextArea textarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(255, 0, 0);
  text-shadow: 0px 0px 3px red;
}
.parentForm .genericInputsContainer .containTextArea textarea::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgb(255, 0, 0);
  text-shadow: 0px 0px 3px red;
}
.parentForm .genericInputsContainer .containInputSubmit {
  position: relative;
  height: 40px;
}
.parentForm .genericInputsContainer .containInputSubmit input {
  position: absolute;
  outline: none;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(0, 0, 0);
  text-shadow: 0px 0px 0px rgb(255, 255, 255);
  box-shadow: 0px 0px 1px rgb(255, 255, 255);
  padding: 3px 20px;
  padding-top: 0px;
  color: rgb(255, 255, 255);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: not-allowed;
  opacity: 1;
  transition: 0ms;
}
.parentForm .genericInputsContainer .containInputSubmit input[iscomplete=yes] {
  cursor: pointer;
  border: 1px solid white;
  box-shadow: 0px 0px 3px rgba(255, 255, 255, 0);
  color: white;
}
.parentForm .genericInputsContainer .containInputSubmit input[iscomplete=yes]:hover {
  text-shadow: 0px 0px 3px rgb(250, 250, 250);
}
.parentForm .genericInputsContainer .containerAll {
  height: 60px;
  position: relative;
  z-index: 2;
}
.parentForm .genericInputsContainer .containerAll label {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 45px;
  width: 300px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.parentForm .genericInputsContainer .containerAll label .line {
  width: 100%;
  left: -1000%;
  height: 1px;
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px rgb(255, 255, 255);
  position: absolute;
  bottom: 1px;
  transition: 300ms;
}
.parentForm .genericInputsContainer .containerAll label .spans_container {
  height: 30px;
  width: 100%;
  pointer-events: none;
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0px;
  transition: 300ms;
  overflow: hidden;
}
.parentForm .genericInputsContainer .containerAll label .spans_container span {
  position: absolute;
  height: 1px;
  width: 100%;
  filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
}
.parentForm .genericInputsContainer .containerAll label .spans_container span:nth-child(1) {
  bottom: 0px;
  left: -85%;
  background: linear-gradient(to right, transparent, rgb(255, 255, 255), transparent);
  animation: span1 1000ms infinite alternate-reverse;
  animation-delay: 0ms;
}
@keyframes span1 {
  from {
    left: -85%;
  }
  to {
    left: 85%;
  }
}
.parentForm .genericInputsContainer .containerAll label h3 {
  position: absolute;
  z-index: 1;
  left: 10px;
  transform: translate(0%, 0);
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 2px rgb(255, 255, 255);
  font-size: 15px;
  margin: 0;
  bottom: 4px;
  pointer-events: none;
  transition: 300ms;
}
.parentForm .genericInputsContainer .containerAll label input {
  position: absolute;
  color: rgb(255, 255, 255);
  box-shadow: 0px 0px 0.5px white;
  text-shadow: 0px 0px 0px white;
  background: transparent;
  z-index: 3;
  padding: 2px 3px;
  outline: none;
  left: 0px;
  bottom: 0px;
  height: 30px;
  width: 100%;
  border: solid white 1px;
}
.parentForm .genericInputsContainer .containerAll label input[isfocused=yes] ~ h3 {
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 2px rgb(255, 255, 255);
  bottom: 30px;
  transform: translate(0, 0);
  left: 0px;
  font-size: 15px;
}
.parentForm .genericInputsContainer .containerAll label input[isfocused=yes] ~ .line {
  left: 0;
}
.parentForm .check_buttons_containers {
  position: relative;
  left: 0;
  width: 100%;
  height: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.parentForm .check_buttons_containers .check_button {
  position: relative;
  bottom: 0px;
  cursor: pointer;
  padding: 0px 10px;
  box-shadow: 0px 0px 10px rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.75);
  margin: 0px 40px;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgb(0, 0, 0);
  font-weight: 700;
  display: inline-block;
  transition: 500ms;
}
.parentForm .check_buttons_containers .check_button[isselected=yes] {
  margin: 30px 40px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 10px rgb(255, 255, 255);
  color: white;
  text-shadow: 2px 2px 2px black;
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .radio_button {
  background: white;
  box-shadow: 0px 0px 3px black;
}
.parentForm .check_buttons_containers .check_button[isselected=yes] h4 {
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(0, 0, 0);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span {
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 3px rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(1) {
  top: -30%;
  right: -65px;
  height: 25%;
  width: 60px;
  transform: skewX(-35deg) rotate(-15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(2) {
  top: 6%;
  right: -48px;
  height: 25%;
  width: 44px;
  transform: skewX(-35deg) rotate(-15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(3) {
  top: 37%;
  right: -33px;
  height: 25%;
  width: 30px;
  transform: skewX(-35deg) rotate(-15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(4) {
  top: 71%;
  right: -19px;
  height: 25%;
  width: 17px;
  transform: skewX(-35deg) rotate(-15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(5) {
  top: -61%;
  right: -81px;
  height: 25%;
  width: 75px;
  transform: skewX(-35deg) rotate(-15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(6) {
  top: 45px;
  width: 10px;
  height: 35px;
  left: 50%;
  transform: translate(-15px, -20px) skew(-40deg) rotate(-10deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(7) {
  top: 45px;
  width: 10px;
  height: 35px;
  left: 50%;
  transform: translate(-20px, -23px) skew(-60deg) rotate(-30deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(8) {
  top: -30%;
  left: -65px;
  height: 25%;
  width: 60px;
  transform: skewX(35deg) rotate(15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(9) {
  top: 6%;
  left: -48px;
  height: 25%;
  width: 44px;
  transform: skewX(35deg) rotate(15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(10) {
  top: 37%;
  left: -33px;
  height: 25%;
  width: 30px;
  transform: skewX(35deg) rotate(15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(11) {
  top: 71%;
  left: -19px;
  height: 25%;
  width: 17px;
  transform: skewX(35deg) rotate(15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(12) {
  top: -61%;
  left: -81px;
  height: 25%;
  width: 75px;
  transform: skewX(35deg) rotate(15deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(13) {
  top: 45px;
  width: 10px;
  height: 35px;
  right: 50%;
  transform: translate(15px, -20px) skew(40deg) rotate(10deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(14) {
  top: 45px;
  width: 10px;
  height: 35px;
  right: 50%;
  transform: translate(20px, -23px) skew(60deg) rotate(30deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(15) {
  width: 10px;
  height: 10px;
  left: calc(50% - 5px);
  top: 170%;
  transform: rotateZ(52deg) skew(22.5deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(16) {
  top: -14px;
  width: 9px;
  height: 20px;
  left: 46%;
  transform: translate(45%, -7px) skew(35deg);
}
.parentForm .check_buttons_containers .check_button[isselected=yes] .span_wings span:nth-child(17) {
  top: -14px;
  width: 9px;
  height: 20px;
  left: 46%;
  transform: translate(-90%, -7px) skew(-35deg);
}
.parentForm .check_buttons_containers .check_button .radio_button {
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 5px rgb(255, 0, 0);
  position: relative;
  top: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}
.parentForm .check_buttons_containers .check_button .radio_button .inner_color {
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
  height: 5px;
  width: 5px;
}
.parentForm .check_buttons_containers .check_button .radio_button .dot_1 {
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 0);
}
.parentForm .check_buttons_containers .check_button .radio_button .dot_2 {
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 0);
}
.parentForm .check_buttons_containers .check_button .radio_button .dot_3 {
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 0px 1px rgba(255, 0, 0, 0);
}
.parentForm .check_buttons_containers .check_button h4 {
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3px rgb(0, 0, 0);
  display: inline-block;
  font-size: 17px;
  padding: 0px;
  margin: 0px;
  position: relative;
  bottom: 1px;
}
.parentForm .check_buttons_containers .check_button .span_wings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.parentForm .check_buttons_containers .check_button .span_wings span {
  pointer-events: none;
  position: absolute;
  height: 1px;
  width: 25px;
  background: rgb(0, 0, 0);
  box-shadow: 0px 0px 0px rgb(255, 255, 255);
  transition: 500ms;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(1) {
  width: 20px;
  right: -10px;
  top: 28%;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(2) {
  right: -17px;
  bottom: 50%;
  width: 22px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(3) {
  width: 20px;
  right: -10px;
  bottom: 35%;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(4) {
  right: -1px;
  top: -1px;
  height: 50%;
  width: 1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(5) {
  right: -1px;
  bottom: -1px;
  height: 50%;
  width: 1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(6) {
  width: 20px;
  left: 0px;
  top: -1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(7) {
  width: 10px;
  left: 30px;
  top: -1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(8) {
  width: 20px;
  left: -10px;
  top: 28%;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(9) {
  left: -17px;
  bottom: 50%;
  width: 22px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(10) {
  width: 20px;
  left: -10px;
  bottom: 35%;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(11) {
  left: -1px;
  top: -1px;
  height: 50%;
  width: 1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(12) {
  left: -1px;
  bottom: -1px;
  height: 50%;
  width: 1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(13) {
  width: 20px;
  right: 0px;
  top: -1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(14) {
  width: 10px;
  right: 30px;
  top: -1px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(15) {
  left: 50%;
  top: -1px;
  transform: translate(-50%, 0%);
  width: 100%;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(16) {
  bottom: -1px;
  width: 100%;
  left: 0px;
}
.parentForm .check_buttons_containers .check_button .span_wings span:nth-child(17) {
  bottom: -1px;
  width: 100%;
  left: 0px;
}


.web_footer {
  overflow: hidden;
  position: relative;
  width: calc(100% - 6px);
  background: black;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  transition: 500ms;
}
.web_footer:hover .tri_up {
  transform: rotate(0deg);
}
.web_footer:hover .tri_down {
  transform: rotate(0deg);
}
.web_footer .tri_up {
  position: absolute;
  transform-origin: bottom right;
  transform: rotate(-2deg);
  top: -100px;
  right: 0px;
  background: rgb(0, 0, 0);
  border: 1px solid white;
  box-shadow: 0px 2px 5px rgb(0, 0, 0);
  height: 100px;
  width: 120%;
  transition: 1000ms;
}
.web_footer .tri_down {
  position: absolute;
  transform-origin: top left;
  transform: rotate(-2deg);
  bottom: -100px;
  left: 0px;
  background: rgb(0, 0, 0);
  border: 1px solid white;
  box-shadow: 0px -2px 5px rgb(0, 0, 0);
  height: 100px;
  width: 120%;
  transition: 1000ms;
}
.web_footer .social_links ul {
  background: rgba(0, 0, 255, 0);
  padding: 0;
  margin: 20px 0px;
  margin-top: 25px;
  list-style: none;
}
.web_footer .social_links ul li {
  margin: 0px 20px;
  height: 40px;
  width: 40px;
  position: relative;
  transform: rotate(-36deg) skew(0deg);
  transition: 500ms;
}
.web_footer .social_links ul li:hover a {
  text-shadow: 0px 0px 0px white;
  color: white;
  opacity: 1;
}
.web_footer .social_links ul li:hover a > span {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid white;
  box-shadow: 0px 0px 0px rgb(255, 255, 255);
}
.web_footer .social_links ul li:hover a > span:nth-child(5) {
  transform: translate(12px, -12px);
  opacity: 1;
}
.web_footer .social_links ul li:hover a > span:nth-child(4) {
  transform: translate(9px, -9px);
  opacity: 0.8;
}
.web_footer .social_links ul li:hover a > span:nth-child(3) {
  transform: translate(6px, -6px);
  opacity: 0.6;
}
.web_footer .social_links ul li:hover a > span:nth-child(2) {
  transform: translate(3px, -3px);
  opacity: 0.4;
}
.web_footer .social_links ul li:hover a > span:nth-child(1) {
  transform: translate(0px, 0px);
  opacity: 0.2;
}
.web_footer .social_links ul li a {
  color: rgb(255, 255, 255);
}
.web_footer .social_links ul li a > span {
  box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0);
  background: rgba(255, 255, 255, 0);
  border: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  transition: 500ms;
}
.web_footer .social_links ul .instagram::before {
  content: "Instagram";
  font-size: 10px;
  position: absolute;
  font-weight: 500;
  padding: 0px 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(33px) translateX(-22px) rotate(36deg);
  background: rgb(25, 25, 25);
  opacity: 0;
}
.web_footer .social_links ul .instagram::after {
  content: "";
  font-size: 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  font-weight: 500;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgb(25, 25, 25);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(25px) translateX(-16px) rotate(36deg);
  opacity: 0;
}
.web_footer .social_links ul .instagram:hover::before, .web_footer .social_links ul .instagram:hover::after {
  color: rgb(255, 255, 255);
  opacity: 1;
  transition: 1000ms;
  transition-delay: 0ms;
}
.web_footer .social_links ul .soundcloud::before {
  content: "Tiktok";
  font-size: 10px;
  position: absolute;
  font-weight: 500;
  padding: 0px 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(33px) translateX(-22px) rotate(36deg);
  background: rgb(25, 25, 25);
  opacity: 0;
}
.web_footer .social_links ul .soundcloud::after {
  content: "";
  font-size: 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  font-weight: 500;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgb(25, 25, 25);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(25px) translateX(-16px) rotate(36deg);
  opacity: 0;
}
.web_footer .social_links ul .soundcloud:hover::before, .web_footer .social_links ul .soundcloud:hover::after {
  color: rgb(255, 255, 255);
  opacity: 1;
  transition: 1000ms;
  transition-delay: 0ms;
}
.web_footer .social_links ul .spotify::before {
  content: "Spotify";
  font-size: 10px;
  position: absolute;
  font-weight: 500;
  padding: 0px 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(33px) translateX(-22px) rotate(36deg);
  background: rgb(25, 25, 25);
  opacity: 0;
}
.web_footer .social_links ul .spotify::after {
  content: "";
  font-size: 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  font-weight: 500;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgb(25, 25, 25);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(25px) translateX(-16px) rotate(36deg);
  opacity: 0;
}
.web_footer .social_links ul .spotify:hover::before, .web_footer .social_links ul .spotify:hover::after {
  color: rgb(255, 255, 255);
  opacity: 1;
  transition: 1000ms;
  transition-delay: 0ms;
}
.web_footer .social_links ul .youtube::before {
  content: "Youtube";
  font-size: 10px;
  position: absolute;
  font-weight: 500;
  padding: 0px 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(33px) translateX(-22px) rotate(36deg);
  background: rgb(25, 25, 25);
  opacity: 0;
}
.web_footer .social_links ul .youtube::after {
  content: "";
  font-size: 10px;
  height: 0px;
  width: 0px;
  position: absolute;
  font-weight: 500;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgb(25, 25, 25);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(25px) translateX(-16px) rotate(36deg);
  opacity: 0;
}
.web_footer .social_links ul .youtube:hover::before, .web_footer .social_links ul .youtube:hover::after {
  color: rgb(255, 255, 255);
  opacity: 1;
  transition: 1000ms;
  transition-delay: 0ms;
}
.web_footer .phone_email_container {
  position: relative;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.web_footer .phone_email_container .overflow_container {
  cursor: pointer;
  width: 90px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1000ms;
}
.web_footer .phone_email_container .overflow_container:hover .phone {
  background: rgba(0, 0, 0, 0);
  width: 44px;
  border: 1px solid rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 3px rgba(255, 255, 255, 0), inset 0px 0px 3px rgba(255, 255, 255, 0);
}
.web_footer .phone_email_container .overflow_container:hover .phone .rectangle_1 {
  background: rgba(0, 0, 0, 0);
  width: 10px;
  height: 10px;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  border-radius: 50%;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.5);
  animation: 1500ms rectangle1animated linear infinite;
  box-shadow: 0px 0px 3px rgb(0, 0, 0);
}
.web_footer .phone_email_container .overflow_container:hover .phone .rectangle_2 {
  width: 4px;
  height: 4px;
  left: calc(50% - 2px);
  top: calc(50% - 2px);
  opacity: 1;
  border-radius: 50%;
  border: 1px solid rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  box-shadow: 0px 0px 3px rgb(255, 255, 255);
  background-size: 1000000% 1200%;
  animation: 5000ms rectangle2animated linear infinite;
}
.web_footer .phone_email_container .overflow_container:hover .phone .rectangle_3 {
  background: rgba(255, 255, 255, 0);
  border-radius: 15px;
  width: 44px;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0);
}
.web_footer .phone_email_container .overflow_container:hover .phone .rectangle_3 h1 {
  text-shadow: 0px 0px 3px white;
  color: white;
}
.web_footer .phone_email_container .overflow_container:hover .phone .rectangle_3 img {
  filter: brightness(1) drop-shadow(0px 0px 0.5px rgb(255, 255, 255));
}
.web_footer .phone_email_container .overflow_container .phone {
  position: relative;
  background: rgba(0, 0, 0, 0);
  width: 90px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: 1000ms;
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_1 {
  position: absolute;
  background: rgba(145, 145, 145, 0);
  border: 1px solid transparent;
  height: 100%;
  transform: rotate(45deg);
  width: 44px;
  left: calc(50% - 22px);
  top: 0px;
  z-index: 10;
  pointer-events: none;
  transition: 1000ms;
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_2 {
  position: absolute;
  background: rgba(29, 29, 29, 0);
  border: 1px solid transparent;
  height: 100%;
  transform: rotate(0deg);
  width: 44px;
  z-index: 10;
  left: calc(50% - 22px);
  top: 0px;
  pointer-events: none;
  transition: 1000ms;
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_3 {
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  position: relative;
  width: 85px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1000ms;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0);
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_3 h1 {
  color: rgb(255, 255, 255);
  font-size: 20px;
  position: relative;
  transition: 2000ms;
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_3 img {
  width: 33px;
  filter: brightness(1) drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
  transition: 1000ms;
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_3 .left_wing {
  transform: rotate(0) skew(0) skewY(0) skewX(0) translate(0, 0);
}
.web_footer .phone_email_container .overflow_container .phone .rectangle_3 .right_wing {
  transform: rotate(0) skew(0) skewY(0) skewX(0) translate(0, 0);
}
@keyframes rectangle1animated {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(405deg);
  }
}
@keyframes rectangle2animated {
  from {
    transform: rotate(0deg) translate(0, 5px) rotate(0deg);
  }
  to {
    transform: rotate(3600deg) translate(0, 5px) rotate(0deg);
  }
}
.web_footer .email_container {
  position: relative;
  height: 30px;
}
.web_footer .email_container .emailButton {
  background: rgba(255, 255, 255, 0);
  box-shadow: 0px 0px 0px white;
  height: 30px;
  width: 50px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  transition: 500ms;
  cursor: pointer;
  text-align: center;
}
.web_footer .email_container .emailButton:hover {
  background: black;
}
.web_footer .email_container .emailButton:hover svg {
  opacity: 0;
  height: 50px;
}
.web_footer .email_container .emailButton:hover svg path:nth-child(1) {
  transform: translate(0, 75px) rotateX(80deg);
}
.web_footer .email_container .emailButton:hover svg path:nth-child(2) {
  transform: translate(0, -75px) rotateX(-80deg);
}
.web_footer .email_container .emailButton:hover a {
  opacity: 1;
  text-shadow: 0px 0px 0px white;
}
.web_footer .email_container .emailButton:hover .emailSVG {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  right: 0;
  top: 0;
}
.web_footer .email_container .emailButton a {
  opacity: 0;
  text-align: center;
  font-size: 13px;
  color: white;
  text-shadow: 0px 0px 3px white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 18px;
  padding-bottom: 7px;
  padding-right: 18px;
  transition: 500ms;
}
.web_footer .email_container .emailButton a:hover {
  text-decoration: none;
}
.web_footer .email_container .emailButton svg {
  position: absolute;
  overflow: visible;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  transition: 500ms;
  pointer-events: none;
  filter: drop-shadow(0px 0px 3px rgba(42, 42, 42, 0));
}
.web_footer .email_container .emailButton svg path {
  transition: 500ms;
  fill: rgb(255, 255, 255);
  stroke-width: 1px;
  stroke: rgb(0, 0, 0);
}
.web_footer .copyright {
  margin: 8px 0px;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
/* PC: copyright reads from the left edge (also keeps it clear of the
   centered FOLLOW ME pill) */
@media (min-width: 992px) {
  .web_footer .copyright { text-align: left; padding-left: 20px; }
}
.web_footer .copyright p {
  position: relative;
  font-size: 11px;
  letter-spacing: 1.5px;
  margin: 0;
  padding: 0px 0px;
  text-shadow: 0px 0px 1px white;
  color: rgb(255, 255, 255);
  pointer-events: none;
}

.whiteSvg path {
  -webkit-filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
  filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));
  transition: 1000ms;
}
.whiteSvg .pathTag1 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag2 {
  fill: rgb(0, 0, 0);
}
.whiteSvg .pathTag3 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag4 {
  fill: rgb(0, 0, 0);
}
.whiteSvg .pathTag5 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag6 {
  fill: rgb(0, 0, 0);
}
.whiteSvg .pathTag7 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag8 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag9 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag10 {
  fill: rgb(0, 0, 0);
}
.whiteSvg .pathTag11 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag12 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag13 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag14 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag15 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag16 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag17 {
  fill: rgb(255, 255, 255);
}
.whiteSvg .pathTag18 {
  fill: rgb(0, 0, 0);
}

.blackSvg path {
  -webkit-filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.5));
  filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.5));
  transition: 1000ms;
}
.blackSvg .pathTag1 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag2 {
  fill: rgb(255, 255, 255);
}
.blackSvg .pathTag3 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag4 {
  fill: rgb(255, 255, 255);
}
.blackSvg .pathTag5 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag6 {
  fill: rgb(255, 255, 255);
}
.blackSvg .pathTag7 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag8 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag9 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag10 {
  fill: rgb(255, 255, 255);
}
.blackSvg .pathTag11 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag12 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag13 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag14 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag15 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag16 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag17 {
  fill: rgb(0, 0, 0);
}
.blackSvg .pathTag18 {
  fill: rgb(255, 255, 255);
}


@media (min-width: 1200px) {
  .sliderContainer .slide {
    background-size: cover;
  }
  .web_footer .tri_up {
    transform: rotate(-1deg);
  }
  .web_footer .tri_down {
    transform: rotate(-1deg);
  }
  .parentPW {
    flex-direction: row;
  }
  .parentPW .second_work {
    margin-top: 30px;
  }
}
@media (min-width: 991px) {
  .v_right {
    left: calc(50% - 1px);
  }
  .parentPW .size {
    width: 990px;
    height: 500px;
  }
}
@media (max-width: 1400px) {
  .home-a .landingPageText {
    margin-top: 70px;
  }
  .home-a .landingPageText svg {
    height: 150px;
  }
}
@media (max-width: 1200px) {
  .home-a .background_wings {
    width: 75%;
    transform: translateY(20%);
  }
  .home-a .landingPageText {
    margin-top: 70px;
  }
  .home-a .landingPageText svg {
    height: 150px;
  }
}
@media (min-width: 991px) {
  .parentJob .artiste {
    height: auto;
    width: 40%;
  }
  .parentSoftware {
    height: 225px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .parentSoftware .allEquipmentContainer {
    grid-column: span 3;
  }
  .parentHardware {
    height: 225px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .web_footer .copyright p {
    font-size: 11px;
  }
  .email_container {
    top: 30px;
  }
}
@media (max-width: 991px) {
  .home-a {
    /* keep the DJ (≈59% across the photo) centered when narrow screens crop the sides */
    background-position: 59% center;
  }
  
  .navbar .navbar-nav {
    background: transparent;
    margin: 0px 0px;
    padding: 6px 0 10px;
  }
  .navbar .navbar-nav .nav-item {
    margin-left: 0px;
    box-shadow: none;
    border: none;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .navbar .navbar-nav .nav-item:last-of-type {
    border-bottom: none;
  }
  .navbar .navbar-nav .nav-item .nav-link {
    text-align: center;
  }
  .navbar .navbar-nav .nav_resp {
    margin-bottom: 0px;
  }
}
@media (min-width: 768px) {
  .web_footer .contact_info .email {
    margin-top: 2rem;
  }
  .sliderContainer .textSectionRoom h1,
.sliderContainer .textSectionRoom h2 {
    font-size: 80px;
  }
  .parentForm .genericInputsContainer .containerAll label {
    width: 80%;
  }
  .parentForm .genericInputsContainer .containTextArea .spans_container {
    width: 80%;
  }
  .parentForm .genericInputsContainer .containTextArea textarea {
    width: 80%;
  }
  .parentForm .check_buttons_containers {
    flex-direction: row;
    height: 100px;
  }
}
@media (max-width: 768px) {
  .carousel-caption {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-caption h1 {
    font-size: 30px;
  }
  .home-a .background_wings {
    transform: translateY(10%);
  }
  .home-a .landingPageText {
    transform: translateY(10%);
  }
  .home-a .landingPageText svg {
    height: 100px;
    top: 20px;
  }
  .home-a .landingPageText h2 {
    top: 45px;
  }
}
@media (max-width: 576px) {
  
  
  .navbar .navbar-nav {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .navbar .navbar-nav .nav-item .wing {
    display: none;
  }
  .navbar .navbar-nav .nav-item .nav-link {
    text-align: center;
  }
  .home-a .background_wings {
    width: 110%;
    transform: translateY(25%);
  }
  .home-a .landingPageText svg {
    height: 75px;
    top: 10px;
  }
  .home-a .landingPageText h2 {
    font-size: 10px;
    top: 25px;
  }
  .parentJob {
    height: 100px;
  }
  .web_footer .social_links {
    padding: 0px;
  }
}
@media (max-width: 450px) {
  .home-a .landingPageText svg {
    height: 55px;
    top: 10px;
  }
  .home-a .landingPageText h2 {
    font-size: 10px;
    top: 25px;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .home-a .background_wings {
    width: 85%;
    transform: translateY(30%);
  }
  .home-a .landingPageText svg {
    height: 50px;
    top: 20px;
  }
}/*# sourceMappingURL=main.css.map */
/* ── 2026 refresh: new wordmark logo, Releases container, Booking CTA ─────── */
.landingPageText .logoPieces {
  position: relative;
  height: 200px;
  width: calc(200px * 2.2533);
  max-width: 92vw;
  margin: 0 auto;
  -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.95)) drop-shadow(0px 0px 14px rgba(255, 255, 255, 0.65)) drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.4));
  filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.95)) drop-shadow(0px 0px 14px rgba(255, 255, 255, 0.65)) drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.4));
}
.landingPageText .logo_piece {
  position: absolute;
  cursor: pointer;
  background-repeat: no-repeat;
  transition: 1000ms;
}
.backgroundImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bookingCta {
  position: relative;
  text-align: center;
  padding: 130px 20px 90px;
  max-width: 640px;
  margin: 0 auto;
}
.bookingCta p {
  color: white;
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5);
  font-size: 16px;
  margin-bottom: 40px;
}
.bookingCta .button {
  position: relative;
  display: inline-block;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid white;
  box-shadow: 0px 0px 3px white;
  text-shadow: 0px 0px 3px white;
  text-decoration: none;
  padding: 14px 44px;
  font-weight: 700;
  letter-spacing: 2px;
  transition: 250ms;
}
.bookingCta .button:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0px 0px 10px white;
}
@media (max-width: 576px) {
  .landingPageText .logoPieces { height: 120px; width: calc(120px * 2.2533); }
}

/* studio carousel arrows */

/* hero Book Now button (top right of landing page) */
.home-a .heroBook {
  position: fixed;
  top: 9px;
  right: 18px;
  z-index: 1001;
  color: white;
  text-shadow: 0px 0px 4px white, 0px 0px 14px rgba(255, 255, 255, 0.75), 0px 2px 8px rgba(0, 0, 0, 0.9);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  padding: 10px 4px;
  text-decoration: none;
  transition: 250ms;
}
.home-a .heroBook:hover {
  color: white;
  text-decoration: none;
  text-shadow: 0px 0px 4px white, 0px 0px 10px white, 0px 0px 24px white;
}
@media (max-width: 991px) {
  /* centered on the hamburger's line so the top row reads as one header */
  .home-a .heroBook { top: -1px; right: 14px; font-size: 13px; }
}
/* footer email — plain glowing pill (replaces the envelope-split reveal) */
.web_footer .email_container .emailPlain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
  color: white;
  font-size: 13px;
  text-shadow: 0px 0px 3px white;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5);
  padding: 8px 18px;
  transition: 250ms;
}
.web_footer .email_container .emailPlain:hover {
  box-shadow: 0px 0px 10px white;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
}
.web_footer .email_container .emailPlain svg {
  width: 20px;
  height: auto;
  fill: white;
  filter: drop-shadow(0px 0px 2px white);
}

/* Releases — swipeable video carousel */
.workArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 200ms;
}
.workArrow::before {
  content: "";
  width: 16px;
  height: 16px;
  border-top: 3px solid white;
  border-left: 3px solid white;
  filter: drop-shadow(0px 0px 3px white);
  transition: 200ms;
}
.workPrev { left: 10px; }
.workNext { right: 10px; }
.workPrev::before { transform: rotate(-45deg) translate(4px, 4px); }
.workNext::before { transform: rotate(135deg) translate(4px, 4px); }
.workArrow:hover::before {
  filter: drop-shadow(0px 0px 6px white) drop-shadow(0px 0px 10px white);
}
.workSwipeL { left: 0; }
.workSwipeR { right: 0; }

/* About titles — every title is stroke-drawn SVG text sharing one style */
.parentJob svg text {
  fill: rgba(0, 0, 0, 0);
  stroke: rgb(255, 255, 255);
  stroke-width: 0.2px;
  /* opacity must finish faster than the 1s gap between titles — Safari only
     sees the fade (no dash support on <text>), and a 2s fade overlapped two
     titles at once */
  transition: stroke-dashoffset 2000ms ease, opacity 600ms ease;
}
.appear1 text, .appear2 text, .appear3 text, .appear7 text {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
  opacity: 1;
}
/* opacity fallback: iOS Safari ignores stroke-dasharray on <text>, which left
   every title visible at once — the fade guarantees only one shows */
.disappear1 text, .disappear2 text, .disappear3 text, .disappear7 text {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  opacity: 0;
}

/* About: small pinned location line */
.parentJob .basedLine {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 4px;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.95), 0px 0px 14px rgba(255, 255, 255, 0.5);
  z-index: 5;
  white-space: nowrap;
}
.parentJob .basedLine svg {
  position: static;
  width: 17px;
  height: 17px;
  top: auto;
  left: auto;
  transform: none;
  filter: drop-shadow(0px 0px 2px white);
  transition: none;
}
@media (max-width: 768px) {
  .parentJob .basedLine { font-size: 11px; letter-spacing: 2px; bottom: 6px; gap: 6px; }
  .parentJob .basedLine svg { width: 12px; height: 12px; }
}

/* desktop nav: the bar collapsed to 0 height when the brand was removed —
   give it real height and center the links inside it */
@media (min-width: 992px) {
  .navbar {
    height: 60px;
  }
  .navbar .navbar-nav {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* hero social row (moved out of the footer) — fixed so it stays put on scroll */
.home-a .heroSocials {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 26px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  white-space: nowrap;
  z-index: 6;
}
.home-a .heroSocials .followTag {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
}
.home-a .heroSocials .heroSocialIcons {
  display: flex;
  align-items: center;
  gap: 22px;
}
.home-a .heroSocials a {
  color: white;
  font-size: 24px;
  text-decoration: none;
  text-shadow: 0px 0px 4px white, 0px 0px 12px rgba(255, 255, 255, 0.6);
  transition: 200ms;
}
.home-a .heroSocials a:hover {
  color: white;
  text-shadow: 0px 0px 4px white, 0px 0px 10px white, 0px 0px 22px white;
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .home-a .heroSocials { gap: 12px; bottom: 48px; padding: 9px 16px; }
  .home-a .heroSocials .heroSocialIcons { gap: 17px; }
  .home-a .heroSocials .followTag { font-size: 9px; letter-spacing: 2px; }
  .home-a .heroSocials a { font-size: 21px; }
}

/* footer: two remaining columns spread evenly */
@media (min-width: 992px) {
  .web_footer { justify-content: space-evenly; }
}

/* dragging a carousel shouldn't select text */

/* releases: side-by-side scroll strips */
.worksStripWrap { position: relative; }
.worksStrip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 28px 5vw 32px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.worksStrip::-webkit-scrollbar { display: none; }
.workCard {
  flex: 0 0 auto;
  scroll-snap-align: center;
  background: black;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.22);
}
.workCardYt { width: min(48vw, 560px); aspect-ratio: 16 / 9; position: relative; }
/* swipeable stand-in for the YouTube iframe until the card is tapped */
.workCardYt .ytPoster {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.workCardIg { width: min(72vw, 300px); height: 480px; }
.workCard iframe { width: 100%; height: 100%; display: block; border: 0; }
@media (max-width: 768px) {
  .workCardYt { width: 82vw; }
}

/* studio photos: same strip treatment */
.sliderContainer .studioStrip {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  z-index: 1;
}
.sliderContainer .studioStrip::-webkit-scrollbar { display: none; }
.sliderContainer .studioStrip .slide {
  position: static;
  flex: 0 0 62%;
  height: 100%;
  width: auto;
  transition: none;
  scroll-snap-align: center;
}
@media (max-width: 768px) {
  .sliderContainer .studioStrip .slide { flex-basis: 86%; }
}
.sliderContainer .textSectionRoom { pointer-events: none; z-index: 2; }

/* iOS: 100vh hides the hero bottom behind Safari's bar — use svh when available */
@supports (height: 100svh) {
  .home-a { height: calc(100svh + 1px); }
}


/* clean native IG cards (no Instagram chrome) */
.workCardIg { position: relative; overflow: hidden; }
.workCardIg.igNative { display: block; cursor: pointer; }
.workCardIg.igNative video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: black;
}
.igPlayHint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.9;
  transition: 200ms;
}
.igPlayHint::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 11px;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0px 0px 3px white);
}
.workCardIg.playing .igPlayHint { opacity: 0; }
/* small corner badge — the only way a card links out to Instagram */
.igOpenBadge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 17px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: 200ms;
}
.igOpenBadge:hover {
  color: white;
  text-shadow: 0px 0px 8px white;
  border-color: rgba(255, 255, 255, 0.6);
}
/* fallback IG embeds: crop Instagram's white header/footer out of view */
.workCardIg.igEmbed iframe {
  width: 100%;
  height: calc(100% + 152px);
  margin-top: -54px;
  display: block;
}

/* =========================================================================
   Header redesign — no hamburger, inline nav row, Book Now as a real button
   ========================================================================= */

/* Book Now: pill button matching the FOLLOW ME bar's glass language */
.home-a .heroBook {
  position: fixed;
  top: 10px;
  right: 18px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
  transition: 250ms;
}
.home-a .heroBook:hover,
.home-a .heroBook:focus-visible {
  color: white;
  text-decoration: none;
  border-color: white;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0px 0px 18px rgba(255, 255, 255, 0.55);
}
.home-a .heroBook:active {
  transform: scale(0.96);
}

@media (max-width: 991px) {
  /* the menu is always open now — nothing left to toggle it */
  .navbar .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    align-items: center;
  }
  .navbar {
    /* tall enough to sit behind the links row and the centered pill below it */
    min-height: 100px;
    display: flex;
    align-items: flex-start;
    /* scrim so white type stays readable over the photo */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    /* the empty part of the bar shouldn't swallow taps on the hero */
    pointer-events: none;
  }
  .navbar .nav-link { pointer-events: auto; }
  .navbar .navbar-nav {
    position: static;
    top: auto;
    transform: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* five links since Press Kit joined — tighter gap so the row fits phones */
    gap: clamp(12px, 5vw, 40px);
    margin: 0;
    /* the pill sits on its own line below, so the row gets the full width */
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar .navbar-nav::-webkit-scrollbar { display: none; }
  .navbar .navbar-nav .nav-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: none;
    box-shadow: none;
    flex: 0 0 auto;
  }
  .navbar .navbar-nav .nav-item::after { display: none; }
  /* absolutely-placed hover wings would widen the scrollable row */
  .navbar .navbar-nav .nav-item .wing { display: none; }
  .navbar .navbar-nav .nav-item .nav-link {
    display: block;
    /* 44px tall tap target without making the bar look thick */
    padding: 11px 1px;
    font-size: clamp(9px, 3vw, 12px);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.55), 0px 1px 6px rgba(0, 0, 0, 0.9);
  }
  .navbar .navbar-nav .nav-item .nav-link:active {
    color: white;
    text-shadow: 0px 0px 8px white;
  }
  /* Book Now: centered on its own line under the links */
  .home-a .heroBook {
    top: 44px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-height: 48px;
    padding: 0 30px;
    font-size: 14px;
    letter-spacing: 2.5px;
  }
  .home-a .heroBook:active {
    transform: translateX(-50%) scale(0.96);
  }
}

/* Phones: the crest used to sit low enough to leave a dead band of sky under
   the header while crowding the wordmark. Lifting it into the sky evens out
   the three gaps — header → crest → wordmark → follow bar. */
@media (max-width: 576px) {
  .home-a .background_wings { transform: translateY(0); }
}

/* iPhone SE / small Androids: the row is at its tightest here */
@media (max-width: 360px) {
  .navbar .navbar-nav { gap: 2px; }
  .navbar .navbar-nav .nav-item .nav-link { letter-spacing: 0.2px; }
}

/* =========================================================================
   Release strips: the flex column centers its children, so the strip grew to
   its content instead of the screen — nothing overflowed, so nothing scrolled
   and the cards past the edge were simply clipped away.
   ========================================================================= */
.worksContainer,
.worksContainerIG {
  align-self: stretch;
  width: 100%;
  min-width: 0;
}
.worksStripWrap { width: 100%; }
.worksStrip {
  max-width: 100%;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

/* =========================================================================
   Carousels: swipe hint — three bare hand-drawn-style chevrons with SWIPE
   underneath. Nudges sideways on a loop, fades out at the end of the strip.
   ========================================================================= */
.workPrev { display: none; }
.workNext {
  right: 10px;
  width: auto;
  height: auto;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 0;
  background: none;
  border: none;
  animation: swipeNudge 1800ms ease-in-out infinite;
  transition: opacity 300ms;
}
.workNext::before {
  /* three nested chevrons, small to large */
  width: 52px;
  height: 30px;
  border: none;
  transform: none;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 28' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l7 6-7 6'/%3E%3Cpath d='M17 5l10 9-10 9'/%3E%3Cpath d='M32 2l13 12-13 12'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.9)) drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.45)) drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.9));
}
.workNext::after {
  content: "SWIPE";
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: white;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7), 0px 1px 5px rgba(0, 0, 0, 0.95);
}
.workNext.atEnd {
  opacity: 0;
  pointer-events: none;
}
@keyframes swipeNudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .workNext { animation: none; }
}

/* hero tagline — sits above the wings, first line of the lockup */
.home-a .landingPageText {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-a .heroTagline {
  position: relative;
  z-index: 4;
  margin: 0 0 15px;
  padding: 0 12px;
  animation: heroTaglineIn 1400ms ease 600ms both;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(9px, 2.9vw, 17px);
  letter-spacing: clamp(1.5px, 0.9vw, 5px);
  color: rgba(255, 255, 255, 0.95);
  /* dark halo first so it stays legible over the crowd, then the white glow */
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.95), 0px 2px 10px rgba(0, 0, 0, 0.9), 0px 0px 6px rgba(255, 255, 255, 0.7), 0px 0px 20px rgba(255, 255, 255, 0.45);
}
@keyframes heroTaglineIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fallback IG embeds: the iframe eats touch, so it sits behind a transparent
   shield — the swipe reaches the strip and a tap opens the post */
.workCardIg.igEmbed iframe { pointer-events: none; }
.igEmbedShield {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: block;
}

/* Footer: the two slanted slabs were built for a tall footer — on the
   one-line version their white edges cut straight through the copyright */
.web_footer .tri_up,
.web_footer .tri_down { display: none; }
.web_footer .copyright { margin: 12px 0; }

/* About titles: stroke-dasharray on <text> draws as a dashed outline in
   Safari, so the letters never completed — the reveal is a plain fade now */
.parentJob svg text {
  stroke-dasharray: none;
  stroke-width: 0.25px;
  transition: opacity 600ms ease;
  filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.55));
}
.appear1 text, .appear2 text, .appear3 text, .appear7 text {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
}
.disappear1 text, .disappear2 text, .disappear3 text, .disappear7 text {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
}

/* follow bar: label stacked on top of the icons, icons bumped up */
.home-a .heroSocials {
  flex-direction: column;
  gap: 8px;
  padding: 12px 26px 14px;
  border-radius: 22px;
}
.home-a .heroSocials .heroSocialIcons { gap: 26px; }
.home-a .heroSocials a { font-size: 30px; }
@media (max-width: 991px) {
  .home-a .heroSocials { flex-direction: column; gap: 7px; bottom: 40px; padding: 10px 20px 12px; }
  .home-a .heroSocials .heroSocialIcons { gap: 22px; }
  .home-a .heroSocials a { font-size: 27px; }
}

/* =========================================================================
   IG embed cards without Instagram's white chrome: the embed lays out as a
   54px header + a 4:5 media band + white footer. The card is 4:5 — the same
   tile Instagram's own grid uses — so the media band fills it at its natural
   size and only the header/footer are cropped away. The tiny 1.03 zoom
   absorbs the header being a fixed 54px rather than width-proportional.
   ========================================================================= */
.workCardIg { height: auto; aspect-ratio: 4 / 5; }
.workCardIg.igEmbed { background: black; }
.workCardIg.igEmbed iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 429;   /* header + media band at card width */
  margin: 0;
  transform: translate(-50%, -56.5%) scale(1.03);
}

/* Book Now: slow breathing glow + an occasional light sweep across the pill */
.home-a .heroBook {
  overflow: hidden;
  animation: bookPulse 2600ms ease-in-out infinite;
}
.home-a .heroBook::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -80%;
  width: 45%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: bookSweep 4200ms ease-in-out infinite;
  pointer-events: none;
}
@keyframes bookPulse {
  0%, 100% { box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.5); }
  50%      { box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.95); }
}
@keyframes bookSweep {
  0%, 55%   { left: -80%; }
  85%, 100% { left: 160%; }
}
@media (prefers-reduced-motion: reduce) {
  .home-a .heroBook { animation: none; }
  .home-a .heroBook::after { display: none; }
}


/* screen-reader-only text (the visual h1 is the wordmark artwork) */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* tapped-in IG player: unlike the passive fallback embeds, this one must be
   clickable (IG's own play button), and the badge rides above it */
.workCardIg.igEmbed iframe.igLive { pointer-events: auto; }
.workCardIg .igOpenBadge { z-index: 4; }

/* Wordmark glow on touch screens: a pre-baked glow PNG behind the shards
   (built in logoPieces.js). CSS drop-shadow was a double miss on iOS Safari:
   it wouldn't paint over ~100 animating clip-path shards (logo landed seamy
   and dull, glow popped on late), and once painted it rasterized the bloom
   clipped to the element box — a visible haze rectangle around the logo.
   The baked image carries its own 200px fade-out margin, so it's positioned
   oversize: the logo's natural canvas is 1352x600, the glow canvas 1752x1000.
   Desktop keeps the container filter and bare shards for the hover-shatter. */
.logoPieces .logoUnder {
  position: absolute;
  left: -14.7929%;             /* 200/1352 */
  top: -33.3333%;              /* 200/600  */
  width: 129.5858%;            /* 1752/1352 */
  height: 166.6667%;           /* 1000/600  */
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  display: none;
}
.landingPageText .logo_piece { z-index: 1; }
@media (hover: none) {
  .logoPieces .logoUnder { display: block; }
  .landingPageText .logoPieces {
    -webkit-filter: none;
    filter: none;
  }
}

/* booking pitch above the footer — the page's one indexable text block */
.seoBook {
  position: relative;
  z-index: 2;
  /* the banner design depends on this: the wings/box are drawn centered on
     the section's top line and the top halves must be CLIPPED, like every
     other section (they all have .hiddenOverflow) */
  overflow: hidden;
  padding: 80px 22px 52px;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}
.seoBook p { max-width: 660px; margin-left: auto; margin-right: auto; }
/* section title banner, like every other section — the box is widened for the
   longer title, wings pushed out the same amount (offsets are along the
   rotated axes: horizontal shift = offset × √2) */
.seoBook .centeredRectangle { width: 190px; }
.seoBook .rightTriangle { transform: translate(-50%, -50%) rotate(45deg) translateX(80px) translateY(-80px); }
.seoBook .leftTriangle { transform: translate(-50%, -50%) rotate(-45deg) translateX(-80px) translateY(-80px); }
.seoBook .leftTriangle2 { transform: translate(-50%, -50%) rotate(-45deg) translateX(-70px) translateY(-70px); }
.seoBook .rightTriangle2 { transform: translate(-50%, -50%) rotate(-45deg) translateX(70px) translateY(70px); }
.seoBook p {
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.seoBook p[lang="fr"] { color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.seoBook .seoBookLinks { margin-top: 22px; }
.seoBook a {
  color: white;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
}
.seoBook a:hover { color: white; text-shadow: 0px 0px 12px white; }

/* In-page press kit summary (nav scrolls here; the full EPK stays at /presskit) */
.pkWrap {
  position: relative;
  z-index: 2;
  max-width: 660px;
  /* the title banner's triangles hang ~50px into the section — clear them */
  margin: 0 auto;
  padding: 78px 22px 46px;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}
.pkGenres {
  color: white;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.35);
  margin-bottom: 16px;
}
.pkGenres span { color: rgba(255, 255, 255, 0.35); padding: 0 7px; }
.pkStats {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pkStat {
  flex: 1 1 150px;
  max-width: 200px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 13px 10px 11px;
}
.pkStat b {
  display: block;
  color: white;
  font-size: 22px;
  letter-spacing: 1px;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.45);
}
.pkStat span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
}
/* Phones: the live clip is the BACKDROP — it fills the section behind the
   genres/stats/CTA, with a scrim so the text stays readable */
.pkVideoWrap {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.pkVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pkVideoWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.74));
}
.pkInfo { position: relative; z-index: 1; }
.pkPhoto { display: none; }   /* desktop-only — phones already have the video backdrop */
.pkBio {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 16px;
}
.pkBio strong { color: white; text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.35); }
.pkPromise {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 12px;
}
.pkLine { font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.pkBtn {
  display: inline-block;
  color: white;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  text-decoration: none;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.pkBtn:hover {
  color: white;
  text-decoration: none;
  border-color: white;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* Desktop: the stacked phone column wastes a wide screen — video card on the
   left, a full info column (genres, bio, stats, promises, CTA) beside it */
@media (min-width: 992px) {
  .pkWrap {
    max-width: 1260px;
    display: flex;
    align-items: center;
    gap: 44px;
    text-align: left;
    padding: 64px 30px 44px;
  }
  .pkPhoto {
    display: block;
    flex: 0 0 340px;
    aspect-ratio: 9 / 16;     /* the exact shape and size of the video card */
    align-self: center;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.12);
  }
  .pkPhoto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pkVideoWrap {
    position: relative;
    inset: auto;
    flex: 0 0 340px;
    width: 340px;
  }
  .pkVideoWrap::after { display: none; }   /* desktop shows the clean card */
  .pkVideo {
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.12);
  }
  .pkInfo { flex: 1; min-width: 0; }
  .pkGenres { font-size: 15px; margin-bottom: 14px; }
  .pkGenres span { padding: 0 9px; }
  .pkBio { font-size: 15px; max-width: 640px; margin-bottom: 16px; }
  /* 2×2 — four cards can't share one row here, and a lone wrapped card gapes */
  .pkStats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 470px;
    margin-bottom: 16px;
  }
  .pkStat { max-width: none; }
  .pkLine { max-width: 560px; margin-bottom: 16px; }
  .pkBtn { display: block; width: fit-content; margin: 0 auto; }
}

/* Phones: the fixed FOLLOW ME pill (bottom: 40px, ~75px tall) covers the last
   ~115px of the document at full scroll. Reserve that band as empty space so
   the pill settles below the copyright instead of wedging into the text. */
@media (max-width: 991px) {
  .web_footer { padding-bottom: 140px; }
}