.why-hire-grid {
  --wh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wh-surface-hi: rgba(64, 22, 34, 0.55);
  --wh-surface-lo: rgba(12, 8, 11, 0.78);
  --wh-edge: rgba(var(--main-rgb), 0.14);
  --wh-edge-hi: rgba(255, 255, 255, 0.06);
  --wh-title: #fff;
  --wh-text: #b9adb1;
  --wh-shadow: 0 18px 40px -18px rgba(60, 4, 20, 0.75), 0 2px 6px rgba(0, 0, 0, 0.35);
  --wh-shadow-hover: 0 26px 50px -18px rgba(90, 6, 30, 0.85), 0 0 0 1px rgba(var(--main-rgb), 0.22), 0 0 28px -6px rgba(var(--main-rgb), 0.28);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Gentle rhythm: middle column sits slightly lower on desktop */
@media (min-width: 1025px) {
  .why-hire-grid > .why-hire-card:nth-child(3n + 2) { margin-top: 18px; margin-bottom: -18px; }
}

/* ---------- Card surface ---------- */
.why-hire-grid .why-hire-card {
  --wh-delay: 0s;
  --wh-dur: 9s;
  --wh-lift: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  padding: 30px 26px 28px;
  border-radius: 16px;
  border: 1px solid var(--wh-edge);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--wh-surface-hi) 0%, transparent 55%),
    linear-gradient(155deg, rgba(180, 0, 60, 0.72) 0%, var(--wh-surface-lo) 70%);
  box-shadow: var(--wh-shadow), inset 0 1px 0 var(--wh-edge-hi), inset 0 0 0 1px rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* !important neutralises inline styles written by the shared scroll observers,
     so hover lift and entrance never fight. Transitions still animate them. */
  transform: translateY(var(--wh-lift)) !important;
  transition:
    opacity 0.8s ease var(--wh-delay),
    translate 0.9s var(--wh-ease) var(--wh-delay),
    transform 0.45s var(--wh-ease),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    filter 0.35s ease !important;
}

/* Entrance (works with the existing .slide-in-up observers) */
.why-hire-grid .why-hire-card.slide-in-up { opacity: 0 !important; translate: 0 28px; }
.why-hire-grid .why-hire-card.slide-in-up.is-visible { opacity: 1 !important; translate: 0 0; }

.why-hire-grid .why-hire-card:nth-child(1) { --wh-delay: 0s;    --wh-dur: 9s;   }
.why-hire-grid .why-hire-card:nth-child(2) { --wh-delay: 0.08s; --wh-dur: 11s;  }
.why-hire-grid .why-hire-card:nth-child(3) { --wh-delay: 0.16s; --wh-dur: 10s;  }
.why-hire-grid .why-hire-card:nth-child(4) { --wh-delay: 0.1s;  --wh-dur: 12s;  }
.why-hire-grid .why-hire-card:nth-child(5) { --wh-delay: 0.18s; --wh-dur: 9.5s; }
.why-hire-grid .why-hire-card:nth-child(6) { --wh-delay: 0.26s; --wh-dur: 10.5s;}

/* Ambient smoked-glass reflection */
.why-hire-grid .why-hire-card::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 190, 205, 0.201) 49%, rgba(255, 255, 255, 0.025) 51%, transparent 58%);
  transform: translateX(-30%);
  animation: whSheen calc(var(--wh-dur) * 2.2) ease-in-out infinite alternate;
  animation-delay: calc(var(--wh-delay) * -40);
  transition: opacity 0.5s ease;
  opacity: 0.8;
}
/* Fine top-edge highlight that fades toward the far corner */
.why-hire-grid .why-hire-card::after {
  content: "";
  position: absolute;
  top: 0; inset-inline-start: 18px;
  width: 42%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--main-rgb), 0.7), rgba(var(--main-rgb), 0));
  opacity: 0.55;
}
html[dir="rtl"] .why-hire-grid .why-hire-card::after,
html[lang="ar"] .why-hire-grid .why-hire-card::after {
  background: linear-gradient(270deg, rgba(var(--main-rgb), 0.7), rgba(var(--main-rgb), 0));
}

@keyframes whSheen {
  from { transform: translateX(-30%); }
  to   { transform: translateX(30%); }
}

/* ---------- Traveling edge signal (SVG perimeter trace) ---------- */
.why-hire-grid .wh-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease calc(var(--wh-delay) + 0.5s);
}
.why-hire-grid .why-hire-card.is-visible .wh-trace { opacity: 1; }
.why-hire-grid .wh-trace rect {
  x: 0.5px; y: 0.5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  rx: 15.5px;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.why-hire-grid .wh-trace-base { stroke: transparent; }
.why-hire-grid .wh-trace-tail {
  stroke: rgba(var(--main-rgb), 0.28);
  stroke-width: 1;
  stroke-dasharray: 16 84;
  stroke-linecap: round;
  animation: whTrace var(--wh-dur) linear infinite, whTraceBreath calc(var(--wh-dur) * 1.5) ease-in-out infinite;
  animation-delay: calc(var(--wh-delay) * -30);
}
.why-hire-grid .wh-trace-head {
  stroke: #ff8aa0;
  stroke-width: 1.4;
  stroke-dasharray: 4 96;
  stroke-dashoffset: -12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(var(--main-rgb), 0.8));
  animation: whTraceHead var(--wh-dur) linear infinite, whTraceBreath calc(var(--wh-dur) * 1.5) ease-in-out infinite;
  animation-delay: calc(var(--wh-delay) * -30);
}
/* dash moves forward; head sits at the leading end of the tail */
@keyframes whTrace     { from { stroke-dashoffset: 0; }   to { stroke-dashoffset: -100; } }
@keyframes whTraceHead { from { stroke-dashoffset: -12; } to { stroke-dashoffset: -112; } }
/* Deliberate gaps & varying intensity — seamless because 0% == 100% */
@keyframes whTraceBreath {
  0%, 100% { opacity: 0.15; }
  20%      { opacity: 0.95; }
  45%      { opacity: 0.55; }
  60%      { opacity: 0; }
  78%      { opacity: 0.8; }
}

/* ---------- Internal signal path ---------- */
.why-hire-grid .wh-signal {
  position: absolute;
  top: 24px;
  inset-inline-end: 20px;
  width: 120px;
  height: 60px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
html[lang="ar"] .why-hire-grid .wh-signal,
html[dir="rtl"] .why-hire-grid .wh-signal { transform: scaleX(-1); }

.why-hire-grid .wh-signal-line {
  fill: none;
  stroke: rgba(var(--main-rgb), 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.why-hire-grid .wh-signal-pulse {
  fill: none;
  stroke: #ff7d96;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 7;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(var(--main-rgb), 0.9));
  animation: whPulse calc(var(--wh-dur) * 0.62) ease-in-out infinite;
  animation-delay: calc(var(--wh-delay) * -25 + 1.2s);
}
.why-hire-grid .wh-node {
  fill: rgba(var(--main-rgb), 0.35);
  stroke: rgba(var(--main-rgb), 0.55);
  stroke-width: 0.6;
  animation: whNode calc(var(--wh-dur) * 0.62) ease-in-out infinite;
  animation-delay: calc(var(--wh-delay) * -25 + 1.2s);
}
.why-hire-grid .wh-node + .wh-node { animation-name: whNodeEnd; }

@keyframes whPulse {
  0%, 8%   { stroke-dashoffset: 7;   opacity: 0; }
  14%      { opacity: 1; }
  52%      { opacity: 1; }
  58%, 100%{ stroke-dashoffset: -93; opacity: 0; }
}
@keyframes whNode    { 0%, 100% { fill: rgba(var(--main-rgb), 0.3); } 10% { fill: rgba(var(--main-rgb), 0.95); } 30% { fill: rgba(var(--main-rgb), 0.3); } }
@keyframes whNodeEnd { 0%, 50%, 100% { fill: rgba(var(--main-rgb), 0.3); } 58% { fill: rgba(var(--main-rgb), 0.95); } 75% { fill: rgba(var(--main-rgb), 0.3); } }

/* Tiny edge marker / terminal, bottom corner */
.why-hire-grid .wh-corner {
  position: absolute;
  bottom: 14px;
  inset-inline-end: 14px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border-bottom: 1px solid rgba(var(--main-rgb), 0.35);
  border-inline-end: 1px solid rgba(var(--main-rgb), 0.35);
  border-end-end-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.4s ease, width 0.45s var(--wh-ease), height 0.45s var(--wh-ease);
}
.why-hire-grid .wh-corner::after {
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--main);
  box-shadow: 0 0 6px var(--main);
}
html[lang="ar"] .why-hire-grid .wh-corner::after { right: auto; left: -2px; }

/* ---------- Icon frame ---------- */
.why-hire-grid .wh-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--main-rgb), 0.22), transparent 65%),
    rgba(20, 10, 14, 0.7);
  border: 1px solid rgba(var(--main-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px -8px rgba(var(--main-rgb), 0.45);
  transition: transform 0.45s var(--wh-ease), box-shadow 0.45s ease, border-color 0.45s ease;
  opacity: 0;
  translate: 0 8px;
}
.why-hire-grid .why-hire-card.is-visible .wh-icon {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.6s ease calc(var(--wh-delay) + 0.25s), translate 0.7s var(--wh-ease) calc(var(--wh-delay) + 0.25s),
              transform 0.45s var(--wh-ease), box-shadow 0.45s ease, border-color 0.45s ease;
}
/* architectural bracket + connector toward the signal path */
.why-hire-grid .wh-icon::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 17px;
  border: 1px solid rgba(var(--main-rgb), 0.12);
  clip-path: polygon(0 0, 38% 0, 38% 2px, 2px 2px, 2px 38%, 0 38%, 0 100%, 0 100%, 100% 100%, 100% 62%, calc(100% - 2px) 62%, calc(100% - 2px) calc(100% - 2px), 62% calc(100% - 2px), 62% 100%, 0 100%);
  pointer-events: none;
}
.why-hire-grid .wh-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: calc(100% + 6px);
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--main-rgb), 0.45), transparent);
  transform-origin: left center;
  transform: scaleX(0.5);
  opacity: 0.6;
  transition: transform 0.5s var(--wh-ease), opacity 0.4s ease;
  pointer-events: none;
}
html[lang="ar"] .why-hire-grid .wh-icon::after {
  transform-origin: right center;
  background: linear-gradient(270deg, rgba(var(--main-rgb), 0.45), transparent);
}
.why-hire-grid .why-hire-card .wh-icon i {
  margin: 0;
  font-size: 22px;
  color: var(--main);
  filter: drop-shadow(0 0 8px rgba(var(--main-rgb), 0.45));
  transform: none;
  transition: filter 0.45s ease;
}

/* ---------- Typography ---------- */
.why-hire-grid .why-hire-card h3 {
  position: relative;
  z-index: 1;
  color: var(--wh-title);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
}
.why-hire-grid .why-hire-card p {
  position: relative;
  z-index: 1;
  color: var(--wh-text);
  font-size: 13.75px;
  line-height: 1.65;
  margin: 0;
  max-width: 34ch;
}

/* ---------- Hover / focus ---------- */
@media (hover: hover) and (pointer: fine) {
  .why-hire-grid:hover .why-hire-card:not(:hover) {
    opacity: 1;
    filter: saturate(0.75) brightness(0.86);
  }
  .why-hire-grid .why-hire-card:hover {
    --wh-lift: -5px;
    filter: none;
    border-color: rgba(var(--main-rgb), 0.3);
    box-shadow: var(--wh-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .why-hire-grid .why-hire-card:hover::before { opacity: 1.6; }
  .why-hire-grid .why-hire-card:hover .wh-trace-tail { stroke: rgba(var(--main-rgb), 0.5); }
  .why-hire-grid .why-hire-card:hover .wh-icon {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(var(--main-rgb), 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -8px rgba(var(--main-rgb), 0.65);
  }
  .why-hire-grid .why-hire-card:hover .wh-icon i { filter: drop-shadow(0 0 12px rgba(var(--main-rgb), 0.8)); }
  .why-hire-grid .why-hire-card:hover .wh-icon::after { transform: scaleX(1.6); opacity: 1; }
  .why-hire-grid .why-hire-card:hover .wh-signal-line { stroke: rgba(var(--main-rgb), 0.32); }
  .why-hire-grid .why-hire-card:hover .wh-corner { opacity: 1; width: 22px; height: 22px; }
}
.why-hire-grid .why-hire-card:focus-within,
.why-hire-grid .why-hire-card:focus-visible {
  outline: none;
  border-color: rgba(var(--main-rgb), 0.55);
  box-shadow: var(--wh-shadow-hover), 0 0 0 2px rgba(var(--main-rgb), 0.45);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .why-hire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .why-hire-grid .wh-signal { width: 96px; height: 48px; top: 22px; }
}
@media (max-width: 640px) {
  .why-hire-grid { grid-template-columns: 1fr; gap: 14px; }
  .why-hire-grid .why-hire-card { padding: 24px 20px 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .why-hire-grid .wh-icon { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; }
  .why-hire-grid .why-hire-card .wh-icon i { font-size: 19px; }
  .why-hire-grid .wh-signal { width: 78px; height: 39px; top: 20px; inset-inline-end: 16px; opacity: 0.6; }
  .why-hire-grid .wh-trace-head { filter: none; }
  .why-hire-grid .why-hire-card p { max-width: none; }
}

/* ---------- Arabic ---------- */
html[lang="ar"] .why-hire-grid .why-hire-card { text-align: right; align-items: flex-start; }

/* ---------- Light theme ---------- */
html[data-theme="light"] .why-hire-grid {
  --wh-edge: rgba(225, 29, 72, 0.16);
  --wh-edge-hi: rgba(255, 255, 255, 0.8);
  --wh-title: var(--ink, #2a0f18);
  --wh-text: var(--ink-dim, #6b4652);
  --wh-shadow: 0 14px 34px -16px rgba(122, 12, 46, 0.22), 0 1px 3px rgba(122, 12, 46, 0.06);
  --wh-shadow-hover: 0 22px 44px -16px rgba(122, 12, 46, 0.3), 0 0 0 1px rgba(225, 29, 72, 0.2), 0 0 26px -8px rgba(255, 77, 109, 0.3);
}
html[data-theme="light"] .why-hire-grid .why-hire-card,
html[data-theme="light"] .why-hire-grid .why-hire-card:hover {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
    linear-gradient(155deg, rgba(255, 236, 241, 0.9) 0%, rgba(255, 220, 230, 0.75) 100%) !important;
  background-color: #fff0f4 !important;
  border: 1px solid var(--wh-edge) !important;
  box-shadow: var(--wh-shadow), inset 0 1px 0 var(--wh-edge-hi) !important;
}
html[data-theme="light"] .why-hire-grid .why-hire-card:hover {
  border-color: rgba(225, 29, 72, 0.3) !important;
  box-shadow: var(--wh-shadow-hover), inset 0 1px 0 var(--wh-edge-hi) !important;
}
html[data-theme="light"] .why-hire-grid .why-hire-card::before {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
}
html[data-theme="light"] .why-hire-grid .wh-icon {
  background: radial-gradient(circle at 30% 25%, rgba(255, 77, 109, 0.18), transparent 65%), rgba(255, 255, 255, 0.75);
  border-color: rgba(225, 29, 72, 0.2);
}
html[data-theme="light"] .why-hire-grid .wh-trace-head { stroke: #e11d48; }
html[data-theme="light"] .why-hire-grid .wh-signal-pulse { stroke: #e11d48; }
html[data-theme="light"] .why-hire-grid .why-hire-card h3 { color: var(--wh-title) !important; -webkit-text-fill-color: var(--wh-title) !important; }
html[data-theme="light"] .why-hire-grid .why-hire-card p  { color: var(--wh-text) !important;  -webkit-text-fill-color: var(--wh-text) !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .why-hire-grid .why-hire-card,
  .why-hire-grid .why-hire-card.slide-in-up {
    opacity: 1 !important;
    translate: none !important;
    transform: none !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  .why-hire-grid .why-hire-card::before,
  .why-hire-grid .wh-trace-tail,
  .why-hire-grid .wh-trace-head,
  .why-hire-grid .wh-signal-pulse,
  .why-hire-grid .wh-node { animation: none !important; }
  .why-hire-grid .wh-trace-tail,
  .why-hire-grid .wh-trace-head,
  .why-hire-grid .wh-signal-pulse { opacity: 0 !important; }
  .why-hire-grid .wh-trace-base { stroke: rgba(var(--main-rgb), 0.12); }
  .why-hire-grid .wh-trace { opacity: 1; transition: none; }
  .why-hire-grid .wh-icon,
  .why-hire-grid .why-hire-card .wh-icon { opacity: 1; translate: none; transform: none !important; transition: none; }
}