/* ==========================================================================
   WCU Case Study — Shared stylesheet (Archive + Single)
   --------------------------------------------------------------------------
   CSS ORGANISED BY SECTION:

   1.  SHARED ARCHIVE WRAPPER              — .wcu-case-study / inner / loader / no-posts
   2.  ARCHIVE — HERO                      — .sai-serv* (dark bg + left copy + right glass CTA card)
   3a. ARCHIVE — FILTERS: DESKTOP          — .wcu-cs-main-selector  (3-col dropdowns, >700px)
   3b. ARCHIVE — FILTERS: MOBILE ACCORDION — .wcu-cs-main-selector  (inline accordion, <=700px)
   4.  ARCHIVE — MOBILE FILTER BTN (STUB)  — Unused old sheet trigger (kept only for compat)
   5.  ARCHIVE — MOBILE FILTER MODAL (STUB)— Unused old sheet modal (kept only for compat)
   6.  ARCHIVE — BUTTONS                   — .wcu-case-study-btn  (primary + ghost)
   7.  ARCHIVE — CARDS GRID                — .wcu-cs-case-study-grid / .wcu-cs-card* / .wcu-cs-video-card
   8.  ARCHIVE — PAGINATION                — .wcu-cs-pagination*  (pills, light active)
   9.  ARCHIVE+SINGLE — SHARED VIDEO POPUP — .voices-modal (client-voice pattern)

   G.  SINGLE CASE STUDY — 13 SECTION CSS PLACEHOLDERS  (empty selectors — user fills manually)
        G-S1.  .wcss-hero          — Hero section
        G-S2.  .wcu-cs-snap        — Project Snapshot section
        G-S3.  .wcu-cs-chl         — The Challenge section (chl = challenge)
        G-S4.  .wcu-cs-sol         — The Solution section (sol = solution)
        G-S5.  .wcu-cs-vis         — Our Vision section (vis = vision)
        G-S6.  .wcu-cs-voices      — Client Voices section (vcv = voices)
        G-S7.  .wcu-cs-kfb          — Key Features Build section (kfb = key features build)
        G-S8.  .wcu-cs-res         — Results Delivered section (res = results)
        G-S9.  .wcu-cs-stack       — Stack section (technology stack)
        G-S10. .wcu-cs-hww        — How We Worked section (hww = how we worked)
        G-S11. .wcu-cs-work       — Work section (gallery / deliverables)
        G-S12. .wcss-contact       — Contact section (Elementor shortcode wrapper)
        G-S13. .wcss-blog          — Blog section (Elementor shortcode wrapper)
   ========================================================================== */

/* ================================================================
   1. SHARED ARCHIVE WRAPPER — CSS START
   ================================================================ */
.wcu-case-study {
	padding: 64px 0px;
}

.wcu-case-study-inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
}

.wcu-case-study-loader {
	display: none;
	justify-content: center;
	padding: 28px 0;
}

.wcu-case-study-loader.is-loading {
	display: flex;
}

.wcu-case-study-loader img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.wcu-case-study-no-posts {
	padding: 60px 20px;
	text-align: center;
	background: #fff;
	border: 1px dashed #d1d5db;
	border-radius: 12px;
	margin-top: 32px;
}

.wcu-case-study-no-posts p {
	font-size: 16px;
	color: #4b5563;
	margin: 0;
}
/* ================================================================
   1. SHARED ARCHIVE WRAPPER — CSS END
   ================================================================ */

/* ================================================================
   2. ARCHIVE — HERO — CSS START
   (Unique scope: .wcu-cs-hero )
   ================================================================ */

.sai-serv{
    position:relative;
    display:flex;
    align-items:center;
	isolation: isolate;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .sai-serv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

  .sai-serv__hefah-bg{
    position:absolute;
    inset:0;
    z-index:-1;
  }

  .sai-serv__hefah-inner{
/*     width:100%; */
    max-width:1440px;
    margin:0 auto;
    padding: 138px 64px 64px 64px;
    display:grid;
    grid-template-columns: 1.15fr 0.72fr;
    gap: 48px;
    align-items:center;
  }

  /* Left column */
  .sai-serv__hefah-eyebrow{
    color: #ffffff;
    font-size:14px;
    font-weight:400;
    line-height:21px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:18px;
  }

  .sai-serv__hefah-title{
    color: #ffffff;
    font-size:48px;
    font-weight:500;
    max-width:680px;
	text-transform: capitalize;
    margin:0px 0px 16px 0px;
  }

  .sai-serv__hefah-desc{
    color: #ffffff;
    font-size:18px;
    line-height:28.8px;
    font-weight:400;
    max-width:832px;
    margin-bottom:32px;
  }

  .sai-serv__hefah-trust-label{
    color: #ffffff;
    font-size:14px;
    font-weight:400;
    line-height:21px;
    text-transform:uppercase;
    margin-bottom:16px;
  }

  .sai-serv__hefah-badges{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
.sai-serv__hefah-badges .badge:last-child{
  width: 90px;
} 
  .badge{
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    border-radius: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
  }

  .badge img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .badge--wide {
    width: 90px;
    min-width: 90px;
    height: 60px;
    min-height: 60px;
  }

  /* Right column card */
  .sai-serv__hefah-card{
    background: rgba(255, 255, 255, 0.15);
    border: 0.6px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  }

  .sai-serv__hefah-card h3{
    color: #ffffff;
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 28.6px;
    margin: 0px 0px 8px 0px;
  }

  .sai-serv__hefah-card p{
    color: #ffffff;
    font-family: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 24px;
	 width:90%;
  }

  .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:40px;
    padding:8px 16px;
    border-radius:8px;
    border: 1px solid rgba(255, 255, 255, 0.00);
    background:var(--wcu-site-header-primary);
    text-decoration:none;
    cursor:pointer;
    transition: background 0.2s ease, transform 0.2s ease;
	 width:fit-content;
  }
.btn-primary:hover{
  background:#075CE8;
}

  .btn-primary svg,
  .btn-primary img{
    width:20px !important;
    height:20px !important;
  }

  /* Responsive */
    @media (max-width: 1366px){
	  .sai-serv__hefah-inner{
	    width: 100%;
        padding: 110px 30px 64px;
    }
	.wcu-case-study-inner {
		padding: 0 30px;
	}

	}
	@media (max-width: 1024px){
    .sai-serv__hefah-inner{
      padding: 110px 24px 50px;
    }
		.wcu-cs-snap{
        padding:50px 0px !important;
}
	.wcu-case-study-inner {
		padding: 0 24px;
	}
		.sai-serv__hefah-title{
      max-width:560px;
}
		.wcu-case-study {
    padding: 50px 0px;
}
}

  @media (max-width: 900px){
    .sai-serv__hefah-inner{
      grid-template-columns: 1fr;
    }
    .sai-serv__hefah-card{
      max-width:480px;
    }
	  	.wcu-cs-snap{
        padding:32px 0px !important;
}
		.wcu-case-study {
    padding: 32px 0px 32px 0px;
}
	  .sai-serv__hefah-title{
     max-width:500px;
}
	  .sai-serv__hefah-inner {
        padding: 96px 24px 32px;
    }
  }

  @media (max-width: 480px){
  /*.sai-serv__hefah-title{ font-size:28px; } */
    .sai-serv__hefah-badges{ gap:14px; }
	  .sai-serv__hefah-inner {
        padding: 64px 16px 24px;
    }
    .badge{ width:48px; height:48px; }
	  
	  .sai-serv__hefah-card h3{
    color: #ffffff;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 23.3px;
    margin-bottom: 8px;
  }
	  .sai-serv__hefah-card{
    background: rgba(255, 255, 255, 0.15);
    border: 0.6px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 24px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  }
	  .sai-serv__hefah-title{
    color: #ffffff;
    font-size:32px !important;
    line-height:38.4px !important;
    font-weight:500;
    max-width:560px;
    margin-bottom:16px;
    letter-spacing:-0.5px;
	padding-top: 32px !important;
  }
      .sai-serv__hefah-inner {
        grid-template-columns: 1fr;
        padding: 64px 16px 32px;
    }
	.wcu-case-study {
    padding: 32px 0px 0px 0px;
}
	  
  }



/* -----------------------------------------------------------------------
   2a. INLINE-STYLE REPLACEMENTS (hero CTA icon wrapper static sizing)
   Moved here from style= attributes in archive-hero.php — no inline CSS.
   Note: hero background-image is intentionally kept as a PHP-driven
         inline style="background-image: url(...)" so ACF dynamic URLs work.
   ----------------------------------------------------------------------- */

/* Hero free-hand CTA arrow icon wrapper size (was inline px) */
.wcu-cs-hero__icon-wrap {
  width: 20px;
  height: 27px;
}

/* ================================================================
   2. ARCHIVE — HERO — CSS END
   ================================================================ */

/* ================================================================
   3a. ARCHIVE — FILTERS: DESKTOP — CSS START
   (Figma 1:1 with UNIQUE wcu-cs- prefix on EVERY class to prevent
    global WP/theme collision. Original Figma class/selector mapping:
     main-selector         → wcu-cs-main-selector
     filters-toggle        → wcu-cs-filters-toggle
     filters-panel         → wcu-cs-filters-panel
     filters-title         → wcu-cs-filters-title
     filters-open (state)  → wcu-cs-filters-open
     fields-stack          → wcu-cs-fields-stack
     field                 → wcu-cs-field
     open (state on field) → wcu-cs-open
     field-label           → wcu-cs-field-label
     trigger               → wcu-cs-trigger
     trigger-text          → wcu-cs-trigger-text
     mobile-label          → wcu-cs-mobile-label
     value                 → wcu-cs-value
     panel                 → wcu-cs-panel
     panel-header          → wcu-cs-panel-header
     selected (li state)   → wcu-cs-selected
     funnel-icon           → wcu-cs-funnel-icon
     clear-filters         → wcu-cs-clear-filters
     clear-icon            → wcu-cs-clear-icon
   All Figma visual values are preserved 1:1 (colors, fonts, gaps,
   borders, shadows, caret rotate -135deg, hover bg #f5f5f5,
   li.wcu-cs-selected bg #f0f0f0, breakpoints 700px / 701px, etc.)
   DESKTOP ONLY: 3-column dropdowns (min-width: 701px); floating
   panels, underline trigger, absolute position top+10.
   ================================================================ */
.wcu-cs-main-selector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	margin: 12px 0 48px 0;
}

.wcu-cs-main-selector .wcu-cs-filters-toggle,
.wcu-cs-main-selector .wcu-cs-filters-panel,
.wcu-cs-main-selector .wcu-cs-trigger .chevron {
	display: none;
}

.wcu-cs-main-selector .wcu-cs-field {
	position: relative;
}

.wcu-cs-main-selector .wcu-cs-field-label {
	color: #525B53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	display: block;
	margin-bottom: 4px;
}

/* Desktop trigger (underline dropdown) */
.wcu-cs-main-selector .wcu-cs-trigger {
	position: relative;
	border-bottom: 1px solid #E4E7E5;
	padding-bottom: 12px;
	cursor: pointer;
	user-select: none;
}

.wcu-cs-main-selector .wcu-cs-value {
	color: #000;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	padding-right: 24px;
	display: block;
}

.wcu-cs-main-selector .wcu-cs-trigger::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 2px;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid #9a9a9a;
	border-bottom: 1.5px solid #9a9a9a;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	pointer-events: none;
}

.wcu-cs-main-selector .wcu-cs-field.wcu-cs-open .wcu-cs-trigger::after {
	transform: rotate(-135deg);
}

.wcu-cs-main-selector .wcu-cs-field.wcu-cs-open .wcu-cs-trigger {
	border-bottom-color: #1a1a1a;
}

/* Desktop dropdown panel */
.wcu-cs-main-selector .wcu-cs-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	min-width: 260px;
	background: #ffffff;
	border: 1px solid #eceef1;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
	z-index: 20;
	display: none;
	max-height: 340px;
	overflow-y: auto;
	-webkit-appearance: none;
	appearance: none;
}

.wcu-cs-main-selector .wcu-cs-field.wcu-cs-open .wcu-cs-panel {
	display: block;
}

.wcu-cs-main-selector .wcu-cs-panel-header {
	padding: 18px 20px 10px;
	color: #525B53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
}

.wcu-cs-main-selector .wcu-cs-panel ul {
	list-style: none;
	margin: 0;
	padding: 0 0 12px;
}

.wcu-cs-main-selector .wcu-cs-panel li {
	display: block;
	padding: 8px 20px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	color: #272A28;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	cursor: pointer;
	transition: 0.1s ease;
}

.wcu-cs-main-selector .wcu-cs-panel li:hover {
	background: #f5f5f5;
}

.wcu-cs-main-selector .wcu-cs-panel li.wcu-cs-selected {
	color: #272A28;
	font-weight: 400;
	background: #f0f0f0;
}

/* ================================================================
   3a. ARCHIVE — FILTERS: DESKTOP — CSS END
   ================================================================ */

/* ================================================================
   3b. ARCHIVE — FILTERS: MOBILE ACCORDION — CSS START
   (max-width: 700px breakpoint; inline expand below the
   "Filters" toggle; NOT a modal/sheet — accordion only.
   min-width: 701px breakpoint hides mobile-only UI, keeps
   desktop dropdown panels visible.)
   ================================================================ */
/* Mobile accordion */
@media (max-width: 700px) {
	.wcu-cs-main-selector {
		display: flex;
		flex-direction: column;
		gap: 0;
		background: #fff;
		margin: 0 0 32px 0;
	}

	.wcu-cs-main-selector .wcu-cs-filters-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		height: 36px;
		padding: 8px 14px;
		border: 0.6px solid #d4d4d8;
		border-radius: 6px;
		background: #fff;
		color: #27272a;
		font-family: "Inter Tight", sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: normal;
		cursor: pointer;
	}

	.wcu-cs-main-selector .wcu-cs-funnel-icon {
		width: 10px;
		height: 11px;
		flex-shrink: 0;
	}

	.wcu-cs-main-selector .wcu-cs-funnel-icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.wcu-cs-main-selector.wcu-cs-filters-open .wcu-cs-filters-toggle {
		border-color: #a1a1aa;
	}

	/* Collapsed by default; opens below Filters button */
	.wcu-cs-main-selector .wcu-cs-filters-panel {
		display: none;
		flex-direction: column;
		width: 100%;
		margin-top: 24px;
	}

	.wcu-cs-main-selector.wcu-cs-filters-open .wcu-cs-filters-panel {
		display: flex;
	}

	.wcu-cs-main-selector .wcu-cs-filters-title {
		display: block;
		color: #27272a;
		font-family: "Inter Tight", sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: normal;
		margin-bottom: 24px;
	}

	.wcu-cs-main-selector .wcu-cs-field {
		position: static;
	}

	.wcu-cs-main-selector .wcu-cs-field-label {
		display: none;
	}

	.wcu-cs-main-selector .wcu-cs-trigger {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 1px solid #d4d4d8;
		padding: 12px 14px;
		margin: 0;
	}

	.wcu-cs-main-selector .wcu-cs-fields-stack {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.wcu-cs-main-selector .wcu-cs-trigger-text {
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
	}

	.wcu-cs-main-selector .wcu-cs-mobile-label {
		display: block;
		color: #71717a;
		font-family: "Inter Tight", sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: normal;
	}

	.wcu-cs-main-selector .wcu-cs-value {
		color: #27272a;
		padding-right: 24px;
		line-height: normal;
	}

	/* Same dropdown caret as desktop */
	.wcu-cs-main-selector .wcu-cs-trigger::after {
		right: 14px;
		top: 50%;
		margin-top: -6px;
	}

	.wcu-cs-main-selector .wcu-cs-field.wcu-cs-open .wcu-cs-trigger {
		border-bottom-color: #d4d4d8;
	}

	/* Accordion panel: inline expand (not floating dropdown) */
	.wcu-cs-main-selector .wcu-cs-panel {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		min-width: 0;
		width: 100%;
		border: none;
		border-bottom: 1px solid #d4d4d8;
		box-shadow: none;
		max-height: none;
		overflow: visible;
		display: none;
		padding: 8px 14px 16px;
	}

	.wcu-cs-main-selector .wcu-cs-field.wcu-cs-open .wcu-cs-panel {
		display: block;
	}

	.wcu-cs-main-selector .wcu-cs-panel-header {
		display: none;
	}

	.wcu-cs-main-selector .wcu-cs-panel ul {
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.wcu-cs-main-selector .wcu-cs-panel li {
		padding: 0;
		background: transparent;
	}

	.wcu-cs-main-selector .wcu-cs-panel li:hover {
		background: transparent;
	}

	.wcu-cs-main-selector .wcu-cs-panel li.wcu-cs-selected {
		font-weight: 600;
		background: transparent;
	}

	.wcu-cs-main-selector .wcu-cs-clear-filters {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap:11px;
		width: 100%;
		margin-top: 24px;
		padding: 8px 14px;
		border: 0.6px solid #d4d4d8;
		border-radius: 6px;
		background: #fff;
		color: #27272a;
		font-family: "Inter Tight", sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: normal;
		cursor: pointer;
	}

	.wcu-cs-main-selector .wcu-cs-clear-icon {
		width: 10px;
		height: 10px;
		flex-shrink: 0;
	}

	.wcu-cs-main-selector .wcu-cs-clear-icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}
}

/* Desktop: hide mobile-only UI; keep dropdowns visible */
@media (min-width: 701px) {
	.wcu-cs-main-selector .wcu-cs-filters-toggle {
		display: none;
	}

	.wcu-cs-main-selector .wcu-cs-filters-panel {
		display: contents;
	}

	.wcu-cs-main-selector .wcu-cs-filters-title,
	.wcu-cs-main-selector .wcu-cs-clear-filters {
		display: none;
	}

	.wcu-cs-main-selector .wcu-cs-mobile-label {
		display: none;
	}

	.wcu-cs-main-selector .wcu-cs-fields-stack {
		display: contents;
	}
}
/* ================================================================
   3b. ARCHIVE — FILTERS: MOBILE ACCORDION — CSS END
   ================================================================ */

/* ================================================================
   4. ARCHIVE — MOBILE FILTER BTN (STUB) — CSS START
   (UNUSED — Old deprecated standalone sheet-trigger button class
    set from earlier version. No rules emitted; kept ONLY so any
    stale selectors in legacy HTML/JS don't throw unknown-class
    warnings in devtools. Mobile filters are now inline-accordion
    inside Section 3b.)
   ================================================================ */
/* — no-op stub: intentionally empty — */
/* ================================================================
   4. ARCHIVE — MOBILE FILTER BTN (STUB) — CSS END
   ================================================================ */

/* ================================================================
   5. ARCHIVE — MOBILE FILTER MODAL (STUB) — CSS START
   (UNUSED — Old deprecated bottom-sheet modal .wcu-cs-modal +
    backdrop + sheet footer classes from earlier version.
    No rules emitted; kept ONLY so any stale selectors in legacy
    HTML/JS don't throw unknown-class warnings. Mobile filters
    are now inline-accordion inside Section 3b.)
   ================================================================ */
/* — no-op stub: intentionally empty — */
/* ================================================================
   5. ARCHIVE — MOBILE FILTER MODAL (STUB) — CSS END
   ================================================================ */

/* ================================================================
   6. ARCHIVE — BUTTONS — CSS START
   (Unique scope: .wcu-case-study-btn )
   ================================================================ */
.wcu-case-study-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
	text-decoration: none;
	line-height: 1.2;
}

.wcu-case-study-btn--primary {
	background: #111827;
	color: #fff;
}

.wcu-case-study-btn--primary:hover {
	background: #1f2937;
	transform: translateY(-1px);
}

.wcu-case-study-btn--ghost {
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
}

.wcu-case-study-btn--ghost:hover {
	background: #f9fafb;
}
/* ================================================================
   6. ARCHIVE — BUTTONS — CSS END
   ================================================================ */

/* ================================================================
   7. ARCHIVE — CARDS GRID (Text cards + Video span-2 cards) — CSS START
   (Unique scope: .wcu-cs-case-study-grid / .wcu-cs-case-study-card* / .wcu-cs-video-card / .wcu-cs-info-panel / .wcu-cs-csg-* )
   ================================================================ */
/* CLASS MAPPING (original Figma → prefixed unique):
   zero_m_p                      → .wcu-cs-zero-m-p (scope reset: box-sizing + h1-h6/p/ul margin/padding 0)
   case-study-grid               → .wcu-cs-case-study-grid (3-col grid gap 24)
   case-study-card               → .wcu-cs-case-study-card (text format card shell)
   col-span-2                    → .wcu-cs-col-span-2 (grid-column: span 2 — video cards on desktop; tablet/mobile → span 1)
   main-description              → .wcu-cs-main-description (text card body: border 0.6px #E4E7E5 radius 0 0 8 8 padding 24)
   content-header                → .wcu-cs-content-header (row: logo + industry pill, space-between gap 12)
   industry-name                 → .wcu-cs-industry-name (pill: radius 96 border rgba(178,207,255,.60) transparent bg 4×16 nowrap)
   card-description              → .wcu-cs-card-description (card title 18/28.8 pt 24)
   video-card                    → .wcu-cs-video-card (span-2 video card shell: poster bg min 406 shadow 24/60 rgba(20,28,50,.18) isolation isolate)
   play-center                   → .wcu-cs-play-center (54×54 absolute center play button, all:unset)
   js-open-video                 → .wcu-cs-js-open-video (JS hook class for ANY open trigger)
   info-panel                    → .wcu-cs-info-panel (bottom overlay: absolute inset 14/14/14 grid 1fr auto gap 24 padding 16 radius 8 bg rgba(255,255,255,.15) blur 12)
   brand                         → .wcu-cs-brand (client logo wrapper in info panel, right column)
   quote                         → .wcu-cs-quote (testimonial in info panel: white 18/24 weight 500)
   csg-actions                   → .wcu-cs-csg-actions (button row in info panel: flex gap 24 wrap)
   csg-btn                       → .wcu-cs-csg-btn (base action button: h-40 radius 8 gap 8 font 16 Inter Tight)
   csg-btn--primary              → .wcu-cs-csg-btn--primary ("Watch video" CTA: bg #0865FF hover #075CE8, 1px transparent border)
   csg-btn--secondary            → .wcu-cs-csg-btn--secondary ("View case study" CTA: transparent bg, padding 8px 0, arrow-slide icon)
   csg-btn__icon                 → .wcu-cs-csg-btn__icon (icon wrapper: primary 24×24, secondary 20×20 relative hidden overflow)
   csg-ico                       → .wcu-cs-csg-ico (icon slide base in secondary btn: transition .35s cubic-bezier .22,1,.36,1)
   csg-ico--a                    → .wcu-cs-csg-ico--a (primary icon in secondary: translate 0,0 → hover → 100%,-100%)
   csg-ico--b                    → .wcu-cs-csg-ico--b (duplicate icon in secondary: absolute inset 0 translate -100%,100% → hover → 0,0)
   BREAKPOINTS (all values MUST match verbatim from Figma):
     desktop (default):              3-col gap 24 / video min-height 406 / play 54px
     max-width: 992px (tablet):      2-col gap 24 / video min 440 / span-2 → span-1 / main-description padding 20 / quote 16/22 / info-panel 1-col 12 gap padding 12 offsets 12
     max-width: 767px (mobile):      1-col gap 16 / main-description padding 16 / header gap 8 / logo max 110×24 / pill 4×12 label 12/18 / video min 560 / play 48px / brand justify-self start logo 100×28 / quote 16/22 / wcu-case-study-inner padding 0 40px !important
     max-width: 480px (small mobile):video min 560 / actions flex-direction column align flex-start / wcu-case-study-inner 0 16 !important / csg-actions gap 4
*/

/* ================================================================
   7a. SCOPE RESET — zero margin/padding + box-sizing for children inside the grid wrapper
   (Applies box-sizing: border-box universally; strips default margins on h1-h6/p/ul)
   ================================================================ */
.wcu-cs-zero-m-p *{
  box-sizing: border-box;
}
.wcu-cs-zero-m-p h1,.wcu-cs-zero-m-p h2,.wcu-cs-zero-m-p h3,.wcu-cs-zero-m-p h4,.wcu-cs-zero-m-p h5,.wcu-cs-zero-m-p h6,
.wcu-cs-zero-m-p p, .wcu-cs-zero-m-p ul{
  margin: 0;
  padding: 0;
}

/* ================================================================
   7b. GRID CONTAINER — 3-column desktop, 2-col tablet, 1-col mobile
   (display: grid, gap 24 desktop/tablet, gap 16 mobile)
   ================================================================ */
.wcu-cs-case-study-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 100%;
}

/* ================================================================
   7c. TEXT-FORMAT CARD — image header + main-description body
   (shell: flex column, radius 8, overflow hidden, 100% width)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-case-study-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* Featured image on text-format card (248px tall, cover, radius 8 8 0 0) */
.wcu-cs-case-study-grid .wcu-cs-case-study-card > img{
  width: 100%;
  height: 248px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px 8px 0 0;
}

/* Span-2 utility — video cards occupy 2 columns on desktop */
.wcu-cs-case-study-grid .wcu-cs-col-span-2{
  grid-column: span 2;
}

/* ================================================================
   7d. MAIN DESCRIPTION (text card body wrapper)
   (bottom bordered box: 0.6px #E4E7E5, radius 0 0 8 8, padding 24)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-main-description{
  border-radius: 0 0 8px 8px;
  border: 0.6px solid #E4E7E5;
  padding: 24px;
  flex-grow: 1;
}

/* ================================================================
   7e. CONTENT HEADER (logo + industry pill row inside main-description)
   (space-between, align center, gap 12)
   ================================================================ */
.wcu-cs-main-description .wcu-cs-content-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Client logo inside content-header (max 140×28, contain, shrink 1) */
.wcu-cs-main-description .wcu-cs-content-header > img{
  max-width: 140px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
}

/* ================================================================
   7f. INDUSTRY PILL + LABEL
   (radius 96, border rgba(178,207,255,.60), transparent bg, padding 4×16, nowrap)
   ================================================================ */
.wcu-cs-content-header .wcu-cs-industry-name{
  border-radius: 96px;
  border: 1px solid rgba(178, 207, 255, 0.60);
  background: rgba(255, 255, 255, 0.00);
  padding: 4px 16px;
  flex-shrink: 0;
  white-space: nowrap;
}

.wcu-cs-content-header .wcu-cs-industry-name p{
  color: #000;
  font-family: "Inter Tight";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}

/* ================================================================
   7g. CARD DESCRIPTION (card title under content-header)
   (18/28.8 Inter Tight 400, padding-top 24, color #000)
   ================================================================ */
.wcu-cs-main-description .wcu-cs-card-description{
  color: #000;
  font-family: "Inter Tight";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28.8px;
  padding-top: 24px;
}

/* ================================================================
   7h. VIDEO-FORMAT CARD SHELL — span-2, poster bg, card-level shadow
   (min-height 406 desktop, radius 8, overflow hidden, shadow 0 24 60 rgba(20,28,50,.18), isolation isolate)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-video-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 385px;
  border-radius: 8px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 24px 60px rgba(20, 28, 50, 0.18);
  isolation: isolate;
}

/* ================================================================
   7i. PLAY CENTER BUTTON — absolute centered 54×54 play trigger
   (all:unset; top 50% left 50% translate -50%/-50%; z3; cursor pointer;
    line-height 0; all !important resets: bg none / border 0 / radius 0 /
    shadow none / padding 0; 54×54)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-play-center {
  all: unset;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
  line-height: 0;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 54px;
  height: 54px;
}

.wcu-cs-case-study-grid .wcu-cs-play-center img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ================================================================
   7j. INFO PANEL — floating glass overlay bottom of video card
   (absolute inset L/R/B 14; grid-template-columns 1fr auto; gap 24;
    padding 16; radius 8; bg rgba(255,255,255,.15); backdrop-blur 12px)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-info-panel {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ================================================================
   7k. BRAND LOGO (right column in info-panel grid)
   (max 120×32, contain, block display)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-brand img {
  max-width: 120px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ================================================================
   7l. QUOTE / TESTIMONIAL (left column, info-panel)
   (color #FFF; Inter Tight 18/24 weight 500)
   ================================================================ */
.wcu-cs-case-study-grid .wcu-cs-quote {
  color: #FFF;
  font-family: "Inter Tight";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* ================================================================
   7m. CSG ACTIONS — action button row inside info-panel (spans full width)
   (display flex, align center, gap 24, wrap)
   ================================================================ */
.wcu-cs-csg-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ================================================================
   7n. CSG BUTTON — BASE (shared by primary + secondary)
   (inline-flex, center, gap 8, h-40, font 16 Inter Tight, radius 8,
    no-decoration, nowrap, color #fff, cursor pointer, border-box;
    transition bg .25s ease / transform .25s cubic-bezier(.22,1,.36,1))
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 16px;
  line-height: normal;
  font-weight: 400;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================================
   7o. CSG BUTTON — PRIMARY ("Watch video")
   (padding 8×16, radius 8, border 1px transparent, bg #0865FF, hover #075CE8,
    focus-visible outline 2px #fff offset 2px)
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-btn--primary {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.00);
  background: #0865FF;
  color: #fff;
}

.wcu-cs-csg-actions .wcu-cs-csg-btn--primary:hover {
  background-color: #075CE8;
}

.wcu-cs-csg-actions .wcu-cs-csg-btn--primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ================================================================
   7p. CSG BUTTON — SECONDARY ("View case study")
   (padding 8px 0, bg transparent, border 0, color #fff — no box;
    has arrow-slide icon animation on hover)
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-btn--secondary {
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: #fff;
}

/* ================================================================
   7q. CSG BUTTON ICON WRAPPER — two sizes (primary 24×24, secondary 20×20)
   (position relative, inline-flex center, overflow hidden, flex-shrink 0)
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-btn--primary .wcu-cs-csg-btn__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.wcu-cs-csg-actions .wcu-cs-csg-btn--secondary .wcu-cs-csg-btn__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

/* ================================================================
   7r. CSG ICON — slide animation base layer
   (flex center, 100% W/H, transition transform .35s cubic-bezier(.22,1,.36,1))
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================================
   7s. CSG ICON — TWO LAYERS (a = visible default / b = hidden duplicate from bottom-left)
   Layer a: translate 0,0 → hover slides out to 100%,-100%
   Layer b: absolute inset 0, translate -100%,100% → hover slides in to 0,0
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-ico--a {
  transform: translate(0, 0);
}

.wcu-cs-csg-actions .wcu-cs-csg-ico--b {
  position: absolute;
  inset: 0;
  transform: translate(-100%, 100%);
}

/* ================================================================
   7t. CSG SECONDARY BUTTON HOVER — icon slide swap
   (ONLY applies on csg-btn--secondary hover — arrow diagonal slide animation)
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-btn--secondary:hover .wcu-cs-csg-ico--a {
  transform: translate(100%, -100%);
}

.wcu-cs-csg-actions .wcu-cs-csg-btn--secondary:hover .wcu-cs-csg-ico--b {
  transform: translate(0, 0);
}

/* ================================================================
   7u. CSG BUTTON INNER SVG SIZES — verbatim exact dimensions
   (primary svg 11×14 block / secondary svg 10×10 block)
   ================================================================ */
.wcu-cs-csg-actions .wcu-cs-csg-btn--primary svg {
  width: 11px;
  height: 14px;
  display: block;
}

.wcu-cs-csg-actions .wcu-cs-csg-btn--secondary svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* ================================================================
   7aa. RESPONSIVE BREAKPOINT — TABLET (max-width: 992px)
   grid 3→2-col, video min 440, span-2→span-1, main padding 20,
   quote 16/22, info-panel 1-col + gap 12 + pad 12 + L/R/B 12
   ================================================================ */
@media (max-width: 992px) {
  /* Grid: 2 columns, gap 24 unchanged */
  .wcu-cs-case-study-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  /* Video card minimum height bumps up to 440 on tablet */
  .wcu-cs-case-study-grid .wcu-cs-video-card {
    min-height: 440px;
  }
  /* Span-2 → span-1 (video cards collapse to single column) */
  .wcu-cs-case-study-grid .wcu-cs-col-span-2 {
    grid-column: span 1;
  }
  /* Text card main-description body padding: 24 → 20 */
  /* .wcu-cs-case-study-grid .wcu-cs-main-description {
    padding: 20px;
  } */
  /* Quote size down: 18/24 → 16/22 */
  .wcu-cs-case-study-grid .wcu-cs-quote {
    font-size: 16px;
    line-height: 22px;
  }
  /* Info panel: collapse to 1-col, gap/pad/offsets 12 */
  .wcu-cs-case-study-grid .wcu-cs-info-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
}

/* ================================================================
   7ab. RESPONSIVE BREAKPOINT — MOBILE (max-width: 767px)
   grid 2→1-col gap 16; main padding 16; header gap 8; logo max 110×24;
   pill pad 4×12 label 12/18; video min 560; play 48;
   brand justify-self start logo 100×28; quote 16/22;
   wcu-case-study-inner 0 40px !important
   ================================================================ */
@media (max-width: 769px) {
  /* Grid: single column, gap reduces to 16 */
  .wcu-cs-case-study-grid {
    grid-template-columns: 1fr;
    /* gap: 16px; */
  }
  /* Span-2 stays as span-1 on mobile (already set by tablet rule, reaffirm) */
  .wcu-cs-case-study-grid .wcu-cs-col-span-2 {
    grid-column: span 1;
  }
  /* Main description padding further reduced to 16 */
  /* .wcu-cs-case-study-grid .wcu-cs-main-description {
    padding: 16px;
  } */
  /* Content header logo/pill row gap 8 (from 12) */
  .wcu-cs-main-description .wcu-cs-content-header {
    gap: 8px;
  }
  /* Client logo smaller: 110×24 max (from 140×28) */
  .wcu-cs-main-description .wcu-cs-content-header > img {
    max-width: 110px;
    max-height: 24px;
  }
  /* Industry pill smaller pad: 4×12 (from 4×16) */
  .wcu-cs-content-header .wcu-cs-industry-name {
    padding: 4px 12px;
  }
  /* Pill label font: 12/18 (from 14/21) */
  .wcu-cs-content-header .wcu-cs-industry-name p {
    font-size: 12px;
    line-height: 18px;
  }
  /* Video card taller on mobile: min 560 */
  .wcu-cs-case-study-grid .wcu-cs-video-card {
    min-height: 572px;
  }
  /* Play center button smaller: 48px (from 54) */
  .wcu-cs-case-study-grid .wcu-cs-play-center {
    width: 48px;
    height: 48px;
  }
  /* Brand logo wrapper in info panel: align left (justify-self start) */
  .wcu-cs-case-study-grid .wcu-cs-brand {
    justify-self: start;
  }
  /* Brand logo inside: 100×28 max (from 120×32) */
  .wcu-cs-case-study-grid .wcu-cs-brand img {
    max-width: 100px;
    max-height: 28px;
  }
  /* Quote mobile size: 16/22 */
  .wcu-cs-case-study-grid .wcu-cs-quote {
    font-size: 16px;
    line-height: 22px;
  }
  /* Legacy .actions selector (used as class selector) — gap 12 on mobile */
  .wcu-cs-actions {
    gap: 12px;
  }
  /* Outer layout inner padding 0 40 important for mobile */
  /* .wcu-case-study-inner {
    padding: 0 40px !important;
  } */
}

/* ================================================================
   7ac. RESPONSIVE BREAKPOINT — SMALL MOBILE (max-width: 480px)
   video min 560 reaffirmed; .actions stack column + flex-start;
   wcu-case-study-inner 0 16 !important; csg-actions gap 4
   ================================================================ */
@media (max-width: 480px) {
  /* Video card keeps min 560 at small-mobile breakpoint */
  .wcu-cs-case-study-grid .wcu-cs-video-card {
    min-height: 560px;
  }
  /* Legacy .actions selector: buttons stack column, align left */
  .wcu-cs-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Outer layout inner padding tightens to 0 16 important for small mobile */
  .wcu-case-study-inner {
    padding: 0 16px !important;
  }
  /* csg-actions gap reduces to 4 on smallest screens */
  .wcu-cs-csg-actions {
    gap: 4px;
  }
}

/* -----------------------------------------------------------------------
   7ad. INLINE-STYLE REPLACEMENTS (card link / spacer / empty / poster img)
   Moved here from style= attributes in archive-grid.php — no inline CSS.
   ----------------------------------------------------------------------- */

/* Text card whole-card permalink: block-level, no underline, inherit text color */
.wcu-cs-case-study-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  line-height: 0 !important;
}
/* card main image  */
.wcu-cs-case-study-card__link .card-image{
width: 100%;
height: 248px;
}
/* Content-header logo placeholder: matches 140×28 max logo size, invisible spacer */
.wcu-cs-logo-spacer {
  display: inline-block;
  max-width: 140px;
  max-height: 28px;
  visibility: hidden;
}

/* Industry-name pill empty-state (keeps header layout when no pill) */
.wcu-cs-industry-name--empty {
  visibility: hidden;
}

/* Video card poster layer: <img> replaces old outer-div bg + inner style= */
.wcu-cs-video-card__poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brand empty-state (keeps info-panel 2-col grid in desktop when no logo) */
.wcu-cs-brand--empty {
  visibility: hidden;
}

/* Brand spacer inside empty brand placeholder: 120×32 max match logo dims */
.wcu-cs-brand-spacer {
  display: inline-block;
  max-width: 120px;
  max-height: 32px;
}
@media (max-width: 769px) {
  .wcu-cs-case-study-card__link .card-image{
	width: 100%;
	height: 390px;
	}
}
@media (max-width: 600px) {
  .wcu-cs-case-study-card__link .card-image{
	width: 100%;
	height: unset;
	}
}
/* ================================================================
   7. ARCHIVE — CARDS GRID — CSS END
   ================================================================ */

/* ================================================================
   8. ARCHIVE — PAGINATION — CSS START
   (Unique scope: .wcu-cs-pagination  — BEM-prefixed, zero side-effects)
   Desktop: right-aligned 40×40px pills (gap 4, radius 8)
   Active page:  #fafafa bg + #000 text + pointer-events none
   Ellipsis:     default cursor, no interaction
   Mobile ≤768:  center-aligned;  ≤480:  36×36px pills
   ================================================================ */
.wcu-cs-pagination {
	background: #fff;
	padding-top: 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

.wcu-cs-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-start;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcu-cs-pagination__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wcu-cs-pagination__item span,
.wcu-cs-pagination__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 8px;
	overflow: clip;
	flex-shrink: 0;
	text-decoration: none !important;
	color: #525b53 !important;
	font-family: "Inter Tight", sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 500 !important;
	line-height: 20px !important;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
	box-sizing: border-box;
}

.wcu-cs-pagination__link:hover {
	background: #fafafa;
	color: #000;
}

/* Active pill — same size, light bg, non-interactive */
.wcu-cs-pagination__item--active span {
	background: #fafafa;
	color: #000;
	pointer-events: none;
}

/* Ellipsis dots — non-interactive */
.wcu-cs-pagination__item--dots span {
	cursor: default;
	pointer-events: none;
	background: transparent;
}

.wcu-cs-pagination__link:focus-visible {
	outline: 2px solid #0865ff;
	outline-offset: 2px;
}

/* Tablet */
@media (max-width: 1024px) {
	.wcu-cs-pagination {
		padding: 48px 32px;
	}
}

/* Mobile — center align */
@media (max-width: 768px) {
	.wcu-cs-pagination {
		padding: 40px 20px;
		align-items: center;
	}

	.wcu-cs-pagination__list {
		justify-content: center;
	}
}

/* Small mobile — smaller pills */
@media (max-width: 480px) {
	.wcu-cs-pagination {
		padding: 32px 16px;
	}

	.wcu-cs-pagination__item span,
	.wcu-cs-pagination__link {
		width: 36px;
		height: 36px;
		padding: 6px;
		font-size: 13px;
		line-height: 18px;
	}
}
/* ================================================================
   8. ARCHIVE — PAGINATION — CSS END
   ================================================================ */

/* ================================================================
   G. SINGLE CASE STUDY — 13 SECTION CSS PLACEHOLDERS — CSS START
   Each section uses its OWN UNIQUE class prefix so CSS below
   will apply ONLY to that section.  User fills manually later.
   Numbered G-S1..G-S13 to mirror wcu-case-study.js Section G blocks.
   ================================================================ */

/* ================================================================
   G-S1. SINGLE — HERO SECTION — CSS START
   Unique class: .wcss-hero
   ================================================================ */
.wcss-hero {
	/* TODO: Add hero section styles manually */
}
.wcss-hero__inner {
	/* TODO: Add hero inner wrapper styles manually */
}
.wcss-hero__placeholder {
	/* TODO: Add hero placeholder text styles manually */
}
/* ================================================================
   G-S1. SINGLE — HERO SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S2. SINGLE — PROJECT SNAPSHOT SECTION — CSS START
   Unique class: .wcu-cs-snap
   BEM prefix:  wcu-cs-snap__*
   ================================================================ */

.wcu-cs-snap {
	padding-top: 64px;
	padding-bottom: 64px;
}
.wcu-cs-snap *,
.wcu-cs-snap ol,
.wcu-cs-snap ul,
.wcu-cs-snap li,
.wcu-cs-snap p {
	margin: 0;
	padding: 0;
}

.wcu-cs-snap__container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
}

.wcu-cs-snap__grid {
	display: grid;
	grid-template-columns: 448px 1fr;
	column-gap: 48px;
	row-gap: 32px;
}

.wcu-cs-snap__col-left {
	border-radius: 8px;
	overflow: hidden;
}

.wcu-cs-snap__thumb-wrap {
	max-height: 361px;
	overflow: hidden;
	line-height: 0;
}
.wcu-cs-snap__thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcu-cs-snap__meta-card {
	background: #0A2440;
}
.wcu-cs-snap__meta-card ol li {
	padding: 13.38px 16px 13.37px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wcu-cs-snap__meta-card ol li:not(:last-child) {
	border-bottom: 0.6px solid #263853;
}
.wcu-cs-snap__meta-label {
	color: #F4F4F5;
	font-size: 14px;
	line-height: 21px;
	list-style: none;
}
.wcu-cs-snap__meta-card ol li {
	list-style: none;
}
.wcu-cs-snap__meta-value {
	color: #FFF;
	font-size: 16px;
	line-height: 25.6px;
}

.wcu-cs-snap__eyebrow {
	font-size: 14px;
	line-height: 19.6px;
	text-transform: uppercase;
	color: #525B53;
	margin-bottom: 8px !important;
}

.wcu-cs-snap__title {
	color: #000;
	font-size: 36px;
	font-weight: 500 !important;
	line-height: 43.2px;
	margin-bottom: 24px;
}

.wcu-cs-snap__text {
	color: #18181B;
	font-size: 16px;
	line-height: 25.6px;
}
.wcu-cs-snap__text + .wcu-cs-snap__text {
	margin-top: 1em;
}

.wcu-cs-snap__counter-grid {
	margin-top: 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.wcu-cs-snap__counter {
	padding: 24px;
}
.wcu-cs-snap__counter:not(:last-child) {
	border-right: 0.6px solid #E4E7E5;
}
.wcu-cs-snap__counter-chip {
	border-radius: 8px;
	border: 1px solid rgba(8, 101, 255, 0.15);
	background: rgba(8, 101, 255, 0.15);
	padding: 7.2px 16px;
	display: inline-block;
	color: #0865FF;
	font-size: 14px;
	line-height: 21px;
}
.wcu-cs-snap__counter-value {
	margin-top: 89px !important;
	color: #3F3F46;
	font-size: 36px;
	font-weight: 500;
	line-height:48px;
	text-transform: capitalize;
	display: flex;
	align-items: end;
}
.wcu-cs-snap__counter-value sub {
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: #71717A;
	text-transform: none;
	bottom: 0;
	position: relative;
	margin-left: 8px;
}
.wcu-cs-snap__counter-unit {
	color: #71717A;
	font-size: 14px;
	line-height: 21px;
}
.wcu-cs-snap__counter-desc {
	color: #525B53;
	font-size: 14px;
	line-height: 21px;
	margin-top: 16px !important;
}
/* ---- Tablet ---- */
@media (max-width: 1366px) {
	.wcu-cs-snap__container {
    padding: 0 30px;
}

}
@media (max-width: 1300px) {
	.wcu-cs-snap__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 1100px) {
.wcu-cs-snap__counter-value {
    font-size: 30px;
}
}
@media (max-width: 1024px) {
	.wcu-cs-snap__container {
		padding: 0 24px;
	}
}
/* ---- Tablet ---- */
@media (max-width: 992px) {
	
	.wcu-cs-snap__grid {
		grid-template-columns: 1fr;
	}
	/* .wcu-cs-snap__col-left {
		max-width: 448px;
	} */
	 .wcu-cs-snap__counter-value {
		margin-top: 72px;
		 font-size: 36px;
		line-height: 48px;
	}
}



/* ---- Mobile ---- */
@media (max-width: 575px) {
	.wcu-cs-snap {
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.wcu-cs-snap__container {
		padding: 0 16px;
	}
	.wcu-cs-snap__counter-grid {
		grid-template-columns: 1fr;
		margin-top: 24px;
	}
	.wcu-cs-snap__counter:not(:last-child) {
		border-right: none;
		border-bottom: 0.6px solid #E4E7E5;
	}
	.wcu-cs-snap__thumb-wrap {
		max-height: 226px;
	}
	.wcu-cs-snap__thumb-wrap img {
		max-height: 226px;
	}
	.wcu-cs-snap__meta-card ol li {
		padding: 13.54px 16px 13.54px 16px;
	}
	.wcu-cs-snap__title {
		margin-bottom: 16px;
		font-size: 24px;
		line-height: 28.8px;
	}
	.wcu-cs-snap__text {
		color: #525B53;
	}
	
}
/* ================================================================
   G-S2. SINGLE — PROJECT SNAPSHOT SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S3. SINGLE — THE CHALLENGE SECTION — CSS START
   Unique class: .wcu-cs-chl
   ----------------------------------------------------------------
   Structure:
   section > .wcu-cs-chl__inner
     .wcu-cs-chl__header
       .wcu-cs-chl__header-left
         .wcu-cs-chl__label       (eyebrow "The challenge")
         h2.wcu-cs-chl__title     (main heading)
       .wcu-cs-chl__intro         (intro paragraph)
     .wcu-cs-chl__cards           (3-col grid)
       .wcu-cs-chl__card          (white card)
         .wcu-cs-chl__card-icon   (44×44 light-blue badge)
           img
         .wcu-cs-chl__card-body
           .wcu-cs-chl__card-heading
             h3.wcu-cs-chl__card-title
             p.wcu-cs-chl__card-subtitle
           p.wcu-cs-chl__card-text
   ================================================================ */
.wcu-cs-chl {
	background: #fafafa;
	padding: 64px 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

.wcu-cs-chl__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
	width: 100%;
	box-sizing: border-box;
}

.wcu-cs-chl__header {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
	padding-bottom: 48px;
}

.wcu-cs-chl__header-left {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.wcu-cs-chl__label {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
	width: 100%;
	margin: 0;
}

.wcu-cs-chl__title {
	color: #000;
	font-family: "Inter Tight", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 500 !important;
	line-height: 43.2px;
	width: 100%;
	margin: 0;
}

.wcu-cs-chl__intro {
	flex: 1 1 280px;
	min-width: 0;
	color: #272a28;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px;
	margin: 0;
}

.wcu-cs-chl__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	background: #fff;
	border: 0.6px solid #e4e7e5;
	border-radius: 8px;
	overflow: hidden;
}

.wcu-cs-chl__card {
	min-width: 0;
	background: #fff;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

.wcu-cs-chl__card + .wcu-cs-chl__card {
	border-left: 0.6px solid #e4e7e5;
}

.wcu-cs-chl__card-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0);
	background: rgba(8, 101, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.wcu-cs-chl__card-icon img {
	width: 28px;
	height: 28px;
	display: block;
	object-fit: contain;
}

.wcu-cs-chl__card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.wcu-cs-chl__card-heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

h3.wcu-cs-chl__card-title {
	color: #3f3f46 !important;
	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	margin: 0;
}

.wcu-cs-chl__card-subtitle {
	color: #a1a1aa;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	margin: 0;
}

.wcu-cs-chl__card-text {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	width: 100%;
	margin: 0;
}
@media (max-width: 1366px) {
.wcu-cs-chl__inner {
		padding: 0 30px;
	}
}
/* Tablet (<=1024px) */
@media (max-width: 1024px) {
	.wcu-cs-chl {
		padding: 48px 0;
		gap: 40px;
	}
	.wcu-cs-chl__inner {
		padding: 0 24px;
	}
	.wcu-cs-chl__title {
		font-size: 32px;
		line-height: 38.4px;
	}
}

/* Mobile / small tablet (<=768px) */
@media (max-width: 768px) {
	.wcu-cs-chl {
		padding: 40px 0;
		gap: 32px;
	}
	/* .wcu-cs-chl__inner {
		padding: 0 24px;
	} */
	.wcu-cs-chl__header {
		flex-direction: column;
		gap: 16px;
	}
	.wcu-cs-chl__header-left,
	.wcu-cs-chl__intro {
		flex: 1 1 auto;
		width: 100%;
	}
	.wcu-cs-chl__title {
		font-size: 28px;
		line-height: 33.6px;
	}
	.wcu-cs-chl__cards {
		grid-template-columns: 1fr;
		border-radius: 8px;
	}
	.wcu-cs-chl__card + .wcu-cs-chl__card {
		border-left: 0;
		border-top: 0.6px solid #e4e7e5;
	}
	/* .wcu-cs-chl__card {
		gap: 24px;
	} */
}

/* Small mobile (<=480px) */
@media (max-width: 480px) {
	.wcu-cs-chl {
		padding: 32px 0;
		gap: 24px;
	}
	.wcu-cs-chl__inner {
		padding: 0 16px;
	}
	.wcu-cs-chl__title {
		font-size: 24px;
		line-height: 30px;
	}
	.wcu-cs-chl__intro {
		font-size: 15px;
		line-height: 24px;
	}
	.wcu-cs-chl__card {
		padding: 20px;
	}
	.wcu-cs-chl__card-title {
		font-size: 16px;
		line-height: 22px;
	}
}
/* ================================================================
   G-S3. SINGLE — THE CHALLENGE SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S4. SINGLE — THE SOLUTION SECTION — CSS START
   Unique class: .wcu-cs-sol
   ----------------------------------------------------------------
   Structure:
   section > .wcu-cs-sol__inner
     .wcu-cs-sol__header
       .wcu-cs-sol__header-left
         .wcu-cs-sol__label       (eyebrow "The solution")
         h2.wcu-cs-sol__title     (main heading)
       .wcu-cs-sol__intro         (intro paragraph, right of header)
     .wcu-cs-sol__cards           (flex row 4 cards, flex wrap responsive)
       .wcu-cs-sol__card          (white card, position modifier --first/--middle/--last)
         .wcu-cs-sol__card-icon   (44×44 light-blue badge)
           img
         .wcu-cs-sol__card-body
           .wcu-cs-sol__card-heading
             h3.wcu-cs-sol__card-title
             p.wcu-cs-sol__card-subtitle
           p.wcu-cs-sol__card-text
   ================================================================ */
.wcu-cs-sol {
	background: #fff;
	padding: 64px 0 48px;
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

.wcu-cs-sol__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
	width: 100%;
	box-sizing: border-box;
}

.wcu-cs-sol__header {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
	padding-bottom: 48px;
}

.wcu-cs-sol__header-left {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.wcu-cs-sol__label {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
	width: 100%;
	margin: 0;
}

.wcu-cs-sol__title {
	color: #000;
	font-family: "Inter Tight", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 500 !important;
	line-height: 43.2px;
	width: 100%;
	margin: 0;
}

.wcu-cs-sol__intro {
	flex: 0 0 573px;
	width: 573px;
	max-width: 573px;
	color: #272a28;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px;
	margin: 0;
}

.wcu-cs-sol__cards {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.wcu-cs-sol__card {
	flex: 1 0 0;
	min-width: 0;
	background: #fff;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
	border-style: solid;
	border-color: #e4e7e5;
}

/* Default: 4-card row.  Use position modifiers so same rules apply
   regardless of actual card count (2/3/4 depending on ACF filled). */

.wcu-cs-sol__card--first {
	border-width: 0.6px;
	border-radius: 8px 0 0 8px;
}

.wcu-cs-sol__card--middle {
	border-width: 0.6px 0.6px 0.6px 0;
	border-radius: 0;
}

.wcu-cs-sol__card--last {
	border-width: 0.6px 0.6px 0.6px 0;
	border-radius: 0 8px 8px 0;
}

.wcu-cs-sol__card-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: rgba(8, 101, 255, 0.15);
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.wcu-cs-sol__card-icon img {
	width: 28px;
	height: 28px;
	display: block;
	object-fit: contain;
}

.wcu-cs-sol__card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
}

.wcu-cs-sol__card-heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

.wcu-cs-sol__card-title {
	color: #3f3f46 !important;
	font-family: "Inter Tight", sans-serif;
	font-size: 18px !important;
	font-style: normal;
	font-weight: 500 !important;
	line-height: 24px !important;
	width: 100%;
	margin: 0;
}

.wcu-cs-sol__card-subtitle {
	color: #a1a1aa;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	margin: 0;
}

.wcu-cs-sol__card-text {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	width: 100%;
	margin: 0;
}

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1366px) {
	.wcu-cs-sol__inner {
		padding: 0 30px;
	}

}
/* Tablet 1200px */
@media (max-width: 1200px) {
	.wcu-cs-sol__intro {
		flex: 1 1 280px;
		width: auto;
		max-width: none;
	}

	.wcu-cs-sol__header {
		flex-wrap: wrap;
	}
}

/* Tablet 1024px */
@media (max-width: 1024px) {
	.wcu-cs-sol {
		padding: 48px 0 24px;
		gap: 40px;
	}

	.wcu-cs-sol__inner {
		padding: 0 24px;
	}

	.wcu-cs-sol__title {
		font-size: 32px;
		line-height: 38.4px;
	}

	.wcu-cs-sol__cards {
		flex-wrap: wrap;
	}

	.wcu-cs-sol__card {
		flex: 1 1 50%;
		max-width: 50%;
	}

	/* 2×2 grid on tablet (2 cols → :nth-child semantics match child order
	   which is always ordered 1..N even if middle count varies) */
	.wcu-cs-sol__card--first {
		border-width: 0.6px;
		border-radius: 8px 0 0 0;
	}
	/* Child 2 of any 2/3/4 count set */
	.wcu-cs-sol__cards > .wcu-cs-sol__card:nth-child(2) {
		border-width: 0.6px 0.6px 0.6px 0;
		border-radius: 0 8px 0 0;
	}
	/* 3rd child only exists in 3/4 card counts */
	.wcu-cs-sol__cards > .wcu-cs-sol__card:nth-child(3) {
		border-width: 0 0.6px 0.6px 0.6px;
		border-radius: 0 0 0 8px;
	}
	.wcu-cs-sol__card--last {
		border-width: 0 0.6px 0.6px 0;
		border-radius: 0 0 8px 0;
	}
}

/* Mobile / small tablets 768px */
@media (max-width: 769px) {
	.wcu-cs-sol {
		padding: 40px 0 24px;
		gap: 32px;
	}
	.wcu-cs-sol__header {
		flex-direction: column;
		gap: 16px;
	}

	.wcu-cs-sol__header-left,
	.wcu-cs-sol__intro {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
	}

	.wcu-cs-sol__title {
		font-size: 28px;
		line-height: 33.6px;
	}

	.wcu-cs-sol__cards {
		flex-direction: column;
	}

	.wcu-cs-sol__card {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
		gap: 24px;
	}

	.wcu-cs-sol__card--first {
		border-width: 0.6px;
		border-radius: 8px 8px 0 0;
	}
	    .wcu-cs-sol__cards > .wcu-cs-sol__card:nth-child(2) {
        border-width: 0 0.6px 0.6px 0.6px;
        border-radius: 0 0 0 0;
    }
	    .wcu-cs-sol__cards > .wcu-cs-sol__card:nth-child(3) {
        border-width: 0 0.6px 0.6px 0.6px;
        border-radius: 0 0 0 0;
    }

	.wcu-cs-sol__card--middle {
		border-width: 0 0.6px 0.6px 0.6px;
		border-radius: 0;
	}

	.wcu-cs-sol__card--last {
		border-width: 0 0.6px 0.6px 0.6px;
		border-radius: 0 0 8px 8px;
	}
}

/* Small mobile 480px */
@media (max-width: 480px) {
	.wcu-cs-sol {
		padding: 32px 0 20px;
		gap: 24px;
	}

	.wcu-cs-sol__inner {
		padding: 0 16px;
	}

	.wcu-cs-sol__title {
		font-size: 24px;
		line-height: 30px;
	}

	.wcu-cs-sol__intro {
		font-size: 15px;
		line-height: 24px;
	}

	.wcu-cs-sol__card {
		padding: 20px;
	}

	.wcu-cs-sol__card-title {
		font-size: 16px;
		line-height: 22px;
	}
}
/* ================================================================
   G-S4. SINGLE — THE SOLUTION SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S5. SINGLE — OUR VISION SECTION — CSS START
   Unique class: .wcu-cs-vis
   ----------------------------------------------------------------
   Structure (gallery-only — our_vision background_image_* subset is
   stored inside the shared the_solution ACF group; no header/icon
   boxes here).  Matches 1:1 visual design of wcu-our-vision shortcode
   gallery (nav PNG icons, collapsed slide blur, inactive flex-basis
   228 / active flex-basis 600 / height 326, etc.):
   section > .wcu-cs-vis__inner
      .wcu-cs-vis__gallery-wrapper
        .wcu-cs-vis__gallery
          .wcu-cs-vis__slide (inactive flex-basis 228; .is-active flex-basis 600)
            .wcu-cs-vis__media → .wcu-cs-vis__image (blur(4px) + scale(1.05) inactive; clear when .is-active)
            .wcu-cs-vis__overlay  (gradient overlay, currently disabled, matches shortcode)
            .wcu-cs-vis__bottom-nav (counter .wcu-cs-vis__counter + .wcu-cs-vis__progress(.wcu-cs-vis__progress-fill) + .wcu-cs-vis__nav-buttons (prev/next image icons button-6/7.png))
   ================================================================ */

/* ========================= SECTION WRAPPER ========================= */
.wcu-cs-vis {
	background: #ffffff;
	/* padding: 48px 0 64px; */
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

.wcu-cs-vis__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
	width: 100%;
	box-sizing: border-box;
}

/* ========================= GALLERY WRAPPER ========================= */
.wcu-cs-vis__gallery-wrapper {
	--wcu-cs-vis-expand-duration: 750ms;
	--wcu-cs-vis-media-duration:  600ms;
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}

.wcu-cs-vis__gallery {
	display: flex;
	gap: 12px;
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	touch-action: pan-y;
	overflow: hidden;
}

/* ========================= GALLERY SLIDES ========================= */
.wcu-cs-vis__slide {
	position: relative;
	flex: 0 0 120px;
	flex-basis: 120px;
	flex-grow: 0;
	flex-shrink: 0;
	height: 473px;
	overflow: hidden;
	border-radius: 6px;
	cursor: pointer;
	min-width: 0;
	background: #0f0f10;
	will-change: flex-basis, transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	contain: layout paint;
	outline: none;
	transition:
		flex-basis var(--wcu-cs-vis-expand-duration, 750ms) cubic-bezier(.25, .8, .25, 1),
		flex-grow var(--wcu-cs-vis-expand-duration, 750ms) cubic-bezier(.25, .8, .25, 1),
		flex-shrink var(--wcu-cs-vis-expand-duration, 750ms) cubic-bezier(.25, .8, .25, 1);
}

.wcu-cs-vis__slide:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

.wcu-cs-vis__slide.is-active {
	flex: 1 1 760px;
	flex-basis: 760px;
	flex-grow: 1;
	flex-shrink: 1;
}

.wcu-cs-vis__slide.is-active::before {
	display: none !important;
}

@media (hover: hover) and (pointer: fine) {
	.wcu-cs-vis__slide:hover:not(.is-active) {
		flex-grow: 0;
		flex-shrink: 0;
	}
}

/* ========================= MEDIA / IMAGE / OVERLAY ========================= */
.wcu-cs-vis__media,
.wcu-cs-vis__image,
.wcu-cs-vis__overlay {
	position: absolute;
	inset: 0;
}

.wcu-cs-vis__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: blur(4px);
	-webkit-filter: blur(4px);
	transform: scale(1.05);
	transition:
		filter var(--wcu-cs-vis-media-duration, 600ms) ease,
		transform var(--wcu-cs-vis-media-duration, 600ms) ease;
}

.wcu-cs-vis__slide.is-active .wcu-cs-vis__image {
	filter: blur(0);
	transform: scale(1);
}

/* Overlay disabled in original shortcode (commented block retained for parity) */
.wcu-cs-vis__overlay {
	background: transparent;
}

/* ========================= BOTTOM NAV (counter, progress, prev/next PNGs) ========================= */
.wcu-cs-vis__bottom-nav {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 18px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.wcu-cs-vis__slide.is-active .wcu-cs-vis__bottom-nav {
	opacity: 1;
	transition-delay: 0.25s;
}

.wcu-cs-vis__counter {
	color: #ffffff;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 400;
	min-width: 40px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	line-height: 1;
}

.wcu-cs-vis__progress {
	flex: 1;
	height: 2px;
	background: rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

.wcu-cs-vis__progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	background: #ffffff;
	border-radius: 0;
}

.wcu-cs-vis__nav-buttons {
	display: flex;
	gap: 16px;
	flex-shrink: 0;
}

.wcu-cs-vis__nav-btn {
	width: 34px;
	height: 34px;
	border: none;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	background-color: unset !important;
	padding: 0 !important;
	flex-shrink: 0;
	border-radius: 0;
}

.wcu-cs-vis__nav-btn img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wcu-cs-vis__nav-btn:hover,
.wcu-cs-vis__nav-btn:focus,
.wcu-cs-vis__nav-btn:focus-visible {
	background: none;
}

.wcu-cs-vis__nav-btn.is-disabled,
.wcu-cs-vis__nav-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========================= RESPONSIVE (matches shortcode exact breakpoints) ========================= */
@media (max-width: 1366px) {
	/* .wcu-cs-vis {
		padding: 48px 0 48px;
	} */
	.wcu-cs-vis__inner {
		padding: 0 30px;
	}
}
/* 1024px: tablet — slides 160 / active 420 / height 300 */
@media (max-width: 1024px) {
	/* .wcu-cs-vis {
		padding: 48px 0 48px;
	} */
	.wcu-cs-vis__inner {
		padding: 0 24px;
	}

	.wcu-cs-vis__slide {
		flex: 0 0 160px;
		height: 473px;
	}

	.wcu-cs-vis__slide.is-active {
		flex: 1 1 420px;
	}

	.wcu-cs-vis__nav-btn {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
	.wcu-cs-vis__slide:hover:not(.is-active) {
		flex-basis: 90px;
		flex-grow: 0;
		flex-shrink: 0;
	}
}

/* 992px: padding adjustments (parity with old block) */
@media (max-width: 992px) {
	/* .wcu-cs-vis__inner {
		padding: 0 40px;
	} */
	.wcu-cs-vis__gallery-wrapper {
		padding: 0;
	}
}

/* 770px: mobile and small tablets — gallery becomes vertical single-slide show */
@media (max-width: 770px) {
	.wcu-cs-vis__gallery {
		display: block;
	}

	.wcu-cs-vis__slide {
		width: 100%;
		height: 0;
		min-height: 0;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		margin: 0;
		transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	}

	.wcu-cs-vis__slide.is-active {
		flex: 0 0 auto;
		height: 320px;
		min-height: 320px;
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	.wcu-cs-vis__bottom-nav {
		left: 16px;
		right: 16px;
		bottom: 14px;
		gap: 10px;
	}

	.wcu-cs-vis__counter {
		font-size: 14px;
		min-width: 32px;
	}

	.wcu-cs-vis__nav-btn {
		width: 28px;
		height: 28px;
	}
}

/* 768px: small tablets/mobile padding */
@media (max-width: 768px) {
	.wcu-cs-vis {
		padding: 0px 0 32px;
	}
	.wcu-cs-voices{
      padding-bottom:32px;
}
	.wcu-cs-vis__inner {
		padding: 0 24px;
	}
}

/* 576px: smaller mobile padding */
@media (max-width: 576px) {
	.wcu-cs-vis__inner {
		padding: 0 16px;
	}
}

/* 420px: small phones — active slide shorter */
@media (max-width: 420px) {
	.wcu-cs-vis__slide.is-active {
		height: 280px;
		min-height: 280px;
	}
}
/* ================================================================
   G-S5. SINGLE — OUR VISION SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S6. SINGLE — CLIENT VOICES SECTION — CSS START
   Unique class: .wcu-cs-voices
   ----------------------------------------------------------------
   Structure (2 main blocks: header + card):
   section > .wcu-cs-voices__inner
     (1) Header
        .wcu-cs-voices__header (row, left=eyebrow+title / right=intro desc)
          .wcu-cs-voices__header-left
            .wcu-cs-voices__eyebrow  (uppercase label)
            H2  .wcu-cs-voices__title
          .wcu-cs-voices__header-right
            p .wcu-cs-voices__intro
     (2) Card (bordered 2-col desktop stacked mobile)
        .wcu-cs-voices__card (radius 8, border 0.6 #e4e7e5)
          .wcu-cs-voices__card-top (flex row desktop / col mobile, 0 gap so borders align)
            LEFT: QUOTE 50% → .wcu-cs-voices__quote (bg #F5F6F5, padding 40, gap 24 flex col)
              .wcu-cs-voices__quote-icon  (32×24 quote SVG/Image, aria-hidden)
              .wcu-cs-voices__brand (flex row, gap 8, centred vert)
                img .wcu-cs-voices__brand-logo (20×20 object-fit contain)
              p  .wcu-cs-voices__quote-text (20px 500 28lh)
              .wcu-cs-voices__cta (flex row wrap, gap 24)
                button .wcu-cs-voices__btn-video (bg #0865FF hover #0552d6, pad 12 20, radius 8, 14px 500, gap 8 flex)
                    svg play triangle 16px fill currentColor
                    span .wcu-cs-voices__btn-video-label (hidden mobile only CSS when <720)
                a  .wcu-cs-voices__link-case (link, 14 500, gap 6 inline-flex, currentColor)
              .wcu-cs-voices__person.wcu-cs-voices__person--inline (MOBILE ONLY shown)
                 img .wcu-cs-voices__avatar (40×40 rounded circle, obj-cover)
                 .wcu-cs-voices__person-info
                    .wcu-cs-voices__person-name (14 500 color #18181B)
                    .wcu-cs-voices__person-title (13 400 color #71767D)
            RIGHT: IMAGE 50% → .wcu-cs-voices__image (rel, min-height 280)
                .wcu-cs-voices__image-photo (abs inset 0, 100% w/h, obj-cover)
                button .wcu-cs-voices__image-play (abs center 50% t-50% l-50% -50% t/l, 64x64, z5, no bg, pointer cursor)
                  svg white circle 90% opacity fill, blue play triangle inside
          .wcu-cs-voices__footer (flex row, border-top 0.6px #e4e7e5)
            LEFT 50%: person DESKTOP → .wcu-cs-voices__person.wcu-cs-voices__person--desktop (DESKTOP ONLY, pad 24 40, border-right 0.6, content same as inline)
            RIGHT 50%: .wcu-cs-voices__stats (flex row, stretch)
              .wcu-cs-voices__stat (flex:1 1 0, flex column center, gap 4, pad 24, border-right 0.6px;
                                  last child no border-right; modifiers --first/--middle/--last)
                .wcu-cs-voices__stat-value (28 500 #000)
                .wcu-cs-voices__stat-label (12 400 #71767D)
   Responsive: 992 (container padding 0→40), 720 (mobile-only: header block, H2 24px, btn-label hide, desktop person hide, inline person show, card-top col mobile, min-height 220 on img, footer block, stats full-width, stat 20px val), 576 (pad 16 mobile container).
   ================================================================ */

/* ========================= SECTION WRAPPER / INNER (matches .container of original design: max 1440, 0 64 pad, voices-section spacing: 64p add, 48 gap) ========================= */
.wcu-cs-voices {
	background: #ffffff;
	display: flex;
	padding: 64px 0;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
	flex-direction: column;
	gap: 48px;
	align-items: stretch;
}

.wcu-cs-voices__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
	box-sizing: border-box;
}

/* ========================= HEADER (voices-header flex row, space-between, 48 gap, wrap) ========================= */
.wcu-cs-voices__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	flex-wrap: wrap;
	padding-bottom: 48px;
}

.wcu-cs-voices__header-left {
	flex: 1 1 380px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.wcu-cs-voices__eyebrow {
	font-family: 'Inter Tight', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
	color: #525b53;
	margin: 0;
}

.wcu-cs-voices__title {
	font-family: 'Inter Tight', sans-serif;
	font-size: 36px;
	font-weight: 500 !important;
	line-height: 43.2px;
	margin: 0;
	color: #000;
}

.wcu-cs-voices__header-right {
	flex: 1 1 360px;
	min-width: 0;
}

.wcu-cs-voices__intro {
	font-family: 'Inter Tight', sans-serif;
	font-size: 16px;
	line-height: 25.6px;
	font-weight: 400;
	color: #272a28;
	/* max-width: 473px; */
	margin: 0;
}

/* Link-case span/arrow color link: #0865FF span arrow (arrow only when span there? keep same colours) */
.wcu-cs-voices__link-case span {
	color: #272a28;
}
.wcu-cs-voices__link-case svg {
	color: #272a28 !important;
}

/* ========================= CARD (bordered, 0.6px border, radius 8, overflow hidden so image top-right aligns radius) ========================= */
.wcu-cs-voices__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 0.6px solid #e4e7e5;
	border-radius: 8px;
	background: #ffffff;
	overflow: hidden;
}

.wcu-cs-voices__card-top {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

/* ========================= QUOTE (LEFT 50%: bg F5F6F5 pad 40 gap 24 vert flex col) ========================= */
.wcu-cs-voices__quote {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 24px;
	background: #f5f6f5;
	min-width: 0;
	box-sizing: border-box;
}

.wcu-cs-voices__quote-icon {
	width: 32px;
	height: 24px;
	flex-shrink: 0;
}
.wcu-cs-voices__quote-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wcu-cs-voices__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top:76px;
}
.wcu-cs-voices__brand-logo {
	width: 140px;
	height: 30px;
	object-fit: contain;
	display: block;
}

.wcu-cs-voices__quote-text {
	font-family: 'Inter Tight', sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 28px;
	color: #18181b;
	margin: 0;
}

.wcu-cs-voices__cta {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/* -- "Watch the video" CTA button with inline SVG play icon -- */
.wcu-cs-voices__btn-video {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	background: #0865ff;
	color: #fff;
	padding: 12px 20px;
	border-radius: 8px;
	font-family: 'Inter Tight', sans-serif;
	font-size: 14px;
	font-weight: 500;
	transition: background .15s ease;
	cursor: pointer;
	border: 0;
}
.wcu-cs-voices__btn-video:hover { background: #0552d6; }
.wcu-cs-voices__btn-video svg { color: #fff; flex: none; }

.wcu-cs-voices__link-case {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: #272a28;
	font-family: 'Inter Tight', sans-serif;
	font-size: 14px;
	font-weight: 500;
}

/* ========================= RIGHT: IMAGE (50% width) + centered play overlay button ========================= */
.wcu-cs-voices__image {
	flex: 1 1 50%;
	min-width: 0;
	position: relative;
}

.wcu-cs-voices__image-photo {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	display: block;
}

.wcu-cs-voices__image-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: unset !important;
	z-index: 5;
	width: 64px;
	height: 64px;
	padding: 0 !important;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.wcu-cs-voices__image-play:hover,
.wcu-cs-voices__image-play:focus {
	opacity: 0.9;
	transform: translate(-50%, -50%) scale(1.05);
}
.wcu-cs-voices__image-play-icon {
	display: block;
	width: 64px;
	height: 64px;
}

/* ========================= PERSON (avatar + name/title) — 2 variants --inline mobile-- and --desktop footer-- ========================= */
.wcu-cs-voices__person {
	display: flex;
	align-items: center;
	gap: 12px;
}
.wcu-cs-voices__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.wcu-cs-voices__person-name {
	font-family: 'Inter Tight', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #18181b;
}
.wcu-cs-voices__person-title {
	font-family: 'Inter Tight', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: #71767d;
}

.wcu-cs-voices__person--inline {
	display: none;
}
.wcu-cs-voices__person--desktop {
	flex: 1 1 50%;
	padding: 24px 24px;
	border-right: 0.6px solid #e4e7e5;
	box-sizing: border-box;
}

/* ========================= FOOTER (person desktop LEFT 50%, stats RIGHT 50%) ========================= */
.wcu-cs-voices__footer {
	display: flex;
	align-items: stretch;
	width: 100%;
	border-top: 0.6px solid #e4e7e5;
}

/* Stats row: flex stretch so borders go edge-to-edge under photo above */
.wcu-cs-voices__stats {
	flex: 1 1 50%;
	display: flex;
	align-items: stretch;
}

.wcu-cs-voices__stat {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 24px;
	border-right: 0.6px solid #e4e7e5;
	text-align: center;
	box-sizing: border-box;
	min-width: 0;
}
.wcu-cs-voices__stat--last { border-right: none; }

.wcu-cs-voices__stat-value {
	font-family: 'Inter Tight', sans-serif;
	font-size: 28px;
	font-weight: 500;
	color: #000;
}
.wcu-cs-voices__stat-label {
	font-family: 'Inter Tight', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #71767d;
}

/* ========================= RESPONSIVE (parity with original block: 992, then 720 the main mobile breakpoint, then 576) ========================= */

/* 992px container padding 0 40px (voices-section was 64 block pad keep, container inner 64 → 40) */
@media (max-width: 1366px) {
	.wcu-cs-voices__inner {
		padding: 0 30px;
	}
}
@media (max-width: 1024px) {
	.wcu-cs-voices__inner {
		padding: 0 24px;
	}
}

/* 720px main mobile break: header becomes block, title 24px, btn label hidden, person swaps variants, card-top becomes col, footer block becomes rows, stats full width  */
@media (max-width: 770px) {

	.wcu-cs-voices__header {
		display: block;
	}
	.wcu-cs-voices{
		padding: 32px 0 ;
	}
	

	.wcu-cs-voices__title {
		font-size: 24px;
		line-height: 28.8px;
	}

	.wcu-cs-voices__header-right {
		margin-top: 8px;
	}
	.wcu-cs-voices__intro {
		max-width: none;
	}

	.wcu-cs-voices__card-top {
		flex-direction: column;
	}

	.wcu-cs-voices__quote {
		padding: 24px;
	}

	/* Button shrinks to icon-only square on mobile — label hides via CSS */
	.wcu-cs-voices__btn-video {
		padding: 10px;
	}
	

	/* Person row: swap variants */
	.wcu-cs-voices__person--inline {
		display: flex;
	}
	.wcu-cs-voices__person--desktop {
		display: none;
	}

	.wcu-cs-voices__image-photo {
		min-height: 220px;
	}

	/* Footer becomes vertical row on mobile */
	.wcu-cs-voices__footer {
		display: block;
	}
	.wcu-cs-voices__stats {
		width: 100%;
	}
	.wcu-cs-voices__stat {
		padding: 16px 8px;
	}
	.wcu-cs-voices__stat-value {
		font-size: 20px;
	}
}

/* 576px smallest container inner padding 16 */
@media (max-width: 576px) {
	.wcu-cs-voices__inner {
		padding: 0 16px;
	}
	.wcu-cs-voices__btn-video-label {
		display: none;
	}
}

/* ========================= END CLIENT VOICES CSS ========================= */
/* ================================================================
   G-S6. SINGLE — CLIENT VOICES SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S7. SINGLE — KEY FEATURES BUILD SECTION — CSS START
   Unique class: .wcu-cs-kfb
   ----------------------------------------------------------------
   Structure (desktop 2-col / mobile col stacked 1-col; bg dark navy #0a2440;
   left media column 41.5% (max 598px), right content flex:1 with header block
   + accordion grid-template-rows 0fr→1fr (single-open-at-a-time):
   section > .wcu-cs-kfb__inner (max 1440, 0 64 pad)
      .wcu-cs-kfb__shell (display:flex align-items:stretch row, bg #0a2440 width 100%)
         LEFT MEDIA: .wcu-cs-kfb__media (flex 0 0 41.5% / max 598)
            img .wcu-cs-kfb__media-photo (abs inset 0 / obj-cover / opacity 0.8)
         RIGHT CONTENT: .wcu-cs-kfb__content (flex 1 / flex col gap 32 / pad 32)
            .wcu-cs-kfb__header (flex col gap 8 / full width)
               p  .wcu-cs-kfb__label (14 400 19.6 uppercase color #F4F4F5)
               h2 .wcu-cs-kfb__title (36 500 43.2 color #FFF)
               p  .wcu-cs-kfb__intro (16 400 23 color #E4E4E7 full width)
            .wcu-cs-kfb__accordion (flex col, width 100%)
               .wcu-cs-kfb__item (full w / border-bottom 0.8px rgba(255,255,255,0.1); last-child no bottom border; has class .is-open → rotates icon 45deg and grid-template-rows panel 0fr→1fr)
                 button .wcu-cs-kfb__item-trigger (full w, flex space-between align center gap16 / pad 16 0 / transparent bg / no border / cursor pointer / inherit font/text color align left)
                    .wcu-cs-kfb__item-trigger-left (flex align center gap16 min-w 0)
                       span .wcu-cs-kfb__item-num (flex 0 0 20 width 20 / color #64a8ff / 14 500 16.5 uppercase letter-spacing 1.1)
                       span .wcu-cs-kfb__item-title (color #fff / 18 500 24)
                    .wcu-cs-kfb__item-icon (shrink 0 / 24×24 flex center; overflow hidden; trans 0.25s; plus color currentColor fills svg so white; when .is-open on parent: rotate 45deg via transform)
                 .wcu-cs-kfb__panel (display grid; grid-template-rows: 0fr; trans 0.28s ease; pad-left 36px; when parent .is-open → grid-template-rows: 1fr)
                    .wcu-cs-kfb__panel-inner (overflow hidden min-height 0)
                       p .wcu-cs-kfb__panel-text (color rgba(244,244,245,0.74) / 14 400 21 / pad-bottom 20 / full width)
   Responsive breakpoints:
      ≤1024: media flex 0 0 38% (no max-w), title 32/38.4, content pad 28 gap 28
      ≤992:  inner 0 64 → 0 40 (container parity like all others)
      ≤768:  shell direction column, media 100% none flex w/ min-height 280 aspect 4/3; content pad 32 20 gap 24; title 28/33.6; item-title 16/22
      ≤576:  inner 0 40 → 0 16
      ≤480:  media min-height 220; content pad 28 16 gap 20; title 24/30; intro 15/22; trigger-left gap 12
   ================================================================ */

/* ========================= SECTION WRAPPER / INNER (original "zero_m_p" class = 0 margin, 0 padding on section itself —
   reset styles only affect CHILD ELEMENTS inside the section (star selector, heading/p/ul/button).
   CRITICAL: The .zero_m_p section never had background / width / overflow / max-width CSS rules on the ITSELF — only child resets below:
   ========================= */
.wcu-cs-kfb,
.wcu-cs-kfb *::before,
.wcu-cs-kfb *::after {
	box-sizing: border-box;
}
.wcu-cs-kfb h1,
.wcu-cs-kfb h2,
.wcu-cs-kfb h3,
.wcu-cs-kfb h4,
.wcu-cs-kfb h5,
.wcu-cs-kfb h6,
.wcu-cs-kfb p,
.wcu-cs-kfb ul,
.wcu-cs-kfb button {
	margin: 0;
	padding: 0;
}

/* section wrapper only: zero margin / padding (per "zero_m_p" class name). Theme/page otherwise defaults to WP section spacing. */
.wcu-cs-kfb {
	margin: 0;
	padding: 0;
}

/* .container = wcu-cs-kfb__inner (exact original values) */

.wcu-cs-kfb__inner {
	/* max-width: 1440px; */
	margin: 0 auto;
	padding: 0px 0px;
	width: 100%;
	box-sizing: border-box;
}
@media (min-width: 1921px) {
    .wcu-cs-kfb__inner {
		width: 100%;
        max-width: 1320px;
    }
}
.wcu-cs-kfb__shell {
    background: #0a2440;
    display: grid;
    grid-template-columns: 50% 1fr;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}

/* ========================= LEFT MEDIA ========================= */

.wcu-cs-kfb__media {
    position: relative;
    min-width: 0;
    background: #000000;
    overflow: hidden;
}

.wcu-cs-kfb__media-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    display: block;
}

/* ========================= RIGHT CONTENT ========================= */

.wcu-cs-kfb__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    padding: 32px;
    box-sizing: border-box;
}
/* Header inside right content */
.wcu-cs-kfb__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

.wcu-cs-kfb__label {
	color: #f4f4f5;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

.wcu-cs-kfb__title {
	color: #ffffff !important;
	font-family: "Inter Tight", sans-serif;
	font-size: 36px ;
	font-weight: 500 !important;
	line-height: 43.2px !important;
	
}

.wcu-cs-kfb__intro {
	color: #e4e4e7;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 23px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ========================= ACCORDION ========================= */
.wcu-cs-kfb__accordion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.wcu-cs-kfb__item {
	width: 100%;
	border-bottom: 0.8px solid rgba(255, 255, 255, 0.1);
}
.wcu-cs-kfb__item:last-child {
	border-bottom: none;
}

/* Trigger (full row, flex space-between, transparent, font inherit — EXACT original .wwb-trigger values, no custom outline/focus styles) */
.wcu-cs-kfb__item-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0 !important;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	background-color: unset !important;
}

.wcu-cs-kfb__item-trigger-left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.wcu-cs-kfb__item-num {
	flex: 0 0 20px;
	width: 20px;
	color: #64a8ff;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 16.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.wcu-cs-kfb__item-title {
	color: #ffffff;
	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
}

/* Plus / close icon (12×12 currentColor; on open → rotate 45°) */
.wcu-cs-kfb__item-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.50);
	transition: transform 0.25s ease;
}
.wcu-cs-kfb__item-icon svg {
	width: 20px;
	height: 20px;
	display: block;
	object-fit: contain;
}
.wcu-cs-kfb__item.is-open .wcu-cs-kfb__item-icon {
	transform: rotate(45deg);
}

/* Panel: smooth open/close via CSS grid 0fr → 1fr trick */
.wcu-cs-kfb__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
	padding-left: 36px;
}

.wcu-cs-kfb__item.is-open .wcu-cs-kfb__panel {
	grid-template-rows: 1fr;
}

.wcu-cs-kfb__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.wcu-cs-kfb__panel-text {
	color: rgba(244, 244, 245, 0.74);
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	padding-bottom: 20px !important;
	width: 100%;
	margin: 0;
}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1366px) {
	.wcu-cs-kfb__inner {
		padding: 0px 0px;
	}
}
/* 1024px Tablet: media 38%, title 32, content pad 28 gap 28 */
@media (max-width: 1024px) {
	.wcu-cs-kfb__media {
		flex: 0 0 38%;
		max-width: none;
	}
	.wcu-cs-kfb__title {
		font-size: 32px;
		line-height: 38.4px;
	}
	.wcu-cs-kfb__content {
		padding: 28px;
		gap: 28px;
	}
	.wcu-cs-kfb__inner {
		padding: 0px 0px;
	}
	.wcu-cs-voices{
     padding-bottom:50px;
}
}

/* 992px container inner padding 64 → 40 (matches voices/challenge etc.) */


/* 768px Mobile: shell column, media 100% width min-h 280 aspect-ratio 4/3, */
@media (max-width: 768px) {
	.wcu-cs-kfb__shell {
		grid-template-columns: 1fr;
	}
	.wcu-cs-kfb__media {
		flex: none;
		width: 100%;
		max-width: none;
		min-height: 280px;
		aspect-ratio: 4 / 3;
	}
	.wcu-cs-voices__brand{
    padding-top:50px
}
	.wcu-cs-kfb__content {
		padding: 32px 20px;
		gap: 24px;
	}
	.wcu-cs-kfb__title {
		font-size: 28px;
		line-height: 33.6px;
	}
	.wcu-cs-kfb__item-title {
		font-size: 16px;
		line-height: 22px;
	}
	.wcu-cs-kfb__inner{
    padding:0px !important;
}
	.wcu-cs-snap__title{
    margin-bottom:16px;
}
	.wcu-cs-chl__header{
     padding-bottom:32px;
   }
	    .wcu-cs-sol {
        padding: 32px 0 32px;
        gap: 32px;
    }
	.wcu-cs-sol__header{
    padding-bottom:32px;
}
}

/* 576px inner 40 → 16 pad */
@media (max-width: 576px) {
	.wcu-cs-kfb__inner {
		padding: 0px 0px;
	}
	.wcu-cs-voices__brand{
    padding-top:16px
}
	.wcu-cs-voices__quote{
      gap:16px;
}	
	.wcu-cs-voices{
   padding-bottom:32px;
}
}

/* 480px small phones: media 220, pad 28 16 gap 20, title 24/30, intro 15/22, trigger-left gap12 */
@media (max-width: 480px) {
	.wcu-cs-kfb__media {
		min-height: 220px;
	}
	.wcu-cs-kfb__content {
		padding: 28px 16px;
		gap: 20px;
	}
	.wcu-cs-kfb__title {
		font-size: 24px;
		line-height: 30px;
	}
	.wcu-cs-kfb__intro {
		font-size: 15px;
		line-height: 22px;
	}
	.wcu-cs-kfb__item-trigger-left {
		gap: 12px;
	}
}
/* ================================================================
   G-S7. SINGLE — KEY FEATURES BUILD SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S8. SINGLE — RESULTS DELIVERED SECTION — CSS START
   Unique class: .wcu-cs-res  (res = results)
   Design source: original inline block ".the-outcomes" + ".zero_m_p" reset.
   Structure:
     .wcu-cs-res (section, per "zero_m_p": margin 0 padding 0 + child reset rules)
       .wcu-cs-res__inner (.container: max 1440px, 0 auto, 0 64 pad)
         .wcu-cs-res__header (flex row nowrap gap 32 items start width 100%)
            .wcu-cs-res__header-left (flex 1 0 0, column gap 8 items start):
               .wcu-cs-res__label (14/19.6 uppercase #525b53 Inter Tight 400)
               .wcu-cs-res__title (36/43.2 #000 Inter Tight 500)
            .wcu-cs-res__intro (flex 1 0 0 16/25.6 #272a28 Inter Tight 400)
         .wcu-cs-res__grid (3×2 grid 630 min-height; 0.6px solid #e4e7e5 rounded 8 overflow hidden bg #e4e7e5 gap 0.6px — produces the grey divider lines between white cards without needing per-card borders):
            .wcu-cs-res__card (white bg, pad 24, flex column justify-between items-start, min-w/h 0 overflow hidden):
               .wcu-cs-res__badge (inline-flex items-center justify-center gap 8 pad 8 16 radius 8 bg rgba(8,101,255,0.15) border 1px same rgba, flex-shrink 0):
                  span (#0865ff 14/21 Inter Tight 400 white-space nowrap)
               .wcu-cs-res__card-body (flex column gap 16 items-start justify-center w 100%):
                  .wcu-cs-res__metric (flex wrap gap 4 items align-end):
                     .wcu-cs-res__metric-value (#3f3f46 48/57.6 Inter Tight 500 capitalize)
                     .wcu-cs-res__metric-unit (#71717a 14/21 Inter Tight 400 pad-bottom 6)
                  .wcu-cs-res__card-text (#525b53 14/21 Inter Tight 400 width 100%)
   Responsive breakpoints (EXACT original values from user's pasted block):
      ≤1024px: section pad 48 32, gap 40; title 32/38.4; grid 2×N rows auto; card min-h 280; value 40/48
      ≤992px:  inner 0 64 → 0 40 (container parity)
      ≤768px:  section pad 40 20, gap 32; header column gap 16; header-left+intro flex-auto width 100%; title 28/33.6; grid 1 col; card min-h 240 gap 32; value 36/43.2
      ≤576px:  inner 0 40 → 0 16
      ≤480px:  section pad 32 16 gap 24; title 24/30; intro 15/24; card pad 20 min-h 220; value 32/38.4; badge pad 6 12
   ================================================================ */

/* zero_m_p scoped resets (only for children inside section wrapper — section itself: margin+padding 0 only, NEVER set background/width rules on it, per original design): */
.wcu-cs-res,
.wcu-cs-res *::before,
.wcu-cs-res *::after {
	box-sizing: border-box;
}
.wcu-cs-res h1,
.wcu-cs-res h2,
.wcu-cs-res h3,
.wcu-cs-res h4,
.wcu-cs-res h5,
.wcu-cs-res h6,
.wcu-cs-res p,
.wcu-cs-res ul {
	margin: 0;
	padding: 0;
}

.wcu-cs-res {
	margin: 0;
	padding: 0;
}

/* Inner wrapper = .container (exact original values) */
.wcu-cs-res__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
}

/* The main section body (.the-outcomes original rules — all padding/gap/background live HERE, not on outer wrapper) */
.wcu-cs-res__shell {
	background: #fafafa;
	padding: 64px 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

/* ========================= HEADER (2-col: left = label + H2, right = intro para) ========================= */
.wcu-cs-res__header {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
	padding-bottom: 48px;
}

.wcu-cs-res__header-left {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.wcu-cs-res__label {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
	width: 100%;
}

.wcu-cs-res__title {
	color: #000;
	font-family: "Inter Tight", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 500 !important;
	line-height: 43.2px;
	width: 100%;
}

.wcu-cs-res__intro {
	flex: 1 0 0;
	min-width: 0;
	color: #272a28;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px;
}

/* ========================= RESULTS GRID + CARDS ========================= */
.wcu-cs-res__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	min-height: 630px;
	border: 0.6px solid #e4e7e5;
	border-radius: 8px;
	overflow: hidden;
	background: #e4e7e5;
	gap: 0;
	box-sizing: border-box;
}

.wcu-cs-res__card {
	background: #fff;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	box-sizing: border-box;
	border: 0;
}

.wcu-cs-res__card:not(:last-child) {
	border-right: 0.6px solid #e4e7e5;
}

.wcu-cs-res__card:nth-child(-n + 3), .wcu-cs-res__card:nth-child(-n + 4) {
	border-bottom: 0.6px solid #e4e7e5;
}
@media screen and (min-width:1000px){
.wcu-cs-res__card:nth-child(3){
border-right:0px;
}
.wcu-cs-res__card:nth-child(4){
border-bottom:0px;
}
.wcu-cs-res__card:nth-child(6){
border-right:0px;
}
}
.wcu-cs-res__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 8px;
	background: rgba(8, 101, 255, 0.15);
	border: 1px solid rgba(8, 101, 255, 0.15);
	flex-shrink: 0;
}
.wcu-cs-res__badge span {
	color: #0865ff;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	white-space: nowrap;
}

.wcu-cs-res__card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.wcu-cs-res__metric {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: flex-end;
}
.wcu-cs-res__metric-value {
	color: #3f3f46;
	font-family: "Inter Tight", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
	line-height: 57.6px;
	text-transform: capitalize;
}
.wcu-cs-res__metric-unit {
	color: #71717a;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	padding-bottom: 6px;
}

.wcu-cs-res__card-text {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	width: 100%;
}

/* ========================= RESPONSIVE (exact values from user's pasted original block) ========================= */
@media (max-width: 1366px) {
	.wcu-cs-res__inner {
		padding: 0 30px;
	}
}
/* ≤1024px Tablet */
@media (max-width: 1024px) {
	.wcu-cs-res__shell {
		padding: 48px 0;
		gap: 40px;
	}
	.wcu-cs-res__title {
		font-size: 32px;
		line-height: 38.4px;
	}
	.wcu-cs-res__card {
		min-height: 280px;
	}
	.wcu-cs-res__metric-value {
		font-size: 40px;
		line-height: 48px;
	}
	.wcu-cs-res__inner {
		padding: 0 24px;
	}
}

/* ≤992px Container padding parity */


/* ≤768px Mobile */
@media (max-width: 770px) {
	.wcu-cs-res__shell {
		padding: 32px 0;
		gap: 32px;
	}
	.wcu-cs-res__header {
		flex-direction: column;
		gap: 16px;
	}
	.wcu-cs-res__header-left,
	.wcu-cs-res__intro {
		flex: 1 1 auto;
		width: 100%;
	}
	.wcu-cs-res__title {
		font-size: 28px;
		line-height: 33.6px;
	}
	.wcu-cs-res__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wcu-cs-res__card:nth-child(odd) {
		border-right: 0.6px solid #e4e7e5;
	}
	.wcu-cs-res__card:nth-child(-n + 2) {
		border-bottom: 0.6px solid #e4e7e5;
	}
	.wcu-cs-res__card {
		min-height: 240px;
		gap: 32px;
	}
	.wcu-cs-res__metric-value {
		font-size: 36px;
		line-height: 43.2px;
	}
	h2.wcu-cs-hww__heading, .wcu-cs-hww__heading{
		font-size: 28px !important;
		line-height: 38px !important;
	}
	.wcu-cs-res__header{
     padding-bottom:32px !important;
}
	.wcu-cs-voices__header{
      padding-bottom:32px !important;
}
	.wcu-cs-stack__header{
   padding-bottom:32px !important;
}
	.wcu-cs-hww__container{
    gap:32px;
}
	/* .wcu-cs-work__nav-controls {
    justify-content: flex-start !important;
    align-self: flex-start !important;
} */
	.wcu-cs-work__carousel-wrap{
       margin:32px auto 0 !important;
   }
   
}

/* ≤576px Container inner 16 */
@media (max-width: 576px) {
	.wcu-cs-res__inner {
		padding: 0 16px;
	}
	.wcu-cs-res__grid {
		grid-template-columns: 1fr;
	}
	.wcu-cs-res__card {
		border-right: none;
		border-bottom: 1px solid #e4e7e5;
	}
	.wcu-cs-res__card:last-child {
		border-bottom: none;
	}
	.sai-serv__hefah-desc{
    margin-bottom:24px;
}
	.sai-serv__hefah-inner{
     gap:32px;
}
	.wcu-cs-snap__counter-value{
    font-size:32px;
	line-height:38px;
}
	.wcu-cs-voices__quote-text {
     font-size:16px;
	font-weight:400;
}
}

/* ≤480px Small phones */
@media (max-width: 480px) {
	.wcu-cs-res__shell {
		padding: 32px 0;
		gap: 24px;
	}
	.wcu-cs-res__title {
		font-size: 24px;
		line-height: 30px;
	}
	.wcu-cs-res__intro {
		font-size: 15px;
		line-height: 24px;
	}
	.wcu-cs-res__card {
		padding: 20px;
		min-height: 220px;
	}
	.wcu-cs-res__metric-value {
		font-size: 32px;
		line-height: 38.4px;
	}
	.wcu-cs-res__badge {
		padding: 6px 12px;
	}
	.wcu-cs-res__card:nth-child(odd),
	.wcu-cs-res__card:not(:last-child) {
        border-right: 0 solid #e4e7e5;
    }
	    .wcu-cs-stack__inner, .wcu-cs-res__inner, .wcu-cs-kfb__inner, .wcu-cs-voices__inner, .wcu-cs-sol__inner, .wcu-cs-snap__container {
        padding: 0 16px !important;
    }
	#key-features .wcu-cs-kfb__inner{
    padding:0px !important;
}
	    .wcu-cs-hww__shell, .wcu-cs-work__shell {
        padding: 32px 16px !important;
    }
	h2.wcu-cs-hww__heading, .wcu-cs-hww__heading{
		font-size: 24px !important;
		line-height: 28px !important;
	}
}
/* ================================================================
   G-S8. SINGLE — RESULTS DELIVERED SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S9. SINGLE — STACK SECTION — CSS START
   Unique class: .wcu-cs-stack  (stack = technology stack)
   Design source: original inline block ".the-technology-stack" + ".zero_m_p" reset.
   Structure:
     .wcu-cs-stack (section, zero_m_p: margin 0 padding 0 + child reset rules)
       .wcu-cs-stack__shell (bg #fafafa pad 64 gap48 flex-col items-start justify-center w 100% max 100% overflow-x clip — original the-technology-stack rules):
         .wcu-cs-stack__inner (.container: max 1440px margin 0 auto pad 0 64):
           .wcu-cs-stack__header (flex row nowrap gap 32 items-start w 100%):
              .wcu-cs-stack__header-left (flex 1 0 0 min-w 0 max-w 600 column gap 8):
                 .wcu-cs-stack__label (14/19.6 uppercase #525b53 Inter Tight 400)
                 .wcu-cs-stack__title (36/43.2 #000 500)
              .wcu-cs-stack__intro (flex 1 0 0 16/25.6 #272a28)
           .wcu-cs-stack__grid (repeat 4, minmax(0,1fr) — 4-col desktop, width 100%, border 1px #e4e7e5 radius 8 overflow-hidden bg #e4e7e5 gap 1 — grey 1px divider drawn by gap):
              .wcu-cs-stack__card (white, pad 48 24, flex column gap24 items-center justify-center min-w 0):
                 .wcu-cs-stack__card-icon (72x72, flex-center, overflow hidden):
                     img (w 100% h 100% object-fit contain)
                 .wcu-cs-stack__card-icon--wide (modifier: w 100% max 160; small phones max 140)
                 .wcu-cs-stack__card-name (#27272a 14/21 text-center w 100%)
   Responsive breakpoints (EXACT original values):
      ≤1024px: shell 48 32 pad, gap 40; title 32/38.4; grid 2-col; card pad 40 24
      ≤992px:  inner 0 64 → 0 40
      ≤768px:  shell 40 20 pad/gap 32; header column gap 16; left+intro flex-auto w 100% max-w none; title 28/33.6; grid 2-col; card pad 32 16 gap 20; icon 64x64
      ≤576px:  inner 0 16
      ≤480px:  shell 32 16 pad/gap24; title24/30; intro15/24; grid 1-col; card pad28 20 gap16; icon 56x56; --wide max 140
   ================================================================ */

/* zero_m_p scoped resets (same pattern as Results section): section wrapper only margin+padding 0, no width/bg rules; children inherit box-sizing + heading/p/ul margin/padding 0 */
.wcu-cs-stack,
.wcu-cs-stack *::before,
.wcu-cs-stack *::after {
	box-sizing: border-box;
}
.wcu-cs-stack h1,
.wcu-cs-stack h2,
.wcu-cs-stack h3,
.wcu-cs-stack h4,
.wcu-cs-stack h5,
.wcu-cs-stack h6,
.wcu-cs-stack p,
.wcu-cs-stack ul {
	margin: 0;
	padding: 0;
}

.wcu-cs-stack {
	margin: 0;
	padding: 0;
}

/* Inner wrapper = .container (exact original values) */
.wcu-cs-stack__inner {
	width:100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 64px;
}

/* .the-technology-stack → moved to shell (pad/gap/bg/flex live here NOT on outer section) */
.wcu-cs-stack__shell {
	background: #fff;
	padding:64px 0 64px 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	box-sizing: border-box;
}

/* ========================= HEADER ========================= */
.wcu-cs-stack__header {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
	padding-bottom: 48px;
}

.wcu-cs-stack__header-left {
	flex: 1 0 0;
	min-width: 0;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.wcu-cs-stack__label {
	color: #525b53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
	width: 100%;
}

.wcu-cs-stack__title {
	color: #000;
	font-family: "Inter Tight", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 500 !important;
	line-height: 43.2px;
	width: 100%;
}

.wcu-cs-stack__intro {
	flex: 1 0 0;
	min-width: 0;
	color: #272a28;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px;
}

/* ========================= GRID + CARDS (tech stack logos + names) ========================= */
.wcu-cs-stack__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
	border: 1px solid #e4e7e5;
	border-radius: 8px;
	overflow: hidden;
	background: #e4e7e5;
	gap: 1px;
}

.wcu-cs-stack__card {
	background: #fff;
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.wcu-cs-stack__card-icon {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.wcu-cs-stack__card-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wcu-cs-stack__card-icon--wide {
	width: 100%;
	max-width: 160px;
}

.wcu-cs-stack__card-name {
	color: #27272a;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	text-align: center;
	width: 100%;
}

/* ========================= RESPONSIVE (EXACT values from user pasted block) ========================= */
@media (max-width: 1366px) {
	.wcu-cs-stack__inner {
		padding: 0 30px;
	}
}
/* ≤1024px Tablet: */
@media (max-width: 1024px) {
	.wcu-cs-stack__shell {
		padding:50px 0 50px 0;
		gap: 40px;
	}
	.wcu-cs-stack__title {
		font-size: 32px;
		line-height: 38.4px;
	}
	
	.wcu-cs-stack__card {
		padding: 40px 24px;
	}
	.wcu-cs-stack__inner {
		padding: 0 24px;
	}
}

/* ≤992px Container padding parity */


/* ≤768px Mobile: */
@media (max-width: 768px) {
	.wcu-cs-stack__shell {
		padding:32px 0 32px 0;
		gap: 32px;
	}
	.wcu-cs-stack__header {
		flex-direction: column;
		gap: 16px;
	}
	.wcu-cs-stack__header-left,
	.wcu-cs-stack__intro {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}
	.wcu-cs-stack__title {
		font-size: 28px;
		line-height: 33.6px;
	}
	/* .wcu-cs-stack__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	} */
	.wcu-cs-stack__card {
		padding: 32px 16px;
		gap: 20px;
	}
	.wcu-cs-stack__card-icon {
		width: 64px;
		height: 64px;
	}
}

/* ≤576px Container inner 16 */
@media (max-width: 576px) {
	.wcu-cs-stack__inner {
		padding: 0 16px;
	}
	.wcu-cs-stack__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ≤480px Small phones */
@media (max-width: 480px) {
	.wcu-cs-stack__shell {
		padding:32px 0 32px 0;
		gap: 24px;
	}
	.wcu-cs-stack__title {
		font-size: 24px;
		line-height: 30px;
	}
	.wcu-cs-stack__intro {
		font-size: 15px;
		line-height: 24px;
	}
	.wcu-cs-stack__grid {
		grid-template-columns: 1fr 1fr;
	}
	.wcu-cs-stack__card {
		padding: 28px 20px;
		gap: 16px;
	}
	.wcu-cs-stack__card-icon {
		width: 56px;
		height: 56px;
	}
	.wcu-cs-stack__card-icon--wide {
		max-width: 140px;
	}
}
/* ================================================================
   G-S9. SINGLE — STACK SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S10. SINGLE — HOW WE WORKED SECTION — CSS START
   Unique class: .wcu-cs-hww  (hww = how we worked)
   Design source: original inline block ".am-single-service-page-process"
   Structure (1:1 from user-pasted values — NO optimizations, NO edits):
     .wcu-cs-hww              (section, zero_m_p scoped reset: margin 0 padding 0 + child rules)
       .wcu-cs-hww__inner     (empty wrapper — preserved for symmetry with prev sections)
         .wcu-cs-hww__shell   (bg #0A2440 pad 64 justify-center — am-single-service-page-process dark container)
           .wcu-cs-hww__container (max 1312 w100% margin 0 auto flex-col gap 48)
             .wcu-cs-hww__intro (flex row space-between items-start gap32 — dark theme colors whites / light grays):
                .wcu-cs-hww__heading-group (flex-col gap8 max 620)
                   .wcu-cs-hww__label (14/19.6 uppercase #F4F4F5)
                   .wcu-cs-hww__heading (H2 36/43.2 #FFF 500)
                .wcu-cs-hww__intro-text (16/25.6 #F4F4F5 max 632)
             .wcu-cs-hww__columns (grid repeat(4,1fr) gap 0 — 4 cols: 3 phase + 1 CTA)
                .wcu-cs-hww__phase (phase cards: border top/right/bottom 0.6px rgba(255,255,255,.15), pad24, flex-col gap40, hover bg #0C2139, transition bg 0.2s)
                   .wcu-cs-hww__phase--first (border-left: 0.6px same rgba, radius 8px 0 0 8px)
                   .wcu-cs-hww__phase-top (flex-col gap8 + mobile: row space-between)
                      .wcu-cs-hww__phase-top-text (flex-col gap8)
                         .wcu-cs-hww__phase-label (#F4F4F5 14/21)
                         .wcu-cs-hww__phase-heading (#FFF 22/28.6 H3 500)
                      .wcu-cs-hww__mobile-arrow (hidden desktop, 34x34 circle radius 99999 border #A1AAA3 bg rgba(255,255,255,.04), 9x9 arrow, hidden on :hover — ≤800 only)
                   .wcu-cs-hww__phase-content (relative, flex 1, overflow hidden — overlap wrapper for cross-fade translate animations)
                      .wcu-cs-hww__phase-details (ul list absolute inset 0, op0 translate 0 40, fade+translate up on hover; gap16; li flex gap12 14/22.4 #F4F4F5; icon » #0865FF 24px flex-shrink 0)
                      .wcu-cs-hww__phase-bottom (absolute inset 0, op1 translate 0 0, fade+translate down 40 out on hover; gap24 column):
                         .wcu-cs-hww__icon (44x44 Frame: radius 8 border 1 rgba(255,255,255,.12), bg rgba(255,255,255,.15), backdrop-filter blur 6, opacity 1 transition) img 20×20
                         .wcu-cs-hww__phase-text (14/21 #F4F4F5 — short description)
                .wcu-cs-hww__cta (CTA card 4th column: border top/right/bottom 0.6 #263853, radius 0 8px 8px 0, overflow hidden, flex-col; image bg cover h197, cta-content flex-col pad24 bg #FFF flex 1):
                   .wcu-cs-hww__cta-heading (18/24 #000 H3 500)
                   .wcu-cs-hww__cta-text (14/21 #525B53, margin 8 0 16 0)
                   (for-hover btn-primary btn-blue fit-btn — unchanged global class)
   Responsive (EXACT original values from inline block):
      ≤1024px: shell pad 40, container w100%
      ≤800px:  shell 32 16 pad; intro column gap16, heading 24/28.8; columns 1fr (stack); phase card fixed h 238 gap16, borders switch top+left+right only; first radius top 8x8; phase-top row space-between gap12 + mobile-arrow visible; cta radius bottom 8x8, borders left+right+bottom only.
   ================================================================ */

/* zero_m_p scoped resets for HWW (section wrapper margin/padding 0 only; child heading/p/ul margin-pad 0; global box-sizing with before/after — pattern matches stack/results sections) */
.wcu-cs-hww,
.wcu-cs-hww *::before,
.wcu-cs-hww *::after {
	box-sizing: border-box;
}
.wcu-cs-hww h1,
.wcu-cs-hww h2,
.wcu-cs-hww h3,
.wcu-cs-hww h4,
.wcu-cs-hww h5,
.wcu-cs-hww h6,
.wcu-cs-hww p,
.wcu-cs-hww ul {
	margin: 0;
	padding: 0;
}

.wcu-cs-hww {
	margin: 0;
	padding: 0;
}

/* inner wrapper (empty parity wrapper) */
.wcu-cs-hww__inner {
	width: 100%;
}

/* shell = .am-single-service-page-process (dark bg + outer padding lives HERE not on outer section) */
.wcu-cs-hww__shell {
	background: #0A2440;
	padding: 64px;
	display: flex;
	justify-content: center;
}

.wcu-cs-hww__container {
	width: 100%;
	max-width: 1312px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* ========================= HEADER (intro row) — dark theme colors ========================= */
.wcu-cs-hww__intro {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 32px;
}

.wcu-cs-hww__heading-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 620px;
}

.wcu-cs-hww__label {
	color: #F4F4F5;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 19.6px;
	text-transform: uppercase;
}

h2.wcu-cs-hww__heading,
.wcu-cs-hww__heading {
	color: #FFF;
	font-family: "Inter Tight", sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 500;
	line-height: 43.2px;
	margin: 0;
}

.wcu-cs-hww__intro-text {
	color: #F4F4F5;
	font-family: "Inter Tight", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px;
	max-width: 632px;
	margin: 0;
}

/* ========================= GRID: 3 phase cols + 1 CTA col (gap=0 — dividers act as borders) ========================= */
.wcu-cs-hww__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

/* ========================= PHASE CARD (bordered dark box + cross-fade translate hover) ========================= */
.wcu-cs-hww__phase {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 24px;
	border-top: 0.6px solid rgba(255, 255, 255, 0.15);
	border-bottom: 0.6px solid rgba(255, 255, 255, 0.15);
	border-right: 0.6px solid rgba(255, 255, 255, 0.15);
	transition: background-color 0.2s ease;
}

.wcu-cs-hww__phase--first {
	border-left: 0.6px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px 0px 0px 8px;
}

.wcu-cs-hww__phase:hover {
	background: #0C2139;
}

.wcu-cs-hww__phase-top {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wcu-cs-hww__phase-top-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Round arrow icon — mobile only (<=800), hidden on desktop */
.wcu-cs-hww__mobile-arrow {
	display: none;
}

.wcu-cs-hww__phase-label {
	color: #F4F4F5;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
}

.wcu-cs-hww__phase-heading {
	color: #FFF;
	font-family: "Inter Tight", sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: 28.6px;
	margin: 0;
}

/* Overlap wrapper for cross-fade details (up) / bottom block (down) */
.wcu-cs-hww__phase-content {
	position: relative;
	flex: 1;
	overflow: hidden;
}

/* ——— Reveal: 3 bullets (starts below, translate UP + fade-in on :hover) ——— */
.wcu-cs-hww__phase-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 16px;
	position: absolute;
	inset: 0;
	opacity: 0;
	translate: 0px 40px;
	pointer-events: none;
	transition: opacity 0.3s ease-out, translate 0.3s ease-out;
}

.wcu-cs-hww__phase:hover .wcu-cs-hww__phase-details {
	opacity: 1;
	translate: 0px 0px;
	pointer-events: auto;
}

.wcu-cs-hww__phase-details li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: #F4F4F5;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22.4px;
}

.wcu-cs-hww__detail-icon {
	color: #0865FF;
	font-size: 24px;
	font-weight: 200;
	flex-shrink: 0;
}

/* ——— Bottom block: icon badge + short desc (visible at rest, translate DOWN + fade out on :hover) ——— */
.wcu-cs-hww__phase-bottom {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 24px;
	position: absolute;
	inset: 0;
	opacity: 1;
	translate: 0px 0px;
	transition: opacity 0.3s ease-out, translate 0.3s ease-out;
}

.wcu-cs-hww__phase:hover .wcu-cs-hww__phase-bottom {
	opacity: 0;
	translate: 0px 40px;
	pointer-events: none;
}

/* 44×44 Frame icon badge */
.wcu-cs-hww__icon {
	display: flex;
	width: 44px;
	height: 44px;
	padding: 0px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	flex-shrink: 0;
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.wcu-cs-hww__icon img {
	width: 20px;
	height: 20px;
}

.wcu-cs-hww__phase-text {
	color: #F4F4F5;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	margin: 0;
}

/* ========================= CTA CARD (4th / last col: right-side radii, no hover effect) ========================= */
.wcu-cs-hww__cta {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	border-top: 0.6px solid #263853;
	border-bottom: 0.6px solid #263853;
	border-right: 0.6px solid #263853;
	border-radius: 0 8px 8px 0;
	overflow: hidden;
}

.wcu-cs-hww__cta-image {
	width: 100%;
	height: 197px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wcu-cs-hww__cta-content {
	display: flex;
	flex-direction: column;
	padding: 24px;
	flex: 1;
	overflow: hidden;
	background-color: #fff;
}

h3.wcu-cs-hww__cta-heading,
.wcu-cs-hww__cta-heading {
	color: #000;
	font-family: "Inter Tight", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	margin: 0;
}

.wcu-cs-hww__cta-text {
	color: #525B53;
	font-family: "Inter Tight", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	margin: 8px 0px 16px 0px !important;
}

/* primary button hover (preserved EXACT original value from inline L335-338) */
.wcu-cs-hww .for-hover.btn-primary.btn-blue.fit-btn:hover,
.wcu-cs-hww__cta-button:hover {
	background: #0552CC;
}

.wcu-cs-hww__cta-arrow {
	width: 14px;
	height: 14px;
}

/* ========================= RESPONSIVE (EXACT values from user pasted inline block) ========================= */
@media (max-width: 1366px) {
	.wcu-cs-hww__shell {
		padding:64px 30px;
	}
}
/* --- Tablet / laptop: below 1024px --- */
@media (max-width: 1024px) {
	.wcu-cs-hww__shell {
		padding:40px 24px;
	}
	.wcu-cs-hww__container {
		width: 100%;
	}
}

/* --- Small tablet down to extra-small mobile: 800px and below --- */
@media (max-width: 800px) {
	    .wcu-cs-stack__inner, .wcu-cs-res__inner,
		.wcu-cs-kfb__inner, .wcu-cs-voices__inner, 
		.wcu-cs-sol__inner, .wcu-cs-snap__container        {
			padding: 0 24px;
		}
	.wcu-cs-hww__shell, .wcu-cs-work__shell {
		padding: 32px 24px !important;
	}
	.wcu-cs-hww__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.wcu-cs-hww__intro-text {
		max-width: 100%;
		text-align: left;
	}
	.wcu-cs-hww__heading {
		font-size: 24px;
		font-style: normal;
		font-weight: 500;
		line-height: 28.8px;
	}

	/* Single column stack — borders switch from left/right dividers to top/bottom,
	   first/last cards round top/bottom instead */
	.wcu-cs-hww__columns {
		grid-template-columns: 1fr 1fr;
	}

	.wcu-cs-hww__phase {
		width: 100%;
		height: 400px;
		border-top: 0.6px solid #263853;
		border-left: 0.6px solid #263853;
		border-right: 0.6px solid #263853;
		border-bottom: none;
		border-radius: 0;
		gap: 16px;
		transition: background-color 0.2s ease, height 0.3s ease;
	}

	.wcu-cs-hww__phase--first {
		border-radius: 8px 0 0 0;
	}
	.wcu-cs-hww__phase:nth-child(2) {
    border-radius:0 8px 0 0;
	border-left: unset;
}
.wcu-cs-hww__phase:nth-child(3) {
	border-bottom:0.6px solid #263853;
	border-radius: 0 0 0 8px;

}

	/* Phase-top becomes a row on mobile: text left, round arrow on right */
	.wcu-cs-hww__phase-top {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 12px;
	}

	.wcu-cs-hww__mobile-arrow {
		box-sizing: border-box;
		display: flex;
		width: 34px;
		height: 34px;
		padding: 0px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
		border-radius: 99999px;
		border: 1px solid #A1AAA3;
		background: rgba(255, 255, 255, 0.04);
	}

	.wcu-cs-hww__mobile-arrow img {
		width: 9px;
		height: 9px;
	}

	.wcu-cs-hww__phase:hover .wcu-cs-hww__mobile-arrow {
		display: none;
	}

	.wcu-cs-hww__cta {
		width: 100%;
		height: auto;
		border-top: none;
		border-left: 0.6px solid #263853;
		border-right: 0.6px solid #263853;
		border-bottom: 0.6px solid #263853;
		border-radius: 0 0 8px 0;
	}
}



@media (max-width: 500px) {
	    .wcu-cs-hww__phase {
        width: 100%;
        height: 330px;
	}
	.wcu-cs-hww__columns {
		grid-template-columns: 1fr;
	}
	.wcu-cs-hww__phase--first {
		border-radius: 8px 8px 0 0;
	}
	.wcu-cs-hww__cta {
		border-radius: 0 0 8px 8px;
	}
	.wcu-cs-hww__phase:nth-child(2) {
        border-radius: 0 0px 0 0;
        border-left: 0.6px solid #263853;
    }
	.wcu-cs-hww__phase:nth-child(3) {
		border-radius: 0;

	}
	    .wcu-cs-hww__shell, .wcu-cs-work__shell {
        padding: 32px 16px !important;
    }

	
}
/* ================================================================
   G-S10. SINGLE — HOW WE WORKED SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S11. SINGLE — WORK SECTION — CSS START
   Unique class: .wcu-cs-work
   ================================================================ */

/* zero_m_p scoped reset (no global leak) */
.wcu-cs-work *,
.wcu-cs-work *::before,
.wcu-cs-work *::after{
    box-sizing:border-box;
}

.wcu-cs-work h1,
.wcu-cs-work h2,
.wcu-cs-work h3,
.wcu-cs-work h4,
.wcu-cs-work h5,
.wcu-cs-work h6,
.wcu-cs-work p{
    margin:0;
    padding:0;
}

.wcu-cs-work{
    margin:0;
    padding:0;
}

/* shell = .am-industry-detail-work-sec */
.wcu-cs-work__shell{
    padding:64px;
    background:#FAFAFA !important;
    display:flex;
    flex-direction:column;
    gap:48px;
}

/* ---------- Header row ---------- */
.wcu-cs-work__inner{
    width:100%;
    max-width:1312px;
    margin:0 auto;
}
.wcu-cs-work__header{
    width:100%;
    max-width:1312px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:32px;
}

.wcu-cs-work__header-left{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.wcu-cs-work__header-right{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:24px;
}

.wcu-cs-work__nav-controls{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:flex-end;
    align-self:flex-end;
}

body .wcu-cs-work .wcu-cs-work__nav-controls.nav-hidden{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.wcu-cs-work__header-left .wcu-cs-work__eyebrow{
    font-family:"Inter Tight", sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:19.6px;
    letter-spacing:0;
    text-transform:uppercase;
    color:#525B53;
}

.wcu-cs-work__header-left h2{
    font-family:"Inter Tight", sans-serif;
    font-size:36px!important;
    font-weight:500!important;
    line-height:43.2px!important;
    color:#000!important;
    max-width:none!important;
}

.wcu-cs-work__header-right p{
    font-family:"Inter Tight", sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:25.6px;
    color:#18181B;
    max-width:590px;
    width:100%;
    text-align:left;
}

/* ---------- Carousel ---------- */
.wcu-cs-work__carousel-wrap{
    position:relative;
    width:100%;
    max-width:1312px;
    margin:48px auto 0;
}

.wcu-cs-work__carousel-track{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    border-radius:8px 0 0 8px;
}

.wcu-cs-work__carousel-track::-webkit-scrollbar{
    display:none;
}
.wcu-cs-work__card:first-child{border-radius: 8px 0 0 8px;border-left: 0.6px solid #E4E7E5;}
.wcu-cs-work__card{
    flex:0 0 31%;
    width:31%;
    max-width:31%;
    background:#fff;
    border-right:0.6px solid #E4E7E5;
    padding:24px;
    display:flex;
    flex-direction:column;
    gap:32px;
    align-items:flex-start;
    box-sizing:border-box;
	    border-top:0.6px solid #E4E7E5;
    border-bottom:0.6px solid #E4E7E5;
}

.wcu-cs-work__card--first{
    border-radius:8px 0 0 8px;
}

.wcu-cs-work__card--last{
    border-right:0.6px solid #E4E7E5;
    border-radius:0 8px 8px 0;
}

.wcu-cs-work__card-top{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
}

.wcu-cs-work__card-copy{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}

.wcu-cs-work__card h3{
    font-family:"Inter Tight", sans-serif;
    font-size:18px;
    font-weight:500;
    line-height:24px;
    color:#000;
}

.wcu-cs-work__card .wcu-cs-work__desc{
    font-family:"Inter Tight", sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:21px;
    color:#525B53;
		display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.wcu-cs-work__tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    height:28px;
    background:#FAFAFA;
    border:1px solid #E4E7E5;
    color:#000;
    font-family:"Inter Tight", sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:21px;
    padding:4px 16px;
    border-radius:96px;
    white-space:nowrap;
}

.wcu-cs-work__logo-row{
    display:flex;
    align-items:center;
    height:30px;
    width:auto;
    max-width:140px;
}

.wcu-cs-work__logo-row img{
    display:block;
    max-height:30px;
    width:auto;
    max-width:140px;
    object-fit:contain;
}

.wcu-cs-work__card-image{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    width:100%;
    height:224px;
    background-size:cover;
    background-position:center;
    background-color:#E8E8EC;
    flex-shrink:0;
}

.wcu-cs-work__card-link{
    font-family:"Inter Tight", sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:25.6px;
    color:#0865FF !important;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
}

.wcu-cs-work__card-link img{
    width:12px;
    height:12px;
    display:block;
}

.wcu-cs-work__card-link:hover{
    text-decoration:underline;
}

/* ---------- Arrows ---------- */
.wcu-cs-work__nav-btn{
    width:34px;
    height:34px;
    border-radius:99999px;
    border:1px solid #A1AAA3;
    background:rgba(255,255,255,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:8px;
    flex-shrink:0;
}

.wcu-cs-work__nav-btn:hover{
    background:rgba(255,255,255,0.08);
    border-color:#A1AAA3;
}

body .wcu-cs-work .wcu-cs-work__nav-btn.in-active-prev,
body .wcu-cs-work .wcu-cs-work__nav-btn.in-active-next{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
}

.wcu-cs-work__nav-btn img{
    width:20px;
    height:20px;
    display:block;
}

/* ---------- Desktop fallbacks (≥769px): hide nav when ≤3 cards (cards always 33.33% each, no fill) ---------- */
@media (min-width: 769px) {
    body .wcu-cs-work[data-cards="1"] .wcu-cs-work__card,
    body .wcu-cs-work[data-cards="2"] .wcu-cs-work__card,
    body .wcu-cs-work[data-cards="3"] .wcu-cs-work__card {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 33.3333% !important;
        width: 33.3333% !important;
        max-width: 33.3333% !important;
    }

    body .wcu-cs-work[data-cards="1"] .wcu-cs-work__nav-controls,
    body .wcu-cs-work[data-cards="2"] .wcu-cs-work__nav-controls,
    body .wcu-cs-work[data-cards="3"] .wcu-cs-work__nav-controls {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ---------- Tablet (721-768px) fallbacks: hide nav when total cards ≤ 2 visible (cards always 48.5% each) ---------- */
@media (min-width: 721px) and (max-width: 768px) {
    body .wcu-cs-work[data-cards="1"] .wcu-cs-work__card,
    body .wcu-cs-work[data-cards="2"] .wcu-cs-work__card {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: 48.5% !important;
        width: 48.5% !important;
        max-width: 48.5% !important;
    }

    body .wcu-cs-work[data-cards="1"] .wcu-cs-work__nav-controls,
    body .wcu-cs-work[data-cards="2"] .wcu-cs-work__nav-controls {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ---------- Mobile (≤720px): always 1 card (100% minus peek) ---------- */
@media (max-width: 720px) {
    body .wcu-cs-work[data-cards="1"] .wcu-cs-work__card,
    body .wcu-cs-work[data-cards="2"] .wcu-cs-work__card,
    body .wcu-cs-work[data-cards="3"] .wcu-cs-work__card {
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: calc(100% - 16px) !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
}

@media (max-width:1366px){
    .wcu-cs-work__shell{
        padding:64px 30px;
    }
}
@media (max-width:1024px){
    .wcu-cs-work__shell{
        padding:40px 24px;
    }
}
@media (max-width:900px){
	.wcu-cs-work__header{
		flex-direction:column;
}
.wcu-cs-work__header-right {
		align-items:flex-start;
		width:100%;
		gap:16px;
	}
	.wcu-cs-work__header-right p{
	max-width: 100%;
   }
}

/* Tablet (721-768px): 2 cards per view */
@media (max-width:768px){
    .wcu-cs-work__shell{
        padding:32px 24px;
    }
    .wcu-cs-work__card{
        flex:0 0 48.5%;
        width:48.5%;
        max-width:48.5%;
    }
    .wcu-cs-work__header{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
        margin-bottom:0;
    }
}

@media (max-width:720px){

    .wcu-cs-work__header{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    .wcu-cs-work__header-left h2{
        font-size:24px!important;
        line-height:28.8px!important;
    }

    .wcu-cs-work__header-right{
        align-items:flex-start;
        width:100%;
        gap:16px;
    }

    .wcu-cs-work__header-right p{
        max-width:100%;
    }

    .wcu-cs-work__nav-controls{
        align-self:flex-start;
        margin-top:8px;
    }

    .wcu-cs-work__carousel-wrap{
        margin:32px auto 0;
    }

    .wcu-cs-work__carousel-track{
        padding:0 0 0 0px;
        box-sizing:content-box;
        border-radius:8px 0 0 8px;
    }

    .wcu-cs-work__card{
        flex:0 0 calc(100% - 16px);
        width:calc(100% - 16px);
        max-width:calc(100% - 16px);
        border-radius:8px;
        border-right:0.6px solid #E4E7E5;
    }

    .wcu-cs-work__card--first{
        border-radius:8px;
    }
    .wcu-cs-work__card--last{
        border-radius:8px;
    }
}

@media (max-width:425px){
    .wcu-cs-work__shell{
        padding:32px 16px 72px;
    }
    .wcu-cs-work__card,
    .wcu-cs-work__card--first,
    .wcu-cs-work__card--last{
        border-radius:8px;
    }

    .wcu-cs-work__card-image{
        height:180px;
    }
}
/* ================================================================
   G-S11. SINGLE — WORK SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S12. SINGLE — CONTACT SECTION — CSS START
   Unique class: .wcss-contact
   (Elementor shortcode id=13512 rendered inside .wcss-contact__inner)
   ================================================================ */
.wcss-contact {
	/* TODO: Add contact section wrapper styles manually */
}
.wcss-contact__inner {
	/* TODO: Add contact inner wrapper styles manually (if overrides to Elementor template are needed) */
}
/* ================================================================
   G-S12. SINGLE — CONTACT SECTION — CSS END
   ================================================================ */

/* ================================================================
   G-S13. SINGLE — BLOG SECTION — CSS START
   Unique class: .wcss-blog
   (Elementor shortcode id=13509 rendered inside .wcss-blog__inner)
   ================================================================ */
.wcss-blog {
	/* TODO: Add blog section wrapper styles manually */
}
.wcss-blog__inner {
	/* TODO: Add blog inner wrapper styles manually (if overrides to Elementor template are needed) */
}
/* ================================================================
   G-S13. SINGLE — BLOG SECTION — CSS END
   ================================================================ */

/* ================================================================
   G. SINGLE CASE STUDY — 13 SECTION CSS PLACEHOLDERS — CSS END
   ================================================================ */

/* ================================================================
   9. ARCHIVE + SINGLE — SHARED VIDEO POPUP (voices-modal) — CSS START
   (client-voice pattern — 1:1 mirror of wcu-single-industry.css
    L4170-4295 so popup styles work even when wcu-single-industry.css
    is NOT enqueued, e.g. archive page-case-studies-archive.php
    template, blog pages, etc.)
   ================================================================ */
.voices-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.voices-modal__close:hover{
  background-color:transparent!important;
}
.voices-modal[hidden]{ display:none; }

html.voices-modal-open,
body.voices-modal-open{ overflow:hidden; }

.voices-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.70);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  opacity:0;
  animation:voicesModalFadeIn .3s ease forwards;
}

@keyframes voicesModalFadeIn{
  to{ opacity:1; }
}

.voices-modal__dialog{
  position:relative;
  z-index:1;
  width:min(100%, 900px);
  padding:0;
  background:rgba(0,0,0,0.70);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border:none;
  border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  animation:voicesModalIn .35s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes voicesModalIn{
  from{ opacity:0; transform:scale(0.96) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

.voices-modal__close{
  position:absolute;
  top:-50px;
  right:-10px;
  z-index:9999999;
  width:36px;
  height:36px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  padding:0;

  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1), color .2s ease;
}

.voices-modal__frame-wrap{
  position:relative;
  width:100%;
  padding-top:56.2%;
  background:transparent;
  border-radius:8px;
  overflow:hidden;
}

.voices-modal__poster,
.voices-modal__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:8px;
}

.voices-modal__poster{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  transition:opacity .3s ease;
}

.voices-modal__poster.is-hidden{
  opacity:0;
  pointer-events:none;
}

.voices-modal__frame{
  border:0;
  opacity:0;
  transition:opacity .3s ease;
}

.voices-modal__frame.is-ready{
  opacity:1;
}

@media screen and (max-width: 768px) {
  .voices-modal{
    padding:16px;
  }
  .voices-modal__dialog{
    width:100%;
  }
  .voices-modal__close{
    top:-42px;
    right:0;
  }
	.sai-serv__hefah-right{
   display:none;
}
}
@media screen and (max-width: 500px){
.sai-serv__hefah-right{
   display:block;
}
/* ================================================================
   9. ARCHIVE + SINGLE — SHARED VIDEO POPUP (voices-modal) — CSS END
   ================================================================ */
}