/* ==========================================================================
   WHY US  (/why-us/clients/ and /why-us/employees/)
   The two pages are a matched pair: same blocks, mirrored media, and the
   colour swapped so Employers reads crimson-led and Job Seekers navy-led.
   Loaded only by these two pages, alongside anim-icons.css.
   Motion, hover and the brand colours follow the 24 Sep rule: crimson for the
   action, navy for the structure, everything off under reduced motion.
   ========================================================================== */

/* the accent is set per page on <body> or the section, so one sheet serves both */
.wu { --wu-accent: var(--color-primary); --wu-accent-soft: var(--crimson-50); --wu-accent-deep: var(--crimson-600); }
.wu--navy { --wu-accent: var(--navy-500); --wu-accent-soft: var(--navy-50); --wu-accent-deep: var(--navy-700); }

/* ---- hero facts ---------------------------------------------------------- */
.wu-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.wu-facts li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.86); }
.wu-facts .icon { width: 1.1rem; height: 1.1rem; color: var(--crimson-300); }

/* ---- 1. the four pillars ------------------------------------------------- */
.wu-pillars { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.wu-pillar {
  position: relative; overflow: hidden; padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.wu-pillar::after {
  content: attr(data-n); position: absolute; right: var(--space-4); top: var(--space-2);
  font-family: var(--font-heading); font-size: 3rem; font-weight: var(--weight-bold); line-height: 1;
  color: var(--n-50); transition: color 0.4s ease;
}
.wu-pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.wu-pillar:hover::after { color: var(--wu-accent-soft); }
.wu-pillar__icon {
  position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-4);
  border-radius: var(--radius-lg); background: var(--wu-accent-soft); color: var(--wu-accent);
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wu-pillar:hover .wu-pillar__icon { background: var(--wu-accent); color: var(--n-0); transform: rotate(-5deg) scale(1.06); }
.wu-pillar__icon .ai-ico { width: 2.1rem; height: 2.1rem; }
.wu-pillar h3 { position: relative; margin: 0 0 var(--space-2); font-size: var(--text-base); }
.wu-pillar p { position: relative; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
/* every second pillar takes the other brand colour, so the row alternates */
.wu-pillar:nth-child(even) { --wu-accent: var(--navy-500); --wu-accent-soft: var(--navy-50); --wu-accent-deep: var(--navy-700); }
.wu--navy .wu-pillar:nth-child(even) { --wu-accent: var(--color-primary); --wu-accent-soft: var(--crimson-50); --wu-accent-deep: var(--crimson-600); }

/* ---- 2. the eight reasons, beside a sticky photo ------------------------- */
.wu-reasons { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1024px) {
  .wu-reasons { grid-template-columns: 5fr 7fr; }
  .wu-reasons--media-right { grid-template-columns: 7fr 5fr; }
  .wu-reasons--media-right .wu-reasons__media { order: 2; }
  .wu-reasons__media { position: sticky; top: 7.5rem; }
}
.wu-reasons__media { display: grid; gap: var(--space-4); }
.wu-reasons__photo { position: relative; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.wu-reasons__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.wu-reasons__photo:hover img { transform: scale(1.04); }
.wu-reasons__badge {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); color: var(--n-0);
  background: linear-gradient(120deg, var(--wu-accent-deep), var(--wu-accent));
  box-shadow: 0 18px 38px -22px rgba(4, 31, 21, 0.7);
}
.wu-reasons__badge .icon { flex: none; width: 1.75rem; height: 1.75rem; }
.wu-reasons__badge strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); }
.wu-reasons__badge span { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); }

.wu-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: wu; }
.wu-reason {
  position: relative; display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-reason::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 3px;
  background: var(--wu-accent); transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-reason:hover { background: var(--n-0); box-shadow: var(--shadow-md); transform: translateX(4px); }
.wu-reason:hover::before { transform: scaleY(1); }
.wu-reason__n {
  flex: none; counter-increment: wu; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-md); background: var(--navy-50); color: var(--navy-500);
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-bold);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.wu-reason__n::after { content: "0" counter(wu); }
.wu-reason:hover .wu-reason__n { background: var(--wu-accent); color: var(--n-0); }
.wu-reason h3 { margin: 0 0 0.15rem; font-size: var(--text-base); }
.wu-reason p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- 3. the dark band ---------------------------------------------------- */
.wu-band { position: relative; overflow: hidden; isolation: isolate; color: var(--n-0); background: linear-gradient(140deg, var(--navy-800), var(--navy-600) 55%, var(--navy-900)); }
.wu-band::after {
  content: ""; position: absolute; z-index: -1; right: -8rem; top: -10rem; width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 112, 31, 0.32), transparent 68%);
  animation: wu-drift 18s ease-in-out infinite alternate;
}
@keyframes wu-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.14); } }
.wu-band h2 { color: var(--n-0); }
.wu-band .lead { color: rgba(255, 255, 255, 0.85); }
/* 8 Oct 2026 (client): eyebrow readable on the dark band, larger card text, clear end above the dark footer */
.wu-band .eyebrow { color: var(--gold-300); }
.wu-band .eyebrow::before { background: var(--gold-400); }
.section.wu-band, .home-v2 main > .section.wu-band {
  padding-block: clamp(4.5rem, 8vw, 6.5rem); border-bottom: 4px solid var(--gold-400);
  background: linear-gradient(140deg, var(--navy-800), var(--navy-600) 55%, var(--navy-900)); /* over .section--dark */
}
.section.wu-band .section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.wu-band__item { text-align: center; }
.wu-band__item .ai-ico, .wu-band__item > .icon, .wu-band__item > .cms-icon-img { display: block; margin-inline: auto; }
.wu-band__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.wu-band__item {
  padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-band__item:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }
.wu-band__item .ai-ico { width: 2.4rem; height: 2.4rem; color: var(--crimson-300); margin-bottom: var(--space-4); }
.wu-band__item strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--n-0); }
.wu-band__item p { margin: var(--space-2) 0 0; font-size: var(--text-base); line-height: var(--leading-relaxed, 1.6); color: rgba(255, 255, 255, 0.86); }

/* ---- 4a. the client quote ------------------------------------------------ */
.wu-quote {
  position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-xl); background: var(--n-0); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
}
.wu-quote::before {
  content: ""; position: absolute; left: -4rem; bottom: -6rem; width: 18rem; height: 18rem; border-radius: 50%;
  background: radial-gradient(circle, var(--crimson-50), transparent 70%);
}
.wu-quote__mark { position: relative; display: block; width: 3rem; height: 3rem; color: var(--color-primary); margin-bottom: var(--space-4); }
.wu-quote blockquote { position: relative; margin: 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: var(--leading-snug); color: var(--color-heading); }
.wu-quote figcaption { position: relative; margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.wu-quote figcaption strong { color: var(--color-heading); }
.wu-quote figcaption a { color: var(--navy-600); font-weight: var(--weight-semibold); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; }
.wu-quote figcaption a:hover { color: var(--color-primary); border-bottom-color: currentColor; }

/* ---- 4b. the four steps -------------------------------------------------- */
.wu-steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: wustep; }
.wu-step {
  position: relative; padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg);
  background: var(--n-0); border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.wu-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.wu-step::before {
  counter-increment: wustep; content: "0" counter(wustep);
  position: absolute; right: var(--space-5); top: var(--space-4);
  font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--navy-50);
}
.wu-step .ai-ico { width: 2.3rem; height: 2.3rem; color: var(--wu-accent); margin-bottom: var(--space-4); }
.wu-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.wu-step p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- 5. the other audience ---------------------------------------------- */
.wu-swap { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .wu-swap { grid-template-columns: 1fr 1fr; } }
.wu-swap__card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-xl); text-decoration: none;
  background: var(--n-0); border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.wu-swap__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, var(--crimson-600), var(--crimson-500));
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wu-swap__card--navy::before { background: linear-gradient(120deg, var(--navy-700), var(--navy-500)); }
.wu-swap__card:hover, .wu-swap__card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.wu-swap__card:hover::before, .wu-swap__card:focus-visible::before { transform: scaleX(1); }
.wu-swap__icon {
  flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md);
  background: var(--crimson-50); color: var(--color-primary);
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wu-swap__card--navy .wu-swap__icon { background: var(--navy-50); color: var(--navy-500); }
.wu-swap__card:hover .wu-swap__icon, .wu-swap__card:focus-visible .wu-swap__icon { background: var(--n-0); transform: rotate(-6deg) scale(1.06); }
.wu-swap__card--navy:hover .wu-swap__icon { color: var(--navy-600); }
.wu-swap__body { flex: 1; min-width: 0; }
.wu-swap__body strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-heading); transition: color 0.4s ease; }
.wu-swap__body span { display: block; margin-top: 0.15rem; font-size: var(--text-sm); color: var(--color-text-muted); transition: color 0.4s ease; }
.wu-swap__card:hover strong, .wu-swap__card:hover span,
.wu-swap__card:focus-visible strong, .wu-swap__card:focus-visible span { color: var(--n-0); }
.wu-swap__go { flex: none; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity 0.35s ease, transform 0.35s ease, color 0.4s ease; }
.wu-swap__card--navy .wu-swap__go { color: var(--navy-500); }
.wu-swap__card:hover .wu-swap__go, .wu-swap__card:focus-visible .wu-swap__go { opacity: 1; transform: none; color: var(--n-0); }

@media (prefers-reduced-motion: reduce) {
  .wu-band::after { animation: none; }
}

/* ---- 3b. the mid-page CTA ------------------------------------------------
   Half way down a long page, where someone has read the reasons and is ready
   to act. Always crimson: crimson is the action colour on both pages, and it
   sets up the navy band that follows.                                       */
.wu-cta {
  position: relative; overflow: hidden; isolation: isolate; color: var(--n-0);
  padding: clamp(2rem, 5vw, 3rem); border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--crimson-600), var(--crimson-500) 55%, var(--crimson-700));
  box-shadow: 0 28px 56px -30px rgba(150, 112, 31, 0.85);
  display: grid; gap: var(--space-5); align-items: center;
}
@media (min-width: 900px) { .wu-cta { grid-template-columns: auto 1fr auto; gap: var(--space-6); } }
.wu-cta::after {
  content: ""; position: absolute; z-index: -1; right: -6rem; bottom: -10rem; width: 24rem; height: 24rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
  animation: wu-cta-drift 14s ease-in-out infinite alternate;
}
@keyframes wu-cta-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, -10%, 0) scale(1.15); } }
.wu-cta__icon { display: grid; place-items: center; width: 4rem; height: 4rem; flex: none; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.16); color: var(--n-0); }
.wu-cta__icon .ai-ico { width: 2.4rem; height: 2.4rem; }
.wu-cta h2 { color: var(--n-0); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 var(--space-2); }
.wu-cta p { margin: 0; color: rgba(255, 255, 255, 0.9); max-width: 46rem; }
.wu-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wu-cta .btn--light:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .wu-cta::after { animation: none; } }