@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  --black: #060606;
  --white: #ffffff;
  --yellow: #feee00;
  --primary-blue: #feee00;
  --bg-dark: #d2d5d6;
  --text-muted: rgba(0, 0, 0, 0.6);
  --border-color: rgba(0, 0, 0, 0.05);


  --font-display: "ivypresto-display, sans-serif";
  --font-sans: "KMR Melange Semi Light", Arial, sans-serif;
  --font-sans-book: "KMR Melange Book", Arial, sans-serif;
  --font-sans-semibold: "KMR Melange Semi Bold", Arial, sans-serif;
  --font-sans-bold: "KMR Melange Bold", Arial, sans-serif;
}

@font-face {
  font-family: "ivypresto-display";
  src: url(https://use.typekit.net/af/cc395d/0000000…/31/l?primer=7cdcb44…&fvd=n3&v=3) format("woff2"), url(https://use.typekit.net/af/cc395d/0000000…/31/d?primer=7cdcb44…&fvd=n3&v=3) format("woff"), url(https://use.typekit.net/af/cc395d/0000000…/31/a?primer=7cdcb44…&fvd=n3&v=3) format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* background-color: var(--bg-dark); */
  color: #111111;
  font-family: var(--font-sans);
  overflow-x: hidden;
  cursor: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
ul,
ol,
select,
header,
input,
footer {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #111111;
  scroll-behavior: smooth;
  box-shadow: none;
  outline: none;
  border: none;
  list-style: none;
}

/* Custom Interactive Cursor */
.custom-cursor {
  width: 10px;
  height: 10px;
  background-color: var(--yellow);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.3s ease;
}

.custom-cursor.link-hover {
  width: 28px;
  height: 28px;
  background-color: #feee0050;
  border: 1px solid orange;

}

.main-header {
  display: block;
  position: relative;
  z-index: 1000;
}

/* Header & Navbar Styling */
.nav-button-wrap {
  display: none;
}

/* Hamburger Button Base Styles (shown only on mobile via media query) */
.nav-button-m {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.line-nav-m {
  width: 26px;
  height: 1.5px;
  background-color: #ffffff;
  border-radius: 2px;
  display: block;
  transform-origin: center;
  will-change: transform, opacity;
}

.navbar-tbp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  padding: 0 60px;
  background-color: var(--black);
  z-index: 1015;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
  will-change: transform;
}

.navbar-tbp.scrolled {
  background-color: var(--black);
  backdrop-filter: blur(20px);
  border-color: var(--black);
}

.navbar-tbp.navbar-hidden {
  transform: translateY(-100%);
}

.navbar-content-left {
  display: flex;
  gap: 35px;
  width: 35%;
}

.navbar-content-right {
  display: flex;
  gap: 25px;
  width: 35%;
  justify-content: flex-end;
  align-items: center;
}

.navbar-link-left-a,
.navbar-link-right-a {
  text-decoration: none;
  position: relative;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
}

.navbar-link-left,
.navbar-link-right {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
  margin: 0;
  transition: color 0.3s ease;
}

.navbar-link-left-a::after,
.navbar-link-right-a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 5px;
  left: 0;
  background-color: var(--yellow);
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-link-left-a:hover::after,
.navbar-link-right-a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.navbar-link-left-a:hover .navbar-link-left,
.navbar-link-right-a:hover .navbar-link-right {
  color: var(--yellow);
}

/* Theme WhatsApp Buttons (Bootstrap-compatible, clean CSS) */
.btn-wa-theme {
  position: relative;
  background: radial-gradient(circle at 30% 30%, rgba(37, 211, 102, 0.25), rgba(10, 10, 10, 0.95));
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #25D366;
  width: 55px;
  height: 55px;
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.2);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.wa-glow-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.6) 0%, rgba(37, 211, 102, 0) 70%);
  filter: blur(8px);
  opacity: 0.5;
  animation: wa-ambient-pulse 3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes wa-ambient-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.3;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0.8;
  }
}

.wa-shine-sweep {
  position: absolute;
  top: -50%;
  left: -150%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 20%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.05) 80%,
      transparent 100%);
  transform: rotate(28deg);
  animation: wa-light-sweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes wa-light-sweep {
  0% {
    left: -150%;
  }

  30%,
  100% {
    left: 200%;
  }
}

.btn-wa-theme:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
  box-shadow: 0 0 25px rgba(254, 238, 0, 0.8);
  transform: translateY(-2px) scale(1.08);
}

.btn-wa-mobile {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  color: var(--black);
  border: 1px solid var(--yellow);
  font-size: 14px;
  letter-spacing: 1.5px;
  box-shadow: 0 0 20px rgba(254, 238, 0, 0.4);
  animation: wa-btn-pulse 2.5s infinite ease-in-out;
  transition: all 0.35s ease;
}

@keyframes wa-btn-pulse {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(254, 238, 0, 0.35), 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 28px rgba(254, 238, 0, 0.75), 0 8px 25px rgba(254, 238, 0, 0.3);
    transform: scale(1.03);
  }
}

.btn-wa-mobile:hover,
.btn-wa-mobile:active {
  background: #ffffff;
  color: var(--black);
  border-color: #ffffff;
  box-shadow: 0 12px 35px rgba(255, 255, 255, 0.6);
  transform: translateY(-2px) scale(1.05);
}

.wa-svg-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  animation: wa-icon-float 3s ease-in-out infinite alternate;
}

@keyframes wa-icon-float {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-2px) scale(1.08);
  }
}

.btn-wa-theme:hover .wa-svg-icon,
.btn-wa-mobile:hover .wa-svg-icon {
  animation: none;
  transform: scale(1.18) rotate(12deg);
}


.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--white);
  z-index: 1005;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}

.mobile-links a {
  text-decoration: none;
  color: #111111;
  font-size: 26px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(30px);
  transition: color 0.3s ease;
}

.mobile-links a:hover {
  color: var(--primary-blue);
}

/* Scroll Scrub Section */
.section-scroll-1 {
  height: 480vh;
  background-color: #000;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.section-scroll-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Flobber Image Sequence Container */
.big-flobber-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  pointer-events: none;
}

.big-flobber-container .canvas {
  width: 80vh;
  height: 80vh;
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 51, 255, 0.15));
}

/* Centered Big Logo */
.tbp-logo-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  pointer-events: none;
  /* display: none; */
}

.tbp-logo-big-container,
.tbp-logo-big-container-top {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.tbp-logo-big-container-top {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.tbp-logo-down {
  height: 70px;
  width: auto;
  display: none;
  /* filter: invert(15%) sepia(95%) saturate(7400%) saturate(1000%) hue-rotate(244deg) brightness(97%) contrast(145%); */
}

.tbp-logo-down-mobile {
  /* display: none; */
  height: 110px;
  width: auto;
  display: none !important;
  /* filter: invert(15%) sepia(95%) saturate(7400%) hue-rotate(244deg) brightness(97%) contrast(145%); */
}

/* Custom visibility class that preserves bounding boxes for GSAP calculations */
.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Navbar Logo Styling & Containers */
.tbp-logo-navbar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.tbp-logo-navbar-wrapin {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  width: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tbp-logo-navbar {
  height: 65px;
  width: 200px;
  display: block;
  /* filter: invert(15%) sepia(95%) saturate(7400%) saturate(1000%) hue-rotate(244deg) brightness(97%) contrast(145%); */
  transition: filter 0.3s ease;
}

/* Text Word masks and layout centered at the bottom of the canvas */
.section-copy-cover {
  position: absolute;
  bottom: -22px;
  /* left: 3%; */
  width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  font-family: "ivypresto-display", sans-serif;
}


.section-scroll-sticky {
  font-family: ivypresto-display, sans-serif;

}

.heading-copy-1 {
  font-size: 9em !important;
}

.text-heading-copy-1 {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--white);
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
  letter-spacing: 0.1px;
}

.gsap_split_word-mask {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 5px;
  line-height: 1.15;
  padding-bottom: 2px;
}

.gsap_split_word {
  position: relative;
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  will-change: transform;
}

.heading-copy-1 {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.8vw, 13rem);
  font-weight: 400;
  font-style: normal;
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin-top: 25px;
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------- */
/* 7. Section Clients & Premium Infinite Marquees Styling */
/* ---------------------------------------------------- */

.section-clients {
  padding: 60px 20px;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.mini-head-clients {
  /* margin-bottom: 10px; */
}

.heading-34 {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 3.25em;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -1.2px;
  color: var(--black);
  max-width: 600px;
}

.marquee-clients {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  cursor: none;
}

.infinite-marquee {
  overflow: hidden;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-desktop 24s linear infinite;
  will-change: transform;
}

.marquee-content {
  display: flex;
  gap: 120px;
  padding-right: 120px;
}

.place-title {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 60px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.12);
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
}

.place-title:hover {
  color: var(--yellow);
  transform: skewX(-8deg) scale(1.05);
}

.gif-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 350px;
  pointer-events: none;
  z-index: 100;
  border-radius: 16px;
  opacity: 1;
  filter: drop-shadow(0 25px 60px rgba(0, 51, 255, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(13, 13, 13, 0.95);
  background-image: url("https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68af9499625bfccf2c05b31d_Flobber_0004_enhanced_FlobberRaizN(2).webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.gif-content.active {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

/* Styles for new client logos marquee (isolated to avoid changing original styles used in index1.html) */
.marquee-clients-logos {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.infinite-marquee-logos {
  overflow: hidden;
  width: 100%;
}

.marquee-track-logos {
  display: flex;
  width: max-content;
  animation: marquee-desktop-logos 24s linear infinite;
  will-change: transform;
}

.marquee-content-logos {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  align-items: center;
}

@keyframes marquee-desktop-logos {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.client-logo-img {
  height: 220px;
  width: auto;
  object-fit: contain;
  /* opacity: 0.35; */
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
  /* filter: grayscale(100%); */
  cursor: pointer;
}

.client-logo-img:hover {
  opacity: 1;
  /* filter: grayscale(0%); */
  transform: scale(1.06);
}

/* Infinitemq Mobile wrapper hidden on desktop */
.infinitemq-mobile {
  display: none;
}

.div-block-9 {
  max-width: 800px;
  margin-top: 20px;
}

.text-grey {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: -0.2px;
}

.text-span-14 {
  color: var(--black);
  font-weight: 700;
}

/* White CTA Line Card Styling */
.white-cta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 50px;
  background-color: var(--white);
  border-radius: 28px;
  text-decoration: none !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.015);
  position: relative;
  overflow: hidden;
}

.white-cta-line:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 70px rgba(0, 51, 255, 0.1);
}

.heading-12.morecontent {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--black);
  width: 32%;
  line-height: 1.15;
  letter-spacing: -1px;
}

.right-white-3-cont {
  display: flex;
  align-items: center;
  gap: 35px;
  width: 48%;
}

.white-cta-separator {
  width: 1px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.08);
}

.text-block-5 {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.6;
}

.text-block-16 {
  color: var(--black);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.white-cta-line .button-primary {
  padding: 16px 36px;
  background-color: var(--yellow);
  color: var(--black) !important;
  border-radius: 50px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 51, 255, 0.2);
}

.white-cta-line:hover .button-primary {
  background-color: var(--white);
  transform: scale(1.04);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* .portfolio-archive a:hover {
  background-color: var(--white);
  transform: scale(1.04);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  --bs-link-color-rgb: var(--white);
} */

.grid-copy-clients {
  display: none;
}

@keyframes marquee-desktop {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------------------------------------------------- */
/* 8. Interactive Brand Visual Card Patterns for Cursor Follow */
/* ---------------------------------------------------- */

.hover-brand-card {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  transition: background-color 0.4s ease;
  font-family: "KMR Melange Book", Arial, sans-serif;
}

.brand-visual-title {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  z-index: 10;
  opacity: 0.85;
}

.brand-visual-pattern {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.25;
  background-size: cover;
  mix-blend-mode: overlay;
}

/* Patterns animated keyframe rules */
.luxury-rotate {
  background: radial-gradient(circle, transparent 20%, var(--white) 20%, var(--white) 21%, transparent 21%, transparent 39%, var(--white) 39%, var(--white) 40%, transparent 40%),
    radial-gradient(circle, transparent 20%, var(--white) 20%, var(--white) 21%, transparent 21%, transparent 39%, var(--white) 39%, var(--white) 40%, transparent 40%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  animation: rotate-pattern 25s linear infinite;
}

.pulsating-wave {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  animation: slide-pattern 3s linear infinite;
}

.grid-expand {
  background-image: linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: pulse-pattern 2.5s ease-in-out infinite alternate;
}

.neon-glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 70%);
  animation: glow-pattern 2s ease-in-out infinite alternate;
}

@keyframes rotate-pattern {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes slide-pattern {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 0;
  }
}

@keyframes pulse-pattern {
  0% {
    transform: scale(0.92);
    opacity: 0.15;
  }

  100% {
    transform: scale(1.08);
    opacity: 0.5;
  }
}

@keyframes glow-pattern {
  0% {
    filter: blur(5px);
    opacity: 0.2;
  }

  100% {
    filter: blur(20px);
    opacity: 0.7;
  }
}

/* ==========================================================================
   TBP · Premium sliding contact drawer and Brevo form overrides
   ========================================================================== */

/* ─── Typekit and local premium web fonts ─── */
@import url("https://use.typekit.net/jow4bjt.css");

@font-face {
  font-family: "KMR Melange Semi Light";
  src: url("https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a22503ff90cb3b7d66_KMRMelangeGrotesk-SemiLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Book";
  src: url("https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a232a23f56a2d62115_KMRMelangeGrotesk-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Semi Bold";
  src: url("https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a206880ff131d2c66b_KMRMelangeGrotesk-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "KMR Melange Bold";
  src: url("https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a2723209cc06cce9b0_KMRMelangeGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Scope Brand design tokens to prevent global leakage ─── */
#sib-container,
.sib-form {
  --tbp-blue: #003DFF;
  /* TBP electric blue */
  --tbp-blue-deep: #0019FF;
  --tbp-paper-bg: #FFFFFF;
  /* pure white container */
  --tbp-paper: #FFFFFF;
  --tbp-ink: #000000;
  --tbp-ink-soft: #1A1A1A;
  --tbp-graphite: #5C5C5C;
  --tbp-stone: #B7B2A7;
  --tbp-cream: var(--tbp-paper-bg);
  --tbp-hairline: rgba(0, 0, 0, 0.18);
  --tbp-hairline-soft: rgba(0, 0, 0, 0.10);

  --font-display: "ivypresto-display", "EB Garamond", Georgia, serif;
  --font-sans: "KMR Melange Semi Light", Arial, sans-serif;
  --font-sans-book: "KMR Melange Book", Arial, sans-serif;
  --font-sans-semibold: "KMR Melange Semi Bold", Arial, sans-serif;
  --font-sans-bold: "KMR Melange Bold", Arial, sans-serif;
}

/* ─── Floating Flobber Button Trigger ─── */
.flobber-button {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  z-index: 9998;
  cursor: pointer;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 51, 255, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.flobber-button:hover {
  transform: scale(1.08);
  box-shadow: 0 15px 40px rgba(0, 51, 255, 0.25);
}

.flobber-topright {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Sliding Flobber Contact Drawer Panel ─── */
.wrapper-slide-in-flobber {
  position: fixed;
  top: 0;
  right: 0;
  width: 720px;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  background-color: #ffffff;
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.slide-over {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.start-a-project {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: 24px !important;
}

.start-a-project::-webkit-scrollbar {
  width: 6px;
}

.start-a-project::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

/* Header style within slide-over */
.sap-top-content {
  background-color: #EFF2F7;
  padding: 32px 48px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.flobber-in-chat {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.image-8 {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.image-8:hover {
  transform: scale(1.1) rotate(90deg);
}

.sap-warning {
  background-color: #000000;
  padding: 8px 16px;
  text-align: center;
}

.sap-warning-txt {
  color: #ffffff;
  font-family: "KMR Melange Semi Light", Arial, sans-serif !important;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.chat-tpb-ui[data-tbp-form-replaced="1"] {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}

/* ─── Outer wrappers ─── */
.sib-form {
  background-color: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}

#sib-container.sib-container--large.sib-container--vertical,
#sib-container {
  background-color: var(--tbp-paper-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  max-width: 720px !important;
  padding: 48px 48px 40px !important;
  text-align: left !important;
  direction: ltr;
  box-sizing: border-box !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
  position: relative !important;
}

/* Make sure no field can horizontally overflow the form */
#sib-container .sib-form-block,
#sib-container .form__entry,
#sib-container .entry__field {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── Form headings (top "Share your project details" + sub) ─── */
#sib-container .sib-form-block,
#sib-container .sib-form-block *:not(.sib-form-block__button):not(.sib-form-block__button *) {
  font-family: var(--font-sans) !important;
  color: var(--tbp-ink) !important;
  background-color: transparent;
}

/* The first .sib-form-block holds the H1 — KMR Melange Semi Light */
#sib-container>#sib-form>div:nth-of-type(1) .sib-form-block,
#sib-container>#sib-form>div:nth-of-type(1) .sib-form-block * {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 36px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

/* Sub-heading paragraph (second block) — KMR Melange Semi Light */
#sib-container>#sib-form>div:nth-of-type(2) .sib-form-block,
#sib-container>#sib-form>div:nth-of-type(2) .sib-form-block * {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--tbp-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* TBP-blue accent inside the title */
#sib-container .tbp-accent,
#sib-container>#sib-form>div:nth-of-type(1) .sib-form-block .tbp-accent,
#sib-container>#sib-form>div:nth-of-type(1) .sib-form-block .tbp-accent * {
  color: var(--yellow) !important;
  font-style: normal !important;
  text-shadow: 1px 1px 3px var(--black) !important;
  -webkit-text-stroke: 1px #feee00;
}

/* Strip the <strong> bold from headings */
#sib-container .sib-form-block strong,
#sib-container .sib-form-block b {
  font-weight: inherit !important;
}

/* ─── Field labels — KMR Melange Semi Light uppercase tracked ─── */
#sib-container .entry__label {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--tbp-ink) !important;
  background-color: transparent !important;
  margin-bottom: 8px !important;
  display: block !important;
  padding-left: 14px !important;
}

#sib-container .entry__label[data-required]::after {
  content: " *";
  color: var(--tbp-ink-soft);
  opacity: 0.4;
  margin-left: 4px;
}

/* ─── Inputs — flat, underlined, brand-aligned ─── */
#sib-container input.input,
#sib-container textarea.input,
#sib-container select.input,
#sib-container .sib-sms-input select,
#sib-container .sib-sms-input input {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  color: var(--yellow) !important;
  background: transparent !important;
  border: 1px solid var(--yellow) !important;
  /* border-bottom: 1px solid var(--tbp-hairline) !important; */
  border-radius: 0 !important;
  padding: 12px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 180ms ease, color 180ms ease;
}

.sib-form .entry__field:focus-within {
  box-shadow: 0 0 0 2px var(--yellow) !important;
}

#sib-container input.input::placeholder,
#sib-container textarea.input::placeholder {
  color: var(--tbp-graphite) !important;
  opacity: 1 !important;
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
}

/* #sib-container input.input:focus,
#sib-container textarea.input:focus,
#sib-container select.input:focus {
  outline: none !important;
  border-bottom-color: var(--tbp-ink) !important;
} */

/* ─── WhatsApp/SMS Country Code selector ─── */
/* #sib-container .sib-sms-input-wrapper {
  position: relative !important;
  overflow: visible !important;
} */

/* ─── Premium Custom WhatsApp Country Code Picker ─── */
.tbp-phone-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}

.tbp-country-select {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--yellow) !important;
  border-right: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  height: 48px !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 90px !important;
}

.tbp-country-select:focus {
  outline: none !important;
}

.tbp-selected-flag {
  font-size: 20px !important;
  line-height: 1 !important;
}

.tbp-selected-code {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--tbp-ink) !important;
}

.tbp-dropdown-arrow {
  transition: transform 0.2s ease !important;
  margin-left: 2px !important;
}

.tbp-country-select.is-open .tbp-dropdown-arrow {
  transform: rotate(180deg) !important;
}

.tbp-phone-input-box {
  flex: 1 1 auto !important;
  width: 100% !important;
}

.tbp-phone-input-box input#SMS {
  border: 1px solid var(--yellow) !important;
  height: 48px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Dropdown Menu Container */
#sib-container .tbp-country-dropdown,
.tbp-country-dropdown {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 340px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}

#sib-container .tbp-country-dropdown.is-open,
.tbp-country-dropdown.is-open {
  display: block !important;
}

/* Search input inside country dropdown */
#sib-container .tbp-country-search-box,
.tbp-country-search-box {
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
}

#sib-container .tbp-country-search-box input,
.tbp-country-search-box input {
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  font-family: var(--font-sans) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

#sib-container .tbp-country-search-box input:focus,
.tbp-country-search-box input:focus {
  outline: none !important;
  border-color: var(--yellow) !important;
}

/* Country List Options */
#sib-container .tbp-country-list,
.tbp-country-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

#sib-container .tbp-country-item,
.tbp-country-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: #111111 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

#sib-container .tbp-country-item:last-child,
.tbp-country-item:last-child {
  border-bottom: 0 !important;
}

#sib-container .tbp-country-item:hover,
#sib-container .tbp-country-item.selected,
.tbp-country-item:hover,
.tbp-country-item.selected {
  background-color: #eff3ff !important;
  background: #eff3ff !important;
  color: #003DFF !important;
}

.tbp-country-item .tbp-flag {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.tbp-country-item .tbp-name {
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tbp-country-item .tbp-code {
  font-weight: 600 !important;
  color: var(--tbp-graphite) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.tbp-country-list::-webkit-scrollbar {
  width: 6px;
}

.tbp-country-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}


#sib-container .sib-sms-select {
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--tbp-hairline) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  height: 48px !important;
  overflow: visible !important;
  gap: 0 !important;
}

/* Clickable country code title */
#sib-container .sib-sms-select__title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  padding: 0 12px 0 16px !important;
  border: 1px solid var(--yellow) !important;
  pointer-events: auto !important;
  /* border-right: 1px solid var(--tbp-hairline) !important; */
  border-radius: 0 !important;
  background: transparent !important;
  height: 100% !important;
  min-width: 75px !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

#sib-container .sib-sms-select__title::after {
  display: block !important;
  border: 0 !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid var(--tbp-graphite) !important;
  position: static !important;
  margin-left: 6px !important;
  margin-top: 2px !important;
}

/* Ensure no ancestor clips the country selector dropdown */
#sib-container .sib-sms-field,
#sib-container .sib-sms-input-wrapper,
#sib-container .sib-sms-select {
  position: relative !important;
  overflow: visible !important;
}

/* When country dropdown is open, lift entire SMS field above everything */
#sib-container .sib-sms-select.sib-is-open,
#sib-container .sib-sms-input-wrapper.sib-is-open,
#sib-container .sib-sms-field.sib-is-open,
#sib-container .sib-sms-field:has(ul.sib-is-open),
#sib-container .sib-sms-input-wrapper:has(ul.sib-is-open),
#sib-container .sib-sms-select:has(ul.sib-is-open) {
  z-index: 10000 !important;
}

/* Hide real input behind displayed calling code display */
#sib-container .sib-sms-select__calling-code {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#sib-container .tbp-calling-code-display {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: var(--tbp-ink) !important;
}

#sib-container .sib-sms-select__number-input {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  position: relative !important;
  height: auto;
  border: 1px solid var(--yellow);
}

#sib-container .sib-sms-select__phone-number {
  flex: 1 1 auto !important;
  border: 0 !important;
  /* border-bottom: 1px solid var(--tbp-hairline) !important; */
  padding: 12px 14px !important;
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: var(--tbp-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* Hide Brevo's SMS tooltip "?" icon and standalone "?" alt text elements */
#sib-container .sib-sms-tooltip,
#sib-container .sib-sms-tooltip__icon,
#sib-container .sib-sms-tooltip__box,
#sib-container .sib-sms-field [aria-label="?"],
#sib-container .sib-sms-field img[alt="?"] {
  display: none !important;
}

/* ─── Country selector list choices (Choices.js) ─── */
ul.sib-sms-select__list,
.sib-sms-select__list {
  display: none;
}

ul.sib-sms-select__list.sib-is-open,
ul.sib-sms-select__list.is-open,
ul.sib-sms-select__list.open,
ul.sib-sms-select__list.active,
.sib-sms-select__list.sib-is-open,
.sib-sms-select__list.is-open,
.sib-sms-select__list.open,
.sib-sms-select__list.active,
.sib-sms-select.sib-is-open .sib-sms-select__list,
.sib-sms-select.is-open .sib-sms-select__list,
.sib-sms-select.open .sib-sms-select__list,
.sib-sms-select.active .sib-sms-select__list,
ul.sib-sms-select__list[style*="block"],
.sib-sms-select__list[style*="block"],
ul.sib-sms-select__list[style*="flex"],
.sib-sms-select__list[style*="flex"],
#sib-container ul.sib-sms-select__list.sib-is-open,
#sib-container ul.sib-sms-select__list.is-open,
#sib-container ul.sib-sms-select__list.open,
#sib-container ul.sib-sms-select__list.active,
#sib-container .sib-sms-select__list.sib-is-open,
#sib-container .sib-sms-select__list.is-open,
#sib-container .sib-sms-select__list.open,
#sib-container .sib-sms-select__list.active,
#sib-container .sib-sms-select.sib-is-open .sib-sms-select__list,
#sib-container .sib-sms-select.is-open .sib-sms-select__list,
#sib-container .sib-sms-select.open .sib-sms-select__list,
#sib-container .sib-sms-select.active .sib-sms-select__list,
#sib-container ul.sib-sms-select__list[style*="block"],
#sib-container .sib-sms-select__list[style*="block"],
#sib-container ul.sib-sms-select__list[style*="flex"],
#sib-container .sib-sms-select__list[style*="flex"] {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 260px !important;
  z-index: 99999 !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  padding: 0 !important;
  margin: 4px 0 0 0 !important;
  list-style: none !important;
  border-radius: 4px !important;
}

.sib-sms-select__list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  font-family: "KMR Melange Semi Light", Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  color: #000000 !important;
  cursor: pointer !important;
  background: transparent !important;
  line-height: 1.3 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.sib-sms-select__list li:last-child {
  border-bottom: 0 !important;
}

.sib-sms-select__list li:hover,
.sib-sms-select__list li.sib-is-highlighted,
.sib-sms-select__list li.sib-is-selected {
  background-color: rgba(0, 61, 255, 0.08) !important;
  color: #003DFF !important;
}

.sib-sms-select__list .sib-flag {
  flex-shrink: 0 !important;
}

.sib-sms-select__list::-webkit-scrollbar {
  width: 6px;
}

.sib-sms-select__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

/* ─── Choices.js select element fallback overrides ─── */
#sib-container .choices {
  margin-bottom: 0 !important;
  font-size: 16px !important;
}

#sib-container .choices.is-disabled .choices__inner,
#sib-container .choices__inner {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tbp-hairline) !important;
  border-radius: 0 !important;
  padding: 12px 24px 12px 0 !important;
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  color: var(--tbp-ink) !important;
  min-height: auto !important;
}

#sib-container .choices.is-focused .choices__inner,
#sib-container .choices.is-open .choices__inner {
  border-bottom-color: var(--tbp-ink) !important;
  box-shadow: none !important;
}

#sib-container .choices__list--single {
  padding: 0 !important;
}

#sib-container .choices__list--single .choices__item {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
}

#sib-container .choices[data-type*="select-one"]::after {
  border-color: var(--tbp-ink) transparent transparent transparent !important;
  right: 6px !important;
  margin-top: -2px !important;
}

#sib-container .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--tbp-ink) transparent !important;
  margin-top: -6px !important;
}

#sib-container .choices__list--dropdown,
#sib-container .choices__list[aria-expanded] {
  background: #fff !important;
  border: 1px solid var(--tbp-hairline) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10) !important;
  margin-top: 4px !important;
  z-index: 1000 !important;
  word-break: normal !important;
}

#sib-container .choices__list--dropdown .choices__list,
#sib-container .choices__list[aria-expanded] .choices__list {
  max-height: 280px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

#sib-container .choices__list--dropdown .choices__list::-webkit-scrollbar,
#sib-container .choices__list[aria-expanded] .choices__list::-webkit-scrollbar {
  width: 6px;
}

#sib-container .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb,
#sib-container .choices__list[aria-expanded] .choices__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

#sib-container .choices__list--dropdown .choices__item--selectable,
#sib-container .choices__list[aria-expanded] .choices__item--selectable {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  color: var(--tbp-ink) !important;
  padding: 10px 14px !important;
}

#sib-container .choices__list--dropdown .choices__item--selectable.is-highlighted,
#sib-container .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--yellow) !important;
  color: #fff !important;
}

#sib-container .choices__input {
  background: var(--tbp-paper-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tbp-hairline) !important;
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── Standard Native Select options ─── */
#sib-container select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding: 12px 40px 12px 14px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#sib-container select.input option {
  font-size: 14px !important;
  font-family: var(--font-sans) !important;
  color: var(--tbp-ink) !important;
  padding: 8px !important;
}

/* ─── Choice Radio Cards (CATEGORY Field) ─── */
#sib-container .sib-radiobutton-group .form__entry {
  background: transparent !important;
}

#sib-container .entry__choice,
#sib-container .tbp-choice {
  margin: 0 !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--tbp-hairline-soft) !important;
  text-indent: 0 !important;
}

#sib-container .entry__choice:last-child,
#sib-container .tbp-choice:last-child {
  border-bottom: 0 !important;
}

#sib-container .entry__choice label,
#sib-container .tbp-choice label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
  text-indent: 0 !important;
}

#sib-container .tbp-choice:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Push native radio input off screen completely */
#sib-container .entry__choice input[type="radio"],
#sib-container .entry__choice input.input_replaced,
#sib-container .tbp-choice input[type="radio"] {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Custom Styled Radio Button inner dot representation */
#sib-container .entry__choice .radio-button,
#sib-container .tbp-choice .radio-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  border: 1px solid var(--tbp-hairline) !important;
  border-radius: 50% !important;
  background: transparent !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  transition: border-color 180ms ease !important;
  flex: 0 0 18px !important;
  box-sizing: border-box !important;
}

#sib-container .entry__choice label:hover .radio-button,
#sib-container .tbp-choice label:hover .radio-button {
  border-color: var(--tbp-ink) !important;
}

/* Checked radio state */
#sib-container .entry__choice input:checked+.radio-button,
#sib-container .entry__choice input.input_replaced:checked+.radio-button,
#sib-container .tbp-choice input:checked+.radio-button {
  border-color: var(--yellow) !important;
}

#sib-container .entry__choice input:checked+.radio-button::after,
#sib-container .entry__choice input.input_replaced:checked+.radio-button::after,
#sib-container .tbp-choice input:checked+.radio-button::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--yellow) !important;
  margin: 0 !important;
}

#sib-container .tbp-choice-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  text-indent: 0 !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sib-container .tbp-choice-title {
  display: block !important;
  font-family: var(--font-sans-semibold) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  color: var(--tbp-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

#sib-container .tbp-choice-desc {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--tbp-graphite) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

#sib-container .tbp-choice-price {
  display: block !important;
  font-family: var(--font-sans-semibold) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tbp-blue) !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

#sib-container .tbp-choice label:has(input:checked) .tbp-choice-title {
  color: var(--yellow) !important;
  text-shadow: 1px 1px 3px black;
}

/* ─── Field spacing ─── */
#sib-container .form__entry.entry_block {
  background: transparent !important;
}

#sib-container>#sib-form>div[style*="padding"] {
  padding: 14px 0 !important;
}

/* ─── Submit button ─── */
#sib-container .sib-form-block__button,
#sib-container button.sib-form-block__button-with-loader {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--black) !important;
  background-color: var(--yellow) !important;
  border: 1px solid var(--yellow) !important;
  border-radius: 999px !important;
  padding: 18px 36px !important;
  margin-top: 16px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background-color 180ms ease, color 180ms ease !important;
  width: auto !important;
  min-width: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#sib-container .sib-form-block__button *,
#sib-container button.sib-form-block__button-with-loader * {
  color: var(--black) !important;
}

#sib-container .sib-form-block__button:hover {
  background-color: var(--white) !important;
  border-color: var(--yellow) !important;
  color: var(--black) !important;
}

#sib-container .sib-form-block__button:hover * {
  color: var(--black) !important;
}

#sib-container>#sib-form>div:has(> .sib-form-block > .sib-form-block__button),
#sib-container>#sib-form>div>.sib-form-block:has(> .sib-form-block__button) {
  text-align: left !important;
}

#sib-container .sib-form-block__button .icon path {
  fill: currentColor !important;
}

/* ─── Notification panels (success / error) ─── */
#error-message.sib-form-message-panel,
#success-message.sib-form-message-panel {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  border-left-width: 2px !important;
  padding: 16px 20px !important;
  max-width: 720px !important;
  margin: 0 auto 24px !important;
  display: none;
}

#error-message.sib-form-message-panel {
  color: var(--tbp-ink) !important;
  background-color: #fcebeb !important;
  border-left-color: #B23A2A !important;
}

#success-message.sib-form-message-panel {
  color: var(--tbp-ink) !important;
  background-color: #eaf1ff !important;
  border-left-color: var(--tbp-blue) !important;
}

.sib-form-message-panel .sib-icon {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* ─── Inline validation error labels ─── */
#sib-container .entry__error.entry__error--primary {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: #B23A2A !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-top: 6px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* Live validation border triggers */
#sib-container input.input.tbp-invalid,
#sib-container textarea.input.tbp-invalid,
#sib-container select.input.tbp-invalid {
  border-bottom-color: #B23A2A !important;
  border-bottom-width: 1.5px !important;
}

#sib-container .sib-sms-select.tbp-invalid .sib-sms-select__phone-number,
#sib-container .sib-sms-input.tbp-invalid .input,
#sib-container .sib-sms-field.tbp-invalid .sib-sms-select__phone-number {
  border-bottom-color: #B23A2A !important;
  border-bottom-width: 1.5px !important;
}

#sib-container .tbp-radio-group-invalid .tbp-choice .radio-button {
  border-color: #B23A2A !important;
}

#sib-container .tbp-field-error {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #B23A2A !important;
  margin-top: 6px !important;
  padding-left: 14px !important;
}

#sib-container .tbp-field-error:empty {
  display: none;
}

/* ─── Custom cursor overrides on interactive form fields ─── */
/* ─── Custom cursor overrides on interactive form fields ─── */
.wrapper-slide-in-flobber,
.wrapper-slide-in-flobber * {
  cursor: default !important;
}

.wrapper-slide-in-flobber button,
.wrapper-slide-in-flobber a,
.wrapper-slide-in-flobber [role="button"],
.wrapper-slide-in-flobber select,
.wrapper-slide-in-flobber .choices,
.wrapper-slide-in-flobber .choices__inner,
.wrapper-slide-in-flobber .choices__list--dropdown .choices__item--selectable,
.wrapper-slide-in-flobber .choices__list[aria-expanded] .choices__item--selectable,
.wrapper-slide-in-flobber .tbp-choice,
.wrapper-slide-in-flobber .tbp-choice * {
  cursor: pointer !important;
}

.wrapper-slide-in-flobber input[type="text"],
.wrapper-slide-in-flobber input[type="email"],
.wrapper-slide-in-flobber input[type="tel"],
.wrapper-slide-in-flobber input[type="number"],
.wrapper-slide-in-flobber textarea,
.wrapper-slide-in-flobber .choices__input {
  cursor: text !important;
}

/* ─── Lock scrolling wrapper classes inside Choices ─── */
body.tbp-dropdown-open,
body.tbp-dropdown-open html {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

body.tbp-dropdown-open .w-slider,
body.tbp-dropdown-open [class*="panel"],
body.tbp-dropdown-open [class*="drawer"],
body.tbp-dropdown-open [class*="modal"] {
  overflow: hidden !important;
}

/* Suppress site cursor within form bounds */
body.tbp-form-hover .custom-cursor {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   SECTION PARALLAX VERTICAL SLIDER
   ========================================================================== */
.tys-parallax-section {
  padding: 0;
  margin: 0;
  position: relative;
  background-color: var(--black);
  width: 100%;
  z-index: 2;
}

.list-mobile-horiz {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.parallax-item {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.parallax-featured {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* Remove overlay to match the clean bright look of the reference */
.parallax-overlay {
  display: none;
}

.title-descript-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Cover full height to position children top/bottom */
  z-index: 2;
  color: var(--white);
  pointer-events: none;
  will-change: transform;
}

.h1-parallax {
  position: absolute;
  top: 10%;
  left: 5%;
  font-family: 'Playfair Display', serif;
  font-size: 8rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  max-width: 80%;
}

.descript-parallax {
  position: absolute;
  bottom: 8%;
  left: 5%;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

/* Chooser / Sidebar Nav */
.parallax-chooser-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 120px;
  /* Fixed width on right */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Let clicks pass except on thumbnails */
}

.parallax-chooser {
  pointer-events: auto;
  position: relative;
  padding-right: 40px;
}

.chooser {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chooser-opt {
  width: 70px;
  height: 70px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.3s ease;
  border: none;
}

.chooser-opt:hover {
  transform: scale(1.05);
}



.highliter-chooser {
  position: absolute;
  left: -20px;
  width: 3px;
  height: 70px;
  background-color: var(--yellow);
  /* Reference blue accent */
  border-radius: 2px;
  top: 0;
  will-change: transform;
}

/* SECTION PARALLAX VERTICAL SLIDER CSS END */
/* ==========================================================================
   SECTION PORTFOLIO ARCHIVE (Hover Reveal)
   ========================================================================== */
.portfolio-archive {
  position: relative;
  background-color: #f7f7f7;
  /* Light gray background */
  z-index: 10;
  /* Ensures it scrolls OVER the pinned parallax section */
  padding: 80px 0 40px;
}

.smalltitle-block {
  margin-bottom: 40px;
}

.bold-subtitle {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 3.25em;
  color: var(--black);
}

.portfolio-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Left Column: Titles */
.collection-list-3 {
  display: flex;
  flex-direction: column;
}

.portfolio-name-wrap {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.portfolio-name-wrap:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.portfolio-ar-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35px 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--black);
  transition: all 0.3s ease;
}

.portfolio-a-title {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 400;
  margin: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.arrow-up-hover-pf {
  font-size: 1.5rem;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.3s ease;
  color: var(--black);
  /* text-shadow: 2px 2px 5px #ffc107; */
}

/* Hover States for left column */
.portfolio-ar-title:hover .portfolio-a-title {
  color: var(--yellow);
  transform: translateX(10px);
}

.portfolio-ar-title:hover .arrow-up-hover-pf {
  opacity: 1;
  transform: translateX(0);
}

/* Active State */
.portfolio-name-wrap.is-active .portfolio-a-title {
  color: var(--yellow);
  text-shadow: 2px 2px 5px black;
  -webkit-text-stroke: 1px #feee00;
}

.mobile-portfolio-image-wrap {
  display: none;
}


/* Right Column: Images */
.portfolio-stage {
  position: sticky;
  top: 120px;
  height: 70vh;
  border-radius: 4px;
  overflow: hidden;
}

.stage-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.stage-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.stage-item.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.source-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom CTA */
.white-cta-line {
  /* margin-top: 80px; */
  background-color: var(--white);
  border-radius: 50px;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.white-cta-line:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.cta-text {
  font-family: var(--font-sans);
  /* font-size: 1.1rem; */
  font-weight: 500;
  color: var(--black);
  margin: 0;

}

.button-primary {
  background-color: var(--yellow);
  color: var(--white);
  padding: 12px 30px;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.white-cta-line:hover .button-primary {
  background-color: var(--white);
}

/* ==========================================================================
   SECTION: SOCIALS LATEST
   ========================================================================== */
.socials-wrap {
  padding: 80px 0;
  background-color: var(--white);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.socials-wrap .smalltitle-block.wide {
  margin-bottom: 40px;
}

.socials-wrap .bold {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


.section-ig-posts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.ig-post-square {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

.ig-post-square:hover {
  transform: scale(1.02);
  filter: brightness(0.92);
}

/* ==========================================================================
   SECTION: FOOTER
   ========================================================================== */
.footer-tbp {
  /* background-color: #a0a8a8; */
  /* Mid-gray to match the reference site */
  background: var(--black);
  padding: 0 0 20px;
  color: var(--white);
  position: relative;
  z-index: 10;
}

.footer-wrap-s1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 70px;
  padding: 0 5%;
}


.footer-h1 {
  font-family: var(--font-display);
  font-size: 8vw;
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  margin: 0;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
}

.arrows-footer {
  width: 2.8vw;
  height: auto;
  display: block;
}

.arrows-footer.right-arrow {
  transform: scaleX(-1);
}

.footer-wrap-s2n3 {
  padding: 0 5%;
  margin-bottom: 50px;
}

.footer-wrap-s2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.15); */
  padding-bottom: 18px;
  margin-bottom: 25px;
}

.link-footer-type1 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.link-footer-type1:hover {
  color: var(--yellow);
}

.footer-wrap-s3 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.footer-ins-w3-left {
  display: flex;
  gap: 20px;
}

.link-footer-type2 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.link-footer-type2:hover {
  color: var(--yellow);
}

.image-13 {
  width: 140px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hq-2 {
  display: none;
}

.footer-ins-w3-right {
  display: flex;
  gap: 25px;
  justify-content: flex-end;
}

.footer-type3 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.footer-wrap-s4 {
  /* margin-top: 80px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border-top: 1px solid rgba(255, 255, 255, 0.15); */
  padding: 50px 5% 0;
}

.image-14 {
  /* width: 100%;
    max-width: 1200px; */
  height: auto;
  /* margin-bottom: 40px; */
  /* filter: brightness(0) invert(1); */
  /* Turns logo solid white */
}

.footer-last-text {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pp-disc-termsnc {
  display: flex;
  gap: 25px;
}

.footer-type3.last,
.link-footer-type2.last {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

::selection {
  background: #003DFF;
  color: #fff;
}

/* Highlight Link */
.scroll-morph-section .highlight-link {
  color: var(--yellow) !important;
  font-weight: 500;
  text-shadow: 2px 2px 5px black;
  -webkit-text-stroke: 1px #feee00;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.scroll-morph-section .highlight-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #003DFF;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Track styles */
.scroll-morph-section .images-track {
  width: max-content;
  gap: 25px;
  will-change: transform;
}

/* UNIVERSAL SCROLL-MORPH LAYOUT (All Screen Sizes) */
.scroll-morph-section {
  position: relative;
  height: 130vh;
  /* scroll duration */
  background-color: #F8F9FA;
  padding: 0 !important;
}

.scroll-morph-section .sticky-container {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}



.scroll-morph-section .slide-viewport {
  overflow: hidden;
}

.scroll-morph-section .slide-card {
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  cursor: pointer;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Shared image hover styling */
.scroll-morph-section .slide-img {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-morph-section .slide-card:hover .slide-img {
  transform: scale(1.06);
}

/* ===== TRAJECTORY SECTION ===== */

/* Scope helpers / custom utilities under the section class */
.our-trajectory-sec .cursor-pointer {
  cursor: pointer;
}

.our-trajectory-sec .shadow-hover {
  transition: box-shadow 0.3s ease;
}

.our-trajectory-sec .shadow-hover:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.our-trajectory-sec .btn-blue {
  background-color: var(--yellow) !important;
  border-color: var(--yellow) !important;
  color: var(--black) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.our-trajectory-sec .btn-blue:hover {
  background-color: var(--white) !important;
  border-color: var(--yellow) !important;
}

/* Large responsive numbers */
.our-trajectory-sec .hd-number {
  font-size: clamp(5rem, 13vw, 10rem);
  letter-spacing: -0.03em;
  display: block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease;
  transform: translateY(0);
  opacity: 1;
}

/* Description copy block */
.our-trajectory-sec .hd-text {
  max-width: 38ch;
  font-size: 0.85rem;
  line-height: 1.65;
  display: block;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease;
  transform: translateY(0);
  opacity: 1;
}

/* Vertical slide translation state helpers */
.our-trajectory-sec .hd-number.slide-up-out {
  transform: translateY(-100%);
  opacity: 0;
}

.our-trajectory-sec .hd-number.slide-up-in-start {
  transition: none !important;
  transform: translateY(100%);
  opacity: 0;
}

.our-trajectory-sec .hd-text.slide-up-out {
  transform: translateY(-30px);
  opacity: 0;
}

.our-trajectory-sec .hd-text.slide-up-in-start {
  transition: none !important;
  transform: translateY(30px);
  opacity: 0;
}

/* Gradient border capsule styling */
.our-trajectory-sec .white-cta-line {
  position: relative;
  background: transparent !important;
  border: none !important;
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.our-trajectory-sec .white-cta-line::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  /* Border thickness */
  /* background: linear-gradient(135deg, #003DFF 0%, #7da2ff 50%, #f0f4ff 100%); */
  border-radius: inherit;
  z-index: -2;
}

.our-trajectory-sec .white-cta-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  border-radius: inherit;
  z-index: -1;
}

/* Ensure child content sits above the pseudo-element layers */
.our-trajectory-sec .white-cta-line>* {
  position: relative;
  z-index: 2;
}

/* ===== SERVICES SECTION ===== */

.service-section {
  height: 400vh;
}

/* Showcase card — drive sizing purely via CSS, not Bootstrap ratio */
.service-section .service-showcase-card {
  aspect-ratio: 1 / 1 !important;
  position: relative;
  overflow: hidden;
  width: 100% !important;
  max-width: 527px !important;
  height: 527px !important;
  max-height: 527px !important;
  border-radius: 16px;
  margin: 0 auto 0 0;
}

.service-section .service-showcase-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

.service-section .text-primary {
  color: var(--black) !important;
}

.service-section .bg-primary {
  background-color: var(--yellow) !important;
}

/* Typography Clamps */
.service-section #service-heading {
  /* font-size: clamp(0.8rem, 2.2vw, 1.5rem); */
  font-size: 2em;

}

.service-section #service-showcase-title {
  /* font-size: clamp(1.1rem, 2vw, 1.5rem); */
  font-size: 3em;
  line-height: normal;
  margin: 0 0 40px 0;
  position: relative;
  z-index: 2;
  color: var(--black);
  font-weight: 600;
}

/* Main card zoom effects */
.service-section #service-showcase-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transition: opacity 0.35s ease-in-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.service-section .service-showcase-card:hover #service-showcase-img {
  transform: scale(1.05) !important;
}

/* Service link interactive icon shift */
.service-section #service-link svg {
  transition: transform 0.3s ease;
}

.service-section #service-link:hover svg {
  transform: translate(2px, -2px);
}

/* Service thumbnails hover and opacity */
.service-section .service-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: visible;
  position: relative;
  opacity: 0.45;
  background-color: #E5E5E5;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.service-section .service-thumb:hover {
  transform: scale(1.06);
}

.service-section .service-thumb.active {
  opacity: 1 !important;
}

.service-section .service-thumb-tooltip {
  display: none;
}



/* Indicator line (aligned relative to track container) */
.service-section #service-indicator-line {
  position: absolute;
  left: -10px;
  width: 2px;
  background-color: var(--yellow) !important;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Responsive adjustments */


/* Mobile/Tablet Swiper Styles */
.service-section .services-swiper {
  width: 100%;
  padding: 0 0 24px;
}

.service-section .service-slide {
  display: flex;
  flex-direction: column;
  height: auto;
  /* let height grow based on content */
}


/* ==========================================================================
   ABOUT US PAGE STYLES
   ========================================================================== */
.image-header-txt {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
  background-color: #000;
}

.image-header-txt .image-21 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.heading-13 {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 5vw;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  margin: 0;
  letter-spacing: -0.02em;
  z-index: 2;
  line-height: 1;
}

/* Custom styling for the blue dot above the letter B */
.b-dot-container {
  position: relative;
  display: inline-block;
}

/* ==========================================================================
   ABOUT SECTION 2: STATEMENT & MANIFESTO
   ========================================================================== */
.section-2-about {
  /* padding: 30px 8%; */
  padding-left: 25px;
  padding-top: 80px;
  padding-bottom: 72px;
  padding-right: 25px;
  background-color: #f7f7f7;
  width: 100%;
}

.heading-copy-sec-1 {
  font-family: var(--font-sans);
  font-size: 3.3em;
  /* responsive size matching mockups */
  font-weight: 400;
  line-height: 1.25;
  color: #000000;
  margin: 0 0 100px 0;
  letter-spacing: -0.02em;
  max-width: 85%;
}

.heading-copy-sec-1 .text-span-19 {
  color: var(--yellow);
  text-shadow: 1px 1px 3px black;
  font-weight: 500;
}

.heading-copy-sec-1 .text-span-31 {
  font-weight: 500;
}

.shaping-only-mobile {
  display: none;
  /* hidden on desktop */
}

/* Two-column layout with centered blue dot and right-aligned text block */
.grid-see-more {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 100px;
  width: 100%;
  /* margin-top: 60px; */
  padding-right: 8vw;
}

.text-about {
  width: 38%;
  /* right 38% aligned */
  font-family: "KMR Melange Semi Light", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: -0.01em;
}

.text-about .bold-span {
  font-weight: 700;
  color: #000000;
}

/* ==========================================================================
   ABOUT SECTION 3: PILLARS VERTICAL SLIDER (DESKTOP)
   ========================================================================== */
.pillars-container {
  background-color: #f7f7f7;
  width: 100%;
  padding: 20px 0 !important;
}

.philosophy-block {
  padding: 100px 8% 60px;
  width: 100%;
}

.pillars-copy {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  max-width: 650px;
}

.pillars-sticky {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pillars {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.pillar-step {
  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 6fr 4fr;
  z-index: 1;
  background: linear-gradient(to right, #d2d5d6 60%, #ffffff 60%);
}

.pillar-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.divider-centered {
  position: absolute;
  left: 35%;
  top: 12.5%;
  width: 1px;
  height: 75%;
  background-color: rgba(255, 255, 255, 0.15);
}

.flobber-pillar {
  position: absolute;
  left: 35%;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-pillar {
  max-width: 75%;
  max-height: 75%;
  object-fit: contain;
}

.pillar-content {
  padding: 12vh 5% 12vh 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
}

.h2-pillar {
  font-family: var(--font-sans);
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.15;
  color: #000000;
  margin: 0;
  letter-spacing: -0.02em;
}

.h2-pillar .text-span-24,
.h2-pillar .text-span-29 {
  color: var(--yellow);
  text-shadow: 1px 1px 3px black;
}

.pillar-text-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: auto;
}

.pillars-text {
  font-family: "KMR Melange Semi Light", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
  max-width: 85%;
}

.pillars-text .text-span-25,
.pillars-text .text-span-26,
.pillars-text .text-span-27 {
  font-weight: 600;
  color: #000000;
}

.button-wrap {
  width: 55px;
  height: 55px;
  min-width: 55px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  cursor: pointer;
}

.button-wrap:hover {
  transform: scale(1.05);
  border-color: #003DFF;
}

.arr-pillars {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.button-wrap:hover .arr-pillars {
  transform: translate(2px, -2px);
}

.pillar-titles {
  position: fixed;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 5;
  /* opacity: 0; */
  visibility: hidden;
}

.h2-pillar-title {
  font-family: var(--font-sans);
  font-size: 3.5em;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(95, 88, 88, 0.589);
  text-transform: capitalize;
  margin: 0;
  transition: color 0.3s ease;
  cursor: pointer;
}

.h2-pillar-title.is-active {
  color: #ffffff;
}

.our-pillars-title-top {
  position: fixed;
  left: 4%;
  top: 8%;
  z-index: 5;
  /* opacity: 0; */
  visibility: hidden;
}

.our-pillars-title-top .text-block-9 {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.mobile-steper {
  display: none;
}

.name-pillar {
  display: none;
}

/* ==========================================================================
   ABOUT SECTION 4: APPROACH & CULTURE V2
   ========================================================================== */
.approach-culture-section {
  position: relative;
  z-index: 10;
  background-color: #f7f7f7;
  width: 100%;
  padding: 0;
}

.approach-culture-v2 {
  background-color: #f7f6f5;
  width: 100%;
  padding: 48px 2%;
  position: relative;
  z-index: 10;
}

.item-a-c {
  display: grid;
  grid-template-columns: 2.5fr 4.8fr 4.7fr;
  gap: 0;
  align-items: stretch;
  width: 100%;
  background-color: #ffffff;
  padding: 0;
  height: 540px;
}

.textblock-a-c {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 24px;
  height: 100%;
  margin: 0;
  padding: 0 0 40px 40px;
  box-sizing: border-box;
}

.h2-a-c {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1.35em;
  font-weight: 500;
  color: rgba(6, 6, 6, 0.15);
  margin: 0;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 12px;
}

.h2-a-c.selected {
  color: #060606;
  font-weight: 600;
}


.a-c-txt-below-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.a-c-txt-below {
  display: none;
  opacity: 0;
  width: 100%;
  max-width: 480px;
}

.a-c-txt-below.is-active {
  display: block;
  opacity: 1;
}

.subtitle-a-c {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.35;
  color: #111111;
  margin: 0 0 20px 0;
  letter-spacing: -0.015em;
}

.text-a-c {
  font-family: "KMR Melange Semi Light", Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}

.text-a-c strong {
  color: #000000;
  font-weight: 600;
}

.text-span-28 {
  color: var(--yellow);
  text-shadow: 1px 1px 3px black;
  font-weight: 600;
}

.text-span-blue {
  color: #3b82f6;
  font-weight: 500;
}

.image-holder-a-c {
  position: relative;
  height: calc(100% - 48px);
  max-height: 500px;
  aspect-ratio: 1 / 1;
  margin: 24px 24px 24px auto;
  align-self: center;
  justify-self: end;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  box-sizing: border-box;
}

.img-slide-a-c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.img-slide-a-c.is-active {
  opacity: 1;
  visibility: visible;
}



/* CTA Wrapper & Line Positioning */
.cta-wrapper {
  padding: 0px 2% 0;
  background-color: #f7f7f7;
  width: 100%;
}

.white-cta-line.special-marg {
  margin: 0;
  width: 100%;
  border: 1px solid rgba(0, 51, 255, 0.15);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 100px !important;
}

.white-cta-line.special-marg:hover {
  border-color: var(--yellow);
}

.heading-20 {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.25rem;
  /* font-weight: 700; */
  color: var(--black);
  margin: 0;
  letter-spacing: -0.5px;
}

/* ==========================================================================
   ABOUT SECTION 5: TEAM GRID
   ========================================================================== */
.section-team {
  background-color: #f7f7f7;
  width: 100%;
  padding: 80px 8% 80px;
  position: relative;
  z-index: 10;
}

.container-team {
  width: 100%;
}

.grid-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  width: 100%;
}

.teammate-item {
  position: relative;
  width: 100%;
  /* aspect-ratio: 1 / 1.25; */
  cursor: pointer;
  overflow: visible;
}

.teammate-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border-radius: 12px;
  background-color: #e5e8e8;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.teammate-item:hover .teammate-img {
  transform: scale(1.03);
}

.background-black {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 40%);
  opacity: 0;
  border-radius: 12px;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.teammate-item:hover .background-black {
  opacity: 1;
}

.teammate-pill {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) scale(0.9);
  background-color: var(--yellow);
  color: var(--black);
  padding: 8px 18px;
  border-radius: 24px;
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 51, 255, 0.25);
}

.teammate-item:hover .teammate-pill {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 50%) scale(1);
}

.team-footer-text {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 15px;
  color: rgba(6, 6, 6, 0.5);
  text-align: center;
  margin-top: 60px;
  width: 100%;
}

/* ==========================================================================
   ABOUT SECTION 6: OFFICES & CAREERS
   ========================================================================== */
.section-offices-careers {
  background-color: #f7f7f7;
  width: 100%;
  padding: 0 2% 100px;
  position: relative;
  z-index: 10;
  padding-top: 30px;
}

.container-offices {
  width: 100%;
}

/* Offices Header */
.offices-header {
  margin-bottom: 50px;
}

.offices-header-line {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
}

.offices-header-title {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #111111;
  display: block;
  padding: 16px 0 14px;
}

.offices-header-blue-line {
  width: 100%;
  height: 1.5px;
  background-color: rgba(0, 0, 0, 0.15);
}

/* Offices Grid */
.grid-offices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: 100%;
  margin-bottom: 80px;
}

.office-item {
  display: flex;
  flex-direction: column;
}

.office-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background-color: #e5e8e8;
  margin-bottom: 16px;
}

.office-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.office-item:hover .office-img {
  transform: scale(1.04);
}

.office-name {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.625em;
  font-weight: 500;
  color: #111111;
  margin: 0;
  line-height: 1.3;
}

.office-time {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(6, 6, 6, 0.45);
  margin-top: 2px;
  display: block;
}

/* Careers Row */
.careers-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.careers-label {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #111111;
  min-width: 70px;
  flex-shrink: 0;
}

.careers-unified-card {
  display: flex;
  flex: 1;
  background-color: #ffffff;
  border-radius: 28px;
  padding: 32px 40px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  gap: 0;
  align-items: stretch;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.career-listing {
  flex: 1;
  padding: 0 36px;
}

.career-listing:first-child {
  padding-left: 0;
}

.career-listing:last-child {
  padding-right: 0;
}

.career-divider {
  width: 1px;
  background-color: rgba(0, 0, 0, 0.08);
  align-self: stretch;
  flex-shrink: 0;
  margin: 4px 0;
}

.career-title {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #111111;
  margin: 0 0 8px;
}

.career-skills {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(6, 6, 6, 0.55);
  line-height: 1.5;
  margin: 0 0 18px;
}

.career-apply-btn {
  display: inline-block;
  background-color: var(--yellow);
  color: var(--black);
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 22px;
  border-radius: 24px;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.career-apply-btn:hover {
  background-color: var(--white);
  transform: scale(1.04);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  color: var(--black);
  border: 1px solid var(--yellow);
}

/* ==========================================================================
   TBP · Portfolio Page & Filtering Custom Styles
   ========================================================================== */

.main-portfolio-wrapper {
  margin-bottom: 50px;
  margin-left: 25px;
  margin-right: 25px;
}

/* Grid layout for portfolio items */
.collection-list-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.link-case-study {
  cursor: pointer;
  flex-flow: column;
  display: flex;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.case-study-img {
  aspect-ratio: 4 / 5;
  /* default aspect ratio, will be updated by class rules */
  background-position: 50%;
  background-size: cover;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.cs-bg-holder {
  background-position: 50%;
  background-size: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  inset: 0%;
  transform: scale(1);
}

.link-case-study:hover .cs-bg-holder {
  transform: scale(1.05);
}

.case-study-title-n-meta {
  justify-content: space-between;
  margin-top: 16px;
  display: flex;
  font-family: "KMR Melange Book", Arial, sans-serif;
  color: var(--black);
  display: none;
}

.cs-title-pf {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.cs-industry {
  grid-column-gap: 4px;
  grid-row-gap: 0px;
  align-items: center;
  display: flex;
  font-size: 0.9rem;
  color: rgba(6, 6, 6, 0.55);
}

.cs-industry-n,
.cs-year-n {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
}

.cs-year-n.comma {
  padding-right: .2em;
}

/* Header and Filter styling */
.wrapper-main-filter {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 140px 25px 60px;
  display: flex;
}

.portfolio-header {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 6vw;
  font-weight: 300;
  margin: 0;
  line-height: 0.9;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.portfolio-header .text-span-46 {
  display: inline-block;
  width: 0.1em;
}

.cont-filters {
  z-index: 12;
  position: relative;
}

.industry-form-title {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(6, 6, 6, 0.35);
  margin-bottom: 12px;
  letter-spacing: 1.5px;
}

.form-2 {
  grid-column-gap: 24px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  display: grid;
}

.filter_radio-item {
  color: rgba(6, 6, 6, 0.25);
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
}

.filter_radio-item:hover {
  color: rgba(6, 6, 6, 0.5);
}

.filter_radio-item.is-list-active {
  color: var(--primary-blue);
}

.radio-button {
  display: none;
}

.info-portfolio-only-mobile {
  display: none;
}

/* Custom cursor with text follow bubble overrides */
.custom-cursor.with-text {
  width: auto !important;
  height: auto !important;
  border-radius: 40px !important;
  background-color: var(--yellow);
  border: none !important;
  opacity: 1 !important;
  transition: background-color 0.25s ease, opacity 0.15s ease !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.custom-cursor-text {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.1s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 10px !important;
}

.custom-cursor.with-text .custom-cursor-text {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   Lenis Smooth Scroll Library Core Styles
   ========================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis-stopped {
  overflow: hidden;
}

.lenis-scrolling iframe {
  pointer-events: none;
}

/* ==========================================================================
   PORTFOLIO DETAIL PAGE STYLES (PORTED FROM HTML STYLE TAG)
   ========================================================================== */
.divider-service-meta:last-child {
  display: none;
}

.vimeo-bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vimeo-bg iframe {
  position: absolute;
  pointer-events: none;
  border: 0;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.case-media,
[class*="case-media-"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.case-media .media-slot,
[class*="case-media-"] .media-slot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.case-media.is-single .media-slot,
[class*="case-media-"].is-single .media-slot {
  aspect-ratio: 16/9;
}

.problem-paragraph,
.solution-paragraph {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cs-textblock-grid.js-readmore .problem-paragraph,
.cs-textblock-grid.js-readmore .solution-paragraph {
  transition: max-height 0.6s cubic-bezier(.2, .8, .2, 1);
  will-change: max-height;
}

.cs-textblock-grid .read-more-clickable {
  margin-top: -0.8em;
  transition: margin-top 0.6s cubic-bezier(.2, .8, .2, 1);
}

.cs-textblock-grid.is-open .read-more-clickable {
  margin-top: 0.5rem;
}

.cs-textblock-grid .arrow-read-rotate {
  transition: transform 0.3s ease;
}

.cs-textblock-grid.is-open .arrow-read-rotate {
  transform: rotate(-45deg);
}

.cs-textblock-grid.js-readmore:not(.is-open) .problem-paragraph,
.cs-textblock-grid.js-readmore:not(.is-open) .solution-paragraph {
  position: relative;
  padding-right: 1.2em;
}

.cs-textblock-grid.js-readmore:not(.is-open) .problem-paragraph::after,
.cs-textblock-grid.js-readmore:not(.is-open) .solution-paragraph::after {
  content: '…';
  position: absolute;
  right: 0.2em;
  bottom: 0.2em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.cs-textblock-grid.js-readmore.is-open .problem-paragraph::after,
.cs-textblock-grid.js-readmore.is-open .solution-paragraph::after {
  opacity: 0;
}

.read-more-ins {
  cursor: pointer;
}

.portfolio-cta:hover .cta-link-line {
  width: 100%;

}

.link-cta-next-case:hover .cta-link-line {
  width: 100%;
}

.result-two-column {
  position: relative;
}

.result-two-column .result-title {
  width: 100%;
  margin-bottom: 1.5rem;
}

.result-two-column .result-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Scroll Knob Layout & Style */
#scroll-knob {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 850;
  display: none;
  pointer-events: auto;
  font-family: "KMR Melange Book", Arial, sans-serif;
}

#scroll-knob:hover,
#scroll-knob:has(.lines-wrapper:hover),
#scroll-knob:has(.sections-tooltip:hover) {
  z-index: 860;
}

#scroll-knob .knob-content {
  position: relative;
  padding: 24px 10px 24px 0px;
  background: #edd5bc;
  border-radius: 0 12px 12px 0;
}

#scroll-knob .knob-content::before,
#scroll-knob .knob-content::after {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

#scroll-knob .knob-content::before {
  left: -12px;
  top: -36px;
  border-left: 12px solid #F7F6F5;
  border-top: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: rotate(-45deg);
}

#scroll-knob .knob-content::after {
  left: -12px;
  bottom: -36px;
  border-left: 12px solid #F7F6F5;
  border-top: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: rotate(45deg);
}

#scroll-knob .lines-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
}

.knob-line {
  width: 16px;
  height: 2px;
  background: #000000;
  opacity: 0.2;
  transition: all 0.3s ease;
  cursor: pointer;
}

.knob-line.active {
  background: #003DFF;
  opacity: 1;
}

.knob-line:not(.active):hover {
  opacity: 0.5;
}

#scroll-knob .sections-tooltip {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 2;
  white-space: nowrap;
}

#scroll-knob .lines-wrapper:hover .sections-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sections-tooltip .section-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sections-tooltip .section-item {
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #000000;
  opacity: 0.3;
}

.sections-tooltip .section-item:hover {
  background-color: #EBEAE9;
  opacity: 0.6;
}

.sections-tooltip .section-item.active {
  color: #003DFF;
  opacity: 1;
}

.sections-tooltip .section-item.active:hover {
  background-color: #D2DAF7;
  opacity: 1;
}

/* ==========================================================================
   NAVBAR LIGHT PAGES AND ACTIVE MOBILE MENU OVERRIDES
   ========================================================================== */
.navbar-light-page .line-nav-m {
  background-color: var(--white) !important;
}

.hamburger-menu.active .line-nav-m {
  background-color: var(--white) !important;
}

.navbar-light-page .tbp-logo-navbar-mobile {
  filter: none !important;
}

.navbar-light-page .tbp-logo-navbar {
  filter: none !important;
}

/* Active scrolled state for the mobile navbar on the home page */
/* .navbar-tbp.scrolled .line-nav-m {
  background-color: #111111 !important;
} */

.navbar-tbp.scrolled .tbp-logo-navbar-mobile {
  filter: none !important;
}

/* Mobile menu close button inside overlay */
.mobile-menu-close {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  background: none;
  border: none;
  padding: 0;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 1.5px;
  background-color: #111111;
  border-radius: 2px;
}

.mobile-menu-close::before {
  transform: rotate(45deg);
}

.mobile-menu-close::after {
  transform: rotate(-45deg);
}

/* Journal page css starts here */
.journal-main-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #fafafa;
  user-select: none;
  -webkit-user-select: none;
}

/* Custom Follow Cursor Bubble */
.journal-custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 76px;
  height: 76px;
  background-color: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(0, 61, 255, 0.2);
}

.journal-custom-cursor.active {
  transform: translate(-50%, -50%) scale(1);
}

.journal-cursor-text {
  color: var(--black);
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

/* Desktop Draggable Viewport */
.journal-desktop-int {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: grab;
  overflow: hidden;
}

.journal-desktop-int:active {
  cursor: grabbing;
}

.journal-grid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* Individual Grid Item Cells */
.journal-grid-item {
  position: absolute;
  width: 480px;
  height: 640px;
  margin: 0;
  padding: 0;
  display: block;
  box-sizing: border-box;
  will-change: transform;
}

/* Scoped Inner Image Plane Container */
.journal-image-plane {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  margin: 0;
  overflow: hidden;
  background-color: #e5e5e5;
  border-radius: 0px;
  /* Sharp corners */
  box-shadow: none;
  /* No shadow */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.journal-image-plane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scoped Hover Animations */
.journal-image-plane:hover {
  transform: scale(1.025);
  z-index: 10;
}

.journal-image-plane:hover img {
  transform: scale(1.07);
}

/* Slide-up Text Overlay Card */
.journal-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  pointer-events: none;
}

.journal-image-plane:hover .journal-item-overlay {
  opacity: 1;
  transform: translateY(0);
}

.journal-item-title {
  color: #ffffff;
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.1px;
}

/* Mobile Layout graceful degradation */
.journal-mobile-int {
  display: none;
  padding-top: 120px;
  padding-bottom: 80px;
  z-index: 10;
  position: relative;
}

.journal-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.journal-mobile-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: #ffffff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}

.journal-mobile-item:hover {
  transform: translateY(-4px);
}

.journal-mobile-item img.journal-mobile-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.mobile-item-title {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.2px;
}

/* Journal page css ends here */

/* --- Home Page Loader transition styles --- */
.loader-hidden .intro-tbp-ontop {
  display: none !important;
}

.intro-tbp-ontop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--black);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-tbp-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 40px;
  gap: 40px;
}

.text-intro {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 2.5vw;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(30px);
}

.intro-in-wrapper {
  position: relative;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.introflips {
  position: relative;
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, width, height;
}

.image-flobber-flip,
.image-flobber-fliplast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}

.image-flobber-flip.fb-active,
.image-flobber-fliplast.fb-active {
  opacity: 1;
  pointer-events: auto;
}

/* Methodology Section */
.services-page .methodology-section {
  padding: 3rem 2.5rem 5rem;
  background-color: #f7f6f5;
}


.services-page .methodology-section .methodology-label {
  font-family: var(--font-sans-bold);
  font-size: 0.95rem;
  letter-spacing: -0.2px;
}

.services-page .methodology-section .methodology-heading {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  letter-spacing: -1px;
}

/* Dimensions Grid Container */
.services-page .methodology-section .dimensions-grid {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual Card */
.services-page .methodology-section .dimension {
  height: 520px;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.4s ease;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 2rem 2.5rem;
}

.services-page .methodology-section .dimension:last-child {
  border-right: none;
}

/* Subtle hover scale for non-expanded cards */
.services-page .methodology-section .dimension:hover:not(.expanded) {
  background-color: rgba(255, 255, 255, 0.2);
}

.services-page .methodology-section .dimension.expanded {
  background-color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

.services-page .methodology-section .dimension>.d-flex {
  margin-bottom: 0.75rem !important;
}

/* Plus/Minus Icon toggling */
.services-page .methodology-section .plus-icon {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: 1rem;
}

.services-page .methodology-section .plus-icon::before,
.services-page .methodology-section .plus-icon::after {
  content: '';
  position: absolute;
  background-color: var(--black);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Horizontal line */
.services-page .methodology-section .plus-icon::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
}

/* Vertical line */
.services-page .methodology-section .plus-icon::after {
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
}

.services-page .methodology-section .dimension.expanded .plus-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Dimension Image (Shutter cover) */
.services-page .methodology-section .dimension-img {
  background-size: cover;
  /* background-repeat: no-repeat; */
  background-position: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide image UP out of view (Shutter opens) */
.services-page .methodology-section .dimension.expanded .dimension-img {
  transform: translateY(-100%);
}

/* Dimension Text Content (Revealed inside shutter) */
.services-page .methodology-section .dimension-body {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* When card is expanded, reveal body with slight slide-up */
.services-page .methodology-section .dimension.expanded .dimension-body {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile & Tablet Responsiveness */


/* Scroll-Linked Ticker Image Section */
.services-page .ticker-scale-section {
  position: relative;
  background-color: #f7f6f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3rem 0 3rem;
  z-index: 10;
}

.services-page .ticker-scale-section .ticker-bg-container {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.services-page .ticker-scale-section .ticker-wrapper {
  display: flex;
  width: max-content;
  animation: marquee-ticker 30s linear infinite;
}

.services-page .ticker-scale-section .ticker-track {
  display: inline-flex;
  white-space: nowrap;
}

.services-page .ticker-scale-section .ticker-track span {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 7vw;
  font-weight: 800;
  color: #000000;
  letter-spacing: -2px;
  padding-right: 4rem;
  text-transform: uppercase;
}

@keyframes marquee-ticker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.services-page .ticker-scale-section .image-scale-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 750px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-page .ticker-scale-section .scroll-scale-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform-origin: center center;
  transform: scale(0.6);
  will-change: transform;
}

/* Mobile Adjustments for Ticker */

/* ===== Stacking Cards Scroll Section ===== */
.services-page .stacking-cards-section {
  background-color: #f7f6f5;
}

.services-page .stacking-cards-section .stacking-cards-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.services-page .stacking-cards-section .stacking-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f6f5;
  will-change: transform;
  z-index: 1;
  box-shadow: 0 -15px 30px rgba(0, 0, 0, 0.04);
}

/* Left: Text Content */
.services-page .stacking-cards-section .stacking-card-text {
  padding: 5rem 3rem 5rem 5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.services-page .stacking-cards-section .stacking-card-title {
  font-size: clamp(2rem, 3.8vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.05;
}

.services-page .stacking-cards-section .stacking-card-subtitle {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
}

.services-page .stacking-cards-section .stacking-card-subtitle .highlight {
  color: var(--yellow);
  text-shadow: 1px 1px 3px var(--black);
  -webkit-text-stroke: 1px #feee00;
}

.services-page .stacking-cards-section .stacking-card-body {
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 520px;
}

.services-page .stacking-cards-section .stacking-card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: gap 0.3s ease, color 0.3s ease;
}

.services-page .stacking-cards-section .stacking-card-link-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1.5rem;
  padding-right: 20px;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  width: 95%;
}

/* .services-page .stacking-cards-section .stacking-card-link:hover {
  gap: 0.8rem;
  color: var(--primary-blue, #0d6efd);
} */

/* Right: Image Area */
.services-page .stacking-cards-section .stacking-card-image {
  background: radial-gradient(ellipse at 50% 40%, #d8dde4 0%, #b8bfc8 55%, #a0a8b2 100%);
  height: 100%;
  overflow: hidden;
}

.services-page .stacking-cards-section .stacking-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Swiper Cards (Mobile / Tablet) ===== */
.services-page .services-swiper-section {
  background-color: #f7f6f5;
  padding: 3rem 0 4rem;
}

.services-page .services-swiper-section .services-swiper .swiper-slide {
  height: auto;
}

.services-page .services-swiper-section .swiper-service-card {
  background-color: #f7f6f5;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.services-page .services-swiper-section .swiper-service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem 0.75rem;
  background-color: #f7f6f5;
}

.services-page .services-swiper-section .swiper-service-title {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #111;
  margin: 0;
}

.services-page .services-swiper-section .swiper-service-index {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #111;
}

.services-page .services-swiper-section .swiper-service-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #d8dde4 0%, #b8bfc8 55%, #a0a8b2 100%);
}

.services-page .services-swiper-section .swiper-service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-page .services-swiper-section .swiper-service-body {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.services-page .services-swiper-section .swiper-service-subtitle {
  font-family: "KMR Melange Book", Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: #111;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
}

.services-page .services-swiper-section .swiper-service-subtitle .highlight {
  color: var(--primary-blue, #0d6efd);
}

.services-page .services-swiper-section .swiper-service-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 0 0 1.5rem 0;
}

.services-page .services-swiper-section .swiper-service-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1rem;
  margin-top: auto;
}

.services-page .services-swiper-section .swiper-service-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.services-page .services-swiper-section .swiper-service-link:hover {
  color: var(--primary-blue, #0d6efd);
}

/* Connect Banner Hover Style */
.connect-banner-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.connect-banner-hover:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 1rem 3rem rgba(0, 51, 255, 0.08) !important; */
  box-shadow: 0 1rem 3rem #feee0014 !important;
  border-color: var(--yellow) !important;
}

/* Connect Banner Button Styling (matches .white-cta-line .button-primary) */
.connect-banner-hover .button-primary {
  display: inline-block;
  padding: 16px 36px;
  background-color: var(--yellow);
  color: var(--black) !important;
  border-radius: 50px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 51, 255, 0.15);
  font-family: "KMR Melange Book", Arial, sans-serif;
  text-decoration: none;
  border: none;
  white-space: nowrap;
}

.connect-banner-hover:hover .button-primary {
  background-color: var(--white) !important;
  transform: scale(1.04);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Conveyor belt loop animation */
.press-page .press-section .conveyor-overflow {
  overflow: hidden;
  width: 100%;
}

.press-page .press-section .conveyor-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: conveyor-run 32s linear infinite;
  will-change: transform;
}

.press-page .press-section .conveyor-track:hover {
  animation-play-state: paused;
}

@keyframes conveyor-run {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Press Card Sizing */
.press-page .press-section .press-card {
  width: 260px;
  flex-shrink: 0;
}

.press-page .press-section .press-card-img {
  width: 260px;
  height: 340px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.press-page .press-section .press-card:hover .press-card-img {
  transform: scale(1.03);
}

/* ==========================================================================
   Clean Scoped Styles migrated from portfolio-detail.css
   ========================================================================== */
.portfolio-detail-body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif
}

.portfolio-detail-body {
  margin: 0
}

.portfolio-detail-body video {
  vertical-align: baseline;
  display: inline-block
}

.portfolio-detail-body a {
  background-color: #0000
}

.portfolio-detail-body h1 {
  margin: .67em 0;
  font-size: 2em
}

.portfolio-detail-body img {
  border: 0
}

.portfolio-detail-body button,
.portfolio-detail-body input,
.portfolio-detail-body select,
.portfolio-detail-body textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

.portfolio-detail-body button {
  overflow: visible
}

portfolio-detail-body .cases-title .portfolio-detail-body button,
.portfolio-detail-body select {
  text-transform: none
}

.portfolio-detail-body button {
  appearance: button;
  -webkit-appearance: button;
  cursor: pointer
}

.portfolio-detail-body input {
  line-height: normal
}

.portfolio-detail-body textarea {
  overflow: auto
}

@font-face {
  font-family: webflow-icons;
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==)format("truetype");
  font-weight: 400;
  font-style: normal
}

.portfolio-detail-body * {
  box-sizing: border-box
}

.portfolio-detail-body {
  height: 100%
}

.portfolio-detail-body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px
}

.portfolio-detail-body img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block
}

.portfolio-detail-body .w-inline-block {
  max-width: 100%;
  /* display: inline-block */
}

.portfolio-detail-body h1,
.portfolio-detail-body h2,
.portfolio-detail-body h3,
.portfolio-detail-body h4,
.portfolio-detail-body h5,
.portfolio-detail-body h6 {
  margin-bottom: 10px;
  font-weight: 700
}

.portfolio-detail-body h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px
}

.portfolio-detail-body h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px
}

.portfolio-detail-body h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px
}

.portfolio-detail-body h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px
}

.portfolio-detail-body h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px
}

.portfolio-detail-body h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px
}

.portfolio-detail-body p {
  margin-top: 0;
  margin-bottom: 10px
}

.portfolio-detail-body ul,
.portfolio-detail-body ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px
}

.portfolio-detail-body button {
  cursor: pointer;
  appearance: button;
  -webkit-appearance: button;
  border: 0
}

.portfolio-detail-body .w-row:before,
.portfolio-detail-body .w-row:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table
}

.portfolio-detail-body .w-row:after {
  clear: both
}

.portfolio-detail-body .w-row .w-row {
  margin-left: 0;
  margin-right: 0
}

.portfolio-detail-body .w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative
}

.portfolio-detail-body .w-col .w-col {
  padding-left: 0;
  padding-right: 0
}

.portfolio-detail-body .w-col-4 {
  width: 33.3333%
}

.portfolio-detail-body .w-richtext:before,
.portfolio-detail-body .w-richtext:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table
}

.portfolio-detail-body .w-richtext:after {
  clear: both
}

.portfolio-detail-body .w-richtext[contenteditable=true]:before,
.portfolio-detail-body .w-richtext[contenteditable=true]:after {
  white-space: initial
}

.portfolio-detail-body .w-richtext ol,
.portfolio-detail-body .w-richtext ul {
  overflow: hidden
}

.portfolio-detail-body .w-richtext figure[data-rt-type=video]>div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0
}

.portfolio-detail-body .w-richtext figure {
  max-width: 60%;
  position: relative
}

.portfolio-detail-body .w-richtext figure>div:before {
  cursor: default !important
}

.portfolio-detail-body .w-richtext figure img {
  width: 100%
}

.portfolio-detail-body .w-richtext figure div {
  color: #0000;
  font-size: 0
}

.portfolio-detail-body .w-richtext figure[data-rt-type=image] {
  display: table
}

.portfolio-detail-body .w-richtext figure[data-rt-type=image]>div {
  display: inline-block
}

.portfolio-detail-body .w-richtext figure[data-rt-type=image]>figcaption {
  caption-side: bottom;
  display: table-caption
}

.portfolio-detail-body .w-richtext figure[data-rt-type=video] {
  width: 60%;
  height: 0
}

.portfolio-detail-body .w-richtext figure[data-rt-type=video] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.portfolio-detail-body .w-richtext figure[data-rt-type=video]>div {
  width: 100%
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@font-face {
  font-family: KMR Melange Bold;
  src: url(https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a2723209cc06cce9b0_KMRMelangeGrotesk-Bold.otf)format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: KMR Melange Book;
  src: url(https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a232a23f56a2d62115_KMRMelangeGrotesk-Book.otf)format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: KMR Melange Semi Light;
  src: url(https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a22503ff90cb3b7d66_KMRMelangeGrotesk-SemiLight.otf)format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: KMR Melange Semi Bold;
  src: url(https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68ae26a206880ff131d2c66b_KMRMelangeGrotesk-SemiBold.otf)format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

.portfolio-detail-body {
  color: #000;
  background-color: #f7f6f5;
  font-family: KMR Melange Semi Light, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.25em
}

.portfolio-detail-body h1 {
  color: var(--yellow);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: ivypresto-display, sans-serif;
  font-size: 9em;
  font-weight: 300;
  line-height: .9em
}

.portfolio-detail-body h2 {
  color: #000;
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: 'KMR Melange Semi Light, Arial, sans-serif';
  font-size: 2.5em;
  font-weight: 300;
  line-height: 1.2em
}

.portfolio-detail-body h3 {
  color: #000;
  letter-spacing: -.01em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: KMR Melange Semi Light, Arial, sans-serif;
  font-size: 1.625em;
  font-weight: 300;
  line-height: 1.2em
}

.portfolio-detail-body h4 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-family: KMR Melange Semi Light, Arial, sans-serif;
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.2em
}

.portfolio-detail-body h5 {
  color: #000;
  letter-spacing: -.04em;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: KMR Melange Semi Light, Arial, sans-serif;
  font-size: 8em;
  font-weight: 300;
  line-height: 1.2em
}

.portfolio-detail-body h6 {
  /* color: var(--white); */
  letter-spacing: .02em;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: KMR Melange Bold, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1em
}

.portfolio-detail-body a {
  color: var(--white);
  text-decoration: none
}

.portfolio-detail-body .divider-grey {
  background-color: #0000001a;
  width: 100%;
  height: 1px;
  margin-top: 30px;
  margin-bottom: 30px
}

.portfolio-detail-body .divider-grey.withmargin-top {
  margin-top: 3em;
  margin-bottom: 0
}

.portfolio-detail-body .cta-link-line {
  background-color: var(--yellow);
  width: 0%;
  height: 2px;
  transition: all .3s ease-in-out
}

.portfolio-detail-body .section-title-n-cover {
  width: 100%;
  padding-bottom: 25px
}

.portfolio-detail-body .section-text {
  padding: 4em 25px
}

.portfolio-detail-body .case-study-cover-info {
  will-change: transform;
  flex: 0 0 50%;
  max-height: none;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 25px
}

.portfolio-detail-body .case-study-cover {
  z-index: 1;
  aspect-ratio: 16/9;
  background-image: url(https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68c22a54095e59d3a4f88e0e_bg-holder.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: relative
}

.portfolio-detail-body .vimeo-hero {
  z-index: 1;
  background-color: var(--off-white-tbp);
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden
}

.portfolio-detail-body .case-media-1 {
  z-index: 700;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  background-color: var(--off-white-tbp);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 25px;
  display: grid;
  position: relative
}

.portfolio-detail-body .media-slot {
  z-index: 1;
  aspect-ratio: 16/9;
  background-image: url(https://cdn.prod.website-files.com/68ae09ab4fb8e082bdd9f99d/68c22a54095e59d3a4f88e0e_bg-holder.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;
  overflow: hidden
}

.portfolio-detail-body .title-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  /* padding-bottom: 40px; */
  padding-right: 20px;
  display: flex
}

.portfolio-detail-body .cs-services .w-row:before,
.portfolio-detail-body .cs-services .w-row:after,
.portfolio-detail-body .cs-services .w-dyn-items:before,
.portfolio-detail-body .cs-services .w-dyn-items:after {
  display: none !important;
  content: none !important;
}

.portfolio-detail-body .service-provided-col {
  align-items: flex-end;
  width: auto;
  padding-left: 0;
  margin-left: 0;
  display: flex
}

.portfolio-detail-body .divider-service-meta {
  background-color: #000;
  width: 1px;
  height: 1em;
  margin-left: 10px
}

.portfolio-detail-body .cs-textblock-grid {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 3em;
  display: grid
}

.portfolio-detail-body .cs-textblock-grid.one-row-only {
  grid-template-rows: auto;
  padding-top: 0
}

.portfolio-detail-body .title-problem-sol {
  font-family: KMR Melange Bold, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.portfolio-detail-body .title-problem-sol-hidden {
  visibility: hidden;
  pointer-events: none;
}

.portfolio-detail-body .problem-paragraph,
.portfolio-detail-body .solution-paragraph {
  font-size: 16px;
  line-height: 1.5;
}

.portfolio-detail-body .cs-textblock-grid .w-richtext p,
.portfolio-detail-body .section-text .w-richtext p,
.portfolio-detail-body .rich-text-block p,
.portfolio-detail-body .rich-text-block-2 p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.portfolio-detail-body .cs-textblock-grid .w-richtext p.fw-bold,
.portfolio-detail-body .cs-textblock-grid .w-richtext p.fw-bolder {
  font-family: KMR Melange Bold, Arial, sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 6px;
}

.portfolio-detail-body .section-main-title,
.portfolio-detail-body .section-main-title strong,
.portfolio-detail-body .cs-textblock-grid .w-richtext p.section-main-title,
.portfolio-detail-body .cs-textblock-grid .w-richtext p.section-main-title strong,
.portfolio-detail-body .section-text .w-richtext p.section-main-title,
.portfolio-detail-body .section-text .w-richtext p.section-main-title strong {
  font-size: 20px !important;
  font-family: KMR Melange Bold, Arial, sans-serif !important;
  font-weight: 700 !important;
}

.portfolio-detail-body .read-more-clickable {
  border-top: 1px solid #00000026;
  grid-column: 2 / -1;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 14px;
  display: flex
}

.portfolio-detail-body .read-more-ins {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding-right: 20px;
  line-height: 1em;
  display: flex;
  position: relative
}

.portfolio-detail-body .arrow-read-rotate {
  width: 20px;
  transition: transform .7s ease-in-out;
  transform: rotate(90deg)
}

.portfolio-detail-body .case-media {
  z-index: 700;
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  background-color: var(--off-white-tbp);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
  display: grid;
  position: relative
}

.portfolio-detail-body .second-col-txt-pad {
  padding-top: 4.2em
}

.portfolio-detail-body .go-to-portfolio {
  border-top: 1px solid #0000001a;
  justify-content: flex-start;
  align-items: center;
  margin: 25px 25px 0;
  padding-top: 5vh;
  padding-bottom: 2vh;
  display: flex;
  position: relative
}

.portfolio-detail-body .portfolio-cta {
  flex-flow: column;
  align-items: flex-start;
  display: flex
}

.portfolio-detail-body .portfolio-cta-content {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  display: flex
}

.portfolio-detail-body .image-5 {
  vertical-align: baseline
}

.portfolio-detail-body .heading-6 {
  margin-top: 0;
  margin-bottom: 0
}

.portfolio-detail-body .next-project-wrapper {
  margin: 25px 25px 0
}

.portfolio-detail-body .link-cta-next-case {
  border-top: 1px solid #0000001a;
  border-bottom: 1px solid #0000001a;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin-bottom: -25px;
  display: flex;
  position: relative;
  overflow: hidden
}

.portfolio-detail-body .next-portfolio-title {
  flex-flow: column;
  align-items: flex-start;
  width: 50%;
  padding-top: 9vh;
  padding-bottom: 9.5vh;
  display: flex
}

.portfolio-detail-body .next-p-title {
  margin-top: 0
}

.portfolio-detail-body .next-p-sub {
  margin-top: 0;
  margin-bottom: 0
}

.portfolio-detail-body .next-portfolio-img {
  background-image: url(https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  transition: all .3s ease-in-out;
  position: absolute;
  inset: 0% 0% 0% auto;
  transform: translate(0)
}

.portfolio-detail-body .next-p-title-wrap {
  flex-flow: column;
  display: flex
}

.portfolio-detail-body .cases-title {
  max-width: 50%;
  padding-top: 50px;
}

.portfolio-detail-body .container-meta {
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 40px;
  display: flex
}

.portfolio-detail-body .right-container-meta {
  width: 50%
}

.portfolio-detail-body .subtitle-meta {
  max-width: 80%;
  margin-bottom: 0.5em;
  font-family: KMR Melange Bold, Arial, sans-serif
}

.portfolio-detail-body .short-descript-meta {
  max-width: 80%
}

.portfolio-detail-body .services-meta-title {
  font-family: KMR Melange Bold, Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 0.6em;
}

.portfolio-detail-body .cs-cover-wrapper {
  width: 100%;
  max-width: 100vw;
  padding-left: 25px;
  padding-right: 25px;
  overflow: hidden
}

.portfolio-detail-body .rich-text-block-2 {
  padding-top: 0;
}

.portfolio-detail-body .case-m-gallery {
  z-index: 820;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: var(--off-white-tbp);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
  position: relative
}

.portfolio-detail-body .collection-list-8 {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid
}

.portfolio-detail-body .image-media-gallery {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%
}

.portfolio-detail-body .cursor-window {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.case-study-cover video,
.media-slot video,
.case-study-cover img,
.media-slot img,
.case-study-cover iframe,
.media-slot iframe {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

a#container {
  opacity: 0;
}

spline-viewer {
  height: 700px;
}

.hindi {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-weight: 600;
  font-size: 26px;
}


h2.text-copy.lh-sm.m-0 {
  max-width: 1360px;
  font-size: 3.3em;
}

.hindi {
  font-size: 0.7em;
}

.highlight-link1 {
  color: var(--yellow) !important;
  font-weight: 500;
  text-shadow: 2px 2px 5px black;
  -webkit-text-stroke: 1px #feee00;
  text-decoration: none;
  /* position: relative; */
  /* display: inline-block; */
  letter-spacing: 1px;
}

.services-page .stacking-cards-section .stacking-card-subtitle {
  padding-bottom: 30px;
}

.marquee-clients-logos {
  overflow: hidden;
  width: 100%;
}

.marquee-track-logos {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
  animation-play-state: paused;
}

.marquee-track-logos.play {
  animation-play-state: running;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   POPUP MODAL & VALIDATION STYLES (STREAMLINED & OPTIMIZED)
   ========================================================================== */
.tbp-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  display: none;
}

.tbp-popup-overlay.is-open {
  display: flex !important;
}

.tbp-popup-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tbp-popup-container {
  position: relative;
  background: #ffffff;
  color: #111111;
  width: 100%;
  max-width: 620px;
  max-height: 98vh;
  overflow-y: auto;
  border-radius: 24px;
  padding: 20px 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 2;
  animation: popupScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  scrollbar-width: none;
}

.tbp-popup-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@keyframes popupScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.tbp-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #f1f5f9;
  border: none;
  color: #555555;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  z-index: 10;
}

.tbp-popup-close:hover {
  background: #e2e8f0;
  color: #111111;
  transform: rotate(90deg);
}

.tbp-popup-header {
  margin-bottom: 24px;
  text-align: center;
}

.tbp-popup-tagline {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #666666;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tbp-popup-heading {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: #111111;
  line-height: 1.3;
}

.tbp-custom-form .form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #444444;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tbp-custom-form .required-star {
  color: #ff3333;
}

.tbp-custom-form .form-input {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  color: #111111;
  font-size: 0.92rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tbp-custom-form .form-input::placeholder {
  color: #94a3b8;
}

.tbp-custom-form .form-input:focus {
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.tbp-custom-form .form-input.input-invalid,
.custom-list-select.input-invalid .custom-select-trigger {
  border-color: #ff3333 !important;
  background: #fff5f5 !important;
}

/* Phone Input Group */
.phone-input-group {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.phone-input-group:focus-within {
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.country-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 600;
  gap: 6px;
  user-select: none;
  height: 44px;
}

.phone-input-group .phone-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Radio Card Option Styling */
.radio-card-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  user-select: none;
}

.radio-card-option:hover {
  border-color: #cbd5e1;
}

.radio-card-option:has(.radio-input:checked) {
  border-color: #111111;
  background: #f1f5f9;
}

.radio-input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.radio-input:checked {
  border-color: #111111;
}

.radio-input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background: #111111;
  border-radius: 50%;
}

.radio-title-only {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  white-space: normal !important;
  flex: 1 !important;
}

/* Custom Scrollable List Select */
.custom-list-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  color: #111111;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.custom-select-trigger:focus,
.custom-list-select.open .custom-select-trigger {
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.custom-select-trigger .selected-text {
  color: #94a3b8;
}

.custom-select-trigger .selected-text.has-value {
  color: #111111;
  font-weight: 500;
}

.custom-select-trigger .arrow-icon {
  transition: transform 0.2s ease;
  color: #64748b;
}

.custom-list-select.open .arrow-icon {
  transform: rotate(180deg);
}

.custom-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 200px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 1050 !important;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  -ms-overflow-style: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 #f1f5f9 !important;
}

.custom-select-list::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

.custom-select-list::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 6px !important;
}

.custom-select-list::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 6px !important;
}

.custom-select-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

.custom-list-select.open .custom-select-list {
  display: block !important;
}

.custom-select-option {
  padding: 10px 16px;
  font-size: 0.9rem;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.custom-select-option:hover {
  background: #f1f5f9;
  color: #111111;
}

.custom-select-option.selected {
  background: #e2e8f0;
  color: #111111;
  font-weight: 600;
}

/* Textarea Footer & Character Counter */
.textarea-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.char-count {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-left: auto;
}

/* Validation Error Message Styling */
.field-error-msg {
  display: block;
  color: red !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
}

.tbp-submit-btn-pill {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  padding: 16px 44px;
  background: var(--yellow) !important;
  color: var(--black) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--yellow) !important;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

.tbp-submit-btn-pill:hover {
  background: var(--white) !important;
  border-color: var(--yellow) !important;
  color: var(--black) !important;
  box-shadow: none !important;
  transform: none !important;
}

.tbp-submit-btn-pill:active {
  transform: translateY(0) scale(0.98);
}

/* Success Screen */
.tbp-success-message {
  text-align: center;
  padding: 30px 0;
}

.tbp-success-message .success-icon {
  width: 64px;
  height: 64px;
  background: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
  font-size: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.tbp-success-message h4 {
  font-size: 1.45rem;
  margin-bottom: 8px;
  color: #111111;
  font-weight: 700;
}

.tbp-success-message p {
  color: #64748b;
  margin-bottom: 24px;
}

/* ==========================================================================
   FORM & POPUP CURSOR DISPLAY FIX
   ========================================================================== */
input,
textarea,
select {
  cursor: text !important;
}

button,
a,
label,
input[type="button"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"],
.custom-select-trigger,
.custom-select-option,
.radio-card-option,
[data-close-popup],
[data-open-popup] {
  cursor: pointer !important;
}

.tbp-popup-overlay,
.tbp-popup-container {
  cursor: auto !important;
}

.tbp-popup-container input[type="text"],
.tbp-popup-container input[type="email"],
.tbp-popup-container input[type="tel"],
.tbp-popup-container textarea,
.form-input,
.textarea-input {
  cursor: text !important;
  caret-color: #111111 !important;
}

.tbp-popup-container button,
.tbp-popup-container .custom-select-trigger,
.tbp-popup-container .custom-select-option,
.tbp-popup-container .radio-card-option,
.tbp-popup-close {
  cursor: pointer !important;
}

body.has-open-popup .custom-cursor,
.tbp-popup-overlay:not([style*="display: none"])~.custom-cursor {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.portfolio-detail-body .mobile-hide-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.ratio-16x9 {
  --bs-aspect-ratio: 100%;
}