/* DS-022. Warm Makani service cards, expressive vectors and balanced statistics. */
#pg-home .hv2 { padding-block: 48px 64px; min-height: calc(100svh - 112px); }
#pg-home .hv2-inner {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  grid-template-areas: "intro paths" "stats paths";
  gap: 28px 56px;
}
#pg-home .hv2-content { grid-area: intro; min-width: 0; }
#pg-home .hv2-desc { margin-bottom: 16px; }
#pg-home .hero-how {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: #e3e5e9; font: 700 14px/1.6 var(--font-display);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 5px;
  transition: color var(--dur-fast) var(--ease-out);
}
#pg-home .hero-how:hover { color: #ffb58b; }
#pg-home .hero-how:focus-visible { outline: 3px solid #ffbe99; outline-offset: 4px; border-radius: var(--radius-sm); }

#pg-home .hero-paths {
  grid-area: paths; display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 10px;
  --path-direction: 1;
}
#pg-home .hero-paths:dir(rtl) { --path-direction: -1; }
#pg-home .hero-path {
  position: relative; display: grid; grid-template-columns: 104px minmax(0,1fr) 24px;
  align-items: center; gap: 14px; width: 100%; min-height: 140px; padding: 18px;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg,16px);
  background: var(--path-color); color: var(--path-ink,#0E1218);
  box-shadow: 0 5px 18px rgba(0,0,0,.12); text-align: start; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 400ms var(--ease-out), filter 400ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
#pg-home .hero-path--fixed { --path-color: #A74425; --path-ink: #FFF9F4; --path-copy: #FFEADC; --art-phase: 0s; }
#pg-home .hero-path--temporary { --path-color: #F4D8C6; --path-copy: #4C443F; --art-phase: -1.5s; }
#pg-home .hero-path--market { --path-color: #E8E1D7; --path-copy: #4C443F; --art-phase: -3s; }
#pg-home .hero-path__art {
  display: grid; place-items: center; width: 104px; height: 90px;
  border-radius: 14px; background: #FFF3E9;
  transition: transform 280ms var(--ease-out);
}
#pg-home .hero-path__image { display: block; width: 100px; height: 78px; object-fit: contain; }
#pg-home .hero-path__copy { display: grid; gap: 5px; min-width: 0; }
#pg-home .hero-path__title { font: 800 17px/1.55 var(--font-display,'Cairo',sans-serif); }
#pg-home .hero-path__desc { color: var(--path-copy); font: 400 14px/1.65 var(--font-body,'IBM Plex Sans Arabic',sans-serif); }
#pg-home .hero-path__desc-short { display: none; }
#pg-home .hero-path__arrow {
  width: 24px; height: 24px; padding: 3px; border: 1px solid currentColor; border-radius: var(--radius-pill);
  transform: scaleX(var(--path-direction)); transition: transform 240ms var(--ease-out);
}
#pg-home .hero-path:focus-visible { z-index: 2; outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px #0e1218; transform: scale(1.035); }
#pg-home .hero-path:focus-visible .hero-path__arrow { transform: scaleX(var(--path-direction)) translateX(3px); }
#pg-home .hero-path:active, #pg-home .hero-path.is-pressed {
  transform: scale(.98); box-shadow: inset 0 0 0 2px currentColor;
  transition-duration: 80ms;
}
#pg-home .hero-path:active .hero-path__art, #pg-home .hero-path.is-pressed .hero-path__art { transform: translateY(2px) rotate(-2deg); transition-duration: 80ms; }
@media (hover:hover) and (pointer:fine) {
  #pg-home .hero-path:hover { z-index: 1; transform: scale(1.045); box-shadow: 0 12px 28px rgba(0,0,0,.24); }
  #pg-home .hero-paths:has(.hero-path:hover):not(:focus-within) > .hero-path:not(:hover) { transform: scale(.97); filter: blur(1.6px); }
  #pg-home .hero-path:hover .hero-path__arrow { transform: scaleX(var(--path-direction)) translateX(3px); }
  #pg-home .hero-path:hover .hero-path__art { transform: translateY(-2px) rotate(-2deg); }
  #pg-home .hero-path:active, #pg-home .hero-path.is-pressed { transform: scale(.98); }
}
@media (prefers-reduced-motion:no-preference) {
  #pg-home .hero-paths { animation: hero-paths-enter 420ms var(--ease-out) both; }
  #pg-home .hero-path__image { animation: hero-art-float 4.6s ease-in-out infinite; animation-delay: var(--art-phase); }
}
@keyframes hero-paths-enter { from { opacity:.5; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-art-float { 0%,100% { transform:translateY(1px); } 50% { transform:translateY(-2px); } }

/* Replace physical flex padding and separator margins with equal, shrinkable tracks. */
#pg-home .hv2-stats {
  grid-area: stats; display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: start; width: 100%; max-width: 500px; gap: 0;
  padding-block-start: 18px; border-block-start: 1px solid rgba(255,255,255,.12);
}
#pg-home .hv2-stat { display: flex; flex-direction: column; align-items: center; min-width: 0; gap: 4px; padding: 0 8px; text-align: center; }
#pg-home .hv2-stat:not(:first-child) { border-inline-start: 1px solid rgba(255,255,255,.12); }
#pg-home .hv2-stat-sep { display: none; }
#pg-home .hv2-stat-n { color: #fff; font: 900 30px/1.4 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
#pg-home .hv2-stat-l { max-width: 100%; color: #B7BCC5; font: 500 12px/1.6 var(--font-display); }
@media (max-width:1100px) and (min-width:981px) {
  #pg-home .hv2-inner { gap: 28px 32px; grid-template-columns: minmax(0,1fr) 400px; }
  #pg-home .hv2-h1 { font-size: 52px; }
  #pg-home .hero-path { grid-template-columns: 86px minmax(0,1fr) 22px; gap: 12px; padding: 16px; }
  #pg-home .hero-path__art { width: 86px; height: 82px; }
  #pg-home .hero-path__image { width: 84px; height: 70px; }
}
@media (max-width:980px) {
  #pg-home .hv2 { padding-block: 36px 48px; min-height: auto; }
  #pg-home .hv2-inner { grid-template-columns: minmax(0,1fr); grid-template-areas: "intro" "paths" "stats"; gap: 24px; }
  #pg-home .hv2-eyebrow { margin-bottom: 20px; }
  #pg-home .hv2-h1 { margin-bottom: 18px; }
  #pg-home .hv2-desc { margin-bottom: 8px; }
  #pg-home .hero-paths { max-width: 600px; padding: 0; gap: 12px; }
  #pg-home .hero-path { min-height: 112px; padding: 14px 18px; grid-template-columns: 84px minmax(0,1fr) 24px; }
  #pg-home .hero-path__art { width: 84px; height: 72px; }
  #pg-home .hero-path__image { width: 82px; height: 66px; }
}
@media (max-width:640px) {
  #pg-home .hv2 { padding-block: 28px 36px; }
  #pg-home .hv2-inner { gap: 20px; }
  #pg-home .hv2-eyebrow { margin-bottom: 16px; }
  #pg-home .hv2-h1 { margin-bottom: 16px; }
  #pg-home .hv2-desc { font-size: 15px; line-height: 1.8; }
  #pg-home .hero-path { grid-template-columns: 68px minmax(0,1fr) 22px; gap: 10px; min-height: 96px; padding: 12px; }
  #pg-home .hero-path__art { width: 68px; height: 64px; border-radius: 10px; }
  #pg-home .hero-path__image { width: 66px; height: 56px; }
  #pg-home .hero-path__title { font-size: 16px; }
  #pg-home .hero-path__desc { font-size: 13px; line-height: 1.6; }
  #pg-home .hero-path__desc-full { display: none; }
  #pg-home .hero-path__desc-short { display: inline; }
  #pg-home .hero-path__arrow { width: 22px; height: 22px; padding: 3px; }
  #pg-home .hv2-stats { max-width: none; padding-block-start: 14px; }
  #pg-home .hv2-stat { padding-inline: 6px; }
  #pg-home .hv2-stat-n { font-size: 26px; }
  #pg-home .hv2-stat-l { font-size: 11px; }
}
@media (max-width:360px) {
  #pg-home .hero-path { grid-template-columns: 58px minmax(0,1fr) 20px; gap: 9px; }
  #pg-home .hero-path__art { width: 58px; height: 60px; }
  #pg-home .hero-path__image { width: 58px; height: 52px; }
  #pg-home .hero-path__title { font-size: 15px; }
}
@media (prefers-reduced-motion:reduce) {
  #pg-home .hero-paths, #pg-home .hero-path, #pg-home .hero-path__arrow, #pg-home .hero-path__art, #pg-home .hero-path__image { animation:none; transition:none; }
  #pg-home .hero-path, #pg-home .hero-path__art, #pg-home .hero-path__image { transform:none !important; filter:none !important; }
  #pg-home .hero-path__arrow { transform:scaleX(var(--path-direction)) !important; }
}
@media (forced-colors:active) {
  #pg-home .hero-path { border:2px solid LinkText; }
  #pg-home .hero-path:focus-visible { outline-color:Highlight; }
}