.why-vivant{
  --navy:#2050C8;
  --navy-deep:#18377A;
  --orange:#D6394A;
  --blue-soft:#E9EFFA;
  --bg:#FFFFFF;
  --ink:#1A2030;
  --gray:#5C6679;

  position:relative;
  background:var(--bg);
  overflow:visible;
  padding:80px 2px 90px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  margin:0;
  box-sizing:border-box;
}
.why-vivant *, .why-vivant *::before, .why-vivant *::after{ box-sizing:border-box; margin:0; padding:0; }

.why-vivant .wv-top{
  max-width:1330px !important;
  width:100% !important;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:56px;
  position:relative;
  z-index:1;
}
.why-vivant .wv-content-col{
  order:2;
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
}
.why-vivant .wv-photo-col{
  order:1;
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}
.why-vivant .wv-photo-col img{
  width:100%; max-width:560px;
  height:auto;
  object-fit:contain;
  display:block;
  position:relative; z-index:1;
}

/* Hand-drawn arrow (single rule — the duplicate has been removed) */
.why-vivant .wv-arrow{
  position:absolute; top:-50px; left:-112px;
  width:118px; height:auto;
  pointer-events:none;
  z-index:2;
}

.why-vivant .wv-eyebrow{
  display:inline-flex; align-items:center;
  align-self:flex-start;
  width:fit-content;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); background:var(--blue-soft);
  padding:7px 16px; border-radius:999px;
  margin-bottom:20px;
}
.why-vivant .wv-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:38px;
  line-height:1.15; letter-spacing:-0.015em;
  color:#0a0a0a;
  margin-bottom:20px;
}
.why-vivant .wv-body{
  font-size:18px; line-height:1.7; color:#0A0A0A;
  max-width:540px;
  margin-bottom:0;
  font-weight:400;
}
.why-vivant .wv-banner-wrap{
  position:relative; z-index:2;
  max-width:1330px; margin:-30px auto 0;
}

/* ===== BANNER (shine + hover + star spin) ===== */
.why-vivant .wv-banner{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg, #2050C8 0%, #5A57B0 52%, #d6394a 100%);
  border-radius:22px;
  padding:32px 40px;
  margin:30px 0 0;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;
  box-shadow:0 22px 44px -18px rgba(32, 80, 200, .4);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
/* Shine now animates with transform (GPU) instead of "left" (which forced re-layout every frame) */
.why-vivant .wv-banner::after{
  content:"";
  position:absolute; top:0; left:0;
  height:100%; width:60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.28) 55%, transparent 100%);
  transform:translateX(-120%) skewX(-18deg);
  pointer-events:none;
  will-change:transform;
  animation:wv-shine 4.5s ease-in-out infinite;
}
@keyframes wv-shine{
  0%   { transform:translateX(-120%) skewX(-18deg); }
  60%  { transform:translateX(220%) skewX(-18deg); }
  100% { transform:translateX(220%) skewX(-18deg); }
}
.why-vivant .wv-banner:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 32px 60px -18px rgba(32,80,200,.55);
}
.why-vivant .wv-banner svg{
  position:relative; z-index:1;
  width:24px; height:24px; color:var(--bg); flex-shrink:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.why-vivant .wv-banner:hover svg{
  transform:rotate(180deg) scale(1.2);
}
.why-vivant .wv-banner span{
  position:relative; z-index:1;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:clamp(16px, 2vw, 26px); letter-spacing:.02em;
  color:var(--bg);
  text-align:center; text-transform:uppercase;
}

/* ===== SCROLL FADE-UP ENTRANCE (optional — delete this block + the <script> below if not needed) ===== */
.why-vivant .wv-anim{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.why-vivant .wv-anim.wv-in{
  opacity:1;
  transform:translateY(0);
}
.why-vivant .wv-photo-col.wv-anim{ transition-delay:0s; }
.why-vivant .wv-content-col.wv-anim{ transition-delay:.15s; }
.why-vivant .wv-banner-wrap.wv-anim{ transition-delay:.3s; }
/* ===== END SCROLL FADE-UP ===== */

@media (prefers-reduced-motion: reduce){
  .why-vivant .wv-anim{ opacity:1; transform:none; transition:none; }
  .why-vivant .wv-banner::after{ animation:none; }
  .why-vivant .wv-banner, .why-vivant .wv-banner svg{ transition:none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .why-vivant .wv-top{ grid-template-columns:1fr; gap:28px; }
  .why-vivant .wv-photo-col{ order:-1; padding-top:8px; }
  .why-vivant .wv-content-col{ text-align:center; align-items:center; }
  .why-vivant .wv-eyebrow{ align-self:center; }
  .why-vivant .wv-arrow{ display:none; }
  .why-vivant .wv-title{ font-size:20px; }
  .why-vivant .wv-body{
    font-size:14px;
    line-height:1.4;
    color:#000;
    margin-left:auto; margin-right:auto;
    margin-bottom:30px;
  }
}
@media (max-width:640px){
  .why-vivant{ padding:56px 20px 48px; }
  .why-vivant .wv-banner{ padding:26px 22px; border-radius:14px; }
}