/* case-studies.css - Case Studies Page Hero, Credibility & Full Case Study Browsing / Detail View */

/* ==========================================================================
   CASE STUDIES HERO SECTION
   ========================================================================== */

.cs-hero {
  position: relative;
  min-height: clamp(660px, 72vh, 800px);
  padding-top: calc(var(--header-height) + clamp(36px, 3.8vw, 54px));
  padding-bottom: clamp(48px, 4.8vw, 72px);
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Background Atmospheric Layers */
.cs-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cs-hero__particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.cs-hero__dot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(139, 92, 246, 0.16) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 85%);
}

.cs-hero__ambient-glow {
  position: absolute;
  top: 30%;
  right: 10%;
  width: 720px;
  height: 720px;
  background: radial-gradient(ellipse at center, rgba(130, 70, 230, 0.10) 0%, rgba(100, 50, 180, 0.03) 45%, transparent 75%);
  filter: blur(90px);
  transform: translate(15%, -20%);
  z-index: 0;
  pointer-events: none;
}

.cs-hero__ambient-glow-left {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

/* Two-Column Main Layout Grid (Left ~45% / Right ~55%) */
.cs-hero__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.26fr;
  align-items: center;
  gap: var(--space-3xl);
}

/* ==========================================================================
   HERO LEFT COLUMN - EDITORIAL HEADLINE & CTAS
   ========================================================================== */

.cs-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 580px;
}

/* Eyebrow Badge */
.cs-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-purple-border);
  background: var(--color-purple-pill-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C4B5FD;
  margin-bottom: var(--space-lg);
  box-shadow: 0 0 12px var(--color-primary-glow);
}

.cs-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

/* Main Display Headline */
.cs-hero__title {
  font-size: clamp(2.8rem, 4.6vw, 4.3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.cs-hero__title-line {
  display: block;
}

.cs-hero__title-gradient {
  background: linear-gradient(135deg, #FFFFFF 0%, #D8B4FE 35%, #8B5CF6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Supporting Description */
.cs-hero__description {
  font-size: 1.05rem;
  font-weight: 400;
  color: #9A9A9A;
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: var(--space-2xl);
}

/* CTA Group */
.cs-hero__cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cs-hero__btn-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform var(--transition-fast);
}

.btn:hover .cs-hero__btn-arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   HERO RIGHT COLUMN - ASYMMETRIC ORGANIC BRAND CONSTELLATION
   ========================================================================== */

.cs-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.cs-constellation {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 440px;
  margin-left: auto;
}

.cs-constellation__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.12) 0%, rgba(109, 40, 217, 0.03) 50%, transparent 72%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 0;
}

.cs-constellation__node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

.cs-constellation__node:hover {
  transform: translateY(-3px) scale(1.04);
  z-index: 10;
}

.cs-constellation__img {
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(0.92);
  opacity: 0.82;
  transition: filter 0.28s ease, opacity 0.28s ease;
}

.cs-constellation__node:hover .cs-constellation__img {
  opacity: 1 !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(167, 139, 250, 0.5));
}

/* 7 Asymmetric Organic Constellation Coordinates (No boxes, no grid, no symmetry) */

/* 1. Anchor Logo: Royal Caribbean (Central anchor, subtle natural offset) */
.cs-constellation__node--anchor {
  top: 172px;
  left: 170px;
  z-index: 5;
}

.cs-constellation__img--anchor {
  max-height: 52px;
  max-width: 195px;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

/* 2. KIMS Hospitals (Top-Left) */
.cs-constellation__node--kims {
  top: 22px;
  left: 30px;
  z-index: 4;
}

.cs-constellation__img--kims {
  max-height: 42px;
  max-width: 145px;
  opacity: 0.85;
}

/* 3. Wockhardt (Top-Right, offset) */
.cs-constellation__node--wockhardt {
  top: 15px;
  right: 35px;
  z-index: 4;
}

.cs-constellation__img--wockhardt {
  max-height: 48px;
  max-width: 120px;
  opacity: 0.85;
}

/* 4. Travezy (Mid-Left, floating naturally) */
.cs-constellation__node--travezy {
  top: 155px;
  left: 10px;
  z-index: 3;
}

.cs-constellation__img--travezy {
  max-height: 38px;
  max-width: 130px;
  opacity: 0.78;
}

/* 5. Celebrity Cruises (Mid-Right, staggered elevation) */
.cs-constellation__node--celebrity {
  top: 140px;
  right: 15px;
  z-index: 3;
}

.cs-constellation__img--celebrity {
  max-height: 44px;
  max-width: 165px;
  opacity: 0.85;
}

/* 6. Acktive Vision (Lower Mid-Left) */
.cs-constellation__node--acktive {
  top: 305px;
  left: 55px;
  z-index: 3;
}

.cs-constellation__img--acktive {
  max-height: 40px;
  max-width: 155px;
  opacity: 0.80;
}

/* 7. Maheshwari (Lower-Right, vertically offset) */
.cs-constellation__node--maheshwari {
  top: 280px;
  right: 35px;
  z-index: 3;
}

.cs-constellation__img--maheshwari {
  max-height: 46px;
  max-width: 165px;
  opacity: 0.85;
}

/* ==========================================================================
   MOBILE & TABLET HORIZONTAL CLIENT STRIP (<= 992px)
   ========================================================================== */

.cs-hero__mobile-strip {
  display: none;
}

@keyframes csMarqueeInfinite {
  0% {
    transform: translateX(0);
  }

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

.cs-hero__mobile-strip .client-strip {
  width: 100%;
  padding-top: clamp(45px, 4vw, 50px);
  padding-bottom: 8px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.cs-hero__mobile-strip .client-strip__heading {
  font-size: clamp(0.68rem, 0.62rem + 0.28vw, 0.82rem);
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: clamp(1.2px, 0.12em, 2px);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin-bottom: 16px;
}

.cs-hero__mobile-strip .client-strip__marquee {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.cs-hero__mobile-strip .client-strip__track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  will-change: transform;
  animation: csMarqueeInfinite 38s linear infinite;
}

.cs-hero__mobile-strip .client-strip__list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.cs-hero__mobile-strip .client-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 64px;
  padding: 6px 10px;
}

.cs-hero__mobile-strip .client-strip__logo {
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  filter: brightness(0) invert(0.92);
  display: block;
}

.cs-hero__mobile-strip .client-strip__logo--wide {
  max-height: 36px;
  max-width: 150px;
}

.cs-hero__mobile-strip .client-strip__logo--square {
  max-height: 38px;
  max-width: 95px;
}

.cs-hero__mobile-strip .client-strip__logo--compact {
  max-height: 32px;
  max-width: 115px;
}

/* ==========================================================================
   SECTION 2: BALANCED & COHESIVE EDITORIAL CREDIBILITY / TESTIMONIAL
   ========================================================================== */

.cs-credibility {
  position: relative;
  padding-top: clamp(56px, 5.5vw, 80px);
  padding-bottom: clamp(56px, 5.5vw, 80px);
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Atmospheric Soft Purple Backlight */
.cs-credibility__glow {
  position: absolute;
  top: 50%;
  left: 60%;
  width: 800px;
  height: 550px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(120, 70, 220, 0.09) 0%, transparent 65%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* Centered Eyebrow Section Identifier (Above entire section) */
.cs-credibility__eyebrow-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto 48px auto;
}

.cs-credibility__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.38rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-purple-border);
  background: var(--color-purple-pill-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C4B5FD;
  box-shadow: 0 0 12px var(--color-primary-glow);
}

.cs-credibility__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 6px var(--color-primary);
}

/* Two-Column Grid: Left (~50%) Editorial Stats | Right (~45%) Testimonial */
.cs-credibility__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* Left Column: Scaled 2x2 Editorial Composition */
.cs-credibility__left {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 550px;
}

.cs-editorial-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 215px 195px;
  gap: 18px;
  width: 100%;
}

.cs-editorial-item {
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease;
  height: 100%;
}

.cs-editorial-item--stat-large {
  background: linear-gradient(135deg, rgba(22, 18, 34, 0.70) 0%, rgba(12, 10, 20, 0.82) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 26px 28px 22px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-editorial-item--stat-large:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 18px var(--color-primary-glow);
}

.cs-stat-hero__number-wrap {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
  line-height: 1;
}

.cs-stat-hero__num {
  font-size: clamp(3.2rem, 4.2vw, 3.8rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cs-stat-hero__plus {
  font-size: 2.4rem;
  font-weight: 700;
  color: #C4B5FD;
  margin-left: 2px;
  line-height: 1;
}

.cs-stat-hero__label-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cs-stat-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 6px var(--color-primary);
}

.cs-stat-hero__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}

.cs-stat-hero__sub {
  font-size: 0.76rem;
  color: #7A7A7A;
  line-height: 1.35;
}

.cs-media-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  background: rgba(16, 14, 24, 0.8);
}

.cs-media-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.88) contrast(1.05);
  transition: transform 350ms ease, filter 350ms ease;
}

.cs-editorial-item:hover .cs-media-card__img {
  transform: scale(1.03);
  filter: brightness(0.96) contrast(1.08);
}

.cs-media-card__overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
}

.cs-media-card__tag {
  display: inline-block;
  padding: 0.24rem 0.72rem;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 16, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem;
  font-weight: 600;
  color: #F5F3FF;
  letter-spacing: 0.02em;
}

.cs-editorial-item--rating {
  background: linear-gradient(135deg, rgba(20, 16, 32, 0.65) 0%, rgba(12, 10, 20, 0.78) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 16px 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cs-editorial-item--rating:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 18px var(--color-primary-glow);
}

.cs-rating-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cs-rating-badge__orbit {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.10), inset 0 0 10px rgba(139, 92, 246, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.cs-rating-badge__orbit-dot {
  position: absolute;
  top: 9px;
  right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C4B5FD;
  box-shadow: 0 0 6px #C4B5FD;
}

.cs-rating-badge__score-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}

.cs-rating-badge__score {
  font-size: 1.85rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.cs-rating-badge__max {
  font-size: 0.82rem;
  font-weight: 600;
  color: #A78BFA;
  margin-left: 2px;
}

.cs-rating-badge__stars {
  font-size: 0.65rem;
  color: #C4B5FD;
  letter-spacing: 2px;
  margin-top: 2px;
}

.cs-rating-badge__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #8A8A8A;
  letter-spacing: 0.01em;
}

/* Right Column: Audio Testimonial Plaque */
.cs-credibility__right {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cs-testimonial-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 428px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(24, 20, 36, 0.88) 0%, rgba(13, 12, 20, 0.90) 100%);
  border: 1px solid rgba(145, 90, 255, 0.18);
  border-radius: 22px;
  padding: 38px 36px 30px 36px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6), 0 0 28px rgba(139, 92, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
}

.cs-testimonial-panel:hover {
  border-color: rgba(167, 139, 250, 0.42);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 34px rgba(139, 92, 246, 0.22);
}

.cs-testimonial-panel__glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cs-testimonial__body {
  position: relative;
  z-index: 1;
}

.cs-testimonial__quote-mark {
  font-family: Georgia, serif;
  font-size: 2.8rem;
  line-height: 1;
  color: #A78BFA;
  opacity: 0.85;
  margin-bottom: 2px;
  user-select: none;
}

.cs-testimonial__quote {
  font-size: 1.08rem;
  line-height: 1.6;
  color: #F5F5F5;
  font-weight: 400;
  margin: 0 0 24px 0;
}

.cs-audio-player {
  background: rgba(12, 10, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  transition: border-color var(--transition-fast);
}

.cs-audio-player:hover {
  border-color: rgba(167, 139, 250, 0.3);
}

.cs-audio-player__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.45);
  transition: all var(--transition-fast);
}

.cs-audio-player__btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.65);
}

.cs-audio-player__icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  margin-left: 2px;
}

.cs-audio-player__btn.is-playing .cs-audio-player__icon {
  margin-left: 0;
}

.cs-audio-player__waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.cs-waveform-bar {
  flex: 1;
  background: rgba(167, 139, 250, 0.28);
  border-radius: 2px;
  min-height: 4px;
  transition: height 0.15s ease, background-color 0.15s ease;
}

.cs-waveform-bar.is-played {
  background: #A78BFA;
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.35);
}

.cs-audio-player__btn.is-playing ~ .cs-audio-player__waveform .cs-waveform-bar {
  animation: csWavePulse 1.1s ease-in-out infinite alternate;
}

.cs-audio-player__btn.is-playing ~ .cs-audio-player__waveform .cs-waveform-bar.is-played {
  background: #C4B5FD;
  box-shadow: 0 0 8px rgba(196, 181, 253, 0.55);
}

@keyframes csWavePulse {
  0% {
    height: 4px;
  }

  50% {
    height: 22px;
  }

  100% {
    height: 6px;
  }
}

.cs-audio-player__time {
  font-size: 0.78rem;
  font-weight: 600;
  color: #C4B5FD;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.cs-testimonial__author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  position: relative;
  z-index: 1;
}

.cs-testimonial__author-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-testimonial__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(109, 40, 217, 0.4));
  border: 1px solid rgba(167, 139, 250, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #F5F3FF;
  font-size: 0.85rem;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.cs-testimonial__author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.cs-testimonial__author-role {
  font-size: 0.78rem;
  color: #9A9A9A;
}

.cs-testimonial__stars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cs-testimonial__stars-score {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 2px;
}

.cs-testimonial__stars-icons {
  font-size: 0.70rem;
  color: #C4B5FD;
  letter-spacing: 2px;
  line-height: 1;
}

/* ==========================================================================
   SECTION 3: CASE STUDIES BROWSING (FILTERS, FEATURED, MASONRY GRID & DETAIL)
   ========================================================================== */

.cs-portfolio {
  position: relative;
  padding-top: clamp(56px, 5.5vw, 80px);
  padding-bottom: clamp(72px, 6.5vw, 96px);
  background-color: var(--color-bg-dark);
  color: var(--color-text-main);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.cs-portfolio__glow {
  position: absolute;
  top: 25%;
  left: 50%;
  width: 900px;
  height: 700px;
  transform: translate(-50%, 0);
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.07) 0%, rgba(109, 40, 217, 0.02) 50%, transparent 75%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* Transition Container */
.cs-grid-view {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  transition: opacity 250ms ease, transform 250ms ease;
}

/* 1. Category Filter Navigation */
.cs-filter-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.cs-filter-list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: rgba(18, 15, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  flex-wrap: nowrap;
  max-width: 100%;
}

.cs-filter-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cs-filter-list li {
  flex-shrink: 0;
  display: inline-flex;
}

.cs-filter-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9A9A9A;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 220ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cs-filter-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.05);
}

.cs-filter-btn.is-active {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(167, 139, 250, 0.45);
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.25);
}

/* General Tag / Badge Styles */
.cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

.cs-tag--featured {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(109, 40, 217, 0.45));
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #EDE9FE;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}

.cs-tag--category {
  background: rgba(10, 10, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #C4B5FD;
}

/* 2. Grid Header & Counter */
.cs-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

.cs-grid-header__title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.cs-grid-header__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: #9A9A9A;
  letter-spacing: 0.02em;
}

/* 3. Masonry Case Study Grid */
.cs-masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.cs-card {
  position: relative;
  background: linear-gradient(135deg, rgba(22, 18, 34, 0.75) 0%, rgba(13, 11, 20, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
  outline: none;
}

.cs-card:focus-visible {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.35), 0 12px 32px rgba(0, 0, 0, 0.6);
}

.cs-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(139, 92, 246, 0.2);
}

/* Varied Aspect Ratios for Art-Directed Masonry Feel */
.cs-card--tall .cs-card__media {
  height: 250px;
}

.cs-card--medium .cs-card__media {
  height: 205px;
}

.cs-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(12, 10, 18, 0.9);
}

.cs-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) contrast(1.04);
  transition: transform 350ms ease, filter 350ms ease;
}

.cs-card:hover .cs-card__img {
  transform: scale(1.04);
  filter: brightness(0.98) contrast(1.08);
}

.cs-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 11, 20, 0.95) 0%, rgba(13, 11, 20, 0.2) 60%, transparent 100%);
  pointer-events: none;
}

.cs-card__tag-wrap {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.cs-card__body {
  padding: 20px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.cs-card__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 8px;
}

.cs-card__desc {
  font-size: 0.86rem;
  color: #9A9A9A;
  line-height: 1.55;
  margin-bottom: 20px;
}

.cs-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  margin-top: auto;
}

.cs-card__metric-badge {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.cs-card__metric-val {
  font-size: 1rem;
  font-weight: 800;
  color: #C4B5FD;
}

.cs-card__metric-lbl {
  font-size: 0.72rem;
  color: #8A8A8A;
}

.cs-card__affordance {
  font-size: 0.8rem;
  font-weight: 700;
  color: #C4B5FD;
  opacity: 0.85;
  transition: opacity 200ms ease, transform 200ms ease;
}

.cs-card:hover .cs-card__affordance {
  opacity: 1;
  transform: translateX(2px);
}

/* ==========================================================================
   EXPANDED CASE STUDY OVERLAY / IMMERSIVE MODAL PRESENTATION
   ========================================================================== */

/* Background Scroll Locking */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

/* Modal Backdrop Overlay */
.cs-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  background: rgba(4, 3, 7, 0.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), visibility 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Centered Desktop Modal Container (Art-Directed Canvas) */
.cs-modal {
  position: relative;
  width: min(92vw, 1320px);
  height: 92vh;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.3) rgba(8, 7, 13, 0.6);
  background: #08070D;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9), 0 0 40px rgba(139, 92, 246, 0.06);
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 350ms ease;
  outline: none;
  display: flex;
  flex-direction: column;
}

.cs-modal.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cs-modal::-webkit-scrollbar {
  width: 6px;
}

.cs-modal::-webkit-scrollbar-track {
  background: rgba(8, 7, 13, 0.6);
}

.cs-modal::-webkit-scrollbar-thumb {
  background-color: rgba(167, 139, 250, 0.3);
  border-radius: 3px;
}

.cs-modal::-webkit-scrollbar-thumb:hover {
  background-color: rgba(167, 139, 250, 0.55);
}

/* Minimal Sticky Header Bar */
.cs-modal__sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(8, 7, 13, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.cs-modal__sticky-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.cs-modal__sticky-index {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A1A1AA;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.cs-modal__sticky-sep {
  color: rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
}

.cs-modal__sticky-category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C4B5FD;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

.cs-modal__sticky-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sticky Header Close Button */
.cs-modal__close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #A1A1AA;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  flex-shrink: 0;
}

.cs-modal__close-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #FFFFFF;
  transform: scale(1.06);
}

.cs-modal__close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #A78BFA;
}

/* Modal Body Content */
.cs-modal__body {
  padding: 36px clamp(24px, 4.5vw, 64px) 60px;
  flex: 1;
}

/* Main Container Layout */
.cs-exp {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.2vw, 56px);
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

/* Fine Editorial Dividers */
.cs-exp-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0;
}

.cs-exp-meta-sep {
  color: rgba(255, 255, 255, 0.16);
  font-size: 0.72rem;
}

/* Editorial Section Markers — 01 RESULTS  02 CHALLENGE  03 OUR APPROACH
   Number: CREWiiFY purple, monospaced, restrained size.
   Label: muted white, highly tracked uppercase, same size.
   No slash separator. */
.cs-exp-marker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 12px;
  text-align: left;
}

.cs-exp-marker__num {
  font-size: 0.68rem;
  font-weight: 700;
  color: #A78BFA;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
  line-height: 1;
  flex-shrink: 0;
}

/* sep is removed from HTML; keep rule as no-op fallback */
.cs-exp-marker__sep {
  display: none;
}

.cs-exp-marker__title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #71717A;
  line-height: 1;
}

/* ==========================================================================
   1. IDENTITY / HERO (Asymmetric 2-Column Editorial Composition)
   ========================================================================== */
.cs-exp-hero {
  position: relative;
  width: 100%;
}

.cs-exp-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: center;
  min-height: 380px;
}

.cs-exp-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.cs-exp-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cs-exp-meta-tag {
  color: #A78BFA;
}

.cs-exp-meta-industry {
  color: #A1A1AA;
  letter-spacing: 0.12em;
}

.cs-exp-meta-timeframe {
  color: #71717A;
  font-family: var(--font-mono, monospace);
}

/* Client name: Strong, bold, uppercase */
.cs-exp-client-name {
  font-size: clamp(2.2rem, 3.2vw, 3.1rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
  word-break: normal;
  max-width: 500px;
}

/* Secondary headline: Medium purple / lavender */
.cs-exp-headline {
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 600;
  color: #A78BFA;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 24px 0;
}

/* Overview block */
.cs-exp-overview-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-exp-overview-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A78BFA;
}

.cs-exp-overview {
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  font-weight: 400;
  color: #9A9A9A;
  line-height: 1.65;
  max-width: 480px;
  margin: 0;
}

/* ============================================================
   RIGHT COLUMN — ADAPTIVE MEDIA STAGE
   The stage maintains a controlled envelope (fixed height).
   The image adapts its size and alignment WITHIN the stage
   based on its classified aspect ratio. No image is ever
   cropped. The hero height stays consistent across all
   case studies.
   ============================================================ */

.cs-exp-hero__visual-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* STAGE — fixed envelope, provides composition anchor */
.cs-exp-hero__stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 400px;         /* Fixed envelope — hero height stays consistent */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

/* Subtle purple ambient glow — behind the image */
.cs-exp-hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.22) 0%,
    rgba(109, 40, 217, 0.08) 48%,
    transparent 72%
  );
  filter: blur(42px);
  pointer-events: none;
  z-index: 1;
}

/* Decorative editorial contour lines — behind the image */
.cs-exp-hero__contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.75;
}

/* IMAGE BOX — base layer, no type applied yet (JS adds the type class) */
.cs-exp-hero__image-box {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No overflow:hidden here — each type sets it as needed */
  /* No border-radius here — each type controls its own frame */
}

/* Base image defaults — always contain, never crop */
.cs-exp-hero__img {
  display: block;
  object-fit: contain;
  object-position: center center;
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   TYPE CLASSES — applied automatically by initHeroMediaDetector()
   Each class controls the image-box dimensions within the fixed
   stage envelope. object-fit:contain is the default for all.
   ------------------------------------------------------------------ */

/* LANDSCAPE — photographs, resort/cruise imagery, website screenshots
   Wide presentation; fills most of the stage width. */
.cs-exp-media--landscape {
  width: 100%;
  max-height: 320px;
  background: #09080F;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65);
}

.cs-exp-media--landscape .cs-exp-hero__img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

/* PORTRAIT — doctor/person photography, vertical campaign creative
   Narrower box; image retains natural portrait proportions. */
.cs-exp-media--portrait {
  width: auto;
  max-width: 72%;
  max-height: 380px;
  background: #09080F;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65);
}

.cs-exp-media--portrait .cs-exp-hero__img {
  width: auto;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}

/* SQUARE — social media artwork, campaign squares
   Moderate box; sits naturally centered within stage. */
.cs-exp-media--square {
  width: auto;
  max-width: 84%;
  max-height: 350px;
  background: #09080F;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65);
}

.cs-exp-media--square .cs-exp-hero__img {
  width: auto;
  max-width: 100%;
  max-height: 350px;
  object-fit: contain;
}

/* ARTWORK — tall stat graphics, infographics, very tall photographs
   No artificial width cap; image fills the full stage height.
   No border on very tall assets to avoid empty side-padding feeling. */
.cs-exp-media--artwork {
  width: auto;
  max-width: 100%;
  max-height: 395px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.cs-exp-media--artwork .cs-exp-hero__img {
  width: auto;
  max-width: 100%;
  max-height: 395px;
  object-fit: contain;
  /* Subtle lift so the graphic feels intentional against the dark stage */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7));
}

/* Glow intensity: tone down slightly for narrow (portrait/artwork) types
   so the glow doesn't feel oversized relative to the image footprint.
   Uses :has() to target the glow within a stage that contains that media type. */
.cs-exp-hero__stage:has(.cs-exp-media--portrait) .cs-exp-hero__glow,
.cs-exp-hero__stage:has(.cs-exp-media--artwork)  .cs-exp-hero__glow {
  opacity: 0.7;
}

/* ==========================================================================
   2. RESULTS (Primary Metric & Dynamic Secondary Columns)
   ========================================================================== */
.cs-exp-results {
  position: relative;
}

/* Primary Metric — prominent but restrained (~64–72px range) */
.cs-exp-primary-metric {
  text-align: left;
  padding: 4px 0 16px;
}

.cs-exp-primary-metric__val {
  font-size: clamp(3.6rem, 4.6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}

.cs-exp-primary-metric__lbl {
  font-size: 0.88rem;
  font-weight: 400;
  color: #A1A1AA;
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Secondary Metrics — left-aligned, separated by 1px rule */
.cs-exp-secondary-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 0 6px;
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cs-exp-secondary-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-right: 40px;
}

.cs-exp-secondary-col:first-child {
  padding-left: 0;
}

.cs-exp-secondary-sep {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.07);
  margin-right: 40px;
  flex-shrink: 0;
  align-self: center;
}

.cs-exp-secondary-val {
  font-size: clamp(1.75rem, 2.1vw, 2.05rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.cs-exp-secondary-lbl {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #71717A;
}

/* ==========================================================================
   ANALYTICS PROOF (Large, readable evidence screenshots)
   Visually quiet — label then images, no decorative treatment.
   ========================================================================== */
.cs-exp-proof {
  position: relative;
}

.cs-exp-proof-label {
  margin-top: 0;
  margin-bottom: 12px;
}

.cs-exp-proof-label__text {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #52525B;
}

.cs-exp-proof-grid {
  display: grid;
  gap: 16px;
}

.cs-exp-proof-grid--count-1 {
  grid-template-columns: 1fr;
}

.cs-exp-proof-grid--count-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-exp-proof-grid--count-3 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-exp-proof-grid--count-3 .cs-exp-proof-item:last-child {
  grid-column: 1 / -1;
}

.cs-exp-proof-grid--count-4 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-exp-proof-grid--count-5,
.cs-exp-proof-grid--count-6,
.cs-exp-proof-grid--count-7,
.cs-exp-proof-grid--count-8 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cs-exp-proof-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.cs-exp-proof-item__frame {
  background: #07060D;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-exp-proof-item__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.cs-exp-proof-item__caption {
  font-size: 0.74rem;
  color: #52525B;
  margin-top: 8px;
  text-align: left;
  line-height: 1.4;
}

/* ==========================================================================
   CHALLENGE + APPROACH
   One editorial two-column composition. Content breathes naturally —
   no forced equal-height columns, no filler content.
   ========================================================================== */
.cs-exp-challenge-approach {
  position: relative;
}

.cs-exp-ca-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 40px;
  align-items: start;
}

/* 1px vertical rule between challenge and approach */
.cs-exp-ca-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
  align-self: stretch;
  margin-top: 20px;
  min-height: 60px;
}

.cs-exp-ca-col {
  min-width: 0;
}

/* Challenge summary: compact, editorial, muted */
.cs-exp-challenge-summary {
  font-size: 0.88rem;
  font-weight: 400;
  color: #71717A;
  line-height: 1.6;
  margin: 0 0 14px 0;
  max-width: 100%;
}

/* Challenge bullet list — single column default */
.cs-exp-challenge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Two-column layout for 5+ challenge points */
.cs-exp-challenge-list--grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
}

.cs-exp-challenge-item {
  position: relative;
  padding-left: 16px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #D4D4D8;
  line-height: 1.5;
}

.cs-exp-challenge-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #6D28D9;
  opacity: 0.7;
}

/* Approach list — 1-col default, 2-col for 5+ items */
.cs-exp-approach-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-exp-approach-list--grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
}

/* Each approach item: thin bottom rule as separator */
.cs-exp-approach-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cs-exp-approach-item:first-child {
  padding-top: 0;
}

.cs-exp-approach-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* grid2 mode: last item in the list loses its separator line */
.cs-exp-approach-list--grid2 .cs-exp-approach-item:last-child {
  border-bottom: none;
}

.cs-exp-approach-num {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6D28D9;
  font-family: var(--font-mono, monospace);
  flex-shrink: 0;
  padding-top: 3px;
  opacity: 0.9;
}

.cs-exp-approach-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Approach title — slightly stronger than description */
.cs-exp-approach-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #F4F4F5;
  line-height: 1.35;
}

/* Approach description — muted, supporting role */
.cs-exp-approach-desc {
  font-size: 0.80rem;
  font-weight: 400;
  color: #71717A;
  line-height: 1.5;
}

/* ==========================================================================
   WORK / GALLERY (Adaptive Creative Portfolio Showcase)
   ========================================================================== */
.cs-exp-work {
  position: relative;
}

.cs-exp-work__gallery {
  display: grid;
  gap: 16px;
}

.cs-exp-work__gallery--count-1 {
  grid-template-columns: 1fr;
}

.cs-exp-work__gallery--count-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-exp-work__gallery--count-3 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-exp-work__gallery--count-3 .cs-exp-work-figure:first-child {
  grid-column: 1 / -1;
}

.cs-exp-work__gallery--count-4 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-exp-work__gallery--count-5,
.cs-exp-work__gallery--count-6,
.cs-exp-work__gallery--count-7,
.cs-exp-work__gallery--count-8 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cs-exp-work-figure {
  margin: 0;
}

.cs-exp-work-figure__frame {
  background: #050408;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

.cs-exp-work-figure__img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

.cs-exp-work-figure__caption {
  font-size: 0.76rem;
  color: #71717A;
  margin-top: 8px;
  text-align: center;
}

/* ==========================================================================
   MICRO CTA & NAVIGATION
   Slim closing row — thin top divider, small headline, ghost button.
   ========================================================================== */
.cs-exp-footer {
  position: relative;
  margin-top: 0;
}

.cs-exp-closing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 12px;
  flex-wrap: wrap;
}

.cs-exp-closing-row__headline {
  font-size: 0.92rem;
  font-weight: 500;
  color: #A1A1AA;
  letter-spacing: 0.01em;
}

.cs-exp-cta-btn {
  padding: 10px 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.15);
  transition: all 200ms ease;
  text-decoration: none;
  cursor: pointer;
}

.cs-exp-cta-btn:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: #A78BFA;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.35);
}

.cs-exp-btn-arrow {
  transition: transform 200ms ease;
}

.cs-exp-cta-btn:hover .cs-exp-btn-arrow {
  transform: translateX(4px);
}

/* Secondary Previous / Next Case Navigation */
.cs-exp-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 8px;
  gap: 16px;
}

.cs-exp-nav-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.2s ease;
  padding: 4px 0;
}

.cs-exp-nav-btn:hover {
  opacity: 0.75;
}

.cs-exp-nav-btn--next {
  text-align: right;
}

.cs-exp-nav-btn__dir {
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B5CF6;
  font-family: var(--font-mono, monospace);
}

.cs-exp-nav-btn__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #FFFFFF;
}

.cs-exp-nav-sep {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.08);
}




/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* Laptop (1100px) */
@media (max-width: 1100px) {
  .cs-hero__container {
    gap: var(--space-2xl);
    grid-template-columns: 1fr 1.15fr;
  }

  .cs-hero__title {
    font-size: 3.6rem;
  }

  .cs-constellation {
    height: 390px;
    max-width: 480px;
  }

  .cs-constellation__node--anchor {
    top: 150px;
    left: 140px;
  }

  .cs-constellation__node--kims {
    top: 18px;
    left: 20px;
  }

  .cs-constellation__node--wockhardt {
    top: 12px;
    right: 25px;
  }

  .cs-constellation__node--travezy {
    top: 135px;
    left: 0px;
  }

  .cs-constellation__node--celebrity {
    top: 125px;
    right: 10px;
  }

  .cs-constellation__node--acktive {
    top: 270px;
    left: 40px;
  }

  .cs-constellation__node--maheshwari {
    top: 250px;
    right: 25px;
  }

  .cs-credibility__grid {
    gap: 40px;
  }

  .cs-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet (992px) */
@media (max-width: 992px) {
  .cs-hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-2xl));
    padding-bottom: var(--space-2xl);
  }

  .cs-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .cs-hero__content {
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
  }

  .cs-hero__description {
    margin-left: auto;
    margin-right: auto;
  }

  .cs-hero__cta-group {
    justify-content: center;
  }

  .cs-hero__visual {
    display: none;
  }

  .cs-hero__mobile-strip {
    display: block;
  }

  .cs-credibility {
    padding-top: 65px;
    padding-bottom: 70px;
  }

  .cs-credibility__eyebrow-wrap {
    margin-bottom: 36px;
  }

  .cs-credibility__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .cs-credibility__left {
    max-width: 520px;
    margin: 0 auto;
  }

  .cs-testimonial-panel {
    max-width: 520px;
    min-height: auto;
    margin: 0 auto;
  }

  /* Portfolio Section Tablet */
  .cs-portfolio {
    padding-top: 65px;
    padding-bottom: 90px;
  }

  .cs-filter-nav {
    justify-content: flex-start;
    margin-bottom: 36px;
    width: 100%;
    max-width: 100%;
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    transition: mask-image 200ms ease, -webkit-mask-image 200ms ease;
  }

  .cs-filter-nav.is-scrolled-end {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .cs-filter-list {
    width: 100%;
    max-width: 100%;
    padding: 6px 12px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .cs-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .cs-hero {
    padding-top: calc(72px + var(--space-xl));
    padding-bottom: var(--space-3xl);
  }

  .cs-hero__title {
    font-size: 2.6rem;
    line-height: 1.1;
  }

  .cs-hero__description {
    font-size: 0.95rem;
  }

  .cs-hero__cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }

  .cs-hero__cta-group .btn {
    width: 100%;
  }

  /* Credibility Section Mobile */
  .cs-credibility {
    padding-top: 55px;
    padding-bottom: 65px;
  }

  .cs-credibility__eyebrow-wrap {
    margin-bottom: 30px;
  }

  .cs-editorial-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }

  .cs-editorial-item--stat-large {
    padding: 22px 20px;
  }

  .cs-media-card {
    height: 160px;
  }

  .cs-testimonial-panel {
    padding: 26px 20px;
    border-radius: 20px;
    min-height: auto;
  }

  .cs-testimonial__quote {
    font-size: 1rem;
    margin-bottom: 18px;
  }

  .cs-audio-player {
    padding: 6px 14px 6px 8px;
    margin-bottom: 18px;
  }

  .cs-audio-player__btn {
    width: 38px;
    height: 38px;
  }

  /* Portfolio Section Mobile */
  .cs-portfolio {
    padding-top: 50px;
    padding-bottom: 70px;
  }

  .cs-filter-nav {
    justify-content: flex-start;
    margin-bottom: 28px;
    width: 100%;
    max-width: 100%;
    mask-image: linear-gradient(to right, black calc(100% - 30px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 30px), transparent 100%);
    transition: mask-image 200ms ease, -webkit-mask-image 200ms ease;
  }

  .cs-filter-list {
    width: 100%;
    max-width: 100%;
    padding: 6px 10px;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .cs-filter-btn {
    min-height: 42px;
    padding: 8px 16px;
    font-size: 0.82rem;
  }

  .cs-masonry-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Mobile Full-Screen Expanded Case Study Overlay */
  .cs-modal-backdrop {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .cs-modal {
    width: 100vw;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    transform: translateY(20px);
  }

  .cs-modal.is-active {
    transform: translateY(0);
  }

  .cs-modal__sticky-header {
    padding: 12px 16px;
  }

  .cs-modal__body {
    padding: 24px 18px 48px;
  }

  .cs-exp {
    gap: 28px;
  }

  .cs-exp-hero__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* On mobile the stage collapses to a controlled max-height,
     still respecting the image's natural proportions inside */
  .cs-exp-hero__stage {
    height: auto;
    max-height: 320px;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .cs-exp-hero__visual-wrap {
    min-height: auto;
    justify-content: center;
  }

  /* All type classes: let the image breathe on small screens */
  .cs-exp-media--landscape,
  .cs-exp-media--portrait,
  .cs-exp-media--square,
  .cs-exp-media--artwork {
    max-width: 100%;
  }

  .cs-exp-media--portrait {
    max-width: 80%;
  }

  .cs-exp-media--landscape .cs-exp-hero__img,
  .cs-exp-media--square    .cs-exp-hero__img {
    max-height: 280px;
  }

  .cs-exp-media--portrait .cs-exp-hero__img {
    max-height: 300px;
  }

  .cs-exp-media--artwork .cs-exp-hero__img {
    max-height: 310px;
  }

  .cs-exp-client-name {
    font-size: clamp(1.65rem, 6.5vw, 2.1rem);
    line-height: 1.12;
  }

  .cs-exp-headline {
    font-size: 1.15rem;
    margin-bottom: 18px;
  }

  .cs-exp-overview {
    font-size: 0.875rem;
  }

  .cs-exp-primary-metric__val {
    font-size: clamp(2.8rem, 9.5vw, 3.4rem);
  }

  .cs-exp-secondary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
  }

  .cs-exp-secondary-col {
    padding-right: 0;
    width: 100%;
  }

  .cs-exp-secondary-sep {
    display: none;
  }

  .cs-exp-secondary-val {
    font-size: 1.55rem;
  }

  .cs-exp-proof-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .cs-exp-proof-grid--count-3 .cs-exp-proof-item:last-child {
    grid-column: auto;
  }

  /* Challenge + Approach: Stack to single column on mobile */
  .cs-exp-ca-grid {
    grid-template-columns: 1fr;
    gap: 28px 0;
  }

  .cs-exp-ca-divider {
    display: none;
  }

  /* Collapse both approach and challenge 2-col grids to 1 col on mobile */
  .cs-exp-approach-list--grid2,
  .cs-exp-challenge-list--grid2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cs-exp-work__gallery {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .cs-exp-work__gallery--count-3 .cs-exp-work-figure:first-child {
    grid-column: auto;
  }

  .cs-exp-closing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0 10px;
  }

  .cs-exp-closing-row__headline {
    font-size: 0.88rem;
  }

  .cs-exp-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .cs-exp-nav-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .cs-exp-nav-sep {
    display: none;
  }

  .cs-exp-nav-btn--next {
    text-align: left;
  }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
  .cs-hero__title {
    font-size: 2.2rem;
  }

  .cs-testimonial__author {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cs-testimonial__stars {
    align-items: flex-start;
  }
}