* {
  box-sizing: border-box;
}

.intro-video-bg::-webkit-media-controls,
.intro-video-bg::-webkit-media-controls-start-playback-button,
.intro-video-bg::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}


/* #intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fd709f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
} */

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fd709f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* JS handles hiding #intro on non-home pages immediately on DOMContentLoaded */

.intro-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
}



.intro-bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background: linear-gradient(-45deg, #EF1D6E, #FC94C5, #DFD45E, #EF1D6E);
  background-size: 400% 400%;
  animation: introGradient 15s ease infinite;
  z-index: 2;
  filter: blur(20px);
}

@keyframes introGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.intro-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.intro-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0.2;
}

.intro-screen-1 {
  display: none;
  /* hidden — letter flash screen skipped */
}

.intro-screen-2 {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
}

.intro-screen-3 {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: opacity;
  opacity: 0;
  /* hidden until GSAP animates it in */
}

.intro-screen-3-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.8) 100%);
  /* backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); */
  z-index: 13;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}

.welcome-text {
  position: relative;
  z-index: 14;
  margin: 0;
  color: #fff !important;

  font-size: clamp(38px, 8vw, 96px);
  letter-spacing: 0.2em;
  font-weight: 500;
  text-align: center;
  /* text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); */
  perspective: 1000px;
  padding: 0 20px;
  white-space: nowrap;
}

.welcome-text span {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.intro-screen-2 {
  opacity: 0;
  /* no background — intro-video-bg plays through as Screen 2 background */
}

.intro-letter {
  font-size: clamp(80px, 15vw, 180px);
  font-weight: 300;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  letter-spacing: -0.05em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.intro-light-sweep {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 11;
}

.intro-logo-reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.intro-brand-name {
  font-size: clamp(30px, 5vw, 60px);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.4em;
}

.intro-interiors {
  font-size: clamp(35px, 6vw, 75px);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.05em;
  opacity: 0;
}

.intro-brand-full {
  font-size: clamp(28px, 5vw, 68px);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.15em;
  text-align: center;
  white-space: nowrap;
  /* opacity controlled entirely by GSAP + typeText */
}

.intro-tagline-wrap {
  overflow: hidden;
}

.intro-tagline {
  font-size: clamp(12px, 2vw, 18px);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(20px);
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 0.8em;
  background: #fff;
  margin-left: 2px;
  animation: blink 0.8s infinite;
  vertical-align: middle;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

#app {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* =========================================
   TRANSITION WIPES (DECO)
 ========================================= */

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden !important;
}

#pages {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.pages-track {
  display: flex;
  height: 100vh;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  z-index: 1;
}

.page {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.page-inner {
  width: 100%;
  height: 100%;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.transition-wipe {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.wipe-1 {
  background: var(--primary-pink);
  z-index: 3;
}

.wipe-2 {
  background: var(--accent-gold);
  z-index: 2;
}

.panel-left {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-left: var(--sidebar-width);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.panel-left::-webkit-scrollbar {
  display: block;
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.panel-left::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.panel-left::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 999px;
  min-height: var(--scrollbar-thumb-height);
}

.panel-left::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-pink);
}

/* ============================================================
   HORIZONTAL NAVIGATION ARROWS
 ============================================================ */

.page-nav-arrows {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.nav-arrow {
  position: absolute;
  bottom: 10px;
  width: 50px !important;
  height: 50px;
  background: var(--primary-pink);
  border: none;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-medium);
  border-radius: 50px;
  padding: 0;
  color: var(--white);
}

.prev-arrow {
  left: 4px;
  width: var(--sidebar-width);
  color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.15);
}

.next-arrow {
  right: 20px;
}

.nav-arrow svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
}

.prev-arrow:hover,
.next-arrow:hover {
  color: #000;
  background: var(--accent-gold);
}

.page-nav-arrows button::before {
  display: none;
}


/* ============================================================
   ANIMATE.CSS CUSTOM KEYFRAMES (HERO_BANNER)
============================================================ */

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  animation-name: fadeInRightBig;
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

/* Smooth Premium Overlap Slide (Optimized for Performance) */
.owl-carousel .animated {
  animation-duration: 1s !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes smoothSlideIn {
  0% {
    transform: translate(100%, -100%);
  }

  100% {
    transform: translate(0, 0);
  }
}

.smoothSlideIn {
  animation-name: smoothSlideIn;
  z-index: 2 !important;
}

@keyframes smoothSlideOut {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  100% {
    transform: translate(-30%, 30%);
    opacity: 0.5;
  }
}

.smoothSlideOut {
  animation-name: smoothSlideOut;
  z-index: 1 !important;
}


/* =========================================
   PORTFOLIO LIGHTBOX — PREMIUM REDESIGN
========================================= */

/* ---------- BACKDROP ---------- */

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151515a8;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 52%;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}

.portfolio-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.lightbox-open,
body.lightbox-open {
  overflow: hidden !important;
}

.lightbox-open .panel-left,
.lightbox-open .portfolio-right,
.lightbox-open .portfolio-sidebar,
.lightbox-open #page-home .hero-content-wrapper {
  overflow-y: hidden !important;
}

@media (min-width: 992px) {

  .lightbox-open .portfolio-sidebar,
  .lightbox-open .panel-left {
    overflow-y: auto !important;
  }
}

/* ---------- INNER PANEL ---------- */

.lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 50%;
  height: 90%;
  max-width: 550px;
  /* border: 1px solid rgba(255, 255, 255, 0.06); */
  /* entry animation — reset by .active */
  transform: translateY(28px) scale(0.98);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.portfolio-lightbox.active .lightbox-inner {
  transform: translateY(0) scale(1);
}

/* ---------- IMAGE PANEL ---------- */
.portfolio-lightbox.portfolio-carousel-lightbox button::before {
  display: none;
}

/* .portfolio-lightbox.portfolio-carousel-lightbox button:active{
  transform: none !important;
} */

.lightbox-image-wrap {
  position: relative;
  overflow: hidden;
  background: #0d0d0d;
}

/* gradient overlay for depth */
.lightbox-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      rgba(239, 29, 110, 0.08) 0%,
      rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
  z-index: 1;
}

#lightbox-image {
  display: block;
  width: 100%;
  max-height: 720px;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  opacity: 0;
  transform: scale(1.04);
}

.portfolio-lightbox.active #lightbox-image {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

/* ---------- CONTENT PANEL ---------- */

.lightbox-content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #0f0e13;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

/* watermark number */
.lightbox-content-wrap::before {
  content: attr(data-index);
  position: absolute;
  bottom: -10px;
  right: 16px;
  font-size: 140px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
  pointer-events: none;
}

/* ---------- KICKER / LABEL ---------- */

.lightbox-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary-pink);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

.lightbox-kicker::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary-pink);
  flex-shrink: 0;
}

.portfolio-lightbox.active .lightbox-kicker {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* ---------- TITLE ---------- */

#lightbox-title {
  color: var(--white);
  font-style: normal;
  font-size: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

.portfolio-lightbox.active #lightbox-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
  margin-bottom: 10px;
}

.portfolio-lightbox.active .lightbox-btn-wrapper .yellow-btn {
  padding: 10px 20px 0px 0px;
  width: 140px;
}

/* ---------- DIVIDER ---------- */

.lightbox-divider {
  width: 40px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold), rgba(223, 212, 94, 0));
  margin-bottom: 22px;
  opacity: 0;
  transition: opacity 0.4s, width 0.5s;
}

.portfolio-lightbox.active .lightbox-divider {
  opacity: 1;
  width: 40px;
  transition-delay: 0.44s;
}

/* ---------- DESCRIPTION ---------- */

#lightbox-description {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 36px;
  max-width: 360px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s, transform 0.45s;
}

.portfolio-lightbox.active #lightbox-description {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.48s;
}


/* ---------- CLOSE BUTTON ---------- */

.lightbox-close {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 10;
  width: 30px;
  height: 30px;
  /* border-radius: 50%; */
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  transition: background 0.25s, border-color 0.25s,
    color 0.25s, transform 0.3s;
}

.lightbox-close:hover {
  background: var(--primary-pink);
  border-color: var(--primary-pink);
  color: #fff;
  /* transform: rotate(90deg) scale(1.08); */
}

/* ---------- ESCAPE HINT ---------- */

.lightbox-esc-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.portfolio-lightbox.active .lightbox-esc-hint {
  opacity: 0;
  transition-delay: 0.7s;
}

.portfolio-box {
  cursor: pointer;
}

/* ============================================================
   PORTFOLIO PAGE
 ============================================================ */
/* .portfolio-wrapper .contact-left {
  max-width: 20%;
} */
.portfolio-wrapper .architecture-section {
  margin-top: 0;
}

.portfolio-wrapper .scroll-heading {
  left: calc(24.5vw - 100px) !important;
  right: auto;
  justify-content: center;
  z-index: 1000001;
}

.portfolio-wrapper .scroll-heading .heading-two::after {
  left: 160px;
  background: var(--accent-dark-gold);
}

.portfolio-wrapper .scroll-heading h1 {
  color: var(--primary-pink);
}

.portfolio-wrapper .scroll-heading h2 {
  color: var(--medium-gray);
}

.portfolio-stage .portfolio-item:hover .portfolio-item-media,
.portfolio-stage .portfolio-item:hover img,
.portfolio-stage button:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* .portfolio-stage .portfolio-item:hover .portfolio-item-media::after {
  background: var(--accent-gold);
  opacity: 0.7;
} */

.portfolio-stage button::before {
  display: none;
}

.portfolio-content-panel h3 {
  font-style: normal;
  margin-bottom: 10px;
}

.portfolio-content-panel .section-title {
  font-size: 16px;
  line-height: 30px;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.portfolio-mockup-layout {
  position: relative;
  display: flex;
  padding-left: var(--sidebar-width);
  min-height: 100vh;
  opacity: 1;
}

.portfolio-left {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  width: 30vw;
  /* z-index: 1000; */
  padding: 0;
  background: var(--selection);
}

.portfolio-right {
  width: 70vw;
  position: relative;
  padding: 6px 0 0 10px;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-pink) transparent;
  direction: rtl;
}

.portfolio-right>* {
  direction: ltr;
}

.portfolio-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  padding: 40px 0px 40px 40px;
  border-right: 3px solid var(--light-gray);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  direction: rtl;
}

.portfolio-sidebar>* {
  direction: ltr;
}

.portfolio-heading {
  margin-bottom: 10px;
}

.portfolio-page-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  flex-wrap: wrap;
}

.portfolio-page-title-main {
  color: #d7b51f;
  font-size: clamp(17px, 1.75vw, 33px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.portfolio-page-title-accent {
  color: #d7b51f;
  font-size: clamp(9px, 0.72vw, 13px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.portfolio-intro-copy {
  color: #6a6a6a;
  font-size: 14px;
  line-height: 1.6;
}

.portfolio-intro-copy h1,
.portfolio-intro-copy h2,
.portfolio-intro-copy h3,
.portfolio-intro-copy h4 {
  color: #1e1e1e;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 15px 0 10px;
}

.portfolio-intro-copy p {
  margin-bottom: 15px;
}

.portfolio-intro-copy .wp-block-button,
.portfolio-intro-copy .elementor-button-wrapper,
.portfolio-intro-copy a.wp-block-button__link,
.portfolio-intro-copy a.elementor-button {
  margin-top: 8px;
}

.portfolio-intro-copy .wp-block-button__link,
.portfolio-intro-copy a.elementor-button,
.portfolio-intro-copy .elementor-button,
.portfolio-intro-copy .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 40px;
  padding: 10px 20px;
  background: #d7b51f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s ease;
}

.portfolio-content-panel {
  position: relative;
  margin-top: 30px;
  padding: 0px 20px 0 0px;
  background: transparent;
  flex: 1 1 auto;
}

#portfolio-content>* {
  direction: ltr;
}

#portfolio-content::-webkit-scrollbar {
  width: 7px;
}

#portfolio-content::-webkit-scrollbar-track {
  background: transparent;
}

#portfolio-content::-webkit-scrollbar-thumb {
  background: #ef3f9a;
  border-radius: 999px;
}

#portfolio-content {
  scrollbar-width: thin;
  scrollbar-color: #ef3f9a transparent;
}

.portfolio-placeholder,
.portfolio-loading,
.portfolio-error,
.portfolio-detail {
  display: none;
  /* padding: 0 10px 12px 20px; */
}

.portfolio-placeholder.is-visible,
.portfolio-loading.is-visible,
.portfolio-error.is-visible,
.portfolio-detail.is-visible {
  display: block;
}

.portfolio-desc>*:first-child {
  margin-top: 0;
}

/* 
.portfolio-desc>*:last-child {
  margin-bottom: 0;
} */

.portfolio-stage {
  position: relative;
  padding: 60px 20px 20px;
}

.portfolio-stage-watermark {
  position: absolute;
  top: 122px;
  right: 73px;
  color: rgba(220, 209, 197, 0.32);
  font-size: 74px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
  z-index: 0;
}

.portfolio-stage-accent {
  position: absolute;
  left: -1px;
  top: 294px;
  width: 6px;
  height: 30px;
  border-radius: 999px;
  background: #ef3f9a;
  pointer-events: none;
  z-index: 2;
}

.portfolio-stage-arrow {
  position: absolute;
  right: 6px;
  top: 345px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
}

.portfolio-stage-arrow::before,
.portfolio-stage-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: #ef3f9a;
  transform-origin: right center;
}

.portfolio-stage-arrow::before {
  top: 7px;
  transform: rotate(45deg);
}

.portfolio-stage-arrow::after {
  top: 12px;
  transform: rotate(-45deg);
}

.portfolio-grid {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.portfolio-grid-sizer,
.portfolio-grid-item {
  width: 30%;
}

.portfolio-grid-item {
  padding: 0 9px 18px;
}

.portfolio-grid-item--wide {
  width: 40%;
}

.portfolio-grid-item--standard {
  width: 20%;
}

.portfolio-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.view-gallery-btn {
  display: none !important;
}

.portfolio-item-media {
  display: block;
  position: relative;
  overflow: hidden;
  background: #f3ede4;
}

.portfolio-item-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-gold);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.portfolio-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid transparent;
  transition: transform 0.45s ease, filter 0.45s ease, border-color 0.45s ease;
}

/* .portfolio-item.is-active img, */
.portfolio-item:hover img,
.portfolio-item.active img {
  border-color: var(--accent-dark-gold);
}

.portfolio-item-caption {
  display: block;
  padding-top: 4px;
  /* color: var(--medium-gray); */
  /* font-size: 12px; */
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  transition: opacity 0.4s ease, color 0.45s ease;
  color: var(--black) !important;
}

/* .portfolio-item:hover .portfolio-item-caption,
.portfolio-item.is-active .portfolio-item-caption,
.portfolio-item.active .portfolio-item-caption {
  color: var(--light-gold);
} */

.portfolio-item-media .portfolio-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  width: 90%;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  letter-spacing: 0;
  text-align: center;
  color: var(--black) !important;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.4s ease;
}

/* .portfolio-item:hover .portfolio-item-media::after,
.portfolio-item.is-active .portfolio-item-media::after {
  opacity: 0.7;
} */
/* 
.portfolio-item:hover .portfolio-item-media .portfolio-title,
.portfolio-item.is-active .portfolio-item-media .portfolio-title {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

.portfolio-item:hover .portfolio-item-caption:not(.portfolio-title),
.portfolio-item.is-active .portfolio-item-caption:not(.portfolio-title) {
  opacity: 0;
  visibility: hidden;
} */

.portfolio-item:hover img,
.portfolio-item.active img {
  transform: scale(1.03);
}

.portfolio-item.is-active img {
  filter: saturate(1.06);
}

.portfolio-loading,
.portfolio-error {
  min-height: 160px;
}

.portfolio-empty {
  margin: 0;
  padding: 24px;
  background: #f7f2ea;
  border-radius: 18px;
}

/* ============================================================
  PORTFOLIO PAGE END
 ============================================================ */




/* ============================================================
   PORTFOLIO CONTENT TRANSITIONS
  ============================================================ */
.portfolio-content-panel {
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.portfolio-content-panel.fade-out {
  opacity: 0;
  transform: translateY(8px);
}

/* ============================================================
   PORTFOLIO LIGHTBOX CAROUSEL
============================================================ */
.portfolio-lightbox.portfolio-carousel-lightbox {
  position: fixed !important;
  inset: 0 !important;
  /* width: 100% !important; */
  height: 100vh !important;
  height: 100dvh !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--white) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
}

.portfolio-carousel-lightbox .lightbox-inner {
  width: 100%;
  max-width: 100% !important;
  height: 100% !important;
  background: transparent;
  display: block !important;
  border-radius: 0 !important;
  overflow: visible;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}



.lightbox-carousel-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: transparent;
  overflow: hidden;
  border-radius: 0;
}

.lightbox-slides-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ---------- LIGHTBOX SLIDE FADE — mirrors Owl Carousel fadeIn ---------- */
/*
  Owl uses Animate.css "fadeIn" (opacity 0→1) with:
    animation-duration:        1s
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)  (overridden by .owl-carousel .animated)
    animation-fill-mode:       both
  We define the keyframes locally so they are always available,
  then apply the same values to .lightbox-slide.active.
*/
@keyframes lightboxFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lightbox-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* transition handles fade-out when a slide leaves active state */
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.lightbox-slide.active {
  visibility: visible;
  z-index: 2;
  /* Replicates .owl-item.animated.owl-animated-in.fadeIn.active exactly */
  animation-name: lightboxFadeIn;
  animation-duration: 1.5s !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation-fill-mode: both;
}

.lightbox-slide img {
  max-width: 75%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform: scale(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox-slide.active img {
  transform: scale(1);
  transition-delay: 0.2s;
}

/* Carousel Navigation Buttons */
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--primary-pink) !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 99;
  transition: background 0.3s, opacity 0.3s, transform 0.3s;
  padding: 0 !important;
  box-shadow: none !important;
}

.lightbox-nav-btn:hover {
  background: var(--accent-dark-gold) !important;
  opacity: 0.9;
  /* transform: translateY(-50%) scale(1.08); */
}

.lightbox-nav-btn.prev {
  left: 40px !important;
}

.lightbox-nav-btn.next {
  right: 40px !important;
}

.lightbox-nav-btn svg {
  width: 25px !important;
  height: 25px !important;
  stroke: #fff !important;
  stroke-width: 2px !important;
}

.lightbox-carousel-wrap .lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 60px;
  height: 60px;
  background: var(--accent-dark-gold) !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff !important;
  font-size: 40px;
  line-height: 1;
  transition: background-color 0.3s, opacity 0.3s;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.lightbox-carousel-wrap .lightbox-close:hover {
  background: var(--black) !important;
  opacity: 0.85;
}

.portfolio-carousel-lightbox .lightbox-content-wrap {
  display: none !important;
}

.portfolio-carousel-lightbox #lightbox-title {
  margin-top: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.portfolio-carousel-lightbox .lightbox-kicker {
  margin-bottom: 12px;
}

.portfolio-carousel-lightbox .lightbox-divider {
  margin-bottom: 16px;
}

.portfolio-carousel-lightbox #lightbox-description {
  margin-bottom: 24px;
  max-width: 100%;
}

/* Dots Navigation */
.lightbox-carousel-dots {
  display: none !important;
}

.lightbox-dot {
  display: none !important;
}

/* Caption on active slide */
.portfolio-carousel-lightbox .lightbox-slide-caption {
  display: none !important;
}

.lightbox-slide-title {
  display: none !important;
}

.lightbox-slide-desc {
  display: none !important;
}

/* Responsive adjustment for small screens */
/* @media (max-width: 767px) {
  .lightbox-nav-btn.prev {
    left: 15px !important;
  }

  .lightbox-nav-btn.next {
    right: 15px !important;
  }

  .lightbox-slide img {
    max-width: 85%;
    max-height: 75%;
  }

  .lightbox-carousel-wrap .lightbox-close {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
} */


/* ========================================================== m