@font-face {



  font-family: 'Strato Pro SC';



  src: url('fonts/StratoProSC-DemiBold.woff2') format('woff2'),



    url('fonts/StratoProSC-DemiBold.woff') format('woff');



  /*font-weight: 600;  600 maps to Demi/Semi Bold */



  font-style: normal;



}



.vs-hero {



  background-color: rgba(0, 0, 0, 0);



  background-repeat: no-repeat;



  background-image: url('../images/slider/hero_slider.webp');



  background-size: cover;



  background-position: 0% 76%;



  width: 100%;



  opacity: 1;



  visibility: inherit;



  padding: 0 100px 0;



  height: 100vh;



  min-height: 100vh;



  position: relative;



  z-index: 1;



}



.vs-hero__row {



  /* min-height: 100vh; */



  align-items: stretch;



}



/* ---------- COLUMN 1 : VISUAL (real bg image) ---------- */



.vs-hero__visual {



  position: relative;



  min-height: 94vh;



  padding: 0;



}



/* soft vignette so the photo blends into the black page on every edge */



.vs-hero__visual::after {



  content: "";



  position: absolute;



  inset: 0;



  pointer-events: none;



}



.vs-hero__social {



  position: absolute;



  left: 76px;



  bottom: 0;



  z-index: 4;



  right: 0;



  padding-bottom: 10px;



  display: flex;



  align-items: center;



  justify-content: center;



}



.vs-hero__social-label {



  display: block;



  color: #e8c874;



  font-size: 12px;



  font-weight: 700;



  letter-spacing: 2px;



  text-transform: uppercase;



  margin-bottom: 14px;



}



.vs-hero__social-icons {



  display: flex;



  gap: 12px;



}



.vs-hero__social-icons a {



  width: 38px;



  height: 38px;



  border: 1px solid #821517;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  color: #821517;



  font-size: 15px;



  transition: .25s ease;



}



.vs-hero__social-icons a:hover {



  background: #821517;



  color: #fff;



}



/* ---------- COLUMN 2 : CURTAIN RISES / SHOW BEGINS ---------- */



.vs-hero__middle {



  position: relative;



  display: flex;



  flex-direction: column;



  justify-content: center;



  padding: 120px 30px 60px 50px;



}



.vs-hero__script {



  /* font-family: 'Strato Pro SC'; */



  font-family: "Bodoni Moda", serif;



  font-weight: 400px;



  color: #7c0106;



  font-size: 80px;



  line-height: 1.05;



  margin: 0 0 14px;



  text-align: center;



  letter-spacing: 3px;



}



.vs-hero__script span {



  display: block;



  font-style: italic;



  font-weight: 600;



  transform: skewX(-5deg);



  margin-top: 10px;



  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);



}



.vs-hero__script .dots {



  letter-spacing: 3px;



}



.curtain-Rises {



  width: 100%;



  max-width: 600px;



  display: block;



  position: relative;



  animation: slideIn 2.5s ease-out forwards;



}



.vs-hero__cycle {



  display: flex;



  align-items: center;



  gap: 12px;



}



.vs-hero__cycle-text {



  font-size: 24px;



  font-weight: 600;



  margin: 0;



}



/* Prevent text from jumping */



.vs-hero__cycle-word {



  display: inline-block;



  min-width: 90px;



  /* adjust based on longest word */



  text-align: left;



  font-weight: 700;



  vertical-align: baseline;



  margin: 0 auto;



}



.vs-hero__cycle-icon-wrap {



  /*width: 56px;*/



  /*height: 56px;*/



  flex-shrink: 0;



  /* keeps icon size fixed */



  display: flex;



  align-items: center;



  justify-content: center;



}



.vs-hero__cycle-icon {



  width: 28px;



  height: 28px;



  object-fit: contain;



}



/* Left to Right Animation */



@keyframes slideIn {



  0% {



    transform: translateX(-120px);



    opacity: 0;



  }



  100% {



    transform: translateX(0);



    opacity: 1;



  }



}



.vs-hero__flourish {



  color: #dbb35c;



  font-size: 13px;



  opacity: .85;



  margin-bottom: 14px;



  position: relative;



  text-align: left;



}



.vs-hero__flourish::before,



.vs-hero__flourish::after {



  content: "";



  position: absolute;



  top: 50%;



  width: 38%;



  height: 1px;



  background: rgba(219, 179, 92, .4);



}



.vs-hero__flourish::before {



  left: 0;



}



.vs-hero__flourish::after {



  right: 0;



}



.vs-hero__divider {



  display: flex;



  align-items: center;



  gap: 14px;



  margin-bottom: 18px;



  color: #dbb35c;



}



.vs-hero__divider span {



  flex: 1;



  height: 1px;



  background: rgba(219, 179, 92, .4);



}



.vs-hero__divider i {



  font-size: 20px;



}



.vs-hero__punch {



  font-weight: 800;



  color: #f2f2f2;



  font-size: 34px;



  letter-spacing: 2px;



  text-transform: uppercase;



  margin: 0;



}



/* ---------- COLUMN 3 : CYCLING CONTENT ---------- */



.vs-hero__content {



  display: flex;



  flex-direction: column;



  justify-content: center;



  padding: 15% 5% 0 0;



}



/* ---------- COLUMN 3 : entrance keyframe animation ---------- */



.vs-hero__content .vs-hero__cycle,



.vs-hero__content>img.line,



.vs-hero__static>* {



  opacity: 0;



  animation: vsHeroTextIn .8s ease forwards;



}



.vs-hero__content .vs-hero__cycle {



  animation-delay: .15s;



}



.vs-hero__content>img.line {



  animation-delay: .35s;



}



.vs-hero__static>*:nth-child(1) {



  animation-delay: .55s;



}



.vs-hero__static>*:nth-child(2) {



  animation-delay: .75s;



}



.vs-hero__static>*:nth-child(3) {



  animation-delay: .95s;



}



.vs-hero__static>*:nth-child(4) {



  animation-delay: 1.15s;



}



@keyframes vsHeroTextIn {



  0% {



    opacity: 0;



    transform: translateY(26px);



  }



  100% {



    opacity: 1;



    transform: translateY(0);



  }



}



/* subtle continuous glow on the cycling icon so column 3 never feels static */



.vs-hero__cycle-icon-wrap {



  display: inline-block;



  animation: vsHeroIconPulse 2.2s ease-in-out infinite;



}



@keyframes vsHeroIconPulse {



  0%,



  100% {



    transform: scale(1);



  }



  50% {



    transform: scale(1.12);



  }



}



.vs-hero__cycle {



  display: flex;



  align-items: center;



  gap: 16px;



  min-height: 56px;



  margin-bottom: 22px;



  justify-content: center;



}



.vs-hero__cycle-icon {



  width: 25px;



}



.vs-hero__cycle-icon,



.vs-hero__cycle-word {



  display: inline-block;



  transition: opacity .4s ease, transform .4s ease;



}



.vs-hero__cycle-icon.is-hidden,



.vs-hero__cycle-word.is-hidden {



  opacity: 0;



  transform: translateY(6px);



}



.vs-hero__cycle-icon {



  font-size: 26px;



  line-height: 1;



}



.vs-hero__cycle-text {



  font-family: 'Strato Pro SC';



  font-size: 20px;



  font-weight: 500;



  color: #1F1F1F;



  margin: 0;



}



.line {



  margin: 0 auto;



}



.vs-hero__cycle-word {



  color: #821517;



  font-weight: 700;



}



.vs-hero__static {



  /* border-top: 1px solid rgba(219, 179, 92, .25); */



  padding-top: 22px;



  margin-bottom: 22px;



}



.vs-hero__line {



  color: #1F1F1F;



  font-size: 20px;



  line-height: 1.6;



  text-align: center;



  margin: 0;



  font-weight: 500;



}



.vs-hero__line em,



.vs-hero__line strong {



  color: #821517;



  font-style: normal;



}



/* line — star(s) — line, exactly like the reference */



.vs-hero__star-divider {



  display: flex;



  align-items: center;



  gap: 12px;



  margin: 16px 0;



}



.vs-hero__star-divider span {



  flex: 1;



  height: 1px;



  background: rgba(219, 179, 92, .35);



}



.vs-hero__star-divider i {



  font-style: normal;



  color: #dbb35c;



  font-size: 12px;



  letter-spacing: 4px;



  white-space: nowrap;



}



.vs-hero__star-divider--triple i {



  font-size: 13px;



}



.vs-hero__welcome {



  text-align: center;



}



.vs-hero__welcome-script {



  font-family: 'Dancing Script', 'Brush Script MT', cursive;



  color: #dbb35c;



  font-size: 24px;



  margin: 0 0 4px;



}



.vs-hero__welcome-title {



  font-weight: 700;



  letter-spacing: 3px;



  text-transform: uppercase;



  color: #f2f2f2;



  font-size: 21px;



  margin: 0 0 20px;



}



.vs-hero__box {



  border: 1px solid rgba(219, 179, 92, .6);



  padding: 22px 20px 18px;



  position: relative;



}



.vs-hero__box-flourish {



  display: block;



  text-align: center;



  color: #dbb35c;



  font-size: 11px;



  opacity: .85;



}



.vs-hero__box-flourish--top {



  margin-bottom: 10px;



}



.vs-hero__box-flourish--bottom {



  margin-top: 10px;



}



.vs-hero__box p {



  font-family: 'Merriweather', serif;



  color: #f2f2f2;



  font-size: 14px;



  line-height: 1.7;



  margin: 0;



}



.vs-hero__scroll {



  position: absolute;



  right: 28px;



  bottom: 34px;



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 10px;



  z-index: 4;



  cursor: pointer;



  text-decoration: none;



  transition: transform .25s ease;



}



.vs-hero__scroll:hover {



  transform: translateY(-4px);



}



.vs-hero__scroll-text {



  writing-mode: vertical-rl;



  color: #dbb35c;



  font-size: 11px;



  font-weight: 600;



  letter-spacing: 3px;



  text-transform: uppercase;



}



.vs-hero__scroll-line {



  width: 1px;



  height: 26px;



  background: rgba(219, 179, 92, .55);



}



/* mouse-shaped pill with a scrolling dot inside */



.vs-hero__scroll-mouse {



  position: relative;



  width: 20px;



  height: 32px;



  border: 1.5px solid #dbb35c;



  border-radius: 12px;



}



.vs-hero__scroll-dot {



  position: absolute;



  top: 6px;



  left: 50%;



  transform: translateX(-50%);



  width: 3px;



  height: 3px;



  border-radius: 50%;



  background: #dbb35c;



  animation: vsScrollDot 1.8s infinite;



}



@keyframes vsScrollDot {



  0% {



    top: 6px;



    opacity: 1;



  }



  70% {



    top: 18px;



    opacity: 0;



  }



  100% {



    top: 6px;



    opacity: 0;



  }



}



.vs-hero__scroll-arrow {



  color: #dbb35c;



  font-size: 13px;



  animation: vsScrollArrow 1.8s infinite;



}



@keyframes vsScrollArrow {



  0%,



  100% {



    transform: translateY(0);



    opacity: 1;



  }



  50% {



    transform: translateY(5px);



    opacity: .5;



  }



}



.footer-logo-image {



  width: 300px;



}



/* ================= RESPONSIVE ================= */



@media (max-width:1200px) {



  .vs-hero__script {



    font-size: 40px;



  }



  .vs-hero__punch {



    font-size: 28px;



  }



}



/* -------- 1200px : cramped 3-col row (small laptop / tablet landscape) -------- */



@media (max-width:1199.98px) {



  .vs-hero {



    padding: 0 40px;



  }



  .vs-hero__middle {



    padding: 80px 20px 40px 25px;



  }



  .vs-hero__content {



    padding: 10% 3% 0 0;



  }



  .vs-hero__social {



    left: 25px;



  }



  .curtain-Rises {



    max-width: 300px;



  }



  .vs-hero__cycle-text {



    font-size: 17px;



  }



  .vs-hero__line {



    font-size: 16px;



  }



  .vs-hero__script {



    font-size: 40px;



  }



  .vs-hero__punch {



    font-size: 28px;



  }



}



/* -------- 991px : columns stack -------- */



@media (max-width:991.98px) {



  .vs-hero {



    height: auto;



    min-height: 0;



    padding: 0;



  }



  .vs-hero__row {



    /* flex-direction: column; */



    min-height: 0;



  }



  .header-center .logo-image {



    width: 300px;



  }



  .vs-hero__visual {



    min-height: 0;



  }



  .vs-hero__middle,



  .vs-hero__content {



    padding: 15px 30px;



    border-left: none;



    border-top: 1px solid rgba(219, 179, 92, .15);



  }



  .vs-hero__middle {



    padding-top: 60px;



  }



  .curtain-Rises {



    max-width: 360px;



    margin: 0 auto;



    display: block;



  }



  .vs-hero__social-label {



    text-align: center;



  }



  .vs-hero__social-icons {



    justify-content: center;



  }



  .vs-hero__scroll {



    display: none;



  }



}



/* -------- 767px : phones -------- */



@media (max-width:767.98px) {



  .vs-hero__middle,



  .vs-hero__content {



    padding: 40px 20px;



  }



  .vs-hero__cycle-icon {



    width: 20px;



    height: 20px;



  }



  .vs-hero__cycle-word {



    /*color: #f10e12;*/
    color:#821517;



  }



  .vs-hero__visual {



    display: none;



  }



  .curtain-Rises {



    max-width: 280px;



  }



  .vs-hero__cycle {



    flex-wrap: wrap;



    min-height: auto;



  }



  .vs-hero__cycle-text {



    font-size: 16px;



    text-align: center;




  }



  .vs-hero__line {



    font-size: 15px;




  }



  .vs-hero {



    background-image: url('../images/mobile-banner.webp');
    background-position: 10% 83%;


  }



  .vs-hero::before {



    content: '';



    position: absolute;



    top: 0;



    left: 0;



    background-color: rgb(246 228 208 / 50%);



    width: 100%;



    height: 100%;



    z-index: -1;



  }



  .vs-hero__social-icons a {



    border: 1px solid #000000;



    color: #000000;



  }



  .vs-hero__line em,



  .vs-hero__line strong {



    /*color: #f10e12;*/
    color:#821517;



  }



}



@media (max-width:576px) {

.swiper-button-next, .swiper-button-prev {
    width: 25px !important;
    height: 25px !important;
    margin-top: 5px !important;
}

 .vs-hero {
    margin-top: -30%;
    padding-top: 155px;
  }

  .vs-hero__script {



    font-size: 32px;



  }



  .curtain-Rises {



    max-width: 230px;



    /*filter: brightness(0) saturate(100%) invert(12%) sepia(81%) saturate(6672%) hue-rotate(354deg) brightness(96%) contrast(97%);*/



  }



  .vs-hero__cycle-icon-wrap img,



  .line {



    /*filter: brightness(0) saturate(100%) invert(12%) sepia(81%) saturate(6672%) hue-rotate(354deg) brightness(96%) contrast(97%);*/



  }



  .vs-hero__punch {



    font-size: 22px;



  }



  .vs-hero__cycle-text {



    font-size: 16px;



  }



  .vs-hero__social {



    left: 20px;



  }



  .vs-hero__welcome-title {



    font-size: 18px;



    letter-spacing: 2px;



  }



  .vs-hero__box {



    padding: 16px 14px;



  }



}


@media (max-width: 425px) {
    .vs-hero {
        padding-top: 100px;
    }
}

/* ===== Velicheti Studios — About page ===== */



.vs_about__hero {



  position: relative;



  min-height: 70vh;



  display: flex;



  align-items: flex-end;



  background-image: url('../images/about.png');



  /* apply your image path */



  background-size: cover;



  background-position: center 30%;



  background-repeat: no-repeat;



}



.vs_about__overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(to top,



      rgba(14, 13, 11, 0.97) 0%,



      rgba(14, 13, 11, 0.75) 35%,



      rgba(14, 13, 11, 0.25) 70%,



      rgba(14, 13, 11, 0.05) 100%);



}



.vs_about__hero-content {



  position: relative;



  z-index: 2;



  width: 100%;



  padding: 0 6vw 5vw;



  text-align: center;



}



.vs_about__eyebrow {



  display: inline-block;



  font-size: .75rem;



  letter-spacing: .35em;



  text-transform: uppercase;



  color: #c6a15b;



  margin-bottom: .9rem;



  opacity: 0;



}



.vs_about__title {



  font-size: clamp(2.6rem, 7vw, 5.2rem);



  color: #ede6d8;



  letter-spacing: .04em;



  margin: 0;



  opacity: 0;



}



body.vs-ready .vs_about__eyebrow {



  animation: vsAboutSlideUp .6s ease forwards;



  animation-delay: 1s;



}



body.vs-ready .vs_about__title {



  animation: vsAboutSlideUp .6s ease forwards;



  animation-delay: 1.7s;



}



@keyframes vsAboutSlideUp {



  0% {



    opacity: 0;



    transform: translateY(30px);



  }



  100% {



    opacity: 1;



    transform: translateY(0);



  }



}



@keyframes vsAboutZoomIn {



  0% {



    opacity: 0;



    transform: scale(.6);



  }



  100% {



    opacity: 1;



    transform: scale(1);



  }



}



/* Signature element: filmstrip sprocket divider */



.vs_about__filmstrip {



  width: 220px;



  height: 10px;



  margin: 1.6rem auto 0;



  background-image: radial-gradient(circle, #c6a15b 2.2px, transparent 2.3px);



  background-size: 22px 10px;



  background-repeat: repeat-x;



  background-position: center;



  opacity: 0;



}



body.vs-ready .vs_about__hero-content>.vs_about__filmstrip {



  animation: vsAboutZoomIn .6s ease forwards;



  animation-delay: 1s;



}



.vs_about__filmstrip--small {



  width: 110px;



  margin: 2.6rem auto;



}



body.vs-ready .vs_about__filmstrip--small {



  animation: vsAboutZoomIn .6s ease forwards;



}



.vs_about__inner>div.vs_about__filmstrip--small:nth-of-type(1) {



  animation-delay: 1s;



}



.vs_about__inner>div.vs_about__filmstrip--small:nth-of-type(2) {



  animation-delay: 2s;



}



.vs_about__body {



  background: #0e0d0b;



  padding: 5rem 6vw 6rem;



}



.vs_about__inner {



  max-width: 760px;



  margin: 0 auto;



}



.vs_about__para {



  font-size: clamp(1.05rem, 1.6vw, 1.25rem);



  line-height: 1.85;



  color: #9c9284;



  font-weight: 300;



  text-align: center;



  margin: 0;



  opacity: 0;



}



body.vs-ready .vs_about__para {



  animation: vsAboutSlideUp .6s ease forwards;



}



.vs_about__inner>p.vs_about__para:nth-of-type(1) {



  animation-delay: 1s;



}



.vs_about__inner>p.vs_about__para:nth-of-type(2) {



  animation-delay: 2.0s;



}



.vs_about__inner>p.vs_about__para:nth-of-type(3) {



  animation-delay: 2.35s;



}



.vs_about__para--lead {



  color: #ede6d8;



  font-weight: 400;



}



@media (prefers-reduced-motion:reduce) {



  * {



    scroll-behavior: auto !important;



  }



  .vs_about__eyebrow,



  .vs_about__title,



  .vs_about__filmstrip,



  .vs_about__filmstrip--small,



  .vs_about__para {



    animation: none;



    opacity: 1;



    transform: none;



  }



}



/* ===== Responsive ===== */



@media (max-width:768px) {



  .vs_about__hero {



    min-height: 60vh;



    background-position: center 20%;



  }



  .vs_about__hero-content {



    padding: 0 6vw 8vw;



  }



  .vs_about__body {



    padding: 3.5rem 6vw 4rem;



  }



  .vs_about__filmstrip {



    width: 160px;



  }



}



@media (max-width:480px) {



  .vs_about__hero {



    min-height: 50vh;



  }



  .vs_about__eyebrow {



    letter-spacing: .25em;



    font-size: .68rem;



  }



  .vs_about__para {



    line-height: 1.7;



  }



}



/* ===== Velicheti Studios — Jam With Us page ===== */



.vs_jam {



  position: relative;



  /*background-image: url('../images/about_2.jpeg');*/



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  background-attachment: fixed;



  padding: 5rem 6vw 6rem;



}



.vs_jam::before {



  content: '';



  position: absolute;



  background-color: rgb(247 231 213 / 72%) !important;



  width: 100%;



  height: 100%;



  top: 0;



  left: 0;



  z-index: 1;



}



.vs_jam__intro,



.vs_jam__body {



  position: relative;



  z-index: 1;



}



.vs_jam__intro {



  max-width: 700px;



  margin: 0 auto 2rem;



  text-align: center;



}



/* ---- Eyebrow: WE WRITE | WE DIRECT | WE PRODUCE ---- */



.vs_jam__eyebrow {



  font-size: clamp(1.6rem, 5vw, 2.6rem);



  font-weight: 700;



  letter-spacing: .02em;



  text-transform: uppercase;



  color: #1F1F1F;



  margin: 0 0 1.4rem;



  opacity: 0;



}



body.vs-ready .vs_jam__eyebrow {



  animation: vsJamSlideUp .6s ease forwards;



  animation-delay: .3s;



}



.vs_jam__eyebrow .vs_jam__accent {



  color: #821517;



}



.vs_jam__eyebrow .vs_jam__divider {



  color: #821517;



  font-weight: 300;



  margin: 0 .9rem;



  display: inline-block;



}



/* ---- Star / rule divider ---- */



.vs_jam__rule {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: .8rem;



  max-width: 220px;



  margin: 0 auto 1.6rem;



  opacity: 0;



}



body.vs-ready .vs_jam__rule {



  animation: vsJamFadeIn .5s ease forwards;



}



.vs_jam__rule::before,



.vs_jam__rule::after {



  content: '';



  flex: 1;



  height: 1px;



  background: #821517;



  opacity: .55;



}



.vs_jam__rule-star {



  color: #821517;



  font-size: .7rem;



  line-height: 1;



}



@keyframes vsJamFadeIn {



  0% {
    opacity: 0;
  }



  100% {
    opacity: 1;
  }



}



.vs_jam__lead {



  font-size: clamp(1.35rem, 8vw, 1.8rem);



  line-height: 1.25;



  font-weight: 700;



  color: #332f2f;



  margin-bottom: 20px;



  letter-spacing: 1px;



  text-transform: uppercase;



}



.vs_jam__lead .vs_jam__accent {



  color: #821517;



}



.vs_jam__sub {



  color: #1F1F1F;



  max-width: 700px;



  margin: auto;



  line-height: 1.7;



  font-size: 1.2rem;



}



.vs_jam__sub em {



  color: #821517;



  font-style: italic;



  font-weight: 500;



}



.vs_jam__collab {



  color: #1F1F1F;



  max-width: 700px;



  margin: 0 auto 0;



  line-height: 1.7;



  font-size: 1rem;



  opacity: 0;



}



body.vs-ready .vs_jam__collab {



  animation: vsJamSlideUp .6s ease forwards;



  animation-delay: 1.6s;



}



.vs_jam__collab em {



  color: #821517;



  font-style: italic;



  font-weight: 450;



}



body.vs-ready .vs_jam__lead {



  animation: vsJamSlideUp .6s ease forwards;



  animation-delay: .8s;



}



body.vs-ready .vs_jam__sub {



  animation: vsJamSlideUp .6s ease forwards;



  animation-delay: 1.3s;



}



.vs_jam__body {



  margin: 0 auto;



  background-color: rgb(246 228 208 / 83%);



  padding: 30px 15px 10px;



}



.vs_jam__grid {



  display: grid;



  grid-template-columns: 0.9fr 1.4fr;



  gap: 3rem;



}



/* ---- Info column ---- */



.vs_jam__info h1,



.vs_jam__info h2,



.vs_jam__info h3,



.vs_jam__info h4,



.vs_jam__info-title,



.vs_jam__form-wrap h1,



.vs_jam__form-wrap h2,



.vs_jam__form-wrap h3,



.vs_jam__form-wrap h4,



.vs_jam__form-title {



  font-size: 30px;



  color: #821517;



  letter-spacing: .03em;



  margin: 0 0 1rem;



  opacity: 0;



}



.vs_jam__info-title,



.vs_jam__form-title {



  display: inline-block;



}



.vs_jam__col-heading {



  text-align: center;



}



.vs_jam__col-heading .vs_jam__rule {



  margin-top: 0;



}



/* Left column: any heading slides in from the left */



body.vs-ready .vs_jam__info h1,



body.vs-ready .vs_jam__info h2,



body.vs-ready .vs_jam__info h3,



body.vs-ready .vs_jam__info h4,



body.vs-ready .vs_jam__info-title {



  animation: vsJamSlideLeft .5s ease forwards;



  animation-delay: 1s;



}



/* Right column: any heading slides in from the right */



body.vs-ready .vs_jam__form-wrap h1,



body.vs-ready .vs_jam__form-wrap h2,



body.vs-ready .vs_jam__form-wrap h3,



body.vs-ready .vs_jam__form-wrap h4,



body.vs-ready .vs_jam__form-title {



  animation: vsJamSlideRight .5s ease forwards;



  animation-delay: 2s;



}



@keyframes vsJamSlideLeft {



  0% {



    opacity: 0;



    transform: translateX(-35px);



  }



  100% {



    opacity: 1;



    transform: translateX(0);



  }



}



@keyframes vsJamSlideRight {



  0% {



    opacity: 0;



    transform: translateX(35px);



  }



  100% {



    opacity: 1;



    transform: translateX(0);



  }



}



@keyframes vsJamSlideUp {



  0% {



    opacity: 0;



    transform: translateY(25px);



  }



  100% {



    opacity: 1;



    transform: translateY(0);



  }



}



@keyframes vsFillLeftRight {



  0% {



    width: 0;



  }



  100% {



    width: 100%;



  }



}



@media (prefers-reduced-motion: reduce) {



  .vs_jam__info-title,



  .vs_jam__form-title,



  .vs_jam__info-item,



  .vs_jam__eyebrow,



  .vs_jam__rule,



  .vs_jam__collab,



  .vs_jam__quote {



    animation: none;



    opacity: 1;



    transform: none;



  }



  .vs_jam__info::before,



  .vs_jam__form-wrap::before {



    animation: none;



    width: 100%;



  }



}



.vs_jam__info {



  position: relative;



  overflow: hidden;



  background: transparent;



  border: 0;



  border-right: 2px solid #c6a15b;



  padding: 0;



  border-radius: 0;



}



.vs_jam__info::before {



  content: none;



}



.vs_jam__info>* {



  position: relative;



  z-index: 1;



}



.vs_jam__info-item {



  display: flex;



  align-items: flex-start;



  gap: .9rem;



  margin-bottom: 1.6rem;



  opacity: 0;



  padding-left: 15%;



}



body.vs-ready .vs_jam__info-item {



  animation: vsJamSlideUp .5s ease forwards;



}



body.vs-ready .vs_jam__info-item:nth-child(2) {



  animation-delay: 1.3s;



}



body.vs-ready .vs_jam__info-item:nth-child(3) {



  animation-delay: 1.4s;



}



body.vs-ready .vs_jam__info-item:nth-child(4) {



  animation-delay: 1.5s;



}



.vs_jam__info-item:last-child {



  margin-bottom: 0;



}



.vs_jam__info-icon {



  flex: none;



  display: flex;



  align-items: center;



  justify-content: center;



  width: 22px;



  height: 22px;



  margin-top: .2rem;



  color: #821517;



}



.vs_jam__info-icon svg {



  width: 20px;



  height: 20px;



  fill: currentColor;



}



.vs_jam__info-label {



  display: block;



  font-size: 1.05rem;



  font-weight: 700;



  text-transform: uppercase;



  color: #1F1F1F;



  margin-bottom: .3rem;



}



.vs_jam__info-value {



  display: block;



  font-size: 1rem;



  color: #1F1F1F;



  text-decoration: none;



  line-height: 1.6;



}



a.vs_jam__info-value:hover {



  color: #821517;



}



/* ---- Form column ---- */



.vs_jam__form-wrap {



  position: relative;



  overflow: hidden;



  background: transparent;



  padding: 0;



  border-radius: 0;



}



.vs_jam__form-wrap::before {



  content: none;



}



.vs_jam__form-wrap>* {



  position: relative;



  z-index: 1;



}



.vs_jam__form-row {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 1.2rem;



}



.vs_jam__field {



  /*margin-bottom: 1rem;*/



}



.vs_jam__field--full {



  margin-top: 0;



}



.vs_jam__label {



  display: block;



  font-size: .75rem;



  letter-spacing: .1em;



  text-transform: uppercase;



  color: #1F1F1F;



  margin-bottom: .5rem;



}



.vs_jam__label .vs_jam__req {



  color: #821517;



}



.vs_jam__input,



.vs_jam__textarea,



.vs_jam__select {



  width: 100%;



  background: rgba(255, 255, 255, 0.35);



  border: 1px solid rgba(31, 31, 31, 0.25);



  color: #404040;



  font-size: 14px;



  padding: 0.5rem 1rem;



  border-radius: 4px;



  box-sizing: border-box;



}



.vs_jam__select {



  height: 40px;



}



.vs_jam__input::placeholder,



.vs_jam__textarea::placeholder {



  color: rgba(31, 31, 31, 0.55);



}



.vs_jam__select {



  appearance: none;



  -webkit-appearance: none;



  -moz-appearance: none;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23821517'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5H5.5z'/%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: right .9rem center;



  background-size: 16px;



  cursor: pointer;



}



.vs_jam__input:focus,



.vs_jam__textarea:focus,



.vs_jam__select:focus {



  outline: none;



  border-color: #821517;



}



.vs_jam__textarea {



  resize: vertical;



}



.vs_jam__submit {



  display: inline-flex;



  align-items: center;



  gap: .6rem;



  padding: 10px 25px;



  border: 2px solid transparent;



  background: linear-gradient(135deg, #821517, #951316);



  color: #fff;



  border-radius: 5px;



  cursor: pointer;



  font-weight: 600;



  letter-spacing: .04em;



  text-transform: uppercase;



  font-size: .85rem;



  transition: all 0.8s ease-in-out;



}



.vs_jam__submit svg {



  width: 16px;



  height: 16px;



  fill: currentColor;



  transition: transform .3s ease;



}



.vs_jam__submit:hover {



  background: #ffffff;



  border-color: #821517;



  color: #821517;



  transition: all 0.8s ease-in-out;



}



.vs_jam__submit:hover svg {



  transform: translateX(4px);



}



/* ---- Quote footer ---- */



.vs_jam__quote-wrap {



  position: relative;



  z-index: 1;



  margin: 1.8rem auto 0;



  padding: 1rem 0;



  border-top: 1px solid rgba(31, 31, 31, 0.15);



  text-align: center;



  opacity: 0;



}



body.vs-ready .vs_jam__quote-wrap {



  animation: vsJamFadeIn .8s ease forwards;



  animation-delay: 2.4s;



}



.vs_jam__quote {



  font-size: 15px;



  font-style: italic;



  color: #1F1F1F;



  margin: 0;



}



.vs_jam__quote-mark {



  color: #821517;



  font-size: 1.5rem;



  font-style: normal;



  line-height: 0;



  vertical-align: -webkit-baseline-middle;



  margin: 0 .5rem;



  font-weight: bold;



}



/* ===== Responsive ===== */
@media (max-width:1200px) {
.vs_jam__info-item{
    padding-left:0;
}
}

@media (max-width:900px) {



  .vs_jam__grid {



    grid-template-columns: 1fr;



    gap: 2.5rem;



  }



  .vs_jam__info {



    border-right: 0;



  }



  .vs_jam__info-item {



    padding-left: 0;



  }



}



@media (max-width:600px) {



  .vs_jam__form-row {



    grid-template-columns: 1fr;



  }



}



@media (max-width:768px) {



  .vs_jam {
margin-top: -40px !important;


    padding: 20px 6vw 0;


    background-attachment: scroll;



    /* fixed attachment breaks on mobile Safari */



  }



  .vs_jam__intro {



    margin-bottom: 0.1rem;



  }



  .vs_jam__info {



    padding: 0;



  }



  .vs_jam__form-wrap {



    padding: 0;



  }



}



@media (max-width:480px) {



  .vs_jam__eyebrow {



    letter-spacing: .01em;



    font-size: 1.5rem;



  }



  .vs_jam__eyebrow .vs_jam__divider {



    margin: 0 .4rem;



  }



  .vs_jam__submit {



    padding: 7px 15px;



    font-size: .7rem;



  }



}



/* =========================



   ASSOCIATIONS SECTION



   Scoped CSS (No Override)



========================= */



.associations-section * {



  margin: 0;



  padding: 0;



  box-sizing: border-box;



}



.associations-section {



  padding: 80px 20px;



  /*background-image: url('../images/asscoiation_hero.jpeg');*/



  background-position: 0% 100%;



  width: 100%;



  height: auto;



  background-size: cover;



  background-repeat: no-repeat;



  color: #fff;



  position: relative;



  z-index: -1;



}



.associations-section::before {



  content: '';



  position: absolute;



  background: rgb(247 231 213 / 72%);



  width: 100%;



  height: 100%;



  top: 0;



  left: 0;



  z-index: 1;



}



.associations-section .container {



  max-width: 1280px;



  margin: auto;



  position: relative;



  z-index: 9999;



}



/* Header */



.associations-section .section-header {



  text-align: center;



  margin-bottom: 50px;



}



.associations-section .section-header h2 {



  font-size: clamp(2rem, 8vw, 2.6rem);



  font-weight: 700;



  margin-bottom: 12px;



  color: #821517;



}



.associations-section .section-header p {



  color: #1F1F1F;



  max-width: 700px;



  margin: auto;



  line-height: 1.7;



  font-size: 1.2rem;



}



/* Tabs */



.associations-section .tabs {



  display: flex;



  justify-content: center;



  gap: 15px;



  margin-bottom: 15px;



  flex-wrap: wrap;



}



.associations-section .tab-btn {



  padding: 14px 28px;



  border: 1px solid rgba(255, 255, 255, 0.12);



  background: #161616;



  color: #fff;



  border-radius: 50px;



  cursor: pointer;



  font-weight: 600;



  transition: all 0.35s ease;



}



.associations-section .tab-btn.active,



.associations-section .tab-btn:hover {



  background: linear-gradient(135deg, #821517, #951316);



  border-color: transparent;



  transform: translateY(-2px);



  box-shadow: 0 10px 30px rgb(130 21 23 / 46%);



}



/* Tab Content */



.associations-section .tab-content {



  display: none;



  animation: associationsFadeIn 0.4s ease;



}



.associations-section .tab-content.active {



  display: block;



}



@keyframes associationsFadeIn {



  from {



    opacity: 0;



    transform: translateY(8px);



  }



  to {



    opacity: 1;



    transform: translateY(0);



  }



}



/* Info Card */



.associations-section .info-card {



  padding: 5px;



  /* margin-bottom: 20px; */



}



.associations-section .info-card h3 {



  font-size: 26px;



  color: #821517;



  text-align: center;



  margin-bottom: 12px;



}



.associations-section .info-card p {



  color: #1F1F1F;



  line-height: 1.8;



  text-align: center;



  font-size: 18px;



}



/* Slider */



.associations-section .slider-wrapper {



  position: relative;



  overflow: visible;



  /* allow zoom outside */



  padding: 40px 0 60px;



}



.associations-section .slider-track {



  display: flex;



  align-items: center;



  gap: 24px;



  width: max-content;



  animation: associationsScroll 45s linear infinite;



}



.associations-section .slider-wrapper:hover .slider-track {



  animation-play-state: paused;



}



@keyframes associationsScroll {



  from {



    transform: translateX(0);



  }



  to {



    transform: translateX(-86%);



  }



}



/* Movie Cards */



.associations-section .movie-card {



  width: 300px;



  flex-shrink: 0;



  position: relative;



  z-index: 1;



  transition: transform 0.4s ease, z-index 0.4s ease;



}



.associations-section .movie-card img {



  width: 100%;



  height: 430px;
  /* increased from 380px */



  object-fit: cover;



  border-radius: 18px;



  display: block;



  border: 2px solid rgba(255, 255, 255, 0.08);



  transition: all 0.4s ease;



  transform-origin: center center;



}



.associations-section .movie-card h4 {



  margin-top: 12px;



  font-size: 18px;



  text-align: center;



  color: #821517;



}



.associations-section .movie-card:hover {



  transform: scale(1.28);



  z-index: 50;



  /* bring above all cards */



}



.associations-section .movie-card:hover img {



  box-shadow: 0 30px 80px rgba(255, 102, 0, 0.55);



  border-color: rgba(255, 122, 0, 0.7);



  filter: brightness(1.05) contrast(1.05);



}



/* Creative Grid */



.associations-section .creative-grid {



  display: grid;



  grid-template-columns: repeat(1, 1fr);



  gap: 24px;



}



.associations-section .creative-card {



  padding: 28px;



  transition: all 0.3s ease;



}



.associations-section .creative-card:hover {



  transform: translateY(-6px);



  border-color: rgba(255, 122, 0, 0.45);



}



.associations-section .slider-track .movie-card:not(:hover) {



  opacity: 0.9;



}



.associations-section h3 {



  color: #821517;



  margin-bottom: 18px;



  text-align: center;



  font-size: 26px;



}



.associations-section .creative-card ul {



  list-style: none;



}



.associations-section .creative-card li {



  color: #e3e3e3;



  margin-bottom: 10px;



  padding-left: 18px;



  position: relative;



}



.associations-section .creative-card li::before {



  content: "▶";



  position: absolute;



  left: 0;



  color: #f3f3f3;



  font-size: 12px;



}



/* Expertise */



.associations-section .expertise-box {



  grid-column: 1 / -1;



  background: linear-gradient(135deg, rgb(26 26 26 / 68%), rgb(17 17 17 / 84%));



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: 28px;



  padding: 34px;



  text-align: center;



}



.associations-section .expertise-box h3 {



  color: #f3f3f3;



  margin-bottom: 16px;



}



.associations-section .expertise-box p {



  color: #d0d0d0;



  line-height: 1.8;



}



/* Responsive */



@media (max-width: 992px) {



  .associations-section .creative-grid {



    grid-template-columns: 1fr;



    display: block;



  }



  .associations-section .movie-card {



    width: 160px;



  }



  .associations-section .movie-card img {



    height: 230px;
    /* increased from ~ implicit 380px scaled */



  }



}



@media (max-width: 768px) {



  .associations-section {
margin-top: -60px !important;


    padding: 60px 15px;



  }



  .associations-section .section-header h2 {



    font-size: 32px;



  }



  .associations-section .tab-btn {



    width: 100%;



    max-width: 320px;



  }



  .associations-section .movie-card {



    width: 140px;



  }



  .associations-section .movie-card img {



    height: 200px;
    /* increased from 210px baseline kept proportional */



  }



  .associations-section .movie-card:hover {



    transform: scale(1.12);



  }



}



@media (max-width: 480px) {



  .associations-section .section-header h2 {



    font-size: 28px;



  }



  .associations-section .movie-card {



    width: 120px;



  }



  .associations-section .movie-card img {



    height: 170px;



  }



}



/* =========================



   SERVICES GRID



========================= */



.associations-section .services-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 24px;



  margin-top: 35px;



}



.associations-section .service-card {



  background: rgb(21 21 21 / 76%);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: 24px;



  padding: 30px 24px;



  text-align: center;



  transition: all 0.35s ease;



  position: relative;



  overflow: hidden;



}



.associations-section .service-card::before {



  content: "";



  position: absolute;



  top: 0;



  left: -100%;



  width: 100%;



  height: 100%;



  background: linear-gradient(90deg, transparent, rgba(255, 122, 0, 0.08), transparent);



  transition: left 0.5s ease;



}



.associations-section .service-card:hover::before {



  left: 100%;



}



.associations-section .service-card:hover {



  transform: translateY(-8px);



  border-color: rgba(255, 122, 0, 0.45);



  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);



}



.associations-section .service-icon {



  font-size: 42px;



  display: inline-block;



  margin-bottom: 18px;



  line-height: 1;



}



.associations-section .service-card h4 {



  font-size: 20px;



  margin-bottom: 10px;



  color: #f3f3f3;



  font-weight: 600;



}



.associations-section .service-card p {



  color: #d0d0d0;



  line-height: 1.7;



  font-size: 15px;



}



/* Tablet */



@media (max-width: 992px) {



  .associations-section .services-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}



/* Mobile */



@media (max-width: 768px) {



  .associations-section .services-grid {



    grid-template-columns: 1fr;



    gap: 18px;



  }



  .associations-section .service-card {



    padding: 26px 20px;



  }



  .associations-section .service-icon {



    font-size: 36px;



  }



  .associations-section .service-card h4 {



    font-size: 18px;



  }



}



/* =========================



   ROLE GALLERY TABS



========================= */



.associations-section .gallery-tabs {



  display: flex;



  justify-content: center;



  gap: 16px;



  flex-wrap: wrap;



  margin: 40px 0 35px;



}



.associations-section .gallery-tab {



  padding: 14px 26px;



  background: #151515;



  color: #fff;



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: 50px;



  cursor: pointer;



  font-weight: 600;



  transition: all 0.35s ease;



}



.associations-section .gallery-tab.active,



.associations-section .gallery-tab:hover {



  background: linear-gradient(135deg, #821517, #951316);



  border-color: transparent;



  transform: translateY(-2px);



  box-shadow: 0 10px 25px rgba(255, 102, 0, 0.25);



}



/* Gallery Content */



.associations-section .gallery-content {



  display: none;



  animation: galleryFade 0.4s ease;



}



.associations-section .gallery-content.active {



  display: block;



}



@keyframes galleryFade {



  from {



    opacity: 0;



    transform: translateY(8px);



  }



  to {



    opacity: 1;



    transform: translateY(0);



  }



}



/* Grid */



.associations-section .gallery-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(240px, 230px));



  justify-content: center;



  gap: 24px;



  margin: auto;



}



/* Card */



.associations-section .gallery-card {





  /*overflow: hidden;*/



  transition: all 0.35s ease;



  text-align: center;



}



.associations-section .gallery-card img {

border-radius: 15px;
    border: 2px solid rgb(130 21 23);

  width: 100%;



  height: auto;



  object-fit: cover;



  display: block;



  transition: transform 0.45s ease;



}



.associations-section .gallery-card h4 {



  padding: 18px 14px;



  color: #821517;



  font-size: 18px;



  font-weight: 600;



}





.associations-section .gallery-card:hover img {


  transform: scale(1.05);



}



/* Mobile */



@media (max-width: 768px) {



  .associations-section .gallery-tab {



    width: 100%;



    max-width: 320px;



  }



  .associations-section .gallery-card img {



    /*height: 280px;*/



  }



}







/* =========================



   OUR COMMITMENT HERO



========================= */



.commitment-hero {



  background: #f3e8d8;



  padding: 80px 20px;



  overflow: hidden;



}



.commitment-container {



  margin: auto;



  display: grid;



  grid-template-columns: 1.1fr 1fr;



  align-items: center;



  gap: 60px;



}



/* Left Image */



.commitment-image {



  position: relative;



  /*transform: translate(-34px, -98px);*/



  /*transform: translate(-34px, -98px);*/



  transform: translate(-2px, -98px);



}



.commitment-image img {



  width: 100%;



  display: block;



  border-radius: 20px;



}



/* Right Content */



.commitment-content {



  color: #1a1a1a;



}



.commitment-subtitle {



  display: inline-block;



  font-size: 16px;



  font-weight: 700;



  letter-spacing: 3px;



  color: #111;



  margin-bottom: 10px;



}



.commitment-content h1 {



  font-size: clamp(2rem, 8vw, 2.6rem);



  line-height: 0.95;



  font-weight: 700;



  color: #821517;



  margin-bottom: 20px;



}



.commitment-content h3 {



  font-size: 28px;



  font-weight: 600;



  letter-spacing: 1px;



  color: #821517;



  margin-bottom: 25px;



}



.commitment-content p {



  font-size: 16px;



  line-height: 1.7;



  color: #1F1F1F;



  margin-bottom: 35px;



}



/* Features */



.commitment-features {



  display: grid;



  grid-template-columns: repeat(2, 1fr);



  gap: 18px;



  margin-bottom: 35px;



}



.feature-box {



  background: rgba(255, 255, 255, 0.55);



  border: 1px solid rgba(0, 0, 0, 0.06);



  border-radius: 18px;



  padding: 20px;



  text-align: center;



  transition: all 0.35s ease;



}



.feature-box:hover {



  transform: translateY(-6px);



  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);



  border-color: rgba(208, 106, 0, 0.25);



}



.feature-icon {



  font-size: 34px;



  display: block;



  margin-bottom: 12px;



}



.feature-box h4 {



  font-size: 18px;



  font-weight: 600;



  color: #821517;



  line-height: 1.5;



}



/* Footer */



.commitment-footer {



  display: flex;



  flex-wrap: wrap;



  gap: 12px;



  align-items: center;



  font-size: 16px;



  font-weight: 700;



  letter-spacing: 1px;



  padding-top: 10px;



  border-top: 1px solid rgba(0, 0, 0, 0.08);



}



.commitment-footer .highlight {



  color: #d06a00;



}



/* =========================



   TABLET



========================= */



@media (max-width: 992px) {



  .commitment-container {



    grid-template-columns: 1fr;



    gap: 0px;



    text-align: center;



  }



  .commitment-content h1 {



    font-size: 56px;



  }



  .commitment-features {



    grid-template-columns: repeat(2, 1fr);



  }



  .commitment-footer {



    justify-content: center;



  }



}



/* =========================



   MOBILE



========================= */



@media (max-width: 768px) {



  .commitment-hero {
    margin-top: -120px !important;
    padding: 20px 15px;



  }



  .commitment-content h1 {



    font-size: 35px;



  }



  .commitment-content h3 {



    font-size: 16px;



  }



  .commitment-content p {



    font-size: 15px;



    line-height: 1.8;



  }



  .commitment-features {



    grid-template-columns: 1fr;



  }



  .feature-box {



    padding: 18px;



  }



  .commitment-footer {



    flex-direction: column;



    gap: 8px;



    font-size: 14px;



  }



}



.btn-vs {



  display: flex;



  justify-content: center;



  align-items: center;



  width: 100%;



  margin-top: 30px;
    z-index: 111111;
    position: relative;


}



.jam-btn {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  padding: 14px 48px;



  /* background: linear-gradient(135deg, #ff5a00, #ff8c00); */



  background: linear-gradient(135deg, #821517, #951316);



  color: #fff;



  text-decoration: none;



  font-size: 18px;



  font-weight: 600;



  border-radius: 50px;



  transition: all 0.35s ease;



  box-shadow: 0 10px 25px rgba(255, 102, 0, 0.25);



}



.jam-btn .arrow {



  font-style: normal;



  transition: transform 0.3s ease;



}



.jam-btn:hover {



  transform: translateY(-3px);



  box-shadow: 0 18px 40px rgba(255, 102, 0, 0.35);



  color: rgb(246 228 208 / 89%);



}



.jam-btn:hover .arrow {



  transform: translateX(4px);



}







@media (max-width: 500px) {

.associations-section .slider-track{
    align-items: flex-start;
}


  .commitment-content {



    margin-top: -20%;



  }



}


/* ---- Contact form validation / response styles (scoped to this page) ---- */

.vs_jam__field {
  position: relative;
}

.vs_jam__input.is-invalid,

.vs_jam__select.is-invalid,

.vs_jam__textarea.is-invalid {

  border-color: #e74c3c !important;

  box-shadow: 0 0 0 1px #e74c3c;

}

.vs_jam__input.is-valid,

.vs_jam__select.is-valid,

.vs_jam__textarea.is-valid {

  border-color: #2ecc71 !important;

}

.vs_jam__error {

  display: block;

  color: #e74c3c;

  font-size: 12px;

  margin-top: 4px;

  min-height: 14px;

}

.vs_jam__response {

  padding: 12px 16px;

  border-radius: 6px;

  margin-bottom: 18px;

  font-size: 14px;

  font-weight: 500;

}

.vs_jam__response--success {

  background: #e9f9ee;

  color: #1e7e34;

  border: 1px solid #b3e6c1;

}

.vs_jam__response--error {

  background: #fdecea;

  color: #c0392b;

  border: 1px solid #f5c6cb;

}

.vs_jam__submit[disabled] {

  opacity: 0.65;

  cursor: not-allowed;

}

.vs_jam__submit .vs_jam__spinner {

  display: inline-block;

  width: 14px;

  height: 14px;

  margin-left: 8px;

  border: 2px solid rgba(255, 255, 255, 0.4);

  border-top-color: #fff;

  border-radius: 50%;

  animation: vsJamSpin 0.7s linear infinite;

  vertical-align: middle;

}

@keyframes vsJamSpin {

  to {
    transform: rotate(360deg);
  }

}



/* =========================================
   OUR COMMITMENT PAGE
========================================= */

.commitment-page {
  --cream: #f5eee3;
  --cream-dark: #e9dfd0;
  --brown: #6f4a2c;
  --orange: #821517;
  --dark: #1F1F1F;
  --text: #1F1F1F;

  width: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--dark);
}


/* =========================================
   INTRO
========================================= */

.commitment-intro {
  min-height: 20vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 60px 7%;
  overflow: hidden;
}

.commitment-intro::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  right: -200px;
  top: -180px;

  background: rgba(199, 123, 53, 0.08);
  border-radius: 50%;
  filter: blur(80px);
}

.commitment-intro-inner {
  width: 100%;
  max-width: 1450px;
  margin: auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.commitment-label {
  display: flex;
  align-items: center;
  gap: 15px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;

  color: var(--orange);
  margin-bottom: 30px;
}

.commitment-label::before {
  content: "";
  width: 45px;
  height: 1px;
  background: var(--orange);
}

.commitment-intro h1 {

  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -4px;
  color: var(--text);
  margin-bottom: 45px;
}

.commitment-intro h1 span {
  color: var(--orange);
}

.commitment-intro-text {

  font-size: 20px;
  line-height: 1.9;
  color: var(--text);
}


/* =========================================
   STANDARDS TITLE
========================================= */

.commitment-standards-heading {
  padding: 48px 7% 30px;
  background: var(--cream-dark);
  color: var(--text);
}

.commitment-standards-heading-inner {
  max-width: 1450px;
  margin: auto;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.commitment-standards-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 400;
}

.commitment-standards-heading p {
  max-width: 420px;
  font-size: 18px;
  color: var(--text);
  line-height: 1.7;
}


/* =========================================
   CARDS
========================================= */

.commitment-list {
  background: var(--cream-dark);
  padding: 4px 7% 120px;
}

.commitment-list-inner {
  max-width: 1450px;
  margin: auto;

  display: flex;
  flex-direction: column;
  gap: 30px;
}


/* =========================================
   INDIVIDUAL CARD
========================================= */

.commitment-card {
  min-height: 620px;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;

  background: #f7f1e8;
  position: relative;

  overflow: hidden;

  border: 1px solid rgba(80, 60, 40, 0.08);

  transition:
    transform 0.6s ease,
    box-shadow 0.6s ease;
}

.commitment-card:nth-child(even) {
  grid-template-columns: 0.9fr 1.1fr;
}

.commitment-card:nth-child(even) .commitment-card-image {
  order: 2;
}

.commitment-card:nth-child(even) .commitment-card-content {
  order: 1;
}

.commitment-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 25px 60px rgba(60, 42, 25, 0.12);
}


/* =========================================
   IMAGE
========================================= */

.commitment-card-image {
  position: relative;
  min-height: 620px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #e7dccb;
}

.commitment-card-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.04),
      transparent 70%);

  pointer-events: none;
}

.commitment-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: left;
  transition:
    transform 1s cubic-bezier(.2, .7, .2, 1);
}

.commitment-card:hover .commitment-card-image img {
  transform: scale(1.06);
}


/* =========================================
   CONTENT
========================================= */

.commitment-card-content {
  position: relative;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 80px;

  z-index: 2;
}

.commitment-number {
  position: absolute;

  top: 35px;
  right: 45px;

  font-family: Georgia, serif;

  font-size: 100px;
  line-height: 1;

  color: rgba(110, 75, 40, 0.06);
}

.commitment-small-title {
  font-size: 11px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 3px;

  color: var(--orange);

  margin-bottom: 25px;
}

.commitment-card-content h3 {
  max-width: 520px;
  font-size: clamp(40px, 4vw, 65px);
  font-weight: 400;

  line-height: 1.02;
  color: var(--text);
  margin-bottom: 30px;
}

.commitment-card-content h3 span {
  color: var(--orange);
}

.commitment-line {
  width: 60px;
  height: 2px;

  background: var(--orange);

  margin-bottom: 30px;
}

.commitment-card-content p {
  max-width: 520px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;

  color: var(--text);
}


/* =========================================
   CARD FOOTER
========================================= */

.commitment-card-footer {
  margin-top: 45px;

  display: flex;
  align-items: center;
  gap: 15px;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 2px;
  text-transform: uppercase;

  color: var(--brown);
}

.commitment-card-footer span {
  width: 30px;
  height: 1px;

  background: var(--orange);
}


/* =========================================
   FINAL STATEMENT
========================================= */

.commitment-final {
  min-height: 55vh;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 100px 7%;

  background: var(--dark);
  color: #f7f1e8;

  position: relative;
  overflow: hidden;
}

.commitment-final::before,
.commitment-final::after {
  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background: rgba(199, 123, 53, 0.12);

  filter: blur(80px);
}

.commitment-final::before {
  left: -150px;
  top: -150px;
}

.commitment-final::after {
  right: -150px;
  bottom: -150px;
}

.commitment-final-inner {
  max-width: 900px;
  position: relative;
  z-index: 2;
}

.commitment-final-small {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;

  color: #d18a49;

  margin-bottom: 30px;
}

.commitment-final h2 {
  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(45px, 6vw, 85px);

  font-weight: 400;
  line-height: 1;

  margin-bottom: 30px;
}

.commitment-final h2 span {
  color: #d18a49;
}

.commitment-final p {
  max-width: 650px;
  margin: auto;

  color: rgba(247, 241, 232, 0.7);

  font-size: 17px;
  line-height: 1.8;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .commitment-intro {
    min-height: 65vh;
    padding: 100px 6%;
  }

  .commitment-card,
  .commitment-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .commitment-card:nth-child(even) .commitment-card-image,
  .commitment-card:nth-child(even) .commitment-card-content {
    order: initial;
  }

  .commitment-card-image {
    min-height: 480px;
  }

  .commitment-card-content {
    min-height: 480px;
    padding: 60px;
  }

  .commitment-standards-heading-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .commitment-intro {
      margin-top: -60px !important;
    min-height: auto;
    padding: 20px 22px 70px;
  }

  .commitment-label {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .commitment-intro h1 {
    font-size: 55px;
    letter-spacing: -2px;
    line-height: 0.95;
  }

  .commitment-intro-text {
    font-size: 15px;
    line-height: 1.75;
  }


  .commitment-standards-heading {
    padding: 60px 22px 25px;
  }

  .commitment-standards-heading h2 {
    font-size: 43px;
  }

  .commitment-standards-heading p {
    font-size: 14px;
  }


  .commitment-list {
    padding: 25px 15px 70px;
  }

  .commitment-list-inner {
    gap: 20px;
  }


  .commitment-card {
    min-height: auto;
  }

  .commitment-card-image {
    min-height: 300px;
    height: 300px;
  }

  .commitment-card-content {
    min-height: auto;
    padding: 45px 28px 50px;
  }

  .commitment-number {
    top: 20px;
    right: 25px;

    font-size: 70px;
  }

  .commitment-small-title {
    font-size: 9px;
    letter-spacing: 2px;

    margin-bottom: 18px;
  }

  .commitment-card-content h3 {
    font-size: 39px;
    margin-bottom: 22px;
  }

  .commitment-card-content p {
    font-size: 15px;
    line-height: 1.7;
  }

  .commitment-line {
    margin-bottom: 22px;
  }

  .commitment-card-footer {
    margin-top: 30px;
    font-size: 9px;
  }


  .commitment-final {
    min-height: 50vh;
    padding: 80px 25px;
  }

  .commitment-final h2 {
    font-size: 45px;
  }

  .commitment-final p {
    font-size: 15px;
  }
}


/* =========================================
   REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .commitment-card,
  .commitment-card-image img {
    transition: none;
  }
}




/* ==========================================================================
   OUR EXPERTISE — Velicheti Studios
   ========================================================================== */
.expertise-section {
  padding: 80px 20px;
  background-image: url('../images/expertise_hero.webp');
  background-position: top left;
  background-size: 130% auto;
  background-repeat: no-repeat;
  width: 100%;
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  filter: sepia(0.15) hue-rotate(-8deg);
}
.expertise-section::before {
  content: '';
  position: absolute;
  background: rgb(247 231 213 / 72%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.expertise-section .expertise-container {
  margin: auto;
  position: relative;
  z-index: 9999;
}
/* Sprocket-hole frame, top and bottom — a real filmstrip's edge */
.expertise-sprockets {
  position: relative;
  height: 22px;
  background-image:
    radial-gradient(circle at 11px 11px, #151515 5px, transparent 5.5px);
  background-size: 34px 22px;
  background-repeat: repeat-x;
  opacity: 0.55;
  background-position: 0 0;
}
.expertise-sprockets--animate {
  animation: sprocketDrift 14s linear infinite;
}
.expertise-sprockets--bottom {
  margin-top: 4rem;
}
/* Ambient glow behind the hero title */
.expertise-spotlight {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 900px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgb(130 21 23 / 22%) 0%, rgb(130 21 23 / 7%) 45%, transparent 72%);
  pointer-events: none;
  animation: spotlightPulse 7s ease-in-out infinite;
}
/* -------------------------------------------------------------------- */
/* Hero / intro                                                         */
/* -------------------------------------------------------------------- */
.expertise-hero {
  position: relative;
  margin: 0 auto;
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}
.expertise-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #821517;
  opacity: 0;
  animation: eyebrowSpread 0.9s ease 0.1s forwards;
}
.expertise-eyebrow::before,
.expertise-eyebrow::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #821517;
}
.expertise-hero h2 {
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: #821517;
  margin: 0px 0 1.1rem;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(36px) scale(0.96);
  animation: titleReveal 1s ease 0.28s forwards;
}
/* The signature divider — a short strip of film frames that draws in */
.expertise-filmstrip {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 1.8rem;
  width: 0;
  overflow: hidden;
  animation: drawStrip 0.9s ease 0.6s forwards;
}
.expertise-filmstrip span {
  width: 20px;
  height: 14px;
  background: #151515;
  border: 2px solid #821517;
  flex: none;
}
.expertise-hero p {
  color: #1F1F1F;
  margin: auto;
  line-height: 1.7;
  font-size: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.75s forwards;
}
.expertise-hero p+p {
  margin-top: 1rem;
}

.expertise-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.expertise-card {
  position: relative;
  grid-column: span 2;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.7s ease var(--delay, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
}
.expertise-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.expertise-card--hero {
  grid-column: span 3;
  aspect-ratio: 16 / 11;
}
.expertise-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) sepia(0.08) contrast(1.05) brightness(0.82);
  transform: scale(1.03);
  transition: transform 0.7s ease, filter 0.6s ease;
}
.expertise-card:hover img,
.expertise-card:focus-within img {
  transform: scale(1.1);
  filter: grayscale(0) sepia(0) contrast(1.03) brightness(0.92);
}
/* Bottom gradient so the burned-in text stays readable over any photo */
.expertise-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 5, 0.92) 0%, rgba(8, 6, 5, 0.55) 38%, transparent 68%);
  pointer-events: none;
}
.expertise-card-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(247, 231, 213, 0.28);
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.expertise-card:hover .expertise-card-frame,
.expertise-card:focus-within .expertise-card-frame {
  opacity: 1;
}
.expertise-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 24px 20px;
  color: #f7e7d5;
}
.expertise-card-number {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #d9b26b;
  margin-bottom: 6px;
  transition: transform 0.4s ease;
}
.expertise-card:hover .expertise-card-number {
  transform: translateX(4px);
}
.expertise-card-overlay h3 {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 4px;
}
.expertise-card-overlay p {
  font-size: 13px;
  font-style: italic;
  color: rgb(247 231 213 / 78%);
  margin: 0;
}
/* -------------------------------------------------------------------- */
/* Motion                                                                */
/* -------------------------------------------------------------------- */
@keyframes eyebrowSpread {
  from { opacity: 0; letter-spacing: 0.02em; transform: translateY(-6px); }
  to { opacity: 1; letter-spacing: 0.32em; transform: translateY(0); }
}
@keyframes titleReveal {
  from { opacity: 0; filter: blur(6px); transform: translateY(36px) scale(0.96); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawStrip {
  from { width: 0; }
  to { width: 214px; }
}
@keyframes spotlightPulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}
@keyframes sprocketDrift {
  from { background-position: 0 0; }
  to { background-position: -340px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-page * {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .expertise-sprockets--animate { animation: none; }
  .expertise-spotlight { animation: none; }
  .expertise-card { opacity: 1 !important; transform: none !important; }
}
/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */
@media (max-width: 1260px) {
  .expertise-section { background-size: cover !important; }
}
@media (max-width: 900px) {
  .expertise-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .expertise-card,
  .expertise-card--hero {
    grid-column: span 1;
    aspect-ratio: 4 / 5;
  }
  .expertise-card-overlay { padding: 18px 18px 16px; }
}
@media (max-width: 768px) {
  .expertise-section { padding: 20px 15px; }
  .expertise-hero h2 { font-size: 32px; }
  .expertise-wall { margin-top: 36px; }
}
@media (max-width: 560px) {
  .expertise-wall {
    grid-template-columns: 1fr;
  }
  .expertise-card,
  .expertise-card--hero {
    grid-column: span 1;
    aspect-ratio: 16 / 12;
  }
}
@media (max-width: 480px) {
  .expertise-hero h2 { font-size: 30px; }
  .expertise-section { background-size: center top !important; }
  .expertise-spotlight { width: 600px; height: 420px; top: -120px; }
  .expertise-hero p {
    font-size: 1rem;
}
}

/*---- about us css -----*/

.about_slide .slider-container {
  width: 100%;
  position: relative;
  /*background: #ffffff;*/
  overflow: hidden;
  margin: 0 auto;
}

/* Desktop alto */
@media (min-width: 577px) {
  .about_slide .slider-container {
    height: 100vh;
    height: 100dvh;
    max-width: 1920px;
  }
}

/* Móvil con relación 16:9 */
@media (max-width: 576px) {
  .about_slide .slider-container {
    height: auto !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }
}

/* ===== SLICES (posición absoluta) — DESKTOP ONLY ===== */
.about_slide .slice {
  position: absolute;
  top: -100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 500% 100%;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, top;
  transition: transform 2.8s ease, opacity 2.8s ease;
  z-index: 1;
}

.about_slide .slice.active {
  animation: fall 1.5s ease-out forwards;
}

.about_slide .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
}

.about_slide .slider-arrow:hover {
  background: rgb(130 21 23);
  transform: translateY(-50%) scale(1.1);
}

.about_slide .slider-arrow.prev {
  left: 20px;
}

.about_slide .slider-arrow.next {
  right: 20px;
}

/* ===== DESKTOP: 5 columnas exactas ===== */
@media (min-width: 577px) {
  .about_slide .slice-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .about_slide .slice {
    width: calc(100% / 5 + 2px);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .about_slide .slice:nth-child(1) {
    left: 0;
    background-position: 0% 0%;
    animation-delay: 0s;
    margin-left: 0px;
    z-index: 5;
  }

  .about_slide .slice:nth-child(2) {
    left: calc(100% / 5);
    background-position: 25% 0%;
    animation-delay: 0.15s;
    margin-left: -2px;
    z-index: 4;
  }

  .about_slide .slice:nth-child(3) {
    left: calc(100% / 5 * 2);
    background-position: 50% 0%;
    animation-delay: 0.3s;
    margin-left: -2px;
    z-index: 3;
  }

  .about_slide .slice:nth-child(4) {
    left: calc(100% / 5 * 3);
    background-position: 75% 0%;
    animation-delay: 0.45s;
    margin-left: -2px;
    z-index: 2;
  }

  .about_slide .slice:nth-child(5) {
    left: calc(100% / 5 * 4);
    background-position: 100% 0%;
    animation-delay: 0.6s;
    margin-left: -2px;
    z-index: 1;
  }

  /* hide the mobile carousel entirely on desktop */
  .about_slide .about-mobile-carousel {
    display: none !important;
  }
}

/* ===== Animaciones (desktop slice fall) ===== */
@keyframes fall {
  0% {
    top: -100%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  100% {
    top: 0%;
    opacity: 1;
  }
}

/* =========================================================
   MOBILE — Bootstrap 5 carousel replaces the old slice hack
   ========================================================= */
@media (max-width: 576px) {

  /* old slice-based image stack is fully hidden on mobile now */
  .about_slide .slice-wrap {
    display: none !important;
  }

  .about_slide .about-mobile-carousel {
    position: relative;
    width: 100%;
  }

  /* image portion of each slide */
  .about_slide .about-mobile-carousel img {
    width: 100%;
    height: 45vh;
    object-fit: cover;
    display: block;
  }

  /* content portion of each slide — travels with its image, no JS/animation needed */
  .about_slide .about-mobile-carousel .mobile-slide-content {
    background-color: #f6e4d0d9;
    padding: 24px 16px;
    text-align: center;
  }

  .about_slide .about-mobile-carousel .mobile-slide-content h1 {
    font-size: 20px;
    font-weight: 700;
    color: #821517;
    margin-bottom: 8px;
  }

  .about_slide .about-mobile-carousel .mobile-slide-content h2 {
    font-size: 15px;
    font-weight: 600;
    color: #821517;
    margin-bottom: 12px;
  }

  .about_slide .about-mobile-carousel .mobile-slide-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #1F1F1F;
    margin: 0;
  }

  /* brand-colored controls, positioned over the image area only */
  .about_slide .about-mobile-carousel .carousel-control-prev,
  .about_slide .about-mobile-carousel .carousel-control-next {
    width: 15%;
    height: 40vh;
    top: 0;
  }

  .about_slide .about-mobile-carousel .carousel-control-prev-icon,
  .about_slide .about-mobile-carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 18px;
    background-size: 55%;
  }

  .about_slide .about-mobile-carousel .carousel-indicators {
    top: calc(40vh - 30px);
    bottom: auto;
    margin-bottom: 0;
  }

  .about_slide .about-mobile-carousel .carousel-indicators button {
    background-color: #ffffff;
    opacity: 0.7;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .about_slide .about-mobile-carousel .carousel-indicators .active {
    background-color: #821517;
    opacity: 1;
  }

  /* the old shared desktop content box is redundant on mobile now —
     each slide carries its own content inside the carousel instead */
  .about_slide > .slider-container > .content-overlay {
    display: none !important;
  }
}

/* ===== Overlay de contenido ===== */
.about_slide .content-overlay {
  position: absolute;
  top: 50%;
  left: 74%;
  right: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 10;
  opacity: 0;
  width: 80%;
  max-width: 560px;
  padding: 20px;
}

.about_slide .content-overlay.show {
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.about_slide .content-overlay h1 {
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 20px;
  color: #821517;
}

.about_slide .content-overlay p {
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  line-height: 1.6;
  font-weight: 400;
  color: #1F1F1F;
  width: 400px;
  position: relative;
  left: 14%;
}

@media (max-width: 992px) {
  .about_slide .content-overlay {
    left: 50%;
    background-color: #f6e4d0d9;
  }
}

@media (max-width: 500px) {
  .about_slide .content-overlay h1 {
    font-size: 16px;
  }

  .about_slide .content-overlay p {
    font-size: 14px;
    width: 100%;
    position: unset;
  }
}

/* Mobile content box: no falling/sliding animation, no JS dependency */
@media (max-width: 576px) {
  .about_slide .content-overlay {
    position: relative !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    text-align: center !important;
    background-color: #f6e4d0d9;
  }

  .about_slide .content-overlay h1,
  .about_slide .content-overlay h2 {
    position: static !important;
    left: unset !important;
    width: 100% !important;
  }

  .about_slide .content-overlay p {
    position: static !important;
    left: unset !important;
    width: 100% !important;
    max-width: 100%;
  }

  .about_slide .content-overlay.show {
    animation: none !important;
    opacity: 1 !important;
  }
}


/* Scope all styles only inside .fp_sec */

.fp_sec [class^="swiper-button-"] {
  transition: all 0.3s ease;
}

.fp_sec .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.fp_sec *,
.fp_sec *:before,
.fp_sec *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fp_sec .swiper-container {
  width: 80%;
  height: 100vh;
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
}

.fp_sec .swiper-container.nav-slider {
  width: 20%;
  padding-left: 5px;
}

.fp_sec .swiper-container.nav-slider .swiper-slide {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.fp_sec .swiper-container.nav-slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}

.fp_sec .swiper-container.nav-slider .swiper-slide .content {
  width: 100%;
}

.fp_sec .swiper-container.nav-slider .swiper-slide .content .title {
  font-size: 20px;
}

.fp_sec .swiper-container:hover .swiper-button-prev,
.fp_sec .swiper-container:hover .swiper-button-next {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.fp_sec .swiper-container.loading {
  opacity: 0;
  visibility: hidden;
}

.fp_sec .swiper-slide .slide-bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  z-index: 1;
}

/* Dark overlay */
.fp_sec .swiper-slide .slide-bgimg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  /* adjust darkness */
  z-index: 2;
}

.fp_sec .swiper-slide .entity-img {
  display: none;
}

.fp_sec .swiper-slide .content {
  position: absolute;
  top: 42%;
  left: 0;
  width: 100%;
  left: 15%;
  color: #F5F0E6;
  z-index: 3;
}

.fp_sec .swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  transform: translateX(50px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.7s ease;
}

.fp_sec .swiper-slide .content .caption.show {
  transform: translateX(0);
  opacity: 1;
}

.fp_sec [class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.fp_sec .swiper-button-prev {
  transform: translateX(50px);
}

.fp_sec .swiper-button-next {
  transform: translateX(-50px);
}

/* =========================
   Typewriter title — width/steps/duration come from CSS custom
   properties set dynamically by JS (fitTypewriterTitles()), so it
   always matches the real text length and the real screen width.
========================= */

.fp_sec .swiper-slide .content .title {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #821517;
  font-size: 2rem;
  /* JS overrides this per-slide to fit the screen */
  margin-bottom: 10px;
  animation: none;
  /* stays off until slide becomes active */
}

/* Run animation only for the active slide */
.fp_sec .swiper-slide-active .content .title {
  width: calc(var(--chars, 20) * 1ch);
  animation:
    typing var(--type-duration, 3s) steps(var(--chars, 20), end) forwards,
    blink 0.8s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: calc(var(--chars, 20) * 1ch);
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Tablet: give the typewriter box its full available width */
@media (max-width: 1024px) {

  .fp_sec .swiper-slide .content .title {
    white-space: nowrap;
    /* keep the typewriter effect — JS shrinks font to fit */
    overflow: hidden;
  }

  .fp_sec .swiper-slide .content {
    top: 38%;
    left: 4%;
    width: 88%;
  }

  .fp_sec .swiper-slide .content .caption {
    font-size: 12px;
  }
}
/* ===== MOBILE HOMEPAGE HERO - IMAGE COMPOSITION ===== */
@media (max-width: 767.98px) {

    .vs-hero {
        margin-top: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        background-image: none !important;
    }

    .vs-hero__middle {
        position: relative;
        min-height: 82vw;
        padding: 0 !important;
        overflow: hidden;

         background-image: url('../images/mobile-banner.webp');
         background-size: 100% 100%;
         background-position: center center;
         background-repeat: no-repeat;

        border: none !important;
    }

   .vs-hero__middle .curtain-Rises {
    position: absolute;
    z-index: 2;

    width: 34%;
    max-width: 155px;
    height: auto;

    top: 18%;
    right: 15%;
    margin: 0;
}
}
/* ===== Mobile Header - Compact ===== */
@media (max-width: 767.98px) {
    header.header-mobile {
        padding: 8px 0;
    }

    header.header-mobile .header-center .logo-image,
    header.header-mobile .header-right .open-search {
        margin-top: 0;
    }
}

/* ===== Mobile Hero - Soft Fade Into Content ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle {
        position: relative;
        overflow: hidden;
    }

    .vs-hero__middle::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 90px;
        background: linear-gradient(
            to bottom,
            rgba(246, 228, 208, 0) 0%,
            rgba(246, 228, 208, 0.35) 45%,
            #f6e4d0 100%
        );
        pointer-events: none;
        z-index: 3;
    }

    .vs-hero__middle .curtain-Rises {
        position: relative;
        z-index: 4;
    }
}
/* ===== Mobile Hero - Soft Natural Light Fade ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle::after {
        height: 150px;
        background: linear-gradient(
            to bottom,
            rgba(246, 228, 208, 0) 0%,
            rgba(246, 228, 208, 0.04) 45%,
            rgba(246, 228, 208, 0.12) 70%,
            rgba(246, 228, 208, 0.28) 100%
        );
        pointer-events: none;
        z-index: 3;
    }
}

/* ===== Mobile Hero - Fix Curtain Rises Position ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle .curtain-Rises {
        animation: slideIn 2.5s ease-out forwards !important;
        opacity: 0;
        transform: translateX(-120px);
    }
}

@keyframes slideIn {
    0% {
        transform: translateX(-120px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===== MOBILE - RETAIN CURTAIN RISES POSITION ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle .curtain-Rises {
    position: absolute !important;
    top: 18% !important;
    right: 15% !important;
    width: 34% !important;
    max-width: 155px !important;
    height: auto !important;
    margin: 0 !important;
    /* transform controlled by animation */
}
    }

/* ===== Mobile Homepage - Compact Text Spacing ===== */
@media (max-width: 767.98px) {

    .vs-hero__content {
        padding: 20px 20px !important;
    }

    .vs-hero__cycle {
        min-height: 40px !important;
        margin-bottom: 8px !important;
    }

    .vs-hero__static {
        padding-top: 10px !important;
        margin-bottom: 8px !important;
    }

    .vs-hero__divider {
        margin: 8px 0 !important;
    }
}
/* ===== Mobile - Move Welcome Button Up ===== */
@media (max-width: 767.98px) {
    .btn-vs {
        margin-top: 0 !important;
    }
}
/* ===== Mobile - Keep Social Icons Below Welcome ===== */
@media (max-width: 767.98px) {
    .vs-hero__social {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        padding-bottom: 10px;
    }
}
@media (max-width: 767.98px) {
    .vs-hero__middle {
        background-image: url('../images/slider/hero_slider.webp') !important;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
@media (max-width: 767.98px) {
    .vs-hero__middle {
        background-image: url('../images/slider/hero_slider.webp') !important;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
/* ===== Mobile Hero - Use Desktop Light Flow ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle {
        background-image: url('../images/slider/hero_slider.webp') !important;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
/* ===== Mobile Curtain Rises - Restore Animation ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle .curtain-Rises {
        animation: slideIn 2.5s ease-out forwards !important;
    }
}
/* ===== Mobile Curtain Rises - Working Slide Animation ===== */
@media (max-width: 767.98px) {

    .vs-hero__middle .curtain-Rises {
        animation: mobileCurtainSlide 2.5s ease-out forwards !important;
    }

    @keyframes mobileCurtainSlide {
        0% {
            right: calc(15% + 120px);
        }

        100% {
            right: 15%;
        }
    }
}
/* ===== Mobile Curtain Rises - Restore Original Animation ===== */
@media (max-width: 767.98px) {
    .vs-hero__middle .curtain-Rises {
        animation: slideIn 2.5s ease-out forwards !important;
        animation-name: slideIn !important;
        animation-duration: 2.5s !important;
        animation-timing-function: ease-out !important;
        animation-fill-mode: forwards !important;
    }

    @keyframes slideIn {
        0% {
            transform: translateX(-120px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
}
/* ===== FINAL MOBILE CURTAIN RISE ANIMATION ===== */
@media (max-width: 767.98px) {

    .vs-hero__middle .curtain-Rises {
        position: absolute !important;
        top: 18% !important;
        right: 15% !important;
        width: 34% !important;
        max-width: 155px !important;
        height: auto !important;
        z-index: 4 !important;

        animation-name: mobileCurtainRise !important;
        animation-duration: 2.5s !important;
        animation-timing-function: ease-out !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        animation-fill-mode: both !important;
    }

    @keyframes mobileCurtainRise {
        0% {
            transform: translateX(-120px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }
}
/* ===== MOBILE - MOVE HERO UP BEHIND HEADER ===== */
@media (max-width: 767.98px) {

    header.header-mobile {
        background-color: transparent !important;
    }

    .vs-hero__middle {
        margin-top: -120px !important;
    }
}
/* ===== MOBILE - LOWER CURTAIN RISES TITLE ===== */
@media (max-width: 767.98px) {

    .vs-hero__middle .curtain-Rises {
        top: 40% !important;
    }
}
/* ===== MOBILE - MOVE MENU CLEAR OF HERO ===== */
@media (max-width: 767.98px) {

    header.header-mobile .header-left {
        transform: translateX(-25px);
    }

}

/* ===== RESTORE FIVE PILLARS MOBILE LAYOUT ===== */
@media (max-width: 768px) {

  .fp_sec .swiper-container {
    width: 100%;
    float: none;
    height: 70vh;
  }

  .fp_sec .swiper-container.nav-slider {
    width: 100%;
    height: 22vh;
    padding-left: 0;
    padding-top: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .fp_sec .swiper-container.nav-slider .swiper-wrapper {
    display: flex;
    flex-direction: row;
    width: max-content;
    height: 100%;
  }

  .fp_sec .swiper-container.nav-slider .swiper-slide {
    width: 120px;
    min-width: 120px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 6px;
  }

  .fp_sec .swiper-container.nav-slider .swiper-slide .content {
    display: none;
  }

}

/* Our Expertise - clean background */
.expertise-page .expertise-section {
    background-image: none !important;
    filter: none !important;
}

.expertise-page .expertise-section::before {
    display: none !important;
}

.expertise-page .expertise-spotlight,
.expertise-page .expertise-sprockets {
    display: none;
}
/* Our Expertise - clean background */
.expertise-page .expertise-section {
    background-image: none !important;
    filter: none !important;
}

.expertise-page .expertise-section::before {
    display: none !important;
}

.expertise-page .expertise-spotlight {
    display: none !important;
}

.expertise-page .expertise-sprockets {
    display: block !important;
}

/* Our Expertise - show cards immediately on mobile */
@media (max-width: 767.98px) {
    .expertise-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Our Commitment - move section up on mobile */
@media (max-width: 767.98px) {
    .shelf-section {
        margin-top: -50px !important;
    }
}


/* JAM WITH US - MOBILE TEXT SIZE */
@media (max-width: 767.98px) {
    .vs_jam__lead {
        font-size: 1.2rem !important;
    }
}

/* ===== JAM WITH US - REDUCE SPACE ABOVE FOOTER ON MOBILE ===== */
@media (max-width: 767.98px) {
    .vs_jam {
        padding-bottom: 0 !important;
    }
}