/* ================================================
   Customer Stories Plugin — Frontend CSS v4
   Pixel-matched to Profit.co reference
================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cs-root {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}
.title, h1, h2, h3, h4, h5{font-family:font:Plus_Jakarta_Sans !important;}
/* ── Shared max-width (hero + content + detail page) ── */
.cs-container,
.cs-layout,
.cs-detail-page {
  max-width: 90rem;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 1024px) {
  .lg\:text-5xl {
      font-size: 3rem !important;
      line-height: 1 !important;
  }
}
/* ================================================
   HERO
================================================ */
.cs-hero {
  background-image: url(https://storage.googleapis.com/profit-stag/wp-content/uploads/2026/06/e87147d1-frame-2147225986.png);
  padding: 52px 0 48px;
  text-align: center;background-size: cover;
}

@media (min-width:1024px){.cs-hero-blur::before{top:-68px;height:70px}}.cs-hero-blur::before{content:'';position:absolute;top:-68px;left:0;right:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}.cs-hero-blur{position:relative}

.cs-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #f97316; margin-bottom: 14px;
}
.cs-hero-title {
  font-size: clamp(28px,4vw,46px); font-weight: 900;
  color: #0f172a; line-height: 1.14; margin-bottom: 14px;
}
.cs-hero-title .accent { color: #f97316; }
.cs-hero-subtitle {
  font-size: 15px; color: #64748b; line-height: 1.65;
  max-width: 460px; margin: 0 auto 24px;
}
.cs-hero-stats {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 20px; font-size: 13px; color: #64748b;
}
.cs-hero-stat { display: flex; align-items: center; gap: 6px; }
.cs-hero-stat svg { width: 15px; height: 15px; color: #3b82f6; flex-shrink: 0; }

/* ================================================
   PAGE BACKGROUND
================================================ */
.cs-page-bg { background: #f8fafd; }

/* ================================================
   LAYOUT  (sidebar + grid — same max-width as hero)
================================================ */
.cs-layout {
  padding-top: 7rem;
  padding-bottom: 0;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: transparent;
}

/* ================================================
   LEFT SIDEBAR
================================================ */
.cs-sidebar {
  width: 316px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* Search */
.cs-search-wrap {
  position: relative;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #f1f5f9;
}
.cs-search-icon {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #94a3b8; pointer-events: none;
}
.cs-search-input {
  width: 100%; border: 1.5px solid #e2e8f0; border-radius: 8px;
  padding: 8px 10px 8px 34px; font-size: 13px; font-family: inherit;
  color: #334155; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cs-search-input::placeholder { color: #94a3b8; }
.cs-search-input:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.2); }

/* Filter section */
.cs-filter-group {
  padding: 14px 0 8px;
  border-bottom: 1px solid #f1f5f9;
}
.cs-filter-group:last-child { border-bottom: none; }

.cs-filter-group-label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #94a3b8; padding: 0 14px; margin-bottom: 6px;
}

/* ── Filter row  (the clickable item) ── */
.cs-filter-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; cursor: pointer;
  transition: background .15s, color .15s; user-select: none;
  border-radius: 0;
}
.cs-filter-row:hover {
  background: #eff6ff;
}
.cs-filter-row:hover .cs-filter-label-text {
  color: #1d4ed8;
}
.cs-filter-row:hover .cs-checkbox-indicator,
.cs-filter-row:hover .cs-radio-indicator {
  border-color: #93c5fd;
}
.cs-filter-row:hover .cs-filter-count {
  color: #64748b;
}
.cs-filter-row.active { background: #eff6ff; }
.cs-filter-row.active .cs-filter-label-text { color: #1d4ed8; font-weight: 600; }
.cs-filter-row.active:hover { background: #dbeafe; }

/* ── Radio indicator (Industries + Regions) ── */
.cs-radio-indicator {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #cbd5e1; background: #fff;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s, box-shadow .12s;
  pointer-events: none;
}
.cs-filter-row.active .cs-radio-indicator {
  border-color: #1d4ed8; background: #1d4ed8;
  box-shadow: inset 0 0 0 3px #fff;
}

/* ── Checkbox indicator (Products) ── */
.cs-checkbox-indicator {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid #cbd5e1; background: #fff;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
  pointer-events: none;
}
.cs-checkbox-indicator::after {
  content: ''; display: block;
  width: 9px; height: 5px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg) translateY(-1px);
  transition: border-color .12s;left: 1px;position: relative;top:0px;
}
.cs-filter-row.active .cs-checkbox-indicator {
  background: #1d4ed8; border-color: #1d4ed8;
}
.cs-filter-row.active .cs-checkbox-indicator::after {
  border-left-color: #fff; border-bottom-color: #fff;
}

.cs-filter-label-text {
  flex: 1; font-size: 13px; color: #374151;
  line-height: 1.4; transition: color .12s;
}
.cs-filter-count { font-size: 12px; color: #94a3b8; font-weight: 500; flex-shrink: 0; }

/* ================================================
   GRID COLUMN
================================================ */
.cs-grid-col { flex: 1; min-width: 0; }

.cs-grid-topbar {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 16px;
}
.cs-result-count { font-size: 13px; color: #64748b; }
.cs-result-count strong { color: #0f172a; }

.cs-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 16px;
}
@media (max-width:900px)  { .cs-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:580px)  { .cs-grid { grid-template-columns: 1fr; } }

/* ================================================
   STORY CARD
================================================ */
.cs-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.cs-card[data-href] { cursor: pointer; }
/* Main listing card hover (reference screenshots) */
.cs-card:hover {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.cs-card[data-href]:focus-visible {
  outline: 2px solid #0056D2;
  outline-offset: 2px;
}
.cs-card.cs-card-enter {
  animation-duration: .34s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-fill-mode: both;
}
.cs-card.cs-card-enter.cs-card-from-left { animation-name: cs-card-enter-left; }
.cs-card.cs-card-enter.cs-card-from-right { animation-name: cs-card-enter-right; }
.cs-card.cs-card-leave {
  animation-duration: .18s;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}
.cs-card.cs-card-leave.cs-card-from-left { animation-name: cs-card-leave-left; }
.cs-card.cs-card-leave.cs-card-from-right { animation-name: cs-card-leave-right; }
@keyframes cs-card-enter-left {
  from { transform: translateX(-16px); }
  to { transform: translateX(0); }
}
@keyframes cs-card-enter-right {
  from { transform: translateX(16px); }
  to { transform: translateX(0); }
}
@keyframes cs-card-leave-left {
  from { transform: translateX(0); }
  to { transform: translateX(-12px); }
}
@keyframes cs-card-leave-right {
  from { transform: translateX(0); }
  to { transform: translateX(12px); }
}

/* Photo */
.cs-card-photo {
  width: 100%; aspect-ratio: 16/10; overflow: hidden;
  position: relative; flex-shrink: 0;min-height: 270px;
}
.cs-card-photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: top center; display: block;
}
/* Soft lite gradients — visible 3-stop pastel blends */
.cs-root,
.cs-card,
.cs-card-photo-bg {
  --grad-01: linear-gradient(145deg, #F7B896 0%, #FFD4B8 48%, #FFE9DC 100%);
  --grad-02: linear-gradient(145deg, #7ED9B8 0%, #B5F0DE 48%, #E0FBFA 100%);
  --grad-03: linear-gradient(145deg, #9CCBFA 0%, #C5E4FF 48%, #EAF5FF 100%);
  --grad-04: linear-gradient(145deg, #FFCFA3 0%, #FFE2C2 48%, #FFF4E8 100%);
  --grad-05: linear-gradient(145deg, #FFB3BC 0%, #FFD0C8 48%, #FFE8E4 100%);
  --grad-06: linear-gradient(145deg, #8BE0C8 0%, #B8F0E0 48%, #E4FAF6 100%);
  --grad-07: linear-gradient(145deg, #C9A8F5 0%, #D9C8F8 48%, #ECE6FC 100%);
  --grad-08: linear-gradient(145deg, #FFA8B4 0%, #FFC4B0 48%, #FFE0D4 100%);
  --grad-09: linear-gradient(145deg, #F598A4 0%, #FFB8B0 48%, #FFDCD6 100%);
  --grad-10: linear-gradient(145deg, #C5E88A 0%, #B8ECC0 48%, #E4F8E8 100%);
  --grad-11: linear-gradient(145deg, #A8B8F0 0%, #C0D4FA 48%, #E4EEFF 100%);
  --grad-12: linear-gradient(145deg, #FFC8A0 0%, #FFE0C4 48%, #FFF3E6 100%);
  --grad-13: linear-gradient(145deg, #FF9EAA 0%, #FFC4CC 48%, #FFE8EC 100%);
  --grad-14: linear-gradient(145deg, #98D4B8 0%, #B8E8D4 48%, #E4F6EE 100%);
  --grad-15: linear-gradient(145deg, #FFB8C4 0%, #FFD4DC 48%, #FFF0F2 100%);
  --grad-16: linear-gradient(145deg, #FFB0A8 0%, #E0C0F8 48%, #F0E4FF 100%);
  --grad-17: linear-gradient(145deg, #FFB0A8 0%, #FFC8C0 48%, #FFE4E0 100%);
  --grad-18: linear-gradient(145deg, #8FC4FA 0%, #B0DCC8 48%, #E4F4EC 100%);
  --grad-19: linear-gradient(145deg, #D0E888 0%, #D8F0A8 48%, #F0F8D8 100%);
  --grad-20: linear-gradient(145deg, #E098B8 0%, #E0C0F0 48%, #F4E8FC 100%);
}

/* Gradient / content placeholder — bg layer soft opacity, text/icon solid */
.cs-card-photo-placeholder {
  width: 100%; height: 100%;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.cs-card-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  transition: background 0.85s ease, opacity 0.35s ease;
}
.cs-card-photo-content.cs-card-bg-animate .cs-card-photo-bg {
  opacity: 0.62;
}
.cs-card-photo-placeholder > .cs-avatar-circle,
.cs-card-photo-placeholder > .cs-card-content-text {
  position: relative;
  z-index: 1;
}
.cs-card-photo-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  text-align: center;
}
.cs-card-content-text {
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 28px;
  max-width: 90%;
  word-break: break-word;
  margin: 0;
}

/* 20 lite gradients — applied on bg layer */
.cs-card-photo-bg.cs-grad-0,
.cs-grad-0  { background-image: var(--grad-01) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-1,
.cs-grad-1  { background-image: var(--grad-02) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-2,
.cs-grad-2  { background-image: var(--grad-03) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-3,
.cs-grad-3  { background-image: var(--grad-04) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-4,
.cs-grad-4  { background-image: var(--grad-05) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-5,
.cs-grad-5  { background-image: var(--grad-06) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-6,
.cs-grad-6  { background-image: var(--grad-07) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-7,
.cs-grad-7  { background-image: var(--grad-08) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-8,
.cs-grad-8  { background-image: var(--grad-09) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-9,
.cs-grad-9  { background-image: var(--grad-10) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-10,
.cs-grad-10 { background-image: var(--grad-11) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-11,
.cs-grad-11 { background-image: var(--grad-12) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-12,
.cs-grad-12 { background-image: var(--grad-13) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-13,
.cs-grad-13 { background-image: var(--grad-14) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-14,
.cs-grad-14 { background-image: var(--grad-15) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-15,
.cs-grad-15 { background-image: var(--grad-16) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-16,
.cs-grad-16 { background-image: var(--grad-17) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-17,
.cs-grad-17 { background-image: var(--grad-18) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-18,
.cs-grad-18 { background-image: var(--grad-19) !important; background-color: transparent !important; }
.cs-card-photo-bg.cs-grad-19,
.cs-grad-19 { background-image: var(--grad-20) !important; background-color: transparent !important; }

/* Shortcode embed: no page background / rounded panel (full page keeps .cs-page-bg) */
.cs-root.cs-embed {
  background: transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.cs-root.cs-embed .cs-layout {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.cs-avatar-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
}
.cs-avatar-circle svg { width: 34px; height: 34px; color: #9ca3af; }

/* Video button */
.cs-video-btn {
  position: absolute; bottom: 8px; right: 8px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.92); border: 1px solid #e2e8f0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; transition: background .15s;
}
.cs-video-btn:hover { background: #fff; }
.cs-video-btn svg { width: 13px; height: 13px; color: #3b82f6; }

/* Card body */
.cs-card-body { padding: 14px 16px 0; flex: 1; display: flex; flex-direction: column; }

/* Badge */
.cs-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 20px;
  font-size: 11px; font-weight: 600; color: #475569;
  margin-bottom: 8px; align-self: flex-start;
}

/* Quote */
.cs-card-quote {
  font-size: 13px; color: #374151; line-height: 1.65;
  margin: 0 0 12px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* Person row — keep footer height stable when name/logo missing */
.cs-card-person { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-height: 32px; }
.cs-card-person:empty { display: none; margin: 0; min-height: 0; }
.cs-person-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: linear-gradient(135deg,#dbeafe,#ede9fe);
  display: flex; align-items: center; justify-content: center;
}
.cs-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cs-person-avatar svg { width: 16px; height: 16px; color: #a5b4fc; }
.cs-person-info { flex: 1; min-width: 0; }
.cs-person-name { font-size: 13px; font-weight: 700; color: #0f172a; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-person-role { font-size: 11px; color: #64748b; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-card-logo { flex-shrink: 0; }
.cs-card-logo img { max-height: 26px; max-width: 72px; width: auto; object-fit: contain; display: block; }

/* Footer — matches listing: meta left, actions right, always bottom-aligned */
.cs-card-footer {
  padding: 12px 16px 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  min-height: 56px;
  box-sizing: border-box;
}
.cs-card-meta-text {
  font-size: 11px;
  color: #94a3b8;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cs-card-footer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  min-height: 34px;
}
/* Play control — same as customer stories listing (DevTools reference) */
.cs-story-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 0;
  margin: 0;
  line-height: 0;
  box-sizing: border-box;
  vertical-align: middle;
  align-self: center;
  box-shadow: none;
  transition: border-color .15s, background .15s, color .15s;
}
.cs-story-btn:hover {
  /* Stay gray — no blue (customer stories / image 2 reference) */
  background: #fff;
  border-color: #94a3b8;
  box-shadow: none;
  color: #64748b;
}
.cs-story-btn:hover svg path,
.cs-story-btn:hover svg circle {
  stroke: #64748b;
}
.cs-story-btn:focus-visible {
  outline: 2px solid #0056D2;
  outline-offset: 2px;
}
.cs-story-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  margin: 0;
  flex-shrink: 0;
}
.cs-story-btn--play {
  pointer-events: auto;
}
.cs-card-footer-actions .cs-read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  line-height: 1;
  box-sizing: border-box;
  align-self: center;
  transform: none !important;
}

/* ================================================
   VIDEO MODAL
   PROBLEM 2 FIX:
   - display:flex so overlay fills + dialog centres
   - !important to beat Bootstrap .modal overrides
   - iframe is direct child (no embed-responsive wrapper)
   - close button z-index above iframe
================================================ */
body.cs-modal-open { overflow: hidden !important; }

#cs-video-modal {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  align-items: center !important;
  justify-content: center !important;
}
#cs-video-modal.is-open {
  display: flex !important;
}
.cs-video-modal__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, .82) !important;
  cursor: pointer !important;
}
.cs-video-modal__dialog {
  position: relative !important;
  z-index: 1 !important;
  width: min(960px, calc(100vw - 32px)) !important;
  aspect-ratio: 16 / 9 !important;
  background: #000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55) !important;
  flex-shrink: 0 !important;
}
/* PROBLEM 1 FIX: iframe direct child, positioned to fill dialog */
.cs-video-modal__dialog iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}
.cs-video-modal__close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, .85) !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 34px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  padding: 0 !important;
  font-family: inherit !important;
}
.cs-video-modal__close:hover { background: rgba(15, 23, 42, .98) !important; }
.cs-read-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 14px;
  height: 34px;
  min-height: 34px;
  background: linear-gradient(to bottom, #fff, #f3f4f6);
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  line-height: 1;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background 250ms ease-out, border-color 250ms ease-out, box-shadow 250ms ease-out, color 250ms ease-out;
  transform: none;
}
.cs-read-btn:hover {
  transform: none;
  background: #fff;
  border-color: #d1d5db;
  color: #0f172a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.cs-read-btn:active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: none;
}
.cs-read-btn:focus-visible {
  outline: 2px solid #0056D2;
  outline-offset: 2px;
}

/* ================================================
   PAGINATION
================================================ */
.cs-load-more-wrap { text-align: center; padding: 32px 0 0; }
.cs-load-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 32px; border: 2px solid #2563eb; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #2563eb; background: #fff;
  cursor: pointer; transition: background .15s, color .15s; font-family: inherit;
}
.cs-load-more-btn:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.cs-no-results {
  grid-column: 1/-1; text-align: center; padding: 60px 20px; color: #94a3b8;
}
.cs-no-results p:first-child { font-size: 15px; font-weight: 600; color: #64748b; margin-bottom: 6px; }
#cs-no-results { display: none; }
#cs-no-results.is-visible { display: block; }

/* ================================================
   RATINGS BAR
================================================ */
.cs-ratings-section { background: #fff; border-top: 1px solid #f1f5f9; }
.cs-ratings-bar { max-width: 1180px; margin: 0 auto; padding: 36px 24px; }
.cs-ratings-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; text-align: center; }
.cs-stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 6px; }
.cs-star { width: 18px; height: 18px; color: #f59e0b; }
.cs-rating-score { font-size: 28px; font-weight: 900; color: #0f172a; line-height: 1; margin-bottom: 4px; }
.cs-rating-source { font-size: 12px; color: #64748b; font-weight: 500; }

/* ================================================
   CTA SECTION
================================================ */
.cs-cta-section { background: linear-gradient(160deg,#f1f5fb 0%,#eaf0fd 100%); padding: 64px 24px 72px; text-align: center; }
.cs-cta-title { font-size: clamp(24px,3.5vw,38px); font-weight: 900; color: #0f172a; line-height: 1.2; margin-bottom: 6px; }
.cs-cta-title-accent { color: #f97316; }
.cs-cta-subtitle { font-size: 14px; color: #64748b; max-width: 420px; margin: 0 auto 28px; line-height: 1.7; }
.cs-cta-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 13px; color: #64748b; margin-bottom: 32px; }
.cs-cta-stat { display: flex; align-items: center; gap: 6px; }
.cs-cta-stat svg { width: 15px; height: 15px; color: #3b82f6; flex-shrink: 0; }
.cs-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cs-btn-primary {
  display: inline-flex; align-items: center; padding: 13px 32px;
  background: #1d4ed8; color: #fff; font-size: 15px; font-weight: 700;
  border-radius: 10px; text-decoration: none; border: 2px solid #1d4ed8;
  transition: background .15s; font-family: inherit; cursor: pointer;
}
.cs-btn-primary:hover { background: #1e40af; border-color: #1e40af; }
.cs-btn-outline {
  display: inline-flex; align-items: center; padding: 13px 32px;
  background: #fff; color: #1d4ed8; font-size: 15px; font-weight: 700;
  border-radius: 10px; text-decoration: none; border: 2px solid #1d4ed8;
  transition: all .15s; font-family: inherit; cursor: pointer;
}
.cs-btn-outline:hover { background: #1d4ed8; color: #fff; }

/* ================================================
   ANIMATION
================================================ */
@keyframes cs-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.cs-fade { animation: cs-fadein .35s ease both; }

/* ================================================
   DETAIL PAGE — exact Image 3 match
   Same max-width 1180px as hero
================================================ */
.cs-detail-page { padding-top: 20px; padding-bottom: 80px; }

/* Blue label badge (e.g. "A Fortune 500 Tech Enterprise") */
.cs-detail-badge {
  display: inline-block; background: #1d4ed8; color: #fff;
  border-radius: 8px; padding: 10px 18px;}
.cs-detail-badge-title { font-size: 14px; font-weight: 700; display: block; }
.cs-detail-badge-sub   { font-size: 12px; opacity: .85; display: block; margin-top: 2px; }

/* Big H1 */
.cs-detail-h1 {
  font-size: clamp(22px, 3vw, 34px); font-weight: 900;
  color: #0f172a; line-height: 1.18; margin-bottom: 40px;}

/* Two-column layout */
.cs-detail-cols {
  display: flex; gap: 48px; align-items: flex-start;
}

/* Left column (About / meta) */
.cs-detail-left { width: 300px; flex-shrink: 0; }
@media (min-width:1024px) {.cs-layout {
    overflow: visible !important;
  }
  .cs-layout .cs-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
    /* Short screens (e.g. 629px height): scroll sidebar to reach all filters */
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .cs-layout .cs-sidebar:hover {
    scrollbar-color: #94a3b8 #f1f5f9;
  }
  .cs-layout .cs-sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .cs-layout .cs-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }
  .cs-layout .cs-sidebar:hover::-webkit-scrollbar-thumb {
    background: #94a3b8;
  }
  .cs-layout .cs-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .cs-layout .cs-sidebar:hover::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
}

.cs-detail-meta-block { margin-bottom: 22px; }
.cs-detail-meta-label { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.cs-detail-meta-value { font-size: 14px; color: #374151; line-height: 1.6; }
.case-study-text .logo-section img {display: none;}
.cs-detail-right { flex: 1; min-width: 0; }

/* STORY label + intro */
.cs-story-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #f97316; margin-bottom: 12px;
}
.cs-story-intro {
  font-size: 18px; font-weight: 700; color: #0f172a;
  line-height: 1.45; margin-bottom: 16px;
}
.cs-story-lead { font-size: 14px; color: #475569; line-height: 1.75; margin-bottom: 28px; }

/* Detail page video block */
.cs-detail-video-wrap {
  margin-top: 24px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.cs-detail-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Article prose */
.cs-prose h2 { font-weight: 700; margin: 0.5rem 0 .5rem; color: #0f172a;text-align: start;}
.cs-prose h3 {font-weight: 600; margin: 0.5rem 0 .5rem; color: #0f172a; }
.cs-prose p  { margin-bottom: 1rem; line-height: 1.75; color: #374151; font-size: 14px; }
.cs-prose ul, .cs-prose ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.cs-prose li { margin-bottom: .4rem; color: #374151; line-height: 1.7; font-size: 14px; }
.cs-prose blockquote {
  border-left: 4px solid #2563eb; padding: .75rem 1.25rem;
  background: #eff6ff; border-radius: 0 .5rem .5rem 0;
  margin: 1.5rem 0; font-style: italic; color: #1e40af;
}
.cs-prose strong { color: #0f172a; font-weight: 700; }
.cs-prose a { color: #2563eb; text-decoration: underline; }

/* Breadcrumb */
.cs-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #64748b; margin-bottom: 16px; }
.cs-breadcrumb a { color: #2563eb; font-weight: 500; text-decoration: none; }
.cs-breadcrumb a:hover { text-decoration: underline; }
.cs-breadcrumb-sep { color: #cbd5e1; }

/* Tags */
.cs-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px; background: #eff6ff; color: #1d4ed8;
  font-size: 12px; font-weight: 500; border-radius: 20px;
  border: 1px solid #bfdbfe; text-decoration: none;
  transition: background .12s, color .12s;
}
.cs-tag:hover { background: #1d4ed8; color: #fff; }

/* Mobile */
.cs-mobile-filter-btn {
  display: none; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #2563eb;
  border: 1.5px solid #bfdbfe; border-radius: 8px;
  padding: 6px 14px; background: #fff; cursor: pointer; font-family: inherit;
}
@media (max-width:1023px) {
  .cs-sidebar { display: none; }
  .cs-sidebar.open { display: block; width: 100%; border-radius: 12px; }
  .cs-mobile-filter-btn { display: inline-flex; }
  .cs-layout { flex-direction: column; }
  .cs-detail-cols { flex-direction: column; }
  .cs-detail-left { width: 100%; position: static; }
}
.cs-root.cs-page-bg{
    border-top-right-radius: 3rem;
    border-top-left-radius: 3rem;
        overflow: hidden;background: #fff;
}}
.cs-root.cs-page-bg{
    border-top-right-radius: 3rem;
    border-top-left-radius: 3rem;
    margin: 0rem 2rem;
        overflow: hidden;
}.case-study-whole{margin-top: 0px !important;}.cs-prose .embed-responsive::before {     display: block;     content: "";     position: relative !important; }.cs-prose .embed-responsive::before {     display: block;     content: "";     position: relative !important; }.cs-prose .embed-responsive::before {     display: block;     content: "";     position: relative !important; }.cs-prose .embed-responsive::before {display: block;content: "";position: relative !important; }
.card-case-study{margin: 0 auto; position: sticky; top: 150px; background-color:white;padding:43px 35px; border-radius:5px; box-shadow: 0 12px 24px 1px #d4e0ec; width: 86%;}.card-logo img{width:100px;margin-bottom:20px;text-align:justify;display: block;}.card-details{list-style:none;padding:0;margin:0 0 20px;font-size:14px;}.card-details li{margin:10px 0;color:#6c757d;display:flex;align-items:center;justify-content:center}.card-details li svg{margin-right:10px;fill:#2d9cdb}.card-action{margin-top:20px}a.btn{background-color: #f26d20;border-color: #f26d20;border-radius: 10px !importent;padding: 10px;font-weight: 600;color:white;text-decoration:none;border-radius:25px;font-weight:bold;display:inline-block}.btn-primary:hover{background-color:#e6006b}.card-case-study span {margin-left: 26px; font-size: 14px; font-weight: 600; color: #1c304b; text-wrap: nowrap;} h4.location { font-size: 14px; font-weight: 500; color: #788290; display: flex;} @media(max-width:1199px){.card-case-study{width:100%!important;}}.card-action a.btn {width: 100%;border-radius: 0px !important;} @media{max-width:1199px}{.card-action a.btn {width: 80% !important}} @media(max-width:1199px){.case-study-card{order:0 !important;}} @media(max-width:1199px){.case-study-content{order:1 !important;}} .card-action a.btn:hover{background-color:#db5b11; color:#ffff;}
div#crumbs{font-size: 14px !important; margin-top: 20px;} .main1 p{margin: 16px 0px; line-height: 32px; font-size: 17px;} .card-case-study svg {margin-right: 10px;} .card-case-study p{line-height: 5px; margin-bottom: 36px;} .mt-0{margin-top: 0px !important;} @media (max-width: 1200px) {.justify-md-center{justify-content: center !important;} .case-study-card{display:none !important} .container.pad0.fullwidth.mt-2{display:block !important;}} .container.pad0.fullwidth.mt-2{display:none;} .navbar-brand {padding: 0px !important;}
 .audio-container{width:80%; margin: 0 auto; height:90px; padding:20px;box-sizing:border-box;border-radius:10px}audio{width:100%;height:100%;border-radius:10px} .full-case-study {background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.90) 27.93%, #FFF 100%); margin-top: 20px !important; margin-bottom: 40px !important;} .full-case-study button{font-weight: 600;border: 1px solid #000; background: #FFF; display: inline-flex; padding: 10px; justify-content: center; align-items: center; gap: 10px;} .blogs-cnt-sec .cnt-list li, ul.cnt-list li{background-image: none !important; list-style-type: disc; padding: 0px !important; font-size: 16px;} ul.cnt-list{padding-left: 25px;} .case-study-whole {background: #f8f9fb; padding: 20px 20px 10px 20px; margin-top: 10px;} .case-study-section{display:flex;justify-content:center;align-items:center;width:100%}.full-content button { font-weight: 500; border: 1px solid #c1c1c1; background: #fff; display: inline-flex; padding: 10px 60px; border-radius: 20px; color: #2f637a; justify-content: center; align-items: center; gap: 10px; }.gradient-wrapper { position: relative; width: 100%; height: 100px; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); display: flex; justify-content: center; align-items: flex-end; top: -58px; }button.faq-btn.more-less-txt {font-size: 14px; padding: 10px 20px; border-radius: 25px; color: #2f637a; border: 1px solid #2196f3 !important; font-weight: 500; width:90%; background-color: #fff;} button.faq-btn.more-less-txt:hover{background-color:#edf4ff; color:#0a394e;border:1px solid #6c6565;}
 ol {list-style: auto !important;}.cs-root.cs-page-bg,
body.post-type-archive-customer_story {
    overflow: visible !important;
    overflow-x: clip !important;   /* clip prevents sideways scroll WITHOUT breaking sticky */
}.language-link.active-link {color: #2563EB !important;}.language-link{color:#5d6166 !important;text-decoration:none !important;}.d-flex{display:flex;gap:.75rem;    margin-top: .5rem;}.hero-sub {
    margin: 0 auto 2.25rem;
    max-width: 500px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #94a3b8;
}.cs-detail-left.cs-fade {
    position: sticky;
    top: 100px;
    align-items: self-start;
}

button.cs-story-btn.cs-story-btn--play.swiper-no-swiping {
  border-radius: 20px !important;
}