/* ==========================================================================
   WHY BOOK WITH US -- v7.0 "The Proof, Live"
   All var(--...) tokens verified against the real main.css token list.
   ========================================================================== */

.wcu3 { position: relative; padding: var(--spacing-20) 0; background: var(--bg-primary); overflow: hidden; }
.wcu3__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--spacing-6); }

[data-tt-animate] { opacity: 0; transform: translateY(22px); transition: var(--transition-premium); will-change: opacity, transform; }
[data-tt-animate].tt-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-tt-animate] { opacity: 1; transform: none; transition: none; } }

/* INTRO */
.wcu3__header { max-width: 40rem; margin: 0 auto var(--spacing-6); text-align: center; }
.wcu3__label {
  display: inline-block; font-family: var(--font-primary); font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--spacing-3);
}
.wcu3__heading {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: var(--leading-tight); color: var(--text-primary);
  font-weight: var(--font-weight-bold); margin: 0 0 var(--spacing-3);
}
.wcu3__heading em { font-style: italic; font-family: var(--font-elegant); color: var(--color-gold-light); font-weight: var(--font-weight-medium); }
.wcu3__intro { font-family: var(--font-primary); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* FILTER PILLS */
.wcu3-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-2); margin-bottom: var(--spacing-8); }
.wcu3-pill {
  font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  color: var(--text-secondary); background: var(--color-navy-card); border: 1px solid var(--border-primary);
  padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-full); cursor: pointer;
  transition: var(--transition-premium); display: inline-flex; align-items: center; gap: var(--spacing-1-5);
}
.wcu3-pill svg { width: 0.9rem; height: 0.9rem; color: var(--color-gold); flex: none; }
.wcu3-pill:hover { border-color: var(--border-gold); color: var(--text-primary); }
.wcu3-pill.is-active { background: var(--gradient-gold); color: var(--color-navy-abyss); border-color: transparent; }
.wcu3-pill.is-active svg { color: var(--color-navy-abyss); }

/* MASONRY GRID */
.wcu3-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px;
  gap: var(--spacing-4); margin-bottom: var(--spacing-10);
}
.wcu3-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: default;
  border: 1px solid var(--border-primary); box-shadow: var(--shadow-sm); transition: var(--transition-premium);
}
.wcu3-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-gold); }
.wcu3-card--lg { grid-column: span 2; grid-row: span 2; }
.wcu3-card--tall { grid-row: span 2; }
.wcu3-card.is-hidden { display: none; }

.wcu3-card__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.wcu3-card__slide.is-active { opacity: 1; }
.wcu3-card__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .wcu3-card__slide { transition: none; } }

/* Founder-style cards: the photo never actually changes (same file across
   caption slides), so give it a slow continuous zoom instead of leaving it
   static while only the text moves underneath. */
.wcu3-card--kenburns .wcu3-card__slide img { animation: wcu3KenBurns 14s ease-in-out infinite alternate; }
@keyframes wcu3KenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .wcu3-card--kenburns .wcu3-card__slide img { animation: none; } }

.wcu3-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--gradient-overlay);
}
.wcu3-card__badge {
  position: absolute; top: var(--spacing-2-5); left: var(--spacing-2-5); z-index: 2;
  background: var(--color-dark-50); backdrop-filter: blur(6px); color: var(--color-gold-light);
  font-family: var(--font-primary); font-size: 0.64rem; font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; padding: var(--spacing-1) var(--spacing-2-5);
  border-radius: var(--radius-full); border: 1px solid var(--color-white-18);
}
.wcu3-card__dots { position: absolute; top: var(--spacing-2-5); right: var(--spacing-2-5); z-index: 2; display: flex; gap: 4px; }
.wcu3-card__pdot { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-white-40); transition: var(--transition-premium); }
.wcu3-card__pdot.is-active { background: var(--color-gold); width: 10px; border-radius: var(--radius-full); }

.wcu3-card__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--spacing-3); }
.wcu3-card__title {
  font-family: var(--font-display); color: var(--text-white); font-weight: var(--font-weight-bold);
  margin: 0 0 3px; line-height: var(--leading-snug); font-size: var(--text-base);
}
.wcu3-card--lg .wcu3-card__title { font-size: var(--text-xl); }

/* Meta text crossfades and slides up in step with the photo underneath it --
   each rotation gets its own layer so the outgoing and incoming captions
   overlap briefly instead of popping. */
.wcu3-card__meta { position: relative; height: 1.1rem; overflow: hidden; }
.wcu3-card__meta-text {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: var(--spacing-1-5);
  font-family: var(--font-primary); font-size: 0.7rem; color: var(--color-white-70);
  opacity: 0; transform: translateY(10px); transition: opacity 550ms ease, transform 550ms cubic-bezier(.22,.8,.32,1);
  white-space: nowrap;
}
.wcu3-card__meta-text.is-active { opacity: 1; transform: translateY(0); }
.wcu3-card__meta-text.is-leaving { opacity: 0; transform: translateY(-10px); }
.wcu3-card__meta-text svg { width: 0.7rem; height: 0.7rem; color: var(--color-gold); flex: none; }
@media (prefers-reduced-motion: reduce) { .wcu3-card__meta-text { transition: none; } }

/* Balanced 3x3 grid for 5 cards: large tile (2x2) + tall founder tile (1x2)
   fill the top two rows exactly, three normal tiles fill the third row. */
.wcu3-grid { grid-template-rows: repeat(2, 170px) 170px; }

@media (max-width: 900px) {
  .wcu3-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-template-rows: none; }
  .wcu3-card--lg { grid-column: span 2; }
}
@media (max-width: 560px) {
  .wcu3-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .wcu3-card--lg, .wcu3-card--tall { grid-column: span 1; grid-row: span 1; }
}

/* STAT BAR */
.wcu3-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--color-navy-card); border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  padding: var(--spacing-5) var(--spacing-4); margin-bottom: var(--spacing-8); text-align: center;
}
.wcu3-stats > div:not(:last-child) { border-right: 1px solid var(--border-primary); }
.wcu3-stat__num { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gold); font-weight: var(--font-weight-bold); display: block; transition: text-shadow 300ms ease; }
.wcu3-stat__num--glow { text-shadow: 0 0 18px var(--color-gold-glow), 0 0 4px var(--color-gold-glow-sm); }
.wcu3-stat__label { font-family: var(--font-primary); font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 700px) {
  .wcu3-stats { grid-template-columns: repeat(2, 1fr); }
  .wcu3-stats > div:nth-child(2n) { border-right: none; }
  .wcu3-stats > div:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border-primary); padding-bottom: var(--spacing-3); margin-bottom: var(--spacing-2); }
}

/* CTA PANEL */
.wcu3-cta {
  background: var(--gradient-premium); border-radius: var(--radius-2xl); padding: var(--spacing-10);
  box-shadow: var(--shadow-premium);
}
.wcu3-cta__eyebrow { display: block; font-family: var(--font-primary); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-gold-light); margin-bottom: var(--spacing-3); }
.wcu3-cta__heading { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--text-white); margin: 0 0 var(--spacing-2); }
.wcu3-cta__heading em { font-style: italic; font-family: var(--font-elegant); color: var(--color-gold-light); }
.wcu3-cta__sub { font-family: var(--font-primary); color: var(--color-white-80); margin: 0 0 var(--spacing-5); line-height: var(--leading-relaxed); font-size: var(--text-base); max-width: 34rem; }
.wcu3-cta__actions { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }
.wcu3-cta__btn {
  font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--text-sm);
  padding: var(--spacing-3) var(--spacing-6); border-radius: var(--radius-full); text-decoration: none;
  transition: var(--transition-premium); display: inline-flex; align-items: center;
}
.wcu3-cta__btn--primary { background: var(--gradient-gold); color: var(--color-navy-abyss); }
.wcu3-cta__btn--primary:hover { box-shadow: var(--glow-gold); transform: translateY(-1px); }
.wcu3-cta__btn--ghost { background: transparent; color: var(--text-white); border: 1px solid var(--color-white-30); }
.wcu3-cta__btn--ghost:hover { background: var(--color-white-10); }

@media (max-width: 640px) {
  .wcu3 { padding: var(--spacing-14) 0; }
  .wcu3-cta { padding: var(--spacing-6); }
}