/* Keeps the cinematic story and its gallery as separate visual states. */
html {
  scroll-behavior: smooth;
}

body {
  min-height: 0;
}

.home-nav-link {
  position: relative;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color 180ms ease;
}

.home-nav-link::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff, #e8c374, transparent);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.home-nav-link:hover,
.home-nav-link:focus-visible {
  color: #e8c374;
  outline: none;
}

.home-nav-link:hover::after,
.home-nav-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

#story-spacer {
  height: 540vh;
  pointer-events: none;
}

body.gallery-is-open {
  overflow: hidden;
}

#gallery-section {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

#gallery-section.gallery-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 260ms ease;
}

#gallery-section #orbit-canvas {
  width: 100%;
  height: 100%;
  cursor: grab !important;
}

#gallery-section #orbit-canvas:active {
  cursor: grabbing !important;
}

#home-content {
  position: relative;
  z-index: 50;
  background: #050505;
  color: #f4ecde;
}

/* Header Actions - Two Buttons */
.header-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.join-btn {
  background: transparent !important;
  color: #e6bf6e !important;
  border: 1px solid rgba(230, 191, 110, 0.5);
  box-shadow: 0 0 20px rgba(230, 191, 110, 0.08) !important;
}

.join-btn:hover {
  background: rgba(230, 191, 110, 0.12) !important;
  border-color: #e6bf6e;
  box-shadow: 0 0 30px rgba(230, 191, 110, 0.2) !important;
}

/* Agency Tagline Banner */
.agency-tagline-banner {
  position: relative;
  width: 100%;
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(230,191,110,0.06) 50%, rgba(5,5,5,0) 100%);
  border-top: 1px solid rgba(230, 191, 110, 0.15);
  border-bottom: 1px solid rgba(230, 191, 110, 0.15);
  overflow: hidden;
}

.agency-tagline-text {
  font: 600 clamp(11px, 1.4vw, 15px)/1 'Outfit', sans-serif;
  color: rgba(230, 191, 110, 0.9);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0;
  animation: tagline-shimmer 4s ease-in-out infinite alternate;
}

@keyframes tagline-shimmer {
  0%   { opacity: 0.6; text-shadow: 0 0 0 transparent; }
  100% { opacity: 1;   text-shadow: 0 0 20px rgba(230, 191, 110, 0.3); }
}

.home-section {
  position: relative;
  padding: clamp(80px, 11vw, 160px) clamp(24px, 7vw, 112px);
  border-top: 1px solid rgba(244, 236, 222, 0.16);
  scroll-margin-top: 80px;
}

.home-section__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.home-section--intro {
  display: grid;
  min-height: 92svh;
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Horizontally centers the content */
  background: #15110c;
}

.home-intro {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers all child elements (text, buttons) perfectly */
  text-align: center; /* Centers the actual text lines */
  margin: 0 auto;
}

.home-eyebrow {
  margin: 0 0 22px;
  color: #e6bf6e;
  font: 600 11px/1.2 Outfit, sans-serif;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.home-section h2 {
  margin: 0;
  color: #f6eddb;
  font-family: Italiana, serif;
  font-size: clamp(42px, 6.2vw, 92px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
}

.home-lede,
.section-heading--split > p,
.fit-copy > p {
  max-width: 620px;
  margin: 32px 0 0;
  color: rgba(244, 236, 222, 0.82);
  font: 300 clamp(18px, 1.9vw, 25px)/1.5 Outfit, sans-serif;
}

.home-command {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  color: #f4ecde;
  font: 600 12px/1 Outfit, sans-serif;
  letter-spacing: 1.8px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, gap 180ms ease;
}

.home-command:hover,
.home-command:focus-visible {
  gap: 24px;
  color: #e6bf6e;
  outline: none;
}

.section-heading {
  display: grid;
  max-width: 860px;
  gap: 20px;
}

.section-heading--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.55fr);
  align-items: end;
}

.section-heading--split > p {
  margin: 0;
}

.discipline-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 72px;
}

.discipline-item {
  min-height: 270px;
  padding: 30px 36px 34px 0;
}

.discipline-item:nth-child(odd) {
  padding-right: 72px;
}

.discipline-item:nth-child(even) {
  padding-left: 36px;
}

.discipline-item span,
.work-card__meta,
.process-list > li > span {
  color: #e6bf6e;
  font: 600 11px/1 Outfit, sans-serif;
  letter-spacing: 1.8px;
}

.discipline-item h3,
.process-list h3 {
  margin: 54px 0 12px;
  color: #f6eddb;
  font: 400 clamp(25px, 2.7vw, 40px)/1.1 Italiana, serif;
}

.discipline-item p,
.process-list p {
  max-width: 380px;
  margin: 0;
  color: rgba(244, 236, 222, 0.7);
  font: 300 15px/1.65 Outfit, sans-serif;
}

.home-section--work {
  background: #e8e1d1;
  color: #121212;
}

.home-section--work h2,
.home-section--work .home-eyebrow,
.home-section--work .section-heading--split > p,
.home-section--work .home-command {
  color: #121212;
}

.work-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  margin-top: 72px;
}

.work-card {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  background: #242424;
}

.work-card--wide {
  grid-row: span 2;
  min-height: 900px;
}

.work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.work-card:hover img {
  transform: scale(1.035);
}

.work-card__meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.44);
}

.home-command--dark:hover,
.home-command--dark:focus-visible {
  color: #7a4c1f;
}

.process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
  margin: 72px 0 0;
  list-style: none;
}

.process-list > li {
  min-height: 300px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 236, 222, 0.35);
}

.process-list h3 {
  margin-top: 70px;
}

.home-section--fit {
  background: #19343b;
}

.fit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.7fr);
  gap: clamp(40px, 10vw, 150px);
  align-items: start;
}

.fit-copy > p {
  margin-top: 0;
}

#slide-1 {
  top: 63%;
  width: min(40vw, 540px);
  max-width: 540px;
}

#slide-1 .slide-title {
  font-size: clamp(56px, 6.4vw, 92px);
  line-height: 0.98;
}

#slide-2 {
  left: 8vw;
  right: auto;
  width: min(32vw, 480px);
  max-width: 480px;
}

#slide-3 {
  left: auto;
  right: 8vw;
  width: min(32vw, 480px);
  max-width: 480px;
}

#slide-4 {
  right: 10vw;
  width: min(32vw, 480px);
  max-width: 480px;
}

#slide-4 .slide-title {
  font-size: clamp(52px, 5.5vw, 80px);
  line-height: 0.96;
}

.cinematic-progress {
  z-index: 120;
}

.gallery-is-open .cinematic-progress {
  visibility: hidden;
  opacity: 0;
}

#footer-section {
  position: relative;
  top: auto;
  left: auto;
  z-index: 50;
  width: 100%;
  min-height: 82svh;
  height: auto;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  #story-spacer {
    height: 540vh;
  }

  .home-nav-link {
    font-size: 10px;
  }

  .home-section {
    padding: 78px 24px;
  }

  .home-section--intro {
    min-height: 80svh;
  }

  .home-section h2 {
    font-size: clamp(40px, 12vw, 62px);
  }

  .section-heading--split,
  .fit-layout,
  .discipline-list,
  .work-grid,
  .process-list {
    grid-template-columns: 1fr;
  }

  .discipline-list,
  .work-grid,
  .process-list {
    margin-top: 48px;
  }

  .discipline-item,
  .discipline-item:nth-child(odd),
  .discipline-item:nth-child(even) {
    min-height: 0;
    padding: 26px 0 34px;
    border-right: 0;
  }

  .discipline-item h3,
  .process-list h3 {
    margin-top: 38px;
  }

  .work-card,
  .work-card--wide {
    min-height: 440px;
  }

  .process-list > li {
    min-height: 0;
    padding-bottom: 24px;
  }

  .process-list h3 {
    margin-top: 46px;
  }

  #slide-1 {
    top: 60%;
    width: calc(100vw - 72px);
    max-width: none;
  }

  #slide-2,
  #slide-3,
  #slide-4 {
    left: 28px;
    right: auto;
    width: calc(100vw - 72px);
    max-width: none;
  }

  #slide-1 .slide-title {
    font-size: clamp(40px, 11.8vw, 60px);
    line-height: 1;
  }

  #slide-4 .slide-title {
    font-size: clamp(42px, 12.8vw, 64px);
    line-height: 1;
  }

  #footer-section {
    min-height: 72svh;
  }
}

/* Scroll reveal text styles */
.scroll-reveal-text {
  display: inline-block;
}

.reveal-word {
  display: inline-block;
  margin-right: 0.23em;
  opacity: 0.25;
  transform: translateY(5px);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
  color: #e0d8d0 !important; /* Force high contrast for paragraphs */
}

.reveal-char {
  display: inline-block;
  opacity: 0.15;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  color: #f6eddb !important; /* Force high contrast for headings */
}

.reveal-space {
  width: 0.22em;
}

/* 3D Video Background & Parallax (Sticky & Persistent)
   .fixed-video-bg is a direct child of #home-content (normal flow).
   Making IT sticky means it sticks to the viewport while sibling
   sections scroll past on top. Previous approach had sticky nested
   inside absolute which is invalid CSS behavior. */
.fixed-video-bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  pointer-events: none;
  margin-bottom: -100vh; /* Pull following content up so it overlaps the video */
}

@supports (height: 100svh) {
  .fixed-video-bg {
    margin-bottom: -100svh;
  }
}

.video-3d-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.video-3d-element {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.15s ease-out;
  /* Make video super crisp and vibrant (8k feel) */
  filter: contrast(1.15) saturate(1.3) brightness(1.1);
}

.video-3d-overlay {
  position: absolute;
  inset: 0;
  /* Reduced darkening overlay so the vibrant video shines through clearly */
  background: radial-gradient(circle at center, rgba(12, 12, 12, 0.25) 0%, rgba(5, 5, 5, 0.7) 100%);
  z-index: 2;
}

.home-section {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

.home-intro {
  position: relative;
  z-index: 3;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Full screen footer */
#footer-section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 50 !important;
  background: radial-gradient(circle at center, #161009, #050302) !important;
  padding: 40px 60px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  perspective: 1200px;
  overflow: hidden;
}

#footer-section::before {
  display: none !important;
}

.footer-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
}

.footer-video-wrap.video-ended {
  opacity: 0;
}

.footer-video-element {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(0px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.15s ease-out;
  /* 8K Quality Simulation & Optimization */
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.15) saturate(1.2) brightness(1.05);
}

.footer-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.3) 0%, rgba(5, 5, 5, 0.75) 100%);
  z-index: 2;
}

.footer-center {
  position: relative;
  z-index: 4 !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.footer-bottom {
  position: relative;
  z-index: 4 !important;
}

/* Hover Image Reveal Layout */
.hover-reveal-container {
  position: relative;
  width: 100%;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: visible !important;
}

.hover-reveal-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.reveal-item {
  overflow: hidden;
  cursor: pointer;
  padding: 4px 0;
}

.reveal-item-inner {
  position: relative;
  display: block;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item:hover .reveal-item-inner {
  transform: translateY(-100%);
}

.reveal-item-text {
  display: block;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 5.2vw, 68px);
  line-height: 0.9em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15); /* Very dim base color */
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item-text-clone {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* Dim other text items slightly more on list hover */
.hover-reveal-list:hover .reveal-item-text {
  color: rgba(255, 255, 255, 0.05);
}

.reveal-item:hover .reveal-item-text {
  color: #ffffff !important; /* Bright white when hovered! */
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Floating Follower Image Box */
.hover-reveal-image-box {
  position: absolute;
  width: 290px;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  background: #111;
}

.hover-reveal-image-box.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hover-reveal-slides-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.reveal-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.reveal-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OVERRIDES: Position Slide 1 (Demand In Motion) vertically */
#slide-1 {
  left: 8vw !important; /* Restore left alignment */
  top: 55% !important; /* A little lower than absolute center to avoid Velora header */
  transform: translateY(-50%) !important; /* Only transform Y, keep X intact */
  text-align: left !important;
  display: block; /* Remove flex centering */
  max-width: 560px !important;
}

/* ==========================================================================
   PARTNER 30-FRAME CANVAS SCROLLEYTELLING SECTION
   ========================================================================== */
.partners-scrollytelling-section {
  position: relative;
  height: 320vh; /* 3.2x viewport height for controlled frame scrubbing speed */
  padding: 0 !important;
  border-top: 1px solid rgba(244, 236, 222, 0.16);
  background: #000;
}

.partners-sticky-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners-video-presentation {
  position: relative;
  width: 100%;
  height: 320vh; /* Re-enabled tall container for scrolling */
  background: #000;
}

.partners-fullscreen-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.partner-pure-text {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 1.2s;
  z-index: 5;
  width: max-content;
}

.partner-pure-text.active {
  opacity: 1;
  visibility: visible;
}

/* Positioning Variants */
.pos-top-left {
  top: 15%;
  left: 10%;
  transform: translateY(30px) scale(0.95);
  text-align: left;
}
.pos-top-left.active { transform: translateY(0) scale(1); }

.pos-bottom-right {
  bottom: 15%;
  right: 10%;
  transform: translateX(40px) scale(0.95);
  text-align: right;
}
.pos-bottom-right.active { transform: translateX(0) scale(1); }

.pos-center-left {
  top: 45%;
  left: 10%;
  transform: translateY(-50%) translateX(-40px) scale(0.95);
  text-align: left;
}
.pos-center-left.active { transform: translateY(-50%) translateX(0) scale(1); }

.pos-top-right {
  top: 20%;
  right: 12%;
  transform: translateY(-40px) scale(0.95);
  text-align: right;
}
.pos-top-right.active { transform: translateY(0) scale(1); }

.pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95) translateY(50px);
  text-align: center;
}
.pos-center.active { transform: translate(-50%, -50%) scale(1) translateY(0); }

/* Custom Colors */
.color-gold { color: #e6bf6e; text-shadow: 0 5px 25px rgba(230,191,110,0.3); }
.color-silver { color: #f4ecde; text-shadow: 0 5px 25px rgba(255,255,255,0.3); }
.color-bronze { color: #d4a373; text-shadow: 0 5px 25px rgba(212,163,115,0.3); }
.color-pearl { color: #e0e5ec; text-shadow: 0 5px 25px rgba(224,229,236,0.3); }
.color-sunset { color: #ff9e7d; text-shadow: 0 10px 40px rgba(255,158,125,0.5); }

.partner-company-name {
  font: 400 9vw/1 "Italiana", serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.partner-company-desc {
  font: 300 1.2vw/1.5 Outfit, sans-serif;
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  margin-top: 10px;
}

/* Contact Button */
.partner-contact-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 15px 40px;
  border: 1px solid rgba(255,158,125,0.5);
  border-radius: 40px;
  color: #ff9e7d;
  font: 500 14px/1 Outfit, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  background: rgba(12,10,8,0.6);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  pointer-events: auto;
}

.partner-contact-btn:hover {
  background: #ff9e7d;
  color: #000;
  transform: scale(1.05);
}


#partner-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none; /* Let pointer events through to window/document */
}

.partner-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.partner-canvas-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.15) 0%, rgba(5, 5, 5, 0.75) 100%);
  z-index: 2;
  pointer-events: none;
}

.partner-text-container {
  position: relative;
  width: min(100%, 1240px);
  height: 100%;
  margin: 0 auto;
  z-index: 3;
  pointer-events: none;
}

.partner-text-card {
  position: absolute;
  max-width: 520px;
  padding: 32px 36px;
  background: rgba(12, 10, 8, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(230, 191, 110, 0.25);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(230, 191, 110, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.7s;
  pointer-events: auto;
}

.partner-text-card.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Card Position Variants */
.partner-text-card.pos-left {
  left: 5vw;
  top: 50%;
  transform: translateY(-50%) translateY(30px) scale(0.96);
}

.partner-text-card.pos-left.active {
  transform: translateY(-50%) translateY(0) scale(1);
}

.partner-text-card.pos-right {
  right: 5vw;
  top: 50%;
  transform: translateY(-50%) translateY(30px) scale(0.96);
}

.partner-text-card.pos-right.active {
  transform: translateY(-50%) translateY(0) scale(1);
}

.partner-text-card.pos-center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(30px) scale(0.96);
  text-align: center;
}

.partner-text-card.pos-center.active {
  transform: translate(-50%, -50%) translateY(0) scale(1);
}

.partner-card-title {
  margin: 12px 0 16px;
  color: #f6eddb;
  font-family: Italiana, serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.1;
}

.partner-card-desc {
  margin: 0 0 20px;
  color: rgba(244, 236, 222, 0.85);
  font: 300 15px/1.6 Outfit, sans-serif;
}

.partner-phase-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(230, 191, 110, 0.12);
  border: 1px solid rgba(230, 191, 110, 0.3);
  border-radius: 20px;
  color: #e6bf6e;
  font: 600 11px/1 Outfit, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.partner-frame-indicator {
  position: absolute;
  bottom: 40px;
  right: 5vw;
  z-index: 4;
  color: rgba(244, 236, 222, 0.6);
  font: 500 12px/1 Outfit, sans-serif;
  letter-spacing: 2px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

@media (max-width: 767px) {
  .partner-text-card {
    left: 20px !important;
    right: 20px !important;
    max-width: none !important;
    padding: 24px;
  }
  .partner-text-card.pos-center {
    transform: translateY(-50%) translateY(30px) scale(0.96);
  }
  .partner-text-card.pos-center.active {
    transform: translateY(-50%) translateY(0) scale(1);
  }
}

/* PARTNERS SEPARATE PAGE STYLES */
body.partners-page-body {
  background: #000;
  color: #f4ecde;
  overflow-x: hidden;
}

body.partners-page-body .main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.active-nav-link {
  color: #e6bf6e !important;
  border-bottom: 1px solid #e6bf6e;
  padding-bottom: 2px;
}

.partners-back-home-btn {
  position: absolute;
  bottom: 40px;
  left: 5vw;
  z-index: 4;
  color: #f4ecde;
  text-decoration: none;
  font: 600 12px/1 Outfit, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 12px 24px;
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(230, 191, 110, 0.3);
  border-radius: 30px;
  transition: all 0.3s ease;
}

.partners-back-home-btn:hover {
  background: rgba(230, 191, 110, 0.2);
  color: #e6bf6e;
  border-color: #e6bf6e;
  transform: translateY(-2px);
}

/* ==========================================================================
   PARTNERS SECTION (FLIP GALLERY & ANIMATED TEXT)
   ========================================================================== */
.flip-gallery-container {
    width: 100%;
    height: auto;
    min-height: 600px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    cursor: pointer;
    gap: 40px;
}

.flip-gallery-label {
    font: 600 14px/1 Outfit, sans-serif;
    color: rgba(230, 191, 110, 0.8);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.flip-tilt-wrapper {
    position: relative;
    width: 900px;
    max-width: 90vw;
    height: 350px;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.glass-brand-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(255,255,255,0.03);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.animated-text-container {
    display: flex;
    gap: 0.1em;
    perspective: 1000px;
    align-items: center;
    justify-content: center;
}

.anim-letter {
    display: inline-block;
    font: 400 clamp(48px, 6vw, 84px)/1.2 'Italiana', serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 6px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateX(90deg) translateY(20px);
    opacity: 0;
    filter: blur(8px);
}

/* ==========================================
   INFINITE MARQUEE SECTION
   ========================================== */
.marquee-container {
    width: 100vw;
    max-width: 100%;
    margin-top: 40px;
    overflow: hidden;
    /* Cinematic Fade */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scroll-marquee 20s linear infinite;
    will-change: transform;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-card {
    /* Even smaller size as requested */
    width: 200px; 
    height: 110px;
    flex-shrink: 0;
    
    /* Pure Glassmorphism with Golden Accents */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(230, 191, 110, 0.2);
    border-top: 1px solid rgba(230, 191, 110, 0.4);
    border-left: 1px solid rgba(230, 191, 110, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(230, 191, 110, 0.05);
    border-radius: 24px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.marquee-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(230, 191, 110, 0.15);
}

.marquee-card h3 {
    font: 400 clamp(16px, 2vw, 22px)/1.2 'Italiana', serif;
    color: #fff;
    margin: 0;
    padding: 24px;
  }
  .partner-text-card.pos-center {
    transform: translateY(-50%) translateY(30px) scale(0.96);
  }
  .partner-text-card.pos-center.active {
    transform: translateY(-50%) translateY(0) scale(1);
  }
}

/* PARTNERS SEPARATE PAGE STYLES */
body.partners-page-body {
  background: #000;
  color: #f4ecde;
  overflow-x: hidden;
}

body.partners-page-body .main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.active-nav-link {
  color: #e6bf6e !important;
  border-bottom: 1px solid #e6bf6e;
  padding-bottom: 2px;
}

.partners-back-home-btn {
  position: absolute;
  bottom: 40px;
  left: 5vw;
  z-index: 4;
  color: #f4ecde;
  text-decoration: none;
  font: 600 12px/1 Outfit, sans-serif;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 12px 24px;
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(230, 191, 110, 0.3);
  border-radius: 30px;
  transition: all 0.3s ease;
}

.partners-back-home-btn:hover {
  background: rgba(230, 191, 110, 0.2);
  color: #e6bf6e;
  border-color: #e6bf6e;
  transform: translateY(-2px);
}

/* ==========================================================================
   PARTNERS SECTION (FLIP GALLERY & ANIMATED TEXT)
   ========================================================================== */
.flip-gallery-container {
    width: 100%;
    height: auto;
    min-height: 600px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    cursor: pointer;
    gap: 40px;
}

.flip-gallery-label {
    font: 600 14px/1 Outfit, sans-serif;
    color: rgba(230, 191, 110, 0.8);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

.flip-tilt-wrapper {
    position: relative;
    width: 900px;
    max-width: 90vw;
    height: 350px;
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.glass-brand-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(255,255,255,0.03);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.animated-text-container {
    display: flex;
    gap: 0.1em;
    perspective: 1000px;
    align-items: center;
    justify-content: center;
}

.anim-letter {
    display: inline-block;
    font: 400 clamp(48px, 6vw, 84px)/1.2 'Italiana', serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 6px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateX(90deg) translateY(20px);
    opacity: 0;
    filter: blur(8px);
}

/* ==========================================
   INFINITE MARQUEE SECTION
   ========================================== */
.marquee-container {
    width: 100vw;
    max-width: 100%;
    margin-top: 40px;
    overflow: hidden;
    /* Cinematic Fade */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    padding: 20px 0;
}

.marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scroll-marquee 20s linear infinite;
    will-change: transform;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-card {
    /* Even smaller size as requested */
    width: 200px; 
    height: 110px;
    flex-shrink: 0;
    
    /* Pure Glassmorphism with Golden Accents */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(230, 191, 110, 0.2);
    border-top: 1px solid rgba(230, 191, 110, 0.4);
    border-left: 1px solid rgba(230, 191, 110, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(230, 191, 110, 0.05);
    border-radius: 24px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.marquee-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(230, 191, 110, 0.15);
}

.marquee-card h3 {
    font: 400 clamp(16px, 2vw, 22px)/1.2 'Italiana', serif;
    color: #fff;
    margin: 0;
    letter-spacing: 3px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    pointer-events: none;
}

@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); } /* With 4x duplication, -25% shifts it exactly one full set */
}

/* Mobile Navigation Overlay & Hamburger */
.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
    pointer-events: auto;
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
}
.hamburger-line {
    width: 100%;
    height: 2px;
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
    border-radius: 2px;
}
.hamburger-menu[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-menu[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    pointer-events: none;
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.mobile-nav-link {
    font-family: 'Italiana', serif;
    font-size: 32px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s;
}
.mobile-nav-link:hover {
    color: #e8c374;
}
.mobile-menu-overlay.active .mobile-nav-link {
    opacity: 1;
    transform: translateY(0);
}
.mobile-menu-overlay.active .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-link:nth-child(3) { transition-delay: 0.3s; }

@media (max-width: 767px) {
    .hamburger-menu {
        display: flex;
    }
    .header-right {
        gap: 16px;
    }
    .header-actions {
        transform: scale(0.85);
        transform-origin: right center;
    }
    .main-header {
        align-items: flex-start !important;
    }
    
    /* Grids collapse to 1 column */
    .discipline-list,
    .process-list {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Ensure lightbox is full screen width on mobile */
    .lightbox-content-wrapper {
        width: 90vw !important;
        height: auto !important;
        aspect-ratio: 3 / 4;
    }
    
    /* Adjust marquee */
    .marquee-card h3 {
        font-size: 16px !important;
    }
    
    /* Footer bottom links */
    .footer-bottom {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
}

/* Hide animated horizontal line on header */
.main-header:after {
    display: none !important;
}

/* Hide borders between sections */
.home-section, .agency-tagline-banner {
    border-top: none !important;
    border-bottom: none !important;
}

/* Show standard header nav on mobile in one row */
@media (max-width: 767px) {
    .main-header {
        flex-direction: row;
        gap: 1vw;
        justify-content: space-between;
        align-items: center !important;
        padding: 16px 12px !important;
        width: 100%;
        flex-wrap: nowrap !important;
    }
    
    .brand {
        font-size: 5vw !important;
        line-height: 1 !important;
        display: flex;
        align-items: center;
    }
    
    .header-nav {
        display: flex !important;
        position: relative !important;
        left: 0 !important;
        transform: none !important;
        gap: 1.5vw !important;
        margin: 0;
        align-items: center !important;
    }
    
    .home-nav-link {
        font-size: 2.2vw !important;
        letter-spacing: 0px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }
    
    .header-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .contact-btn {
        padding: 1.5vw 2vw !important;
        font-size: 1.8vw !important;
        letter-spacing: 0 !important;
        gap: 2px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        white-space: nowrap;
    }
    
    .contact-btn .arrow {
        font-size: 2vw !important;
    }

    /* Fix slide text being too low and getting cut off on mobile */
    .slide {
        top: 32% !important;
    }
    
    .slide-desc, .desc-row p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* PERFORMANCE FIX: Disable heavy film grain SVG on mobile which causes severe lag on resize */
    body:after {
        display: none !important;
        animation: none !important;
        background-image: none !important;
    }
}

/* Make all cinematic slide titles slightly smaller and fluidly responsive */
.slide-title {
    font-size: clamp(24px, 4.2vw, 54px) !important;
}

@media (max-width: 767px) {
    .slide-title {
        font-size: clamp(20px, 7vw, 32px) !important;
    }
}

/* CRITICAL FIX: Prevent horizontal overflow. Uses clip instead of hidden so position: sticky is not broken */
html, body {
    overflow-x: clip !important;
}

@media (max-width: 767px) {
    html, body {
        overflow-x: clip !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
    }

    main, .home-section {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: clip !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .home-section__inner, .home-intro {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .home-intro p, .home-intro h2 {
        text-align: center !important;
        width: 100% !important;
    }

    /* Fix black navbar — make it transparent over hero, semi-transparent on scroll */
    .main-header {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding-bottom: 12px !important;
    }
}

/* Stack header buttons globally on all previews */
.header-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-end; /* Align to the right edge */
}

/* ============================================================
   MOBILE PERFORMANCE: Disable heavy GPU effects on mobile
   to eliminate jank, glitching, and ensure buttery-smooth scroll.
   ============================================================ */
@media (max-width: 767px) {
    /* Simplify the video background — remove 3D perspective,
       transforms, and expensive CSS filters that kill mobile GPUs */
    .video-3d-wrap {
        perspective: none !important;
        transform-style: flat !important;
    }

    .video-3d-element {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        transform-style: flat !important;
        will-change: auto !important;
        transition: none !important;
        filter: none !important;
    }

    /* Lighten the dark overlay so the video is still visible */
    .video-3d-overlay {
        background: rgba(5, 5, 5, 0.45) !important;
    }

    /* Remove will-change and transitions from scrolling elements */
    .home-intro {
        will-change: auto !important;
        transition: none !important;
        transform: none !important;
    }

    .reveal-word {
        will-change: auto !important;
    }

    .reveal-char {
        will-change: auto !important;
        transform-style: flat !important;
    }

    /* Disable the ambient sheen, film grain, and other overlays */
    .ambient-sheen,
    .ambient-sheen:before,
    .ambient-sheen:after,
    .sheen-line {
        display: none !important;
    }

    /* Reduce cursor overhead */
    .cursor-inner,
    .cursor-outer {
        display: none !important;
    }
}