/* =====================================================
   WHY CHOOSE US — v3.0  |  pixel-accurate layout
   ===================================================== */

/* ── CSS vars (overridden inline per instance) ─────── */
.wcu-wrap {
  --accent : #2ab5b5;
  --lcolor  : #7cc13e;
  --dur     : 700ms;
  --radius  : 14px;
}



/* ── Section shell ──────────────────────────────────── */
.wcu-wrap {
  position    : relative;
  width       : 100%;
  max-width   : 1200px;
  margin      : 0 auto;
  /* horizontal padding so content breathes */
  padding     : 0 clamp(1rem, 4vw, 3rem) 56px;   /* bottom for bar + dots */
  box-sizing  : border-box;
 font-family: "Cabinet Grotesk Boild", Sans-serif;
}

/* ── Stage — keeps both slides in the same space ─────
   Key insight: both slides are stacked via CSS grid;
   only the active one gets full opacity & pointer events.
   This means the wrapper always takes the height of
   whichever slide is tallest — no jumping.              */
.wcu-stage {
  display    : grid;
  grid-template-columns : 1fr;
  grid-template-rows    : 1fr;
}

/* ── Single slide ─────────────────────────────────── */
.wcu-slide {
  /* Both slides occupy the SAME grid cell */
  grid-area   : 1 / 1;

  display     : flex;
  align-items : center;
  gap         : clamp(2rem, 5vw, 5rem);
  padding     : clamp(3rem, 5vw, 4.5rem) 0;

  /* Hidden by default */
  opacity     : 0;
  pointer-events : none;
  transform   : translateX(50px);
  transition  : opacity var(--dur) ease, transform var(--dur) ease;

  /* make sure inactive slide doesn't collapse the grid row */
  visibility  : hidden;
}

.wcu-slide.is-active {
  opacity        : 1;
  pointer-events : auto;
  transform      : translateX(0);
  visibility     : visible;
}

/* reverse layout */
.wcu-wrap.wcu-reverse .wcu-slide {
  flex-direction : row-reverse;
}

/* ══════════════════════════════════════════════════
   IMAGE STACK
   Three images with absolute positioning inside
   a FIXED-SIZE relative container so the stack
   never collapses or overflows.
   ══════════════════════════════════════════════════ */
.wcu-imgs {
  /* fixed natural dimensions — tune these two values
     to control the overall stack footprint           */
  flex   : 0 0 420px;
  width  : 420px;
  height : 340px;
  position : relative;
  /* allow slightly negative overflow for rotated cards */
  overflow : visible;
}

.wcu-img {
  position      : absolute;
  margin        : 0;
  padding       : 0;
  border-radius : var(--radius);
  overflow      : hidden;
  box-shadow    : 0 8px 28px rgba(0,0,0,.14);
}
.wcu-img img {
  display     : block;
  width       : 100%;
  height      : 100%;
  object-fit  : cover;
}

/* ── Back-left card (greyscale, behind everything) ── */
.wcu-img-bl {
  width     : 52%;
  aspect-ratio : 4 / 3;
  top       : 0;
  left      : 0;
  z-index   : 1;
  filter    : grayscale(1) opacity(.55);
  transform : rotate(2.5deg);
}

/* ── Back-bottom card (greyscale, middle layer) ───── */
.wcu-img-br {
  width     : 56%;
  aspect-ratio : 4 / 3;
  bottom    : 0;
  left      : 8%;
  z-index   : 2;
  filter    : grayscale(1) opacity(.55);
  transform : rotate(-1.5deg);
}

/* ── Front card (colour, top layer) ──────────────── */
.wcu-img-front {
  width     : 67%;
  aspect-ratio : 4 / 3;
  top       : 12%;
  left      : 24%;
  z-index   : 3;
  transform : rotate(-2deg);
  box-shadow : 0 16px 48px rgba(0,0,0,.22);
  transition : transform .35s ease, box-shadow .35s ease;
}
.wcu-img-front:hover {
  transform  : rotate(0) scale(1.03);
  box-shadow : 0 24px 60px rgba(0,0,0,.28);
}

/* ── Tick badge on front image ─────────────────────  */
.wcu-tick {
  position : absolute;
  top      : 10px;
  left     : 10px;
  width    : 30px;
  height   : 30px;
  z-index  : 4;
  display  : block;
  filter   : drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.wcu-tick svg { width: 100%; height: 100%; }

/* ══════════════════════════════════════════════════
   TEXT CONTENT
   ══════════════════════════════════════════════════ */
.wcu-body {
  flex     : 1;
  min-width: 0;
}

.wcu-eyebrow {
    margin-bottom: 20px !important;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: capitalize;
    color: var(--lcolor);
    line-height: 1;
}

.wcu-title {
  margin      : 0 0 1.25rem;
  font-size   : clamp(1.75rem, 3vw, 2.6rem);
  font-weight : 800;
  color       : #111;
  line-height : 1.18;
}

.wcu-pill {
    background-color: #2D98B9;
    font-family: "Cabinet Grotesk Medium", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    fill: #FFFFFF;
    color: #FFFFFF;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #2D98B9;
    border-radius: 100px 100px 100px 100px;
    padding: 6px 18px 6px 18px;
}

.wcu-list {
  list-style : none;
  margin     : 0 0 1.8rem;
  padding    : 0;
  display    : flex;
  flex-direction : column;
  gap        : .65rem;
}
.wcu-list li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 18px;
    color: #060606;
    line-height: 1.45;
    font-family: "Cabinet Grotesk Regular", Sans-serif;
}

.wcu-list li svg {
  width      : 22px;
  height     : 22px;
  flex-shrink: 0;
}

.wcu-cta {
    background-color: #FFFFFF;
    font-family: "Cabinet Grotesk Boild", Sans-serif;
    font-size: 17px;
    font-weight: 500;
    fill: #000000;
    color: #000000;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-radius: 10px 10px 10px 10px;
    padding: 11px 25px 11px 25px;
    text-decoration: none !important;
    margin-top: 20px !important;
    display: inline-block;
}
.wcu-cta:hover, .wcu-cta:focus-visible {
  background : #111;
  color      : #fff;
  transform  : translateY(-2px);
}

/* ══════════════════════════════════════════════════
   CONTROLS  (dots + progress bar)
   ══════════════════════════════════════════════════ */
.wcu-controls {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.4rem;
    display: none;
}

.wcu-dot {
  width         : 11px;
  height        : 11px;
  border-radius : 50%;
  border        : 2.5px solid var(--accent);
  background    : transparent;
  padding       : 0;
  cursor        : pointer;
  transition    : background .25s, transform .2s;
}
.wcu-dot.is-active {
  background : var(--accent);
  transform  : scale(1.3);
}

/* Thin progress bar at the very bottom */
.wcu-bar {
    position: absolute;
    bottom: 125px;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, .07);
    overflow: hidden;
    width: 42%;
}

.wcu-bar-fill {
  display    : block;
  height     : 100%;
  width      : 0%;
  background : var(--accent);
  transition : width linear;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media ( max-width: 900px ) {
  .wcu-imgs {
    flex   : 0 0 320px;
    width  : 320px;
    height : 260px;
  }
}

@media ( max-width: 720px ) {
  .wcu-slide,
  .wcu-wrap.wcu-reverse .wcu-slide {
    flex-direction : column;
    align-items    : flex-start;
    gap            : 2rem;
  }
  .wcu-imgs {
    flex   : none;
    width  : 100%;
    height : 240px;
  }
}

@media ( max-width: 480px ) {
  .wcu-imgs { height: 200px; }
}