html {
  overflow-x: hidden!important;
  scroll-behavior: smooth;
}




body, html {
 margin: 0;
 padding: 0;
 background: #111 !important;
 /* overflow: hidden; */
 font-family: sans-serif;
 cursor: default;
}

html.no-scroll {
  overflow: hidden !important;
}

#rope {
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 height: 1px;
 background-color: red; /* Or any color you want */
 transform-origin: top center;
 z-index: 10;  /* Make sure it's beneath the wrinkly line */
 cursor: grab;
}

#wool {
 position: absolute;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 background-color: red; /* Wool color */
 opacity: 0;  /* Hidden by default */
 pointer-events: auto;  /* Ensure it doesn't block interaction */
 transition: opacity 0.3s ease;  /* Smooth transition for visibility */
}

#fade-overlay {
 position: fixed;
 top: 0; left: 0;
 width: 100vw;
 height: 100vh;
 background: white;
 opacity: 0;
 pointer-events: none;
 transition: opacity 1s ease;
 z-index: 10;
}

#main-content {
 position: relative;
 display: block;
 width: 100%;
 z-index:1;
 overflow-x: hidden;
 border-bottom-right-radius: 83px;
 border-bottom-left-radius: 83px;
 background: #111;
 color: #111111;
 font-family: 'Inter', sans-serif;
 transition: background-color 1s cubic-bezier(.33,1.53,.69,.99), background-image 1s cubic-bezier(.33,1.53,.69,.99), opacity 1s cubic-bezier(.33,1.53,.69,.99);
 opacity: 1 !important;
}

#main-content.fade-in {
 opacity: 1;
}

#hero-section {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  max-width: calc(100% - 240px);
  width: calc(100vw - 240px);
  padding: 0;
  margin: 24px auto;
  border-radius: 130px 130px 0 0;
  background-color: white;
  background-size: 24px 24px;
  background-attachment: scroll;
  box-shadow: 0 0 0 24px #fff inset;
  transition:
    border-radius 1s cubic-bezier(.77,0,.18,1),
    background 1s cubic-bezier(.77,0,.18,1),
    box-shadow 1s cubic-bezier(.77,0,.18,1),
    height 1s cubic-bezier(.77,0,.18,1),
    width 1s cubic-bezier(.77,0,.18,1),
    max-width 1s cubic-bezier(.77,0,.18,1),
    margin 1s cubic-bezier(.77,0,.18,1),
    background-image 1s cubic-bezier(.77,0,.18,1);
  justify-content: left;
  padding-top: 70px; /* navbar height (20px top + 20px bottom + font size) */
  min-height: 87vh;
  height: 87vh;
  box-sizing: border-box;
}

#hero-section::before {
  content: '';
  height: 100vh !important;
  position: absolute;
  z-index: 0;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s cubic-bezier(.77,0,.18,1);
  background-image: radial-gradient(#999 1px, transparent 0.5px);
  box-shadow: 0 0 0 24px #fff inset!important;
  inset: 0;
  background-size: 24px 24px;
  background-attachment: scroll;
  border-radius: inherit;
}

body.hero-intro #hero-section::before {
  opacity: 0;
}

.hero-cards-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 32px;
}

.hero-cards-wrapper > .hero-card:not(.hero-main) {
  max-width: 36vw;
  margin-top: 0;
  z-index: 2;
  padding-bottom:20px;
  padding-left: 40px;
  padding-right:50px;
  position: relative;
}

.hero-card {
  background: transparent;
  padding: 10px 10px;
  padding-right: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  width: auto;
  max-width: 90vw;
  transition: background 1s cubic-bezier(.33,1.53,.69,.99);
}

.hero-card.bg-fade-in {
  background: white;
}

.hero-card.hero-main {
  width: 800px;
  max-width: 90vw;
  padding-top: 50px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;
  position: relative;
}

.hero-content {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

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

#tightrope:hover #wool {
  opacity: 0;
  cursor: grab;
}

#logo {
  font-size: 24px;
  font-weight: bold; 
  top: 20px;
  left: 30px;
  font-weight: 600;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s ease, transform 0.6s ease;
  color:white;
  padding: 14px 18px;
  border-radius: 16px;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

#menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10000;
  transition: top 1.2s cubic-bezier(.77,0,.18,1), box-shadow 0.4s cubic-bezier(.33,1.53,.69,.99), max-width 0.4s cubic-bezier(.33,1.53,.69,.99);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #111;
  padding: 20px 8px;
  height: 32px;
  min-height: 50px;
  margin: 16px auto;
  border-radius: 60px;
  opacity: 1;
  overflow: visible;
  box-shadow: none;
  max-width: 1400px;
  }

#menu.menu-scrolled {
  box-shadow: -35px 66px 57px rgba(17,17,26,0.1), -17px 3px 61px rgba(17,17,26,0.22), -14px 24px 55px rgba(17,17,26,0.19);
  max-width: 1120px;
}


@media (min-width: 1150px) {
#menu.menu-scrolled {
  box-shadow: -35px 66px 57px rgba(17,17,26,0.1), -17px 3px 61px rgba(17,17,26,0.22), -14px 24px 55px rgba(17,17,26,0.19);
  max-width: 1120px;
  font-size: 14px;
  margin-top: 28px;
  padding: 8px 0px 8px 0px;
}
}


#menu.menu-scrolled#nav-links {
  padding-right: 14px;
}


#nav-links {
  padding-left: 24px;
  padding-right: 14px;
  transition: color 0.3s;
  font-size: 15px;

}


#nav-links a:not(#work-together-button):hover {
  color: #ffffff;
}


#nav-links a:not(#work-together-button) {
  text-decoration: none;
  color: #a1a1a1;
  transition: color 0.3s;
  opacity: 1 !important;
  align-content: center;
  transform: none !important;
  padding: 0 12px;
  border-radius: 16px;
  font-weight: 400;
}

.button-wrapper {
  display: inline-block;
  margin-left: 24px;
  opacity: 1 !important;
  transform: none !important;
}

#work-together-button {
  position: relative;
  overflow: hidden;
}
#work-together-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:white;
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity 0.4s, background-position 0.4s;
  pointer-events: none;
}
#work-together-button:hover::before {
  opacity: 1;
  animation: iridescent-move 2.5s linear infinite alternate;
}
@keyframes iridescent-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
#work-together-button > * {
  position: relative;
  z-index: 1;
}

#work-together-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 18px;
  text-decoration: none;
  background-color: rgb(255, 255, 255);
  color: rgb(12, 12, 12);
  z-index: 1000;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  box-shadow: none;
  position: static;
}

#work-together-button:hover {
  background-color: #007bff;
  color: white;
}

#work-together-button svg {
  margin-right: 10px;
}

#hero-text {
  font-size: clamp(2rem, 6vw, 5.5rem) !important;
  background-color: white;
  padding: 0px 10px;
  border-radius: 16px;
  font-weight: bold;
  letter-spacing: -1.5px;
  text-align: center;
  margin-top: 0;
  margin-left: 0;
  line-height: 1;
  color: black;
  font-family: 'Syne';
  white-space: nowrap;
  opacity: 1;
  transform: none;
}

#rotating-word {
  display: inline-block;
  font-weight: 900;
  letter-spacing: -1.5px;
  transition: opacity 0.4s ease, transform 0.4s ease;
}



.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-content {
  display: flex;
  gap: 60px;
  align-items: center;
}

.about-text {
  flex: 1;
}

.about-text h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #333;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.about-photo {
  flex: 1;
  position: relative;
  max-width: 506px;
}

.photo-frame {
  position: relative;
  width: 506px;
  height: 506px;
  margin: 0 auto;
}

.photo-frame img {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 490px;
  height: 490px;
  object-fit: cover;
  border-radius: 4px;
}

.frame-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 506px;
  height: 506px;
  pointer-events: none;
}

@media (max-width: 850px) {
  .about-content {
    flex-direction: column;
    gap: 40px;
  }

#projects {
  padding-top: 50px!important;
}

 #nav-links a:not(#work-together-button) {
   margin: 0 16px;
   height: 95px;
   transition: color 0.3s;
 }

 .about-photo {
   max-width: 100%;
 }

 .photo-frame {
   width: 100%;
   height: auto;
   padding-bottom: 100%;
 }

 .photo-frame img {
   width: calc(100% - 16px);
   height: calc(100% - 16px);
   top: 8px;
   left: 8px;
 }

 .frame-svg {
   width: 100%;
   height: 100%;
 }

 .about-text h2 {
   font-size: 2.5rem !important;
   scale: 1 !important;
   line-height: 1.1;
   text-align: center;
 }
}

.input-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding-left:30px;
  justify-content: flex-start; /* Align to the left */
}

.input-wrapper-inline {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-left: 0;
  color: #111;
  font-family: 'Inter', sans-serif;
  opacity: 1 !important;
  transform: none !important;
}

.input-label {
  white-space: nowrap;
  font-size: 24px;  /* Same size as hero text */
  font-weight: 300;
  line-height: 1.2;
  color: black;
  margin-right: 10px;  /* Space between text and icon */
}

.svg-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding-left:10px;
}

#user-input {
  font-size: 18px;
  border: none;
  border-bottom: 2px solid #111;
  outline: none;
  background: transparent;
  padding: 4px 8px;
  color: #ffffff;
  width: 200px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 0 0 #5e5e5e;
}

#user-input:focus {
  border-bottom-color: #ffffff;
}

#user-input::placeholder {
  color: #999;
}

div.input-container {
  margin-left: 0px;
}

#offensive-balloon {
  position: absolute;
  right: 150px;
  top: 80px;
  transform: rotate(13deg);
  z-index: 9999;
  width: 209px;
  height: 77px;
  opacity: 0;
  visibility: hidden;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18)) drop-shadow(0 2px 4px rgba(0,0,0,0.10));
  transition: visibility 0s linear 0.8s;
}

#offensive-balloon.show {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s;
  animation: bounceIn 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

#offensive-balloon.hide {
  animation: bounceOut 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.8s;
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.6) rotate(80deg) translateY(20px) skew(0deg); }
  20%  { opacity: 1; transform: scale(1.2) rotate(13deg) translateY(-10px) skew(-5deg); }
  40%  { transform: scale(0.9) rotate(13deg) translateY(5px) skew(3deg); }
  60%  { transform: scale(1.1) rotate(13deg) translateY(-3px) skew(-2deg); }
  80%  { transform: scale(0.95) rotate(13deg) translateY(2px) skew(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(13deg) translateY(0) skew(0deg); }
}
@keyframes bounceOut {
  0%   { opacity: 1; transform: scale(1) rotate(13deg) translateY(0) skew(0deg); }
  90%  { opacity: 1; transform: scale(1.05) rotate(13deg) translateY(2px) skew(1deg); }
  100%  { opacity: 0; transform: scale(0.6) rotate(30deg) translateY(1px) skew(0deg); }
}

#offensive-balloon svg {
  position: absolute;
  left: 0;
  top: 0;
}

#offensive-balloon svg path {
  fill: #FF6A00;
}

#offensive-balloon-text {
  position: absolute;
  left: 6px;
  right: 0;
  top: 6px;
  width: 100%;
  text-align: left;
  color: white;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.10);
  padding: 0 18px;
  box-sizing: border-box;
}

.strip-section.strip-intro {
  transform: translateY(100vh);
  opacity: 0;
}
.strip-section {
  transform: translateY(0);
  opacity: 1;
  height: 100px;
  background: none;
  transition:
    transform 0.9s cubic-bezier(.77,0,.18,1),
    opacity 0.7s cubic-bezier(.77,0,.18,1);
}

.strip-container {
  width: 110vw;
  position: relative;
  top: -59px;
  height: 90px;
  left: 50%;
  transform: translateX(-50%) rotate(-2.05deg);
  background: #FFE100;
}

.strip-container-2 {
  top: 0;
  transform: translateX(-50%) rotate(2.05deg);
}

.strip-section-2 {
  position: relative;
  height: 70px;
  scale:1.5;
  background: none;
  transition:
    transform 0.9s cubic-bezier(.77,0,.18,1),
    opacity 0.7s cubic-bezier(.77,0,.18,1);
  margin-top: 100px;
  z-index: 10;
}

.strip-section-2 .location-strip-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: transform 0.1s ease-out;
}

.location-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.location-strip-row {
  display: flex;
  align-items: center;
  gap: 45px;
  justify-content: center;
  margin-top:-38px;
  transition: transform 0.1s ease-out;
}

.location-icon {
  display: block;
  margin-bottom: 0;
  height: 29px;
}

.location-icon svg {
  height: 29px;
  width: auto;
  display: block;
}

.location-label {
  margin: 0 8px;
  color: white;
  min-width: fit-content;
  font-size: 32px;
  font-weight: 600;
  width: max-content!important;
  letter-spacing: 1px;
  font-family: 'Inter', Arial, sans-serif;
  vertical-align: middle;
}

.location-hand {
  position: relative;
  top: -40px;
  margin: 0 0 5px 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.location-hand svg {
  height: 60px;
  width: auto;
  display: block;
}

#floating-svg-container {
  position: absolute;
  top: calc(50vh + 88px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.2s;
}

#floating-svg-container svg {
  display: block;
  animation: float-updown 1.5s ease-in-out infinite alternate;
}

@keyframes float-updown {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-45px); }
}

#floating-svg-container.hide {
  opacity: 0;
  transition: opacity 0.2s;
}

.filename-box {
  width: 240px;
  height: 20px;
  background-color: #D9D9D9;
  color: black;
  font-size: 14px;
  padding: 2px 8px;
  margin-bottom: 20px;
}

.about-title {
  font-size: 128px;
  font-weight: 600;
  color: #923DFA;
  margin: 0 0 20px 0;
  line-height: 1;
}

.age-display {
  font-size: 96px;
  color: black;
  margin: 20px 0;
  line-height: 1;
}

.mess-text {
  font-size: 32px;
  font-weight: 600;
  color: #FF8800;
  margin: 20px 0;
}

.rectangle-box {
  width: 750px;
  height: 265px;
  background-color: #D9D9D9;
  border-radius: 58px;
  margin: 20px 0;
}

.decoration-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.spotify-icon {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 80px;
  height: auto;
}

.gintama-mask {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 60px;
  height: auto;
}

.pixel-geometry {
  position: absolute;
  top: 50%;
  right: -50px;
  width: 100px;
  height: auto;
  transform: translateY(-50%);
}

@media (max-width: 850px) {
  .about-title {
    font-size: 64px;
  }

  .age-display {
    font-size: 48px;
  }

  .rectangle-box {
    width: 100%;
    height: 200px;
  }

  .mess-text {
    font-size: 24px;
  }

  .spotify-icon,
  .gintama-mask,
  .pixel-geometry {
    display: none;
  }
}

.aboutme-artboard {
  position: relative;
  width: 1400px;
  height: 650px;
  margin: 0 auto;
  overflow: visible;
  border-radius: 0;
  display: block;
  perspective: 1200px;
}

.aboutme-blob {
  position: absolute;
  left: 420px;
  top: 60px;
  width: 700px;
  height: 400px;
  background: #e5e3e7;
  border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
  z-index: 1;
  filter: blur(2px);
}

.aboutme-photo-group {
  position: absolute;
    left: 30px;
    top: 89px;
    transform: rotate(-2deg);
    z-index: 3;
}

.aboutme-photo-frame {
  position: relative;
  width: 425px;
  height: 425px;
  z-index: 3;
}

.aboutme-photo-img {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 409px;
  height: 409px;
  object-fit: cover;
  border-radius: 4px;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.77,0,.18,1);
}

.aboutme-frame-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 425px;
  height: 425px;
  z-index: 3;
  pointer-events: none;
}

.aboutme-filename {
  position: absolute;
  left: 273px;
  top: 400px;
  width: 200px;
  background: #D9D9D9;
  color: #111;
  font-size: 14px;
  border-radius: 4px;
  transform: rotate(-12deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 4;
}

.aboutme-title {
  position: absolute;
    left: 432px;
    top: 29px;
    font-size: 128px;
    font-weight: 600;
    color: #923DFA;
    font-family: 'Inter', sans-serif;
    transform: rotate(-9deg);
    z-index: 5;
    margin: 0;
    line-height: 1;
    letter-spacing: -4px;
}

.aboutme-spotify {
  position: absolute;
    left: 442px;
    top: 159px;
    width: 340px;
    transform: rotate(-7deg);
    z-index: 6;
}

.aboutme-gintama {
  position: absolute;
  left: 518px;
  top: 320px;
  width: 180px;
  transform: rotate(24deg);
  z-index: 7;
}

.aboutme-age {
  position: absolute !important;
  left: 500px;
  top: 430px;
  font-size: 128px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #111;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 16px;
}

.aboutme-age-emoji {
  font-size: 96px;
  margin-left: 8px;
}

.aboutme-text-rect {
  position: absolute;
  left: 750px;
  top: 173px;
  width: 540px;
  height: 340px;
  background: #111;
  border-radius: 36px;
  transform: rotate(13deg);
  z-index: 10;
  box-shadow: 0 12px 48px 0 rgba(0,0,0,0.32), 0 2px 8px 0 rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutme-maintext {
  color: #bcbcbc;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  padding: 36px 38px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  white-space: pre-line;
}

.aboutme-maintext b {
  font-weight: 700;
}

.aboutme-mess {
  position: absolute;
  right: 116px;
  top: 73px;
  color: #FF6600;
  font-size: 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transform: rotate(37deg);
  z-index: 20;
}

.aboutme-pixelgeo {
  position: absolute;
  right: 20px;
  bottom: 157px;
  width: 120px;
  transform: rotate(80deg);
  z-index: 15;
}

@media (max-width: 1500px) {
  .aboutme-artboard {
    width: 100vw;
    min-width: 900px;
    max-width: 100vw;
    height: 900px;
  }
}

/* About section and timeline */

#viewport {
  width: 100vw;
  max-height: 550px;
  margin-top: -116px;
  margin-bottom: -114px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  

}

#viewport::-webkit-scrollbar {
  display: none;
}

#content {
  display: flex;
  height: 100%;
  width: 100vw; /* Starts small */
  transition: width 0.3s ease;
}

#divA {
  width: 100vw;
  height: 550px;
  display: flex;
  flex-shrink: 0;
}

.column {
  width: 33.333vw;
  padding: 1rem;
  border-right: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


#divB {
  width: 90vw;
  flex-shrink: 0;
  display: none;
  align-items: center;
  padding: 2rem;
  overflow-x: auto;
  cursor: grab;
}

#divB.visible {
  display: flex;
}

.timeline {
  display: flex;
  gap: 2rem;
  width: -webkit-fill-available;
  margin-right: 144px;
  height: 290px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-evenly;
}



:root {
  --shadow-color: 0deg 0% 64%;
  --timeline-title-color: #b4c6e0;
  --timeline-paragraph-color: #a1a1a1;
  --timeline-title-weight: 400;
}




.timeline-entry {
  min-width: 200px;
  padding: 1rem;
  max-width: 200px;
  border:solid 1px rgba(45, 47, 61, 0.226);
  background: #171717;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-align: center;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(.33,1.53,.69,.99), 
              transform 0.8s cubic-bezier(.33,1.53,.69,.99),
              visibility 0s 0.8s;
  pointer-events: none;
}


.timeline-entry.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(.33,1.53,.69,.99), 
              transform 0.8s cubic-bezier(.33,1.53,.69,.99),
              visibility 0s;
  pointer-events: auto;
}

.timeline-entry h4 {
  color: var(--timeline-title-color);
  font-weight: var(--timeline-title-weight);
  margin: 0.5rem 0;
}

.timeline-entry:hover {
  transform: translateY(-10px);
}


.timeline-entry p {
  color: var(--timeline-paragraph-color);
  margin: 0.5rem 0 0 0;
  text-align: start;
}

.timeline-entry small {
  color: rgb(67, 69, 83);
}


.projects-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

.projects-title {
  font-size: 48px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  margin-bottom: 48px;
  letter-spacing: -2px;
}

.projects-flex {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.projects-tabs {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 260px;
}


.project-preview-link {
  display: block;
  text-decoration: none;
}

.project-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(.33,1.53,.69,.99);
  width: 400px;
  box-shadow: none;
  height: auto;
  border-radius: 18px;
  display: block;
}
.project-preview.visible {
  opacity: 1;
}

.project-preview.project1 { background: #923DFA; }
.project-preview.project2 { background: #FF8800; }
.project-preview.project3 { background: #00C9A7; }
.project-preview.project4 { background: #FFE100; }
.project-preview.project5 { background: #F9155A; }



@media (max-width: 975px) {
  .projects-flex {
    flex-direction: column;
    gap: 32px;
  }
  .project-preview {
    width: 100%;
    min-width: 0;
    height: 180px;
  }
  .projects-tabs {
    min-width: 0;
  }
  .project-tab {
    font-size: 32px;
  }
}

#copyright {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 12px;
  font-family: 'Inter', Arial, sans-serif;
  z-index: 2;
  opacity: 1 !important;
  transform: none !important;
}

#copyright.fade-in {
  opacity: 1;
  transform: none !important;
}

#tightrope {
  display: none !important; /* Force hide by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

/* Show tightrope when allowed */
body.show-tightrope #tightrope {
  display: block !important;
}

.aboutme-chess-bg {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 130px;
  top: 0px;
  background-image: url('About me Assets/pattern_Chess.png');
  background-repeat: repeat;
  background-size: 16px 16px;
  z-index: 2;
  border-radius: 8px;
}



.projects-content {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  border-radius: 48px;
   width: 100%;
  padding: 100px 100px 200px 100px; /* top, right, bottom, left */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .projects-content {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 975px) {
  .projects-content {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 24px;
    padding-top: 32px;
    padding-bottom: 80px;
  }
}

.maybe-else-border {
   width: 100%;
   max-width: 540px;
   margin: 0 auto;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   border-radius: 48px;
   box-shadow: 0 0 0 8px #fff;
   background: transparent;
   padding: 0;
}

.maybe-else-container {
   width: fit-content;
   display: flex;
   background-color: black;
   border-radius: 40px;
   align-items: center;
   flex: 1 1 0;
   box-shadow:
   -0.7px 1px 1.4px hsl(var(--shadow-color) / 0.32),
   -3.7px 5.6px 7.6px -0.4px hsl(var(--shadow-color) / 0.32),
   -7px 10.3px 14px -0.7px hsl(var(--shadow-color) / 0.32),
   -11.4px 17px 23px -1.1px hsl(var(--shadow-color) / 0.32),
   -18.2px 27.1px 36.7px -1.4px hsl(var(--shadow-color) / 0.32),
   -28.5px 42.3px 57.4px -1.8px hsl(var(--shadow-color) / 0.32),
   -43.3px 64.3px 87.2px -2.1px hsl(var(--shadow-color) / 0.32),
   -63.8px 94.6px 128.4px -2.5px hsl(var(--shadow-color) / 0.32),
   0px 0px 0px 20px hsl(0 0% 100% / 1);
}

.maybe-else-left {
   background:#D4FF3F;
    color: #3D7900;
   font-family: 'Syne', 'Inter', sans-serif;
   font-size: 1.25rem;
   font-weight: 600;
   border-radius: 40px;
   padding: 0 32px;
   transition: background 0.3s;
   z-index: 2;
   min-width: max-content;
   
   height: 46px;
   display: flex;
   align-items: center;
   position: relative;
   margin-left: 5px;
}

.maybe-else-right {
   background: #111;
   border-radius: 0 40px 40px 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0 2px 0 0;
   height: 56px;
   z-index: 2;
   position: relative;
   min-width: 64px;
   width: 64px;
   max-width: none;
   flex: 1 1 0;
   box-sizing: border-box;
   transition: width 0.4s cubic-bezier(.33,1.53,.69,.99), padding 0.4s cubic-bezier(.33,1.53,.69,.99);
}

.maybe-else-input {
   flex: 1 1 0;
   min-width: 0;
   width: 0;
   opacity: 0;
   border: none;
   outline: none;
   background: transparent;
   color: #fff;
   font-size: 1.1rem;
   transition: width 0.4s, opacity 0.3s, padding 0.3s, border-bottom-color 0.3s;
   z-index: 1;
   pointer-events: none;
   margin-right: 8px;
   height: 36px;
   display: flex;
   align-items: center;
}

.maybe-else-input::placeholder {
   color: #8a8a8a;
   opacity: 0.7;
}

.maybe-else-input:focus {
   border-bottom: 2px solid #fff;
   color: #fff;
}


.maybe-else-btn {
   flex: none;
   background: #fff;
   border: 3px solid #111;
   border-radius: 60%;
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.2s, border 0.2s;
   padding: 0;
   margin-left: 0;
   flex-shrink: 0;
   position: relative;
   right: 0;
  }

.maybe-else-btn svg {
   width: 24px;
   height: 24px;
   display: block;
   transition: transform 0.3s cubic-bezier(.33,1.53,.69,.99);
   transform: rotate(-90deg);
}

.maybe-else-container:hover .maybe-else-btn svg,
.maybe-else-container:focus-within .maybe-else-btn svg {
   transform: rotate(225deg);
}

.maybe-else-container:hover .maybe-else-right,
.maybe-else-container:focus-within .maybe-else-right {
   width: 380px;
   padding: 0 2px 0 20px;
}

.maybe-else-container:hover .maybe-else-input,
.maybe-else-container:focus-within .maybe-else-input {
   width: 100%;
   opacity: 1;
   background: transparent;
   border-bottom: 2px solid #fff;
   padding: 0 8px;
   pointer-events: auto;
}

.location-icon svg,
.location-label {
 color: #D38900 !important;
 fill: #D38900 !important;
 stroke: #D38900 !important;
}

.highlight-string {
 display: inline-block;
 background: #923DFA;
 border: solid;
 border-width: 15px;
 border-color: #ffffff;
 color: #2d0066;
 font-weight: 800;
 border-radius: 32px;
 padding: 0.01em 0.3em 0.1em 0.3em;
 transform: rotate(-4deg);
 font-family: inherit;
 font-size: inherit;
 margin-right: 0.1em;
}

/* --- HERO INTRO TRANSITION --- */
body.hero-intro #hero-section,
#hero-section.hero-intro {
 position: fixed !important;
 top: 0 !important;
 left: 0 !important;
 box-shadow: 0 0 0 9px #fff inset;
  width: 100vw !important;
 max-width: 100vw !important;
 height: 100vh !important;
 margin: 0 !important;
 padding: 0 !important;
 border-radius: 0 !important;
 background: #fff !important;
 box-shadow: 0 0 0 24px #fff inset !important;
 background-image: none !important;
 z-index: 9999 !important;
 transition:
   border-radius 1s cubic-bezier(.77,0,.18,1),
   background 1s cubic-bezier(.77,0,.18,1),
   box-shadow 1s cubic-bezier(.77,0,.18,1),
   height 1s cubic-bezier(.77,0,.18,1),
   width 1s cubic-bezier(.77,0,.18,1),
   max-width 1s cubic-bezier(.77,0,.18,1),
   margin 1s cubic-bezier(.77,0,.18,1),
   background-image 1s cubic-bezier(.77,0,.18,1);
}

/* Only hide these sections during the intro transition */
body.hero-intro .strip-section,
body.hero-intro #projects {
 opacity: 0 !important;
 visibility: hidden !important;
 transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Show these sections after the intro transition */
body:not(.hero-intro) .strip-section,
body:not(.hero-intro) #projects {
 opacity: 1 !important;
 visibility: visible !important;
}

body.hero-intro #menu,
#menu.hero-intro {
 position: fixed;
 left: 0;
 right: 0;
 top: -124px;
 z-index: 10000;
 transition: top 1s cubic-bezier(.77,0,.18,1);
}

#navbar-spacer {
 height: 90px; /* 70px height + 20px top padding + 20px bottom padding */
 transition: height 1s cubic-bezier(.77,0,.18,1);
}
body.hero-intro #navbar-spacer {
 height: 0 !important;
}

.signature-wrapper {
 margin-top: 46px;
 z-index: 2 !important;
 display: flex;
 justify-content: center;
 align-items: center;
}
#signature {
 width: 360px;
 max-width: 90vw;
 height: auto;
 display: block;
}

.hero-card.maybe-else-tilt {
   display: flex;
   justify-content: center;
   transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
   will-change: transform;
}

/* Scroll Progress Bar Styles */
.scroll-progress {
 position: fixed;
 left: 50px;
 top: 85%;
 transform: translateY(-50%);
 width: 3px;
 border-radius: 3.5px;
 height: 110px;
 background: rgb(255, 255, 255);
 z-index: 1000;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 opacity: 0;
 transition: opacity 0.3s;
}

.scroll-progress.visible {
 opacity: 1;
}

.scroll-progress-bar {
 width: 100%;
 border-radius: 3.5px;
 height: 0%;
 background: #008CFF;
 transition: height 0.1s;
}

.hero-services-phrase {
 margin-top: 10px;         /* Space from hero text */
 margin-bottom: 40px;      /* Space below this phrase */
 text-align: center;
 font-size: 1.2rem;        /* Customize font size */
 font-weight: 400;         /* Customize weight */
 color: #b4c6e0;           /* Customize color */
 letter-spacing: 0.04em;   /* Customize spacing */
 font-family: 'Inter', Arial, sans-serif; /* Customize font */
 border: 9px solid white;
 background: #f6faff;      /* Optional: subtle background */
 border-radius: 18px;      /* Optional: rounded corners */
 display: inline-block;
 padding: 10px 32px;       /* Padding for pill effect */
 }

.hero-services-phrase .service-category {
 font-variation-settings: "wght" 400;
 font-weight: 400;
 transition: font-variation-settings 0.7s cubic-bezier(.33,1.53,.69,.99), color 0.2s;
 cursor: pointer;
}
.hero-services-phrase .service-category:hover {
 font-variation-settings: "wght" 600;
 font-weight: 600;
 color: #b4c6e0;
}

.fade-in {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 1s cubic-bezier(.33,1.53,.69,.99), transform 1.2s cubic-bezier(.33,1.53,.69,.99);
}
.fade-in.visible {
 opacity: 1;
 transform: translateY(0);
}

#hero-text.fade-in {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 1s cubic-bezier(.33,1.53,.69,.99), transform 1s cubic-bezier(.33,1.53,.69,.99);
}
#hero-text.fade-in.visible {
 opacity: 1;
 transform: translateY(0);
}

@media (max-width: 850px) {
  #hero-section {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    margin: 12px auto !important;
    border-radius: 60px 60px 0 0 !important;
    padding-bottom: 0 !important;
    height: 110vh !important;
  }

  #hero-section::before {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    margin: 12px auto !important;
    border-radius: 60px 60px 0 0 !important;
    height: 100vh !important;
    background-size: 16px 16px !important;
    box-shadow: 0 0 0 9px #fff inset !important;
    background-image: radial-gradient(#979797  1px, transparent 0.6px)!important;
  }

  .highlight-string {
    border-width: 3px;
    border-radius: 9px;
  }
 
}

/* Hamburger menu styles */
#hamburger-menu {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 16px;
  position: relative;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99999 !important;
  pointer-events: auto !important;
}
.hamburger-line {
  position: absolute;
  left: 0;
  width: 40px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(.33,1.53,.69,.99), opacity 0.3s;
}
.hamburger-line.top {
  top: 0;
}
.hamburger-line.bottom {
  bottom: 0;
}
#hamburger-menu.active .hamburger-line.top {
  transform: translateY(6.5px) rotate(45deg);
}
#hamburger-menu.active .hamburger-line.bottom {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 975px) {
  #hamburger-menu {
    display: flex;
    z-index: 30000;
    pointer-events: auto;
    position: relative;
     }
  #logo {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #About-mobile {
    margin-top:2vh!important;
  }
  #nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    font-family: 'Inter';
    max-height: 100dvh;
    background: #111;
    z-index: 20000;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    gap: 32px;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    display: none;
    transition: color 0.3s;
  }
  body.menu-open #nav-links {
    display: flex;
  }
  #nav-links a {
    font-size: 2rem;
    color: #fff;
    margin: 0;
    padding: 16px 0;
    text-align: center;
    width: 100%;
    display: block;
  }
  
  #logo {
    height: 100%;
    display: flex;
    align-items: center;
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 975px) {
    #nav-links {
      height: 100vh;
      min-height: 100vh;
      max-height: 100vh;
    }
  }
}

@media (max-width: 975px) {
  body.menu-open #nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    padding-left: 0;
        left: 0;
    width: 100vw;
    height: 100vh;
    background: #111;
    z-index: 20000;
    padding-top: 80px;
    gap: 4%;
    box-shadow: none;
  }

  #viewport {
       margin-top: 0px;
  }

  .maybe-else-left {
    border: solid 5px black;
    margin-left: 0;
    margin-top:0;
  }


  #nav-links a:not(#work-together-button-mobile) {
    font-size: 2.5rem;
    color:white;
    width: 80% !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    height:8%;
  } 

  .signature-wrapper {
    margin-top: 10%;
    scale: 0.8;
  }
  #navbar-spacer {
    height: 70px !important;
  }

  #logo {
    position: fixed;
    top: 24px;
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30000 !important;
    background: none;
    pointer-events: none;
  }
  .logo-mobile {
    display: inline !important;
    font-size: 2.2rem;
    color: #fff;
    background: none;
    z-index: 30001 !important;
    pointer-events: auto;
  }
  .logo-desktop { display: none !important; }
  #nav-links .button-wrapper {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin: 0;
    margin-bottom: 24px;
  }


 

  #work-together-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    color: #111;
    border-radius: 32px;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 18px 32px 18px 24px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.10);
    margin: 0 auto 0 auto;
    min-width: 0;
    max-width: 95vw;
    border: none;
    overflow: visible;
    z-index: 20010;
    transition: background 0.2s, color 0.2s;
  }

  #work-together-button .work-together-text {
    font-size: 1.1em;
    font-weight: 600;
    color: #111;
    z-index: 2;
    position: relative;
  }
  #work-together-button .sparkle {
    position: absolute;
    left: -18px;
    top: -18px;
    font-size: 2em;
    color: #FFE100;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0 8px #fff7b2);
  }
  #work-together-button .sparkle2 {
    left: auto;
    right: -12px;
    top: 12px;
    font-size: 1.3em;
    color: #FFE100;
    filter: drop-shadow(0 0 6px #fff7b2);
  }
  #work-together-button .pink-sticker {
    position: absolute;
    right: -32px;
    top: -38px;
    background: #FF1078;
    color: #730038;
    font-size: 1em;
    font-weight: 800;
    border-radius: 18px;
    font-family: 'Syne', sans-serif;
    padding: 10px 18px 6px 18px;
    transform: rotate(10deg);
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    text-align: left;
    line-height: 1.1;
    pointer-events: none;
    white-space: pre-line;
    letter-spacing: 0.01em;
  }
  #work-together-button .pink-sticker .sticker-sub {
    font-size: 0.85em;
    font-weight: 400;
    display: block;
    font-family: 'Syne', sans-serif;
    margin-top: 2px;
    opacity: 1;
  }

}

@media (max-width: 850px) {
  .maybe-else-container:hover .maybe-else-right,
  .maybe-else-container:focus-within .maybe-else-right {
    width: 50vw !important;
    max-width: 50vw !important;
    min-width: 0 !important;
    padding: 0 2px 0 0;
  }
  #menu {
    display: flex;
    align-items: center;
    margin-left: 32px;
    margin-right: 32px;
    height: 56px;
    padding: 0 12px;
  }
}

.logo-desktop { display: inline; }
.logo-mobile { display: none; }

@media (max-width: 1150px) {
  .logo-desktop { display: none !important; }
  .logo-mobile { display: inline !important; }
  #menu {
    margin-right: 144px;
    margin-left: 144px;
  }


}

@media (max-width: 850px) {
  .logo-desktop .hero-main{
    scale: 0.9;
  }
}
@media (max-width: 850px) {
  .hero-services-phrase {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (max-width: 850px) {
  .hero-cards-wrapper {
    gap:10px
  }
  .hero-card.hero-main {
    padding-top:0;
    height: 180px;
  }

  #signature {
    scale: 0.8;
  }
}

/* Utility classes for responsive visibility */
.desktop-only { display: inline-flex !important; }
.mobile-only { display: none !important; }
@media (max-width: 975px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex !important; }
}

/* Restore original desktop button style */
#work-together-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 18px;
  text-decoration: none;
  background-color: rgb(255, 255, 255);
  color: rgb(12, 12, 12);
  z-index: 1000;
  font-family: 'Arial', sans-serif;
  font-size: .875rem;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: none;
  box-shadow: none;
  position: static;
}
#work-together-button:hover {
  background: linear-gradient(120deg, rgb(255 255 255) 0%, rgb(255 200 255) 20%, rgb(171 216 255) 40%, rgb(200 255 238) 60%, rgb(255 251 196) 80%, rgb(141 249 255) 100%);

  color: #111; /* keep text readable */
  transition: background 0.4s cubic-bezier(.33,1.53,.69,.99);
  }
#work-together-button svg {
  margin-right: 10px;
}

/* Playful mobile button style */
#work-together-button-mobile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  color: #111;
  height: 95px;
  border-radius: 32px;
  font-size: 1.3rem;
  font-weight: 600;
  padding: 18px 32px 18px 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10);
  margin: 0 auto 0 auto;
  min-width: 0;
  max-width: 95vw;
  border: none;
  overflow: visible;
  z-index: 20010;
  transition: color 0.3s;
  transition: background 0.2s, color 0.2s;
}

#nav-links a:not(#work-together-button-mobile) {
  align-items: center;
}

#work-together-button-mobile .work-together-text {
  font-size: 0.87em;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #111;
  z-index: 2;
  position: relative;
}
#work-together-button-mobile .sparkle {
  position: absolute;
  left: -18px;
  top: -18px;
  font-size: 2em;
  color: #FFE100;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 8px #fff7b2);
}
#work-together-button-mobile .sparkle2 {
  left: auto;
  right: -12px;
  top: 12px;
  font-size: 1.3em;
  color: #FFE100;
  filter: drop-shadow(0 0 6px #fff7b2);
}
#work-together-button-mobile .pink-sticker {
  position: absolute;
  right: 0px;
  margin-right: 16px;
  scale: 0.8;
  top: -40px;
  background: #FF1078;
  color: #730038;
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
  border-radius: 18px;
  padding: 10px 18px 6px 18px;
  transform: rotate(10deg);
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  text-align: left;
  line-height: 1.1;
  pointer-events: none;
  white-space: pre-line;
  letter-spacing: 0.01em;
}
#work-together-button-mobile .pink-sticker .sticker-sub {
  font-size: 0.75em;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  display: block;
  margin-top: 2px;
  opacity: 1;
}

@media (max-width: 975px) {
  /* Align logo left and hamburger right in menu */
  #menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 12px;
    position: fixed;
    
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    
  }


  #logo {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 30000 !important;
    background: none;
    pointer-events: auto;
    padding: 0;
  }
  #hamburger-menu-container {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    z-index: 30000;
  }
  .logo-mobile {
    display: inline !important;
    font-size: 2.2rem;
    color: #fff;
    background: none;
    z-index: 30001 !important;
    pointer-events: auto;
  }
  .logo-desktop { display: none !important; }
  #nav-links .button-wrapper {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin: 0;
    margin-bottom: 24px;
  }
  .mobile-copyright.mobile-only {
    display: none !important;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 0;
    width: max-content;
    max-width: 95vw;
    text-align: center !important;
    color: #7a7a7a;
    font-size: 0.75em !important;
    opacity: 0.85;
    z-index: 20020;
    background: none;
    pointer-events: none;
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.4;
    padding: 0 16px 12px 16px;
  }
  body.menu-open .mobile-copyright.mobile-only {
    display: inline-flex !important;
  }
}

@media (max-width: 850px) {

#menu {
  margin-left: 32px;
  margin-right: 32px;
}

}

/* Mobile Work Together button wrapper: fixed position, margin, and centering */
.mobile-work-together-wrapper {
    margin-top: 15vh;
  right: 0;
  bottom: 160px;
  width: 100vw;
  display: flex;
  justify-content: center;
  z-index: 20030;
  pointer-events: none;
}
#work-together-button-mobile {
  border-radius: 30px !important;
  margin-left: 16px;
  margin-right: 16px;
  width: calc(100vw - 32px);
  max-width: 500px;
  pointer-events: auto;
}
.star-svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.star-12 svg { width: 12px; height: 12px; }
.star-24 svg { width: 24px; height: 24px; }
.star-42 svg { width: 42px; height: 42px; }

/* Position the stars for a playful look */
#work-together-button-mobile .star-12 {
  position: absolute;
  left: -10px;
  top: 10px;
  z-index: 3;
}
#work-together-button-mobile .star-24 {
  position: absolute;
  left: 18px;
  top: -18px;
  z-index: 3;
}
#work-together-button-mobile .star-42 {
  position: absolute;
  right: -16px;
  bottom: -18px;
  z-index: 3;
}

/* Copyright always at the bottom of the mobile menu overlay */
.mobile-copyright.mobile-only {
  display: none !important;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: 0;
  width: max-content;
  max-width: 95vw;
  text-align: center !important;
  color: #616161;
  font-size: 0.75em !important;
  opacity: 0.85;
  z-index: 20020;
  background: none;
  pointer-events: none;
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.4;
  padding: 0 16px 12px 16px;
}
body.menu-open .mobile-copyright.mobile-only {
  display: inline-flex !important;
}

.about-section {
  width: 100%;
  min-height: 200px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  height:290px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.2fr;
  grid-template-rows: 0px 1fr;
  grid-template-areas:
    ". . . ."
    "photo illustration text button";
  align-items: center;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding-left: clamp(16px, 8vw, 184px);
  padding-right: clamp(16px, 8vw, 184px);
  min-height: 260px;
}
.about-photo-col { grid-area: photo; display: flex; justify-content: flex-end; align-items: center; margin-right: -235px; pointer-events: none !important;}
.about-illustration-col { grid-area: illustration; display: flex; justify-content: center; align-items: center;   pointer-events: none !important;}
.about-text-col {
  grid-area: text;
  text-align: left;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: rgb(119, 120, 132);
  font-family: 'Inter', Arial, sans-serif;
  padding: 0 24px;
  max-width: 540px;
  word-break: normal;
  white-space: normal;
}
.about-btn-col {
  grid-area: button;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-width: 64px;
  width: 80px;
}
.about-photo-img { height: auto; object-fit: cover; z-index: 3; pointer-events: none; user-select: none; user-select: none; -drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.77,0,.18,1);
}
.about-illustration-img { width: 195px; height: 170px; object-fit: contain; }
.about-btn { background: #fff; color: #111; border: none; border-radius: 50px; padding: 14px 32px; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.10); transition: background 0.2s, color 0.2s, transform 0.2s; }
.about-btn:hover { background: #ffe100; color: #111; transform: translateY(-2px); }

@media (max-width: 850px) {
  .about-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "text text text"
      "button illustration photo";
    width: 100%;
    max-width: 100vw;
    padding-left: clamp(24px, 24px, 184px);
    padding-right: clamp(24px, 24px, 184px);
    min-height: 0;
  }
  .about-text-col {
    padding: 0;
    font-size: 14px;
    width: 60%;
    text-align: left;
    margin-bottom: 12px;
  }
  .about-btn-col, .about-illustration-col, .about-photo-col {
    min-width: 0;
    padding: 0;
    margin-right: 0;
    align-items: flex-end;
  }
  .about-btn-col { justify-content: flex-start; }
  .about-btn {
    width: 100%;
    justify-content: flex-start;
    font-size: 1rem;
    padding: 12px 0;
    align-items: flex-start;
    border-radius: 24px;
    min-width: 0;
    max-width: 100%;
  }
  .about-illustration-img {
    width: 195px;
    height: 170px;
    margin: 0 auto;
    display: block;
     }
  .about-photo-col {
    justify-content: flex-end;
    position: relative;
    overflow: visible;
    right: -200px;
    bottom: -230px;
    scale: 0.9;
    z-index: 2;
  }
  .about-photo-img {
    height: auto;
    border-radius: 18px;
    position: absolute;
    
    transform: scalex(-1);
    z-index: 2;
  }
  .strip-section-2 {
    background: none;
  }
}

.about-btn-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 64px;
  width: 80px;
}

.about-cv-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.2s, box-shadow 0.2s;
}
.about-cv-btn:hover {
  box-shadow: 0 4px 16px rgba(255,225,0,0.15);
}
.about-cv-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.25s cubic-bezier(.33,1.53,.69,.99);
  transform: rotate(0deg);
}

.about-cv-btn:hover svg {
  transform: rotate(45deg);
}

.about-cv-btn:active svg {
  transform: rotate(0deg);
}

.about-cv-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 0;
  text-align: center;
  line-height: 1.1;
}
.desktop-cv-label { display: inline; }
.mobile-cv-label { display: none; }

@media (max-width: 850px) {
  .desktop-cv-label { display: none; }
  .mobile-cv-label { display: inline; }
  .about-cv-label { font-size: 0.95rem; }
}

.about-cv-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #D4FF3F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.about-cv-text {
  font-family: 'Syne', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #3D7900;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* --- PROJECTS LIST NEW DESIGN --- */



#projects {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 200px;
  background: white;
  box-shadow: none;
  display: flex;
    z-index: 1;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.projects-content {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  border-radius: 48px;
   width: 100%;
  padding: 100px 100px 200px 100px; /* top, right, bottom, left */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .projects-content {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 975px) {
  .projects-content {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 24px;
    padding-top: 32px;
    padding-bottom: 80px;
  }
}

.projects-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.project-row, .project-row-playground {
  box-sizing: border-box;
  width: 100%;
}

/* Desktop styles (default) */
.project-row {
  display: flex;
  align-items: center;
  padding: 16px 48px;
  min-height: 72px;
  font-family: 'Inter', sans-serif;
  font-size: 2.1rem;
  font-weight: 400;
  border-radius: 32px;
  text-decoration: none;
  color: #111;
  background: none;
  transition: background 0.3s;
  position: relative;
  cursor: pointer;
}
.project-row:first-child {
  background: #f6faff;
}
.project-row:hover {
  background: #f6faff;
}
.project-row:not(:first-child):hover ~ .project-row:first-child,
.project-row:hover ~ .project-row:first-child {
  background: none;
}
.project-row-top,
.project-row-bottom {
  display: contents; /* flatten for desktop */
}
.project-number {
  min-width: 48px;
  font-size: 1.2rem;
  color: #b4c6e0;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-right: 24px;
  text-align: right;
}
.project-title {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 2.1rem;
  font-weight: 500;
  color: #111;
  margin-right: 32px;
  min-width: 220px;
  flex: 1 1 0;
  letter-spacing: -0.5px;
  transition: color 0.2s;
}
.project-tags {
  min-width: 180px;
  margin-right: 32px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  font-size: 1.1rem;
  color: #b4c6e0;
}
.project-tags .tag {
  background: #f6faff;
  color: #b4c6e0;
  border-radius: 18px;
  padding: 6px 18px;
  font-size: 1.1rem;
  font-weight: 500;
  margin-right: 0;
  display: inline-block;
}
.project-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 90px;
  margin-right: 32px;
  justify-content: flex-end;
}
.project-icons .icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: none;
}
.project-vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #b4c6e0;
  font-size: 1.1rem;
  font-weight: 500;
  margin-right: 12px;
  margin-left: 24px;
  letter-spacing: 0.1em;
  min-width: 24px;
  text-align: center;
}

/* Mobile styles */
@media (max-width: 768px) {
  .project-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 12px;
    min-height: unset;
    font-size: 1.1rem;
  }
  .project-row-top {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }
  .project-row-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.98em;
    margin-top: 2px;
  }
  .project-number {
    order: 1;
    font-size: 1.1em;
    min-width: 32px;
    margin-right: 8px;
  }
  .project-title {
    font-size: 1.1em;
    margin-right: auto;
    min-width: unset;
    order: 2;
  }
  .project-icons {
    gap: 4px;
    min-width: unset;
    margin-right: 0;
    order: 4;
  }
  .icon img {
    width: 24px;
    height: 24px;
  }
  .project-tags {
    min-width: unset;
    margin-right: 0;
    order: 3;
  }
  .project-tags .tag {
    padding: 4px 12px;
    font-size: 0.98em;
    border-radius: 12px;
  }
  .project-vertical-label {
    writing-mode: initial;
    transform: none;
    margin-left: auto;
    font-size: 0.98em;
    color: #222;
    order: 5;
    font-weight: 500;
    min-width: unset;
    text-align: right;
  }
}

.project-row:last-child {
  border-bottom: none;
}
.project-row-empty {
  min-height: 48px;
  border: none;
  background: none;
  pointer-events: none;
}

.project-row-playground {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 0 48px;
  color: #b4c6e0;
  background: none;
  border-bottom: none;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}
.project-row-playground .project-title {
  color: #b4c6e0;
}
.project-row-playground .project-lock {
  margin-left: 18px;
  margin-right: 18px;
  display: flex;
  align-items: center;
}
.project-row-playground .project-lock svg {
  width: 32px;
  height: 32px;
  display: inline-block;
}
.project-row-playground .project-password-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 32px;
  font-size: 1.1rem;
  color: #b4c6e0;
}
.project-row-playground .password-label {
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.project-row-playground .password-box {
  background: #e6eef7;
  border-radius: 8px;
  padding: 6px 24px;
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  margin-bottom: 2px;
  color: #b4c6e0;
}
.project-row-playground .password-hint {
  font-size: 0.95rem;
  color: #b4c6e0;
  opacity: 0.7;
}



/* --- PLAYGROUND REVEAL --- */
.project-row-playground {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 0 48px;
  color: #b4c6e0;
  background: none;
  border-bottom: none;
  cursor: default;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transition: background 0.18s;
}
.project-row-playground .project-title {
  color: #b4c6e0;
}
.project-row-playground .project-lock {
  margin-left: 18px;
  margin-right: 18px;
  display: flex;
  align-items: center;
}
.project-row-playground .project-lock svg {
  width: 32px;
  height: 32px;
  transition: opacity 1s;
  display: inline-block;
}
.project-row-playground .project-playground-reveal {
  display: inline-block;
  position: relative;
  width: 320px; /* adjust as needed */
  height: 60px; /* adjust as needed */
  overflow: hidden;
  vertical-align: middle;
  margin-left: 32px;
}
.project-row-playground .pixel-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.project-row-playground .pixel-icon {
  height: 30px;
  width: auto;
  margin: 0 -3px;
  transition: transform 0.8s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}
.project-row-playground .playground-enter-btn {
  position: absolute;
  margin-right: 25px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  background: none;
  border: none;
  justify-self: anchor-center;
  font-size: 1.3rem;
  color: #111;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s 0.2s;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
}
.project-row-playground:hover {
  background: #f6faff;
}

.project-row-playground:hover .playground-enter-btn {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
}

.project-row-playground:hover .project-lock svg {
  opacity: 0;
  transition-delay: 0.2s;
}


  .project-row-playground .project-playground-reveal {
    width: 320px;
    height: 120px;
    margin-left: 12px;
  }

  




  /* --- PLAYGROUND REVEAL: Center-outwards parting animation --- */
.project-row-playground .pixel-icon:nth-child(1) { transform: translateX(10px) translateY(-3px) scale(1.08) rotate(-20deg); }
.project-row-playground .pixel-icon:nth-child(2) { transform: translateX(10px) translateY(2px) scale(1.07) rotate(-12deg); }
.project-row-playground .pixel-icon:nth-child(3) { transform: translateX(10px) translateY(-5px) scale(1.06) rotate(35deg); }
.project-row-playground .pixel-icon:nth-child(4) { transform: translateX(0px) translateY(5px) scale(1.05) rotate(8deg);}
.project-row-playground .pixel-icon:nth-child(5) { transform: translateX(0px) translateY(5px) scale(1.05) rotate(10deg);}
.project-row-playground .pixel-icon:nth-child(6) { transform: translateX(0px) translateY(-5px) scale(1.05) rotate(-3deg); }
.project-row-playground .pixel-icon:nth-child(7) { transform: translateX(0px) translateY(5px) scale(1.06) rotate(10deg); }
.project-row-playground .pixel-icon:nth-child(8) { transform: translateX(0px) translateY(-7px) scale(1.07) rotate(52deg); }
.project-row-playground .pixel-icon:nth-child(9) { transform: translateX(0px) scale(1.08) rotate(10deg); }

/* --- PLAYGROUND REVEAL: Center-outwards parting animation --- */
.project-row-playground:hover .pixel-icon:nth-child(1) { transform: translateX(-53px) translateY(35px) rotate(-120deg); }
.project-row-playground:hover .pixel-icon:nth-child(2) { transform: translateX(-57px) translateY(20px) scale(1.07) rotate(-60deg); }
.project-row-playground:hover .pixel-icon:nth-child(3) { transform: translateX(-50px) translateY(27px) scale(1.06) rotate(-30deg); }
.project-row-playground:hover .pixel-icon:nth-child(4) { transform: translateX(-40px) translateY(35px) scale(1.05) rotate(0deg);}
.project-row-playground:hover .pixel-icon:nth-child(5) { transform: translateX(-45px) translateY(35px) scale(1.05) rotate(10deg);}
.project-row-playground:hover .pixel-icon:nth-child(6) { transform: translateX(40px) translateY(35px) scale(1.05) rotate(15deg); }
.project-row-playground:hover .pixel-icon:nth-child(7) { transform: translateX(60px) translateY(17px) scale(1.06) rotate(30deg); }
.project-row-playground:hover .pixel-icon:nth-child(8) { transform: translateX(58px) translateY(29px) scale(1.07) rotate(60deg); }
.project-row-playground:hover .pixel-icon:nth-child(9) { transform: translateX(70px) translateY(35px) scale(1.08) rotate(50deg); }

/* Playground lock absolute positioning */
.project-row-playground {
  position: relative;
}


/* Playground lock absolute positioning - next to Playground title */
.project-row-playground .project-lock {
  position: absolute;
  left: calc(220px + 100px); /* 220px for .project-title min-width, 100px extra */
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 41px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: none;
  margin: 0;
}



/* Desktop: Project Icons before Tags */


  .project-row-top .project-number { order: 0; }
  .project-row-top .project-title { order: 1; }
  .project-row-top .project-tags { order: 2; }
  .project-row-top .project-icons { order: 3; }
  .project-row-top .project-vertical-label { order: 4; }

  
  @media (max-width: 700px) {
    .project-row-top {
      flex-wrap: wrap;
       align-items: center;
      gap: 16px;
    }
    .project-number {
      order: 0;
      flex-basis: auto;
    }
    .project-title {
      order: 1;
      flex-basis: 40%;
      min-width: 0;
      margin-right: auto;
    }
    .project-icons {
      order: 2;
      flex-basis: auto;
      margin-right: 0;
    }
    .project-tags {
      order: 3;
      flex-basis: 60%;
      margin-right: 0;
      margin-top: 2px;
    }
    .project-vertical-label {
      order: 4;
      flex-basis: auto;
      margin-left: auto;
      margin-top: 2px;
      writing-mode: initial;
      transform: none;
      color: #222;
      font-size: 0.98em;
      font-weight: 500;
      min-width: unset;
      text-align: right;
    }
    /* Force line break after icons */
    .project-icons {
      margin-bottom: 0;
    }
    .project-title, .project-icons {
      align-items: center;
    }
    /* Make tags and label start on a new line */
    .project-tags, .project-vertical-label {
      margin-top: 4px;
    }
  }

/* Desktop: flatten wrappers for single-row flex */
@media (min-width: 701px) {
  .project-row-main, .project-row-meta {
    display: contents;
  }
}

/* Mobile: two-line layout */
@media (max-width: 700px) {
  .project-row-top {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .project-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .project-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .project-number { font-size: 1.1em; min-width: 32px; margin-right: 8px; }
  .project-title { font-size: 1.1em; margin-right: auto; min-width: unset; }
  .project-icons { gap: 4px; min-width: unset; margin-right: 0; }
  .icon img { width: 24px; height: 24px; }
  .project-tags { min-width: unset; margin-right: 0; flex-direction: row;}
  .project-tags .tag { padding: 4px 12px; font-size: 0.98em; border-radius: 12px; }
  .project-vertical-label {
    margin-left: auto;
    font-size: 0.98em;
    color: #222;
    font-weight: 500;
    min-width: unset;
    text-align: right;
    writing-mode: initial;
    transform: none;
  }
}




/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #111;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #363636; 
}

::-webkit-scrollbar-thumb:hover {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #008CFF; 
}

.swipe-unlock-btn {
  display: none;
}

@media (max-width: 850px) {
  .project-row-playground {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
    min-height: 64px;
    gap: 10px;
    background: none;
    border: none;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    position: relative;
  }
  .project-row-playground .project-number {
    font-size: 1.1em;
    min-width: 32px;
    margin-right: 8px;
    color: #b4c6e0;
    font-weight: 500;
  }
  .project-row-playground .project-title {
    font-size: 1.1em;
    color: #b4c6e0;
    margin-right: 8px;
    min-width: unset;
    font-family: 'Syne', 'Inter', sans-serif;
    font-weight: 500;
    flex: 0 0 auto;
  }
  .project-row-playground .swipe-unlock-btn {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #b5c6e0;
    color: #b5c6e0;
    font-size: 0.7em;
    border-radius: 12px;
    padding: 0.3em 1em;
    gap: 0.5em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0;
    min-width: 120px;
    min-height: 44px;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: unset;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    position: static;
    flex-shrink: 0;
  }
  .project-row-playground .draggable-lock {
    width: 32px;
    height: 32px;
    position: relative;
    left: 0;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    user-select: none;
    transition: left 0.2s cubic-bezier(.33,1.53,.69,.99);
    z-index: 2;
    background: none;
    touch-action: pan-x;
  }
  .project-row-playground .draggable-lock svg {
    width: 32px;
    height: 32px;
    display: block;
  }
  .project-row-playground .swipe-unlock-text {
    color: #b5c6e0;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.04em;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    text-align: center;
  }
  .project-row-playground .project-playground-reveal {
    display: none !important;
  }
  /* Hide any duplicate Playground label below */
  .project-row-playground .project-title + .project-title {
    display: none !important;
  }



  .project-row-playground {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .project-row-playground .project-number {
    order: 0;
  }
  .project-row-playground .project-title {
    order: 1;
  }
  .project-row-playground .swipe-unlock-btn {
    order: 2;
  }

  .project-row-playground .swipe-unlock-btn.swiping .swipe-unlock-text {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .project-row-playground .swipe-unlock-btn .swipe-unlock-text {
    opacity: 1;
    transition: opacity 0.3s;
  }
}

#site-footer.custom-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 1440px;
  justify-self: anchor-center;
  height: 300px;
  z-index: 1;
  background: none;
  color: #fff;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  justify-content: stretch;
  pointer-events: none;
  transition: height 0.3s ease;
}

#site-footer .footer-inner {
  height: 200px;
  max-width: calc(100% - 180px);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: 
    "left columns cta";
  gap: 64px;
  align-items: start;
  padding: 0 80px;
  pointer-events: auto;
}

.footer-bottom-row {
  width: 100%;
  max-width: calc(100% - 180px);
  margin: 0 auto;
  box-sizing: border-box;
  height: 100px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    "copyright up-btn cookie";
  align-items: center;
  padding: 0 80px;
  font-size: 1rem;
  color: #b0b0b0;
  gap: 32px;
  pointer-events: auto;
}

.footer-spacer {
  height: 320px;
  transition: height 0.3s ease;
}

#main-content, .main-content {
  position: relative;
  z-index: 2;
}

body {
  background: #fff;
}

#site-footer .footer-left {
  grid-area: left;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 32px;
  align-content: start;
}

#site-footer .footer-thankyou {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 300px;
  align-items: flex-start;
}

.footer-cta-btn-mobile {
  display: none;
}



#site-footer .footer-thankyou svg {
  scale: 0.8;
  -webkit-transform-origin-x: left;
}

#site-footer .footer-signature {
  width: 220px;
  margin-bottom: 32px;
}

#site-footer .footer-columns {
  grid-area: columns;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "col1 col2 col3";
  gap: 64px;
  justify-content: center;
  align-items: start;
  width: 100%;
}

#site-footer .footer-col {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
  align-content: start;

  min-width: 0;
}

#site-footer .footer-col:nth-child(1) {
  grid-area: col1;
  justify-self: start;
}

#site-footer .footer-col:nth-child(2) {
  grid-area: col2;
  justify-self: center;
}

#site-footer .footer-col:nth-child(3) {
  grid-area: col3;
  justify-self: end;
}

#site-footer .footer-col-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #eaeaea;
  font-family: 'Inter', sans-serif;
}

#site-footer .footer-col a {
  color: rgb(119, 120, 132);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
  font-family: 'Inter', sans-serif;
}

#site-footer .footer-col a:hover {
  color: #fff;
}

#site-footer .footer-cta {
  grid-area: cta;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  justify-content: end;
}

#site-footer .footer-cta-btn {
  background: rgb(43, 43, 44);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  transition: background 0.2s;
  pointer-events: auto;
  font-family: 'Inter', sans-serif;
}

#site-footer .footer-cta-btn:hover {
  background: #0077cc;
}

#site-footer .footer-bottom-row {
  width: 100%;
  max-width: calc(100% - 180px);
  margin: 0 auto;
  box-sizing: border-box;
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    "copyright up-btn cookie";
  align-items: center;
  padding: 0 80px;
  font-size: 1rem;
  color: #b0b0b0;
  gap: 32px;
  transition: gap 0.4s cubic-bezier(.77,0,.18,1);
  overflow: hidden;
}

#site-footer .footer-bottom-row > div {
  display: grid;
  grid-template-rows: auto;
  align-items: center;
  min-width: fit-content;
  }

#site-footer .footer-copyright {
  grid-area: copyright;
  justify-self: start;
  color: rgb(119, 120, 132);
  min-width: 400px;
  font-size: .75rem;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}

#site-footer .footer-bottom-btn {
  grid-area: up-btn;
  justify-self: center;
}

#site-footer .footer-up-btn {
  width: 120px;
  height: 100px;
  background: #D4FF3F;
  border-radius: 40px 40px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(.77,0,.18,1), transform 0.5s cubic-bezier(.68,-0.55,.265,1.55), box-shadow 0.2s;
  will-change: transform;
  transform-origin: bottom;
  position: relative;
  bottom: -2px;
  transform: translateY(20px);
}
#site-footer .footer-up-btn:hover {
  transform: translateY(10px);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);
}

#site-footer .footer-up-btn svg {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  margin-bottom: 20px;
}

#site-footer .footer-up-btn:hover svg {
    transform: rotate(-45deg);
 
}

a.footer-cookie-accept {
  color: #D4FF3F;
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.2s;
  font-family: 'Inter', sans-serif;
}

a.footer-cookie-accept:hover {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.2s;
  font-family: 'Inter', sans-serif;
}

#site-footer .footer-cookie {
  grid-area: cookie;
  justify-self: end;
  text-align: right;
  color: rgb(119, 123, 132);
  font-size: .75rem;
  max-width: 400px;
  text-overflow: ellipsis;
  transition: max-width 0.4s cubic-bezier(.77,0,.18,1), opacity 0.4s cubic-bezier(.77,0,.18,1);
  font-family: 'Inter', sans-serif;
}

#site-footer .footer-cookie.cookie-hide {
  max-width: 0 !important;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}

.footer-bottom-row.cookie-accepted .footer-bottom-btn {
  flex: 1 1 auto;
  justify-content: flex-end !important;
  margin-left: auto;
  display: flex;
  align-items: center;
  width: 100%;
}

.footer-bottom-row.cookie-accepted .footer-up-btn {
  width: 120px !important;
  max-width: 120px !important;
  margin: 0 0 0 auto !important;
  transition: width 0.4s cubic-bezier(.77,0,.18,1), margin 0.4s cubic-bezier(.77,0,.18,1);
}

.footer-bottom-row.cookie-accepted .footer-cookie {
  max-width: 0 !important;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
  display: none !important;
}

/* Responsive Grid Layouts */
@media (max-width: 1200px) {
  #site-footer.custom-footer {
    height: 320px;
  }

  #site-footer .footer-bottom-row {
    padding: 0 80px;
  }
  
  .footer-spacer {
    height: 340px;
  }
  
  #site-footer .footer-inner {
    grid-template-columns: 1fr 2fr !important;
    grid-template-areas: "left columns" !important;
  }
  
  #site-footer .footer-columns {
    gap: 48px;
    white-space: nowrap;
  }
  
  .footer-bottom-row {
    padding: 0 60px;
    gap: 24px;
  }
}

@media (max-width: 975px) {
  #site-footer.custom-footer {
    height: auto !important;
    min-height: 300px !important;
  }
  
  .footer-spacer {
    height: auto !important;
    min-height: 330px !important;
  }
  
  #site-footer .footer-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas: "left" "columns";
    gap: 32px;
    padding: 0 40px;
    height: auto;
    min-height: 200px;
  }
  
  #site-footer .footer-thankyou {
    grid-template-columns: 1fr auto;
    grid-template-areas: "signature mobile-btn";
    grid-template-rows: auto;
    align-items: left;
    max-width: -webkit-fill-available;
    min-width: 270px;
    margin: auto;
    gap: 24px;
  }

  #site-footer .footer-thankyou svg {
    scale: 0.8;
    -webkit-transform-origin-x: center;
  }
  
  .footer-cta-btn-mobile {
    display: block;
    grid-area: mobile-btn;
    justify-self: end;
  }
  
  #site-footer .footer-cta {
    display: none;
  }
  
  #site-footer .footer-columns {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "col1 col2 col3";
    gap: 32px;
    white-space: nowrap;
    width: 100%;
  }
  
  .footer-bottom-row {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "copyright"
      "up-btn"
      "cookie";
    padding: 0 40px;
    gap: 16px;
    height: auto;
    min-height: 120px;
  }
  
  #site-footer .footer-copyright {
    justify-self: center;
    text-align: center;
    min-width: auto;
  }
  
  #site-footer .footer-cookie {
    justify-self: center;
    text-align: center;
    max-width: none;
  }
}

@media (max-width: 700px) {
  #site-footer.custom-footer {
    height: auto !important;
    min-height: 470px !important;
  }
  
  .footer-spacer {
    height: auto !important;
    min-height: 520px !important;
  }
  
  #site-footer .footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "columns";
    gap: 24px;
    padding: 0 20px;
  }
  
  #site-footer .footer-columns {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "col1 col2 col3";
    text-align-last: left;
    align-self: center;
    max-width: 100%;
    gap: 8px;
    width: 100%;
  }

  #site-footer .footer-bottom-row {
    padding: 0 30px;
    max-width: 100%;
  }

  #site-footer .footer-col {
    text-align: center;
    justify-self: center;
  }
  
  .footer-bottom-row {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "copyright"
      "up-btn"
      "cookie";
    gap: 16px;
    padding: 0 20px;
    height: auto;
    min-height: 100px;
  }
  
  #site-footer .footer-copyright {
    justify-self: center;
    text-align: center;
    min-width: auto;
  }
  
  #site-footer .footer-cookie {
    justify-self: center;
    text-align: center;
    max-width: none;
  }
}

@media (max-width: 480px) {
  #site-footer.custom-footer {
    height: 520px;
  }
  
  .footer-spacer {
    height: 520px;
  }
  
  #site-footer .footer-inner {
    padding: 0 16px;
  }
  
  .footer-bottom-row {
    padding: 0 24px;
  }
  
  #site-footer .footer-columns {
    gap: 4px;
    text-align-last: left;
  }
  
  #site-footer .footer-thankyou h2 {
    font-size: 0.75rem;
    margin-bottom: 24px;
  }
  
  #site-footer .footer-col-title {
    font-size: 0.75rem;
  }
  
  #site-footer .footer-col a {
    font-size: 0.75rem;
  }
  
  #site-footer .footer-cta-btn {
    font-size: 0.75rem;
    padding: 12px;
  }
}

.about-word {
  display: inline;
  transition: color 0.6s cubic-bezier(.33,1.53,.69,.99);
}

.about-text-fade {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(17,17,17,0.85) 100%);
  z-index: 2;
}

.about-text-col {
  position: relative;
  overflow: visible;
}

/* === Available for Work Badge === */
.available-badge {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  box-shadow:
  -0.7px 1px 1.4px hsl(0deg 0% 64% / 5%),
  -3.7px 5.6px 7.6px -0.4px hsl(0deg 0% 64% / 5%), 
  -7px 10.3px 14px -0.7px hsl(0deg 0% 64% / 5%), 
  -11.4px 17px 23px -1.1px hsl(0deg 0% 64% / 5%), 
  -18.2px 27.1px 36.7px -1.4px hsl(0deg 0% 64% / 5%), 
  -28.5px 42.3px 57.4px -1.8px hsl(0deg 0% 64% / 5%), 
  -43.3px 64.3px 87.2px -2.1px hsl(0deg 0% 64% / 5%), 
  -63.8px 94.6px 128.4px -2.5px hsl(0deg 0% 64% / 5%), 
  0px 0px 0px 16px hsl(0 0% 100% / 1);
  z-index: 1;
  border: 1.5px solid #eaeaea;
  padding: 4px 16px 4px 12px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  gap: 8px;
  margin: 12px auto 0 auto;
  min-width: 0;
  height: 32px;
  max-width: 100vw;
  transition: box-shadow 0.2s;
}

.available-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1ED760;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 0 1.5px #eaeaea;
  animation: available-blink 1.4s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes available-blink {
  0% { opacity: 1; box-shadow: 0 0 0 1.5px #eaeaea, 0 0 0 0 #1ED760; }
  50% { opacity: 0.5; box-shadow: 0 0 0 4px #1ED76044, 0 0 0 1.5px #eaeaea; }
  100% { opacity: 1; box-shadow: 0 0 0 1.5px #eaeaea, 0 0 0 0 #1ED760; }
}

.available-text {
  color: #222;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .available-badge {
    font-size: 13px;
    padding: 3px 10px 3px 8px;
    height: 26px;
  }
  .available-dot {
    width: 8px;
    height: 8px;
    margin-right: 5px;
  }
  .available-text {
    font-size: 13px;
  }
}

.timeline-role {
  display: inline-block;
  background: #f6faff;
  color: #b4c6e0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 14px;
  margin: 0px 0 16px 0;
  letter-spacing: 0.01em;
  transition: background 0.2s, color 0.2s;
}

.long-version-bio a:hover {
  color: #d4ff3f !important;
  text-decoration: none;
  font-weight: 500;
}

.long-version-bio a {
   text-decoration: none;
   font-weight: 500;
}

@media (max-width: 1200px) {
  .footer-cta-btn { display: none; }
  .footer-cta-btn-mobile { display: block; }
  #site-footer .footer-cta { display: none !important; }
  #site-footer .footer-inner {
    grid-template-columns: 1fr 2fr !important;
    grid-template-areas: "left columns" !important;
  }
}

@media (max-width: 975px) {
  #site-footer .footer-bottom-row {
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "copyright up-btn cookie";
    align-items: center;
    gap: 16px;
    height: auto;
    min-height: 120px;
  }
  #site-footer .footer-copyright {
    justify-self: start;
    text-align: left;
  }
  #site-footer .footer-bottom-btn {
    justify-self: center;
  }
  #site-footer .footer-cookie {
    justify-self: end;
    text-align: right;
    max-width: none;
  }
}

@media (max-width: 975px) {
  #site-footer .footer-inner {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left"
      "columns";
  }

  #site-footer.custom-footer {
    height: 300px;
  }

  .footer-spacer {
    height: 360px !important;
  }

  #site-footer .footer-bottom-row {
    max-width: calc(100% - 180px);
  }

  #site-footer .footer-thankyou svg{
    scale: 0.8;
    -webkit-transform-origin-x: left;
  }
}

@media (max-width: 850px) {
  #site-footer .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 100%;
    height: fit-content;
    padding: 0 30px;
    grid-template-areas:
      "left"
      "columns" !important;
  }

  .scroll-progress.visible {
    display: none;
  }

  #site-footer .footer-thankyou {
    align-items: center;
  }

  #site-footer .footer-thankyou svg{
    scale: 0.8;
    -webkit-transform-origin-x: center;
  }
  #site-footer .footer-bottom-row {
    padding: 0 50px;
    max-width: 100%;
  }

  #site-footer.custom-footer {
    height: 500px!important;
  }

  .footer-spacer {
    height: 530px!important;
  }
}


@media (max-width: 850px) {
 
  #site-footer .footer-bottom-row {
    padding: 0 30px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
 
  #site-footer .footer-bottom-row {
    padding: 0 24px;
    max-width: 100%;
  }
}

.footer-bottom-row.cookie-accepted {
  grid-template-columns: 1fr auto !important;
  grid-template-areas: 
    "copyright up-btn" !important;
  gap: 0 !important;
}

.footer-bottom-row.cookie-accepted .footer-bottom-btn {
  flex: 1 1 auto;
  justify-content: flex-end !important;
  margin-left: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
  width: auto;
}

.footer-bottom-row.cookie-accepted .footer-copyright {
  justify-self: start;
  margin-right: auto;
}

@media (max-width: 975px) {
  .footer-bottom-row.cookie-accepted {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "copyright"
      "up-btn" !important;
    gap: 16px !important;
  }
  
  .footer-bottom-row.cookie-accepted .footer-cookie {
    display: none !important;
  }
  
  .footer-bottom-row.cookie-accepted .footer-bottom-btn {
    justify-content: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  .footer-bottom-row.cookie-accepted {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "copyright"
      "up-btn" !important;
    gap: 16px !important;
  }
  
  .footer-bottom-row.cookie-accepted .footer-cookie {
    display: none !important;
  }
  
  .footer-bottom-row.cookie-accepted .footer-bottom-btn {
    justify-content: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .footer-bottom-row {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "copyright"
      "cookie"
      "up-btn" !important;
    gap: 16px !important;
    padding: 0 20px !important;
    height: auto !important;
    min-height: 120px !important;
  }
  
  .footer-bottom-row .footer-copyright {
    justify-self: center !important;
    text-align: center !important;
    min-width: auto !important;
    order: 1;
    width: 100% !important;
  }
  
  .footer-bottom-row .footer-cookie {
    justify-self: center !important;
    text-align: center !important;
    max-width: none !important;
    order: 2;
    width: 100% !important;
  }
  
  .footer-bottom-row .footer-bottom-btn {
    justify-self: center !important;
    order: 3;
  }
  
  .footer-bottom-row .footer-bottom-btn .footer-up-btn {
    margin: 0 auto !important;
  }
  
  /* When cookies are accepted, hide the cookie area */
  .footer-bottom-row.cookie-accepted {
    grid-template-areas: 
      "copyright"
      "up-btn" !important;
  }
  
  .footer-bottom-row.cookie-accepted .footer-cookie {
    display: none !important;
  }
  
  /* Ensure footer is always visible */
  #site-footer.custom-footer {
    height: auto !important;
    min-height: 600px !important;
  }
  
  .footer-spacer {
    height: auto !important;
    min-height: 660px !important;
  }
}

@media (max-width: 975px) {
  .footer-bottom-row.cookie-accepted .footer-copyright {
    justify-self: center !important;
    text-align: center !important;
    margin: auto;
  }
  
  .footer-bottom-row.cookie-accepted .footer-bottom-btn {
    justify-self: center !important;
    margin: auto;
  }
}

#projects { scroll-margin-top: -130px; }
#viewport { scroll-margin-top: 200px; }

/* Goodies Dropdown Styles */
#nav-links .dropdown {
  position: relative;
  display: inline-block;
}

#nav-links .dropdown-toggle {
  background: none;
  border: none;
  color: #a1a1a1;
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  padding: 0 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: color 0.3s;
  text-decoration: none;
  display: inline-block;
}

#nav-links .dropdown-toggle:hover {
  color: #ffffff;
  background:none;
}

#nav-links .dropdown-menu {
  display: none;
  position: absolute;
  top: 60px;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  border-radius: 8px 8px 24px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  min-width: fit-content;
  padding: 16px;
  z-index: 100;
  flex-direction: row;
  gap: 0px;
  font-size: 0.875rem;
  font-weight: 500;
  justify-content: space-between;
  align-items: center;
}

#nav-links .dropdown.open .dropdown-menu {
  display: flex !important;
}

#nav-links .dropdown-menu a {
  color: #111;
  text-decoration: none;
  padding: 0 16px;
  background: none;
  border-radius: 8px;
  transition: background 0.2s;
  font-weight: 500;
}

#nav-links .dropdown-menu a:hover {
  background:none;
  color: black!important;
}

#nav-links .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 80%;
  transform: translateX(-30%);
  width: 39px;
  height: 15px;
  background: none;
  z-index: 101;
  background-image: url('data:image/svg+xml;utf8,<svg width="39" height="15" viewBox="0 0 39 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.429688 15H38.5703C34.7266 14.6006 31.2969 12.3125 29.4648 8.84863L27.7949 5.69141C24.2734 -0.972656 14.7266 -0.972656 11.2051 5.69141L9.53516 8.84863C7.70312 12.3125 4.27344 14.6006 0.429688 15Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 975px) {
  #nav-links .dropdown-menu,
  #nav-links .dropdown {
    display: none !important;
  }
  
  /* Allow dropdown to show when open on desktop */
  @media (min-width: 976px) {
    #nav-links .dropdown.open .dropdown-menu {
      display: flex !important;
    }
  }
  
  #nav-links .dropdown-toggle {
    font-size: 2.5rem;
    color: white;
    width: 80% !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    height: 8%;
    background: none;
    border: none;
    padding: 16px 0;
    text-align: center;
  }
}

/* Place this after the mobile rule to ensure it takes precedence on desktop */
@media (min-width: 976px) {
  #nav-links .dropdown.open .dropdown-menu {
    display: flex !important;
  }
}

@media (max-width: 975px) {
  #nav-links .dropdown-menu,
  #nav-links .dropdown {
    display: none !important;
  }
  
  /* Mobile dropdown styles */
  #nav-links .mobile-dropdown {
    display: block !important;
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  #nav-links .mobile-dropdown-toggle {
    font-size: 2.5rem;
    color: white;
    width: 100% !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    height: auto;
    background: none;
    border: none;
    padding: 16px 0;
    text-align: center;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }
  #nav-links .mobile-dropdown-menu {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 70%;
    justify-self: center;
    gap: 32px;
    padding: 16px 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    position: static;
    transform: none;
    min-width: auto;
    font-size: 1.5rem;
    color: white;
    margin-top: 8px;
  }
  #nav-links .mobile-dropdown.open .mobile-dropdown-menu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #nav-links .mobile-dropdown-menu a {
    color: white;
    text-decoration: none;
    padding: 0 8px;
    background: none;
    border-radius: 0;
    font-weight: 400;
    font-size: 1.5rem;
    box-shadow: none;
    border: none;
    transition: color 0.2s;
  }
  #nav-links .mobile-dropdown-menu a:hover {
    background: none;
    color: linear-gradient(120deg, rgb(255 255 255) 0%, rgb(255 200 255) 20%, rgb(171 216 255) 40%, rgb(200 255 238) 60%, rgb(255 251 196) 80%, rgb(141 249 255) 100%) !important;
  }
  #nav-links .mobile-dropdown-menu::before {
    display: none;
  }
}

@media (min-width: 976px) {
  #nav-links .dropdown.open .dropdown-menu {
    display: flex !important;
  }
  #nav-links .mobile-dropdown,
  #nav-links .mobile-dropdown-menu {
    display: none !important;
  }
}

#nav-links .dropdown.desktop-only {
  display: inline-flex !important;
  position: relative;
  overflow: visible !important;
}
#nav-links .dropdown.desktop-only .dropdown-menu {
  min-width: fit-content;
  left: 50%;
  transform: translateX(-82%);
  z-index: 2000;
}

/* Hide desktop dropdown on mobile */
@media (max-width: 975px) {
  #nav-links .dropdown.desktop-only {
    display: none !important;
  }
}

@media (max-width: 975px) {
  #nav-links .mobile-dropdown-toggle {
    font-size: 2.5rem;
    color: white;
    width: 100% !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    height: auto;
    background: none;
    border: none;
    padding: 16px 0;
    text-align: center;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }
  #nav-links .mobile-dropdown-menu a {
    color: white;
    text-decoration: none;
    padding: 0 8px;
    background: none;
    border-radius: 0;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    box-shadow: none;
    border: none;
    transition: color 0.2s;
    line-height: 1.2;
  }
}

#nav-links .mobile-dropdown-menu .goodies-link {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

@media (min-width: 976px) {
  #work-together-button {
    overflow: hidden;
    height: 42px;
    min-width: 200px;
    max-width: 320px;
    border-radius: 21px;
    user-select: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  #work-together-button .button-inner {
    height: 84px;
    min-height: 84px;
    max-height: 84px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    transition: transform 0.3s cubic-bezier(.33,1.53,.69,.99);
    /* Removed margin-top and align-self */
  }
  #work-together-button:hover .button-inner {
    transform: translateY(-42px);
  }
  #work-together-button .button-text {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    background: none;
    color: #111;
    gap: 8px;
  }
  #work-together-button .button-text .copy-icon {
    margin-left: 8px;
    display: flex;
    align-items: center;
    opacity: 0.7;
    font-size: 1rem;
  }
}

@media (min-width: 976px) {
  .button-wrapper {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
  }
  #work-together-button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 21px;
    user-select: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
  }
  #work-together-button .button-inner {
    height: 84px;
    min-height: 84px;
    max-height: 84px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.3s cubic-bezier(.33,1.53,.69,.99);
  }
  #work-together-button .button-text {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    background: none;
    color: #111;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  #work-together-button .copy-icon {
    margin-left: 8px;
    display: flex;
    align-items: center;
    opacity: 0.7;
    font-size: 1rem;
  }
  #work-together-button .copied-feedback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 21px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #5f5f5f;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(.33,1.53,.69,.99);
    font-size: 1rem;
    z-index: 2;
  }
  #work-together-button .copied-feedback.show {
    opacity: 1;
  }
  #nav-links {
    display: flex;
    align-items: center;
    height: 100%;
  }
  #nav-links > a,
  #nav-links > .dropdown.desktop-only {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 400;
    color: #a1a1a1;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
  }
  #nav-links > a:hover,
  #nav-links > .dropdown.desktop-only:hover {
    color: #fff;
     }
}

@media (min-width: 976px) {
  #work-together-button .button-inner {
    height: 84px;
    min-height: 84px;
    max-height: 84px;
    width: 100%;
    display: flex;
    align-self: flex-start;
    margin-top: 42px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    transition: transform 0.3s cubic-bezier(.33,1.53,.69,.99);
    padding: 0;
    margin: 0;
  }
  #work-together-button .button-text {
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0 8px;
    margin: 0;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    background: none;
    color: #111;
    gap: 8px;
  }
  #work-together-button .button-text .copy-icon {
    margin-left: 8px;
    display: flex;
    align-items: center;
    opacity: 0.7;
    font-size: 1rem;
  }
}

.hero-thumbnails { display: none !important; }
.hero-thumb {
  width: 130px;
  height: 130px;
  border-radius: 35px;
  border: none;
  overflow: hidden;
  position: relative;
  box-shadow: -0.7px 1px 1.4px hsl(var(--shadow-color) / 0.32),
   -3.7px 5.6px 7.6px -0.4px hsl(var(--shadow-color) / 0.32),
   -7px 10.3px 14px -0.7px hsl(var(--shadow-color) / 0.32),
   -11.4px 17px 23px -1.1px hsl(var(--shadow-color) / 0.32),
   -18.2px 27.1px 36.7px -1.4px hsl(var(--shadow-color) / 0.32),
   -28.5px 42.3px 57.4px -1.8px hsl(var(--shadow-color) / 0.32),
   -43.3px 64.3px 87.2px -2.1px hsl(var(--shadow-color) / 0.32),
   -63.8px 94.6px 128.4px -2.5px hsl(var(--shadow-color) / 0.32),
   0px 0px 0px 20px hsl(0 0% 100% / 1);
  cursor: pointer;
  background: #111;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
  transform: scale(3);
}
.hero-thumb.video .play-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hero-thumb.video .play-btn::before {
  content: '';
  display: block;
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.hero-thumb:hover {
  transform: scale(1.04) rotate(-3deg);
}

/* Video Modal/Lightbox Styles */
#video-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s;
}
#video-modal.hidden { display: none; }
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(3px);
  z-index: 0;
}
.video-modal-content {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  background: #222;
  border-radius: 18px;
  padding: 32px 32px 24px 32px;
  max-width: 90vw;
  max-height: 80vh;
  box-shadow: 0 8px 48px rgba(0,0,0,0.32);
  position: relative;
}
.video-modal-main {
  flex: 2;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-info h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}
.video-meta {
  font-size: 0.95em;
  color: #b4c6e0;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.video-description {
  font-size: 1em;
  color: #ACACAC;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .video-modal-content {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 4vw 16px 4vw;
    gap: 18px;
  }
  .video-modal-main {
    min-width: 0;
    width: 100%;
  }
  .video-modal-info {
    min-width: 0;
    max-width: 100%;
    padding: 18px 8px;
  }
}
/* Remove old quality button styles if present */
.video-quality-controls { display: none !important; }
.video-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer;
  z-index: 2;
}
.video-modal-content video {
  width: 640px; max-width: 80vw; border-radius: 12px; margin-bottom: 16px;
  background: #000;
}
.video-quality-controls {
  display: flex; gap: 12px; margin-top: 8px;
}
.video-quality-controls button {
  background: #fff; color: #222; border: none; border-radius: 8px; padding: 6px 18px; cursor: pointer;
  font-weight: 600; font-size: 1rem;
  transition: background 0.2s, color 0.2s;
}
.video-quality-controls button.active {
  background: #007bff; color: #fff;
}
@media (max-width: 700px) {
  .video-modal-content video {
    width: 95vw;
    max-width: 95vw;
  }
  .video-modal-content {
    padding: 8vw 2vw 4vw 2vw;
  }
  .hero-thumbnails {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
}

.hero-thumb.left-thumb {
  position: absolute;
  top: 50%;
    left: 5vw;
  transform: translateY(-50%) rotate(-13deg);
  z-index: 6;
  box-shadow: -0.7px 1px 1.4px hsl(var(--shadow-color) / 0.32),
   -3.7px 5.6px 7.6px -0.4px hsl(var(--shadow-color) / 0.32),
   -7px 10.3px 14px -0.7px hsl(var(--shadow-color) / 0.32),
   -11.4px 17px 23px -1.1px hsl(var(--shadow-color) / 0.32),
   -18.2px 27.1px 36.7px -1.4px hsl(var(--shadow-color) / 0.32),
   -28.5px 42.3px 57.4px -1.8px hsl(var(--shadow-color) / 0.32),
   -43.3px 64.3px 87.2px -2.1px hsl(var(--shadow-color) / 0.32),
   -63.8px 94.6px 128.4px -2.5px hsl(var(--shadow-color) / 0.32),
   0px 0px 0px 20px hsl(0 0% 100% / 1);
}
.hero-thumb.right-thumb {
  position: absolute;
  top: 60%;
  right: 5vw;
  transform: translateY(-50%) rotate(13deg);
  z-index: 6;
  box-shadow: -0.7px 1px 1.4px hsl(var(--shadow-color) / 0.32),
   -3.7px 5.6px 7.6px -0.4px hsl(var(--shadow-color) / 0.32),
   -7px 10.3px 14px -0.7px hsl(var(--shadow-color) / 0.32),
   -11.4px 17px 23px -1.1px hsl(var(--shadow-color) / 0.32),
   -18.2px 27.1px 36.7px -1.4px hsl(var(--shadow-color) / 0.32),
   -28.5px 42.3px 57.4px -1.8px hsl(var(--shadow-color) / 0.32),
   -43.3px 64.3px 87.2px -2.1px hsl(var(--shadow-color) / 0.32),
   -63.8px 94.6px 128.4px -2.5px hsl(var(--shadow-color) / 0.32),
   0px 0px 0px 20px hsl(0 0% 100% / 1);
}
/* Remove .hero-thumbnails flex row if present */

@media (max-width: 1440px) {
  .hero-thumb.left-thumb {
    top: 70%;
  }
  .hero-thumb.right-thumb {
    top: 70%;
  }
}

@media (max-width: 1280px) {
  .hero-thumb.left-thumb {
    top: 70%;
    scale: 0.5;
    transform: translateY(10%) rotate(-13deg);
  }
  .hero-thumb.right-thumb {
    top: 80%;
    scale: 0.7;
    transform: translateY(-50%) rotate(13deg);
  }
}

@media (max-width: 768px) {
  .hero-thumb.left-thumb {
    top: 60%;
    scale: 0.9;
    transform: translateY(10%) rotate(-13deg);
  }
  .hero-thumb.right-thumb {
    top: 75%;
    scale: 0.9;
    transform: translateY(-70%) rotate(13deg);
  }
}


@media (max-width: 570px) {
  .hero-thumbnails-mobile {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 4vw;
    width: 100%;
    margin: 18px 0 0 0;
    min-height: 130px;
    z-index: 3;
    position: relative;
  }
  .hero-thumbnails-mobile .hero-thumb {
    display: block;
    position: static;
    width: 48vw;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    transform: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      }
}
@media (max-width: 500px) {
  .hero-thumbnails-mobile {
    min-height: 120px;
    margin-top: 8px;
    position: relative;
  }
  .hero-thumbnails-mobile .hero-thumb.deck-top {
    top: 24px;
  }
  .hero-thumbnails-mobile .hero-thumb.deck-bottom {
    top: 40px;
  }
  .hero-cards-wrapper {
    padding-bottom: 120px;
  }
  .hero-thumbnails-mobile .hero-thumb {
    width: 80vw;
    max-width: 320px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transition: transform 0.4s cubic-bezier(.33,1.53,.69,.99), z-index 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  }
  .hero-thumbnails-mobile .hero-thumb.deck-top {
    z-index: 2;
    transform: translateX(-55%) scale(1) rotate(-3deg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
  .hero-thumbnails-mobile .hero-thumb.deck-bottom {
    z-index: 1;
    transform: translateX(-55%) scale(0.92) translateY(24px);
    box-shadow:
    -0.7px 1px 1.4px hsl(var(--shadow-color) / 0.32),
    -3.7px 5.6px 7.6px -0.4px hsl(var(--shadow-color) / 0.32),
    -7px 10.3px 14px -0.7px hsl(var(--shadow-color) / 0.32),
    -11.4px 17px 23px -1.1px hsl(var(--shadow-color) / 0.32),
    -18.2px 27.1px 36.7px -1.4px hsl(var(--shadow-color) / 0.32),
    -28.5px 42.3px 57.4px -1.8px hsl(var(--shadow-color) / 0.32),
    -43.3px 64.3px 87.2px -2.1px hsl(var(--shadow-color) / 0.32),
    -63.8px 94.6px 128.4px -2.5px hsl(var(--shadow-color) / 0.32),
    0px 0px 0px 20px hsl(0 0% 100% / 1);
  }
}

@media (min-width: 571px) {
  .hero-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(186,210,239,0.7) 100%);
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(.33,1.53,.69,.99);
      }
  .hero-thumb:hover::after {
    opacity: 0;
  }
}

.plyr-modal {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  max-width: 1400px;
  min-width: 320px;
  z-index: 10001;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}
.plyr-modal .video-modal-main {
  background: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1000px;
  max-width: 1000px;
  box-shadow: none;
}
.plyr-modal .plyr {
  border-radius: 28px;
  box-shadow: 0px 833px 233px 0px rgba(0, 0, 0, 0.01), 0px 533px 213px 0px rgba(0, 0, 0, 0.07), 0px 300px 180px 0px rgba(0, 0, 0, 0.25), 0px 133px 133px 0px rgba(0, 0, 0, 0.43), 0px 33px 73px 0px rgba(0, 0, 0, 0.49);
  background: #111;
  width: 1000px;
  max-width: 1000px;
}
.plyr-modal .video-modal-info {
  background: #0F0F0F;
  border-radius: 28px;
  color: #fff;
  padding: 32px 32px 32px 32px;
  min-width: 250px;
  max-width: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0px 833px 233px 0px rgba(0, 0, 0, 0.01), 0px 533px 213px 0px rgba(0, 0, 0, 0.07), 0px 300px 180px 0px rgba(0, 0, 0, 0.25), 0px 133px 133px 0px rgba(0, 0, 0, 0.43), 0px 33px 73px 0px rgba(0, 0, 0, 0.49);
  font-family: 'Inter', Arial, sans-serif;
}
.plyr-modal .video-modal-info h2 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.plyr-modal .video-meta {
  font-size: 14px;
  color: #464646;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.plyr-modal .video-description {
  font-size: 13px;
  color: #ACACAC;
  margin: 0 0 36px 0;
  line-height: 1.6;
}

.plyr-modal .video-description a{
  color: #D4FF3F;
}

.plyr-modal .video-description a:hover{
  color: #fff;
}

.plyr-modal .video-description a:active{
  color: #fff;
}


@media (max-width: 1400px) {
  .plyr-modal .video-modal-main,
  .plyr-modal .plyr {
    min-width: 70vw;
    max-width: 98vw;
    width: 100%;
  }
  .plyr-modal .video-modal-info {
    min-width: 320px;
    max-width: 100%;
  }
}
@media (max-width: 900px) {
  .plyr-modal {
    flex-direction: column;
    border-radius: 28px;
    max-width: 98vw;
    min-width: 0;
    padding: 0;
  }
  .plyr-modal .video-modal-main,
  .plyr-modal .plyr {
    border-radius: 28px 28px 0 0;
    min-width: 0;
    max-width: 100%;
    
  }
  .plyr-modal .video-modal-info {
    border-radius: 0 0 28px 28px;
    min-width: 0;
    max-width: 100%;
    padding: 24px;
  }
}

body.hero-intro .hero-thumbnails,
body.hero-intro .hero-thumbnails-mobile {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
body:not(.hero-intro) .hero-thumbnails,
body:not(.hero-intro) .hero-thumbnails-mobile {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
}

@media (max-width: 500px) {
  .hero-thumbnails-mobile .hero-thumb.deck-bottom::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(186,210,239,0.7) 100%);
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(.33,1.53,.69,.99);
    
  }
}

.plyr-modal .video-modal-info .video-tags {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin-bottom: 12px;
}
.plyr-modal .video-modal-info .video-tags-left {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  text-align: left;
}
.plyr-modal .video-modal-info .video-tags-right {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  text-align: right;
  min-width: 70%;
}


.plyr-modal .video-modal-info .video-tags-right span{
  flex: 1 1 0;
  display: flex;
  padding: 4px;
  flex-wrap: wrap;
  background-color: #1A1A1A;
  color: #6D6D6D;
  width:fit-content;
  white-space: nowrap;
  row-gap: 4px;
  border-radius: 4px;
  width:fit-content;
  gap: 6px;
  justify-content: center;
  text-align: right;
  height:24px;
}

.plyr-modal .video-modal-info .video-tags-left #jttr-tag{
  padding: 4px;
  color: white;
  font-weight: 600;
  background-color: #7F48EB;
  border-radius: 4px;
  width:24px;
  height:24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.modal-open, html.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  position: relative !important;
}

body.hero-intro .about-photo-img {
  opacity: 0;
}
body:not(.hero-intro) .about-photo-img {
  opacity: 1;
}