/* ==========================================================================
   WHY CHOOSE US — PAGE DESIGN & ANIMATIONS
   Loaded after reference-fix.css. Uses theme tokens:
   navy #08135a / section #060e44, green #128A42, sky-blue tints #eef7fd/#eaf4fb
   ========================================================================== */

.wcu-section-pad { padding: 4rem 0; }

/* -----------------------------------------------
   SCROLL REVEAL (driven by main.js IntersectionObserver)
   ----------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   SECTION 1: HERO
   ========================================================================== */
/* Same shared leaf/forest artwork as every other page hero, with no dark
   overlay layer on top and no decorative shapes or entrance animation, so
   this header reads identically to the rest of the site. */
.wcu-hero {
  position: relative;
  overflow: hidden;
  background: url("../images/page-heroes/page-header.webp") center center / cover no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 5rem 0 5.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* decorative floating shapes are gone to match the plain page hero */
.wcu-blob,
.wcu-ring {
  display: none !important;
}

.wcu-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }

.wcu-hero .wcu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  background: #128A42;
  border: 1px solid #128A42;
  padding: 0.45rem 1.2rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(4, 11, 56, 0.4);
  margin-bottom: 1.1rem;
}
.wcu-eyebrow-line {
  display: inline-block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: #ffffff;
}

.wcu-hero-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.12;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(4, 11, 56, 0.6);
  margin-bottom: 0.85rem;
  letter-spacing: -0.5px;
}
.wcu-hero-title .wcu-hero-accent { color: rgb(56, 241, 108); }

.wcu-hero-script {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: #eaf7ee;
  text-shadow: 0 2px 10px rgba(4, 11, 56, 0.6);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 1.1rem;
}
.wcu-hero-script .heart-accent { color: rgb(56, 241, 108); }

.wcu-hero-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #f1f5f9;
  text-shadow: 0 2px 10px rgba(4, 11, 56, 0.6);
  max-width: 620px;
  margin: 0 auto 1rem;
}

/* quick chips — content delivered at a glance */
.wcu-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.wcu-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #376b92;
  background: #ffffff;
  border: 1px solid rgba(8, 19, 90, 0.35);
  border-radius: 50px;
  padding: 0.45rem 0.95rem;
  transition: var(--transition);
}
.wcu-chip:hover {
  background: #edf7f1;
  border-color: var(--primary-green);
  color: var(--primary-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(4, 11, 56, 0.35);
}
.wcu-chip svg { width: 13px; height: 13px; color: currentColor; }

/* hero entrance animation removed — content shows immediately like other pages */
.wcu-hero .wcu-anim {
  opacity: 1;
  animation: none;
}

/* ==========================================================================
   SECTION 2: STATS BAND (overlaps hero, animated counters)
   ========================================================================== */
.wcu-stats-wrap {
  background: #ffffff;
  position: relative;
  z-index: 3;
  padding: 3.25rem 0;
}
.wcu-stats-band {
  margin-top: 0;
  background: #128A42;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(4, 11, 56, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}
.wcu-stat {
  padding: 1.75rem 1.25rem;
  text-align: center;
  position: relative;
  transition: var(--transition);
}
.wcu-stat + .wcu-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
}
.wcu-stat:hover { background: rgba(255, 255, 255, 0.12); }
.wcu-stat-number {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(4, 11, 56, 0.28);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
  margin-bottom: 0.45rem;
}
.wcu-stat-number *,
.wcu-stat-number span,
.wcu-stat-number [data-count-to],
.wcu-stat-number .wcu-count-accent {
  color: #ffffff !important;
}
.wcu-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #e4f7ea;
  opacity: 0.95;
}

/* ==========================================================================
   SECTION 3: SIX REASONS TIMELINE
   ========================================================================== */
.wcu-reasons {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
  color: #334155;
}
.wcu-reasons::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 39px, rgba(22, 163, 74, 0.045) 40px, transparent 41px);
  background-size: 82px 82px;
  animation: wcuReasonsPattern 48s linear infinite;
}

.wcu-section-head { text-align: center; max-width: 560px; margin: 0 auto 2.75rem; }
.wcu-section-head .wcu-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--primary-green-dark);
  background: #edf7f1;
  border: 1px solid rgba(22, 163, 74, 0.35);
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 0.5rem;
}
.wcu-section-head h2 {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--primary-navy);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.wcu-section-head p {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
}

/* The white timeline uses dark text and restrained green accents. */
.wcu-reasons .wcu-section-head .wcu-eyebrow {
  color: #1B7846;
  background: #edfbf4;
  border-color: #a7f3d0;
}
.wcu-reasons .wcu-section-head h2 { color: #08135a; }
.wcu-reasons .wcu-section-head p { color: #475569; }

.wcu-timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.75rem 0 0.5rem;
}

/* center rail + scroll-driven progress fill */
.wcu-tl-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: #dbe9df;
  border-radius: 3px;
}
.wcu-tl-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--fill-progress, 0) * 100%);
  background: #128A42;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(18, 138, 66, 0.28);
  transition: height 0.12s linear;
}
.wcu-tl-progress::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: #128A42;
  box-shadow: 0 0 10px rgba(18, 138, 66, 0.35);
}

.wcu-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;
  padding: 1.55rem 0;
}

/* icon node on the rail */
.wcu-tl-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #128A42;
  color: #08135a;
  box-shadow: 0 4px 14px rgba(12, 35, 120, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.25);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, opacity 0.4s ease 0.2s, background 0.3s ease;
}
.wcu-tl-item.is-visible .wcu-tl-node {
  transform: scale(1);
  opacity: 1;
}
.wcu-tl-item:hover .wcu-tl-node { background: #128A42; border-color: #128A42; }
.wcu-tl-item:hover .wcu-tl-node svg { color: #ffffff; }
.wcu-tl-node svg { width: 24px; height: 24px; }

/* content side — alternating left / right */
.wcu-tl-content { position: relative; z-index: 1; transition: transform 0.35s ease; }
.wcu-tl-item--left .wcu-tl-content  { grid-column: 1; text-align: right;  padding-right: 2.4rem; }
.wcu-tl-item--right .wcu-tl-content { grid-column: 3; text-align: left;   padding-left: 2.4rem; }
.wcu-tl-item--left:hover  .wcu-tl-content { transform: translateX(-5px); }
.wcu-tl-item--right:hover .wcu-tl-content { transform: translateX(5px); }

/* connector line from content to the node */
.wcu-tl-content::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 3.75rem;
  height: 2px;
  background: #bbf7d0;
  transform: scaleX(0);
  transition: transform 0.5s ease 0.45s;
}
.wcu-tl-item--left .wcu-tl-content::before {
  right: -3.75rem;
  transform-origin: left;
}
.wcu-tl-item--right .wcu-tl-content::before {
  left: -3.75rem;
  background: #bbf7d0;
  transform-origin: right;
}
.wcu-tl-item.is-visible .wcu-tl-content::before { transform: scaleX(1); }

.wcu-tl-step {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #128A42;
  margin-bottom: 0.35rem;
}
.wcu-tl-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: #08135a;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.wcu-tl-desc {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
  max-width: 380px;
}
.wcu-tl-item--left .wcu-tl-desc { margin-left: auto; }

/* ==========================================================================
   SECTION 4: VEERA VS ORDINARY COMPARISON
   ========================================================================== */
.wcu-compare {
  background: #08135a;
  color: #ffffff;
}
.wcu-compare .wcu-section-head .wcu-eyebrow {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
}
.wcu-compare .wcu-section-head h2 { color: #ffffff; }
.wcu-compare .wcu-section-head p { color: #e5f5eb; }

.wcu-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  position: relative;
  align-items: stretch;
}
.wcu-vs-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--primary-navy);
  color: #ffffff;
  font-family: var(--font-script);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 22px rgba(8,19,90, 0.4);
  z-index: 3;
}

.wcu-compare-card {
  border-radius: 14px;
  padding: 2rem 1.8rem;
}
.wcu-compare-card--good {
  background: #ffffff;
  border: 1.5px solid #ffffff;
  box-shadow: 0 10px 26px rgba(5, 16, 59, 0.14);
  color: var(--primary-navy);
}
.wcu-compare-card--bad {
  background: #edf7f1;
  border: 1px solid #d1ead9;
  color: #334155;
}
.wcu-compare-card h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.wcu-compare-card--good h3 { color: var(--primary-navy); }
.wcu-compare-card--bad h3 { color: #08135a; }
.wcu-compare-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  margin-bottom: 1.1rem;
}
.wcu-compare-card--good .wcu-compare-tag { background: var(--primary-green); color: #ffffff; }
.wcu-compare-card--bad .wcu-compare-tag { background: #ffffff; color: #08135a; }

.wcu-compare-list { display: flex; flex-direction: column; gap: 0.85rem; }
.wcu-compare-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.wcu-compare-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.wcu-compare-card--good .wcu-compare-item { color: #334155; }
.wcu-compare-card--bad .wcu-compare-item { color: #334155; }

/* Check / cross icons inherit the card text colour so they stay visible
   on both the light green and the neutral compare cards */
.wcu-check { color: var(--primary-green-dark); }
.wcu-compare-card--bad .wcu-check { color: #64748b; }

/* animated checkmark draw */
.wcu-check circle {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: wcuDraw 0.6s 0.35s ease forwards;
}
.wcu-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: wcuDraw 0.4s 0.8s ease forwards;
}
.wcu-cross { color: #647a90; }

/* ==========================================================================
   SECTION 5: CTA BAND
   ========================================================================== */
.wcu-cta {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #334155;
  text-align: center;
  padding: 4.5rem 0;
  border-top: 1px solid #e2e8f0;
}
.wcu-cta .wcu-ring { border-color: rgba(255, 255, 255, 0.22); }
.wcu-cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.wcu-cta h2 {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.9rem;
  color: #08135a;
}
.wcu-cta p {
  font-size: 0.98rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}
.wcu-cta-actions {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.wcu-cta .btn-outline-navy {
  color: #128A42 !important;
  border-color: #128A42 !important;
  background: #ffffff !important;
}
.wcu-cta .btn-outline-navy:hover {
  background: #128A42 !important;
  color: #ffffff !important;
  border-color: #128A42 !important;
}
.wcu-cta .btn-pink {
  background-color: #128A42 !important;
  border-color: #128A42 !important;
  color: #ffffff !important;
}
.wcu-cta .btn-pink:hover {
  background-color: #128A42 !important;
  border-color: #128A42 !important;
  box-shadow: 0 4px 14px rgba(18, 138, 66, 0.4);
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes wcuFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wcuFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(3deg); }
}
@keyframes wcuDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes wcuReasonsPattern {
  to { background-position: 82px 82px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .wcu-stats-band { grid-template-columns: repeat(2, 1fr); }
  .wcu-stat:nth-child(3)::before { display: none; }
}
@media (max-width: 760px) {
  .wcu-hero { padding: 3.25rem 0 3.75rem; }
  .wcu-hero-title { font-size: 2.15rem; }
  .wcu-stats-wrap { padding: 2.25rem 0; }
  .wcu-compare-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .wcu-stats-band { margin-top: 0; }

  .wcu-tl-track { left: 27px; margin-left: 0; }
  .wcu-tl-item { grid-template-columns: 54px 1fr; padding: 1.1rem 0; }
  .wcu-tl-node { grid-column: 1; width: 46px; height: 46px; border-width: 3px; }
  .wcu-tl-node svg { width: 19px; height: 19px; }
  .wcu-tl-item--left .wcu-tl-content,
  .wcu-tl-item--right .wcu-tl-content {
    grid-column: 2;
    text-align: left;
    padding: 0 0 0 1.4rem;
  }
  .wcu-tl-item--left .wcu-tl-desc { margin-left: 0; }
  .wcu-tl-content::before { display: none; }
  .wcu-tl-title { font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .wcu-stats-band { grid-template-columns: 1fr 1fr; }
  .wcu-stat { padding: 1.25rem 0.75rem; }
  .wcu-stat-number { font-size: 1.8rem; }
  .wcu-cta h2 { font-size: 1.8rem; }
  .wcu-blob-1 { width: 220px; height: 220px; }
  .wcu-blob-2 { width: 280px; height: 280px; }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wcu-reasons::before { animation: none; }
  .wcu-hero .wcu-anim { opacity: 1 !important; animation: none !important; }
  .wcu-blob, .wcu-ring { animation: none !important; }
  .wcu-check circle, .wcu-check path { animation: none !important; stroke-dashoffset: 0 !important; }
}