#vision.home-orientation {
  padding-top: 84px;
  padding-bottom: 88px;
  color: #0a1628;
  background: linear-gradient(135deg, #f1f6f9 0%, #f5fafb 52%, #f2faf8 100%);
}

.home-orientation *,
.home-orientation *::before,
.home-orientation *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

.home-orientation-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.orientation-intro { min-width: 0; }
.orientation-intro .kicker { margin-bottom: 22px; font-size: 12px; color: #37647d; opacity: 1; }
.orientation-intro h2 { margin: 0; font-size: 44px; line-height: 1.12; font-weight: 300; }
.home-orientation .orientation-intro > p { max-width: 43ch; margin: 24px 0 0; color: #46657a; font-size: 18px; line-height: 1.7; }
.orientation-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin-top: 30px; }
.orientation-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50px;
  max-width: 100%;
  padding: 14px 22px;
  border: 1px solid #123b50;
  border-radius: 999px;
  background: #123b50;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  text-align: center;
  text-decoration: none;
}
.orientation-note { color: #526b7b; font-size: 13px; line-height: 1.5; }

.home-orientation #approche { margin: 0; scroll-margin-top: 110px; }
.orientation-services { display: grid; gap: 10px; min-width: 0; list-style: none; }
.orientation-services > li { min-width: 0; }
.orientation-service {
  --orientation-accent: #0077c8;
  --orientation-tint: #e8f3fc;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  gap: 17px;
  align-items: center;
  min-height: 80px;
  padding: 15px 20px;
  border: 1px solid rgba(32, 94, 125, .14);
  border-left: 3px solid var(--orientation-accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, .76);
  color: #0a1628;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(23, 65, 88, .025);
  transition: transform .46s cubic-bezier(.22, 1, .36, 1), background-color .42s ease, border-color .42s ease, box-shadow .46s ease;
}
.orientation-service.avs { --orientation-accent: #c81c66; --orientation-tint: #fcebf2; }
.orientation-service.lpp { --orientation-accent: #7054d6; --orientation-tint: #f0edfc; }
.orientation-service.pillar { --orientation-accent: #008878; --orientation-tint: #e4f5f0; }
.orientation-service.plan { --orientation-accent: #b85b20; --orientation-tint: #fff0e5; }
.orientation-service-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--orientation-tint); color: var(--orientation-accent); }
.orientation-service-copy { min-width: 0; }
.orientation-service h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.home-orientation .orientation-service p { margin: 3px 0 0; color: #506b7c; font-size: 14px; line-height: 1.5; }
.orientation-icon { display: inline-block; flex: 0 0 auto; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--orientation-icon) center / contain no-repeat; mask: var(--orientation-icon) center / contain no-repeat; }
.orientation-icon-avs { --orientation-icon: url("icons/file-check-2.svg"); }
.orientation-icon-lpp { --orientation-icon: url("icons/search.svg"); }
.orientation-icon-pillar { --orientation-icon: url("icons/wallet.svg"); }
.orientation-icon-plan { --orientation-icon: url("icons/route.svg"); }
.orientation-icon-workshop { --orientation-icon: url("icons/presentation.svg"); }
.orientation-icon-next { --orientation-icon: url("icons/arrow-right.svg"); width: 19px; height: 19px; }
.orientation-service-arrow { --orientation-icon: url("icons/arrow-up-right.svg"); width: 20px; height: 20px; color: var(--orientation-accent); transition: transform .46s cubic-bezier(.22, 1, .36, 1); }

.orientation-service:focus-visible,
.orientation-actions .button:focus-visible { outline: 3px solid #0077c8; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .orientation-service:hover { transform: translateY(-2px); border-color: var(--orientation-accent); background: #fff; box-shadow: 0 12px 28px rgba(23, 65, 88, .09); }
  .orientation-service:hover .orientation-service-arrow { transform: translate(2px, -2px); }
  .orientation-actions .button:hover { background: #1b536d; border-color: #1b536d; }
}
@media (max-width: 1180px) {
  .orientation-intro h2 { font-size: 36px; }
  .home-orientation-grid { gap: 36px; }
  .orientation-service { gap: 13px; padding: 14px 16px; }
}
@media (max-width: 820px) {
  #vision.home-orientation { padding-top: 64px; padding-bottom: 68px; }
  .home-orientation-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .home-orientation .orientation-intro > p { max-width: 56ch; font-size: 17px; }
  .orientation-intro .kicker { margin-bottom: 16px; }
  .orientation-actions { margin-top: 24px; }
}
@media (max-width: 480px) {
  #vision.home-orientation { padding-top: 52px; padding-bottom: 56px; }
  .orientation-intro h2 { font-size: 32px; }
  .home-orientation .orientation-intro > p { margin-top: 18px; font-size: 16px; }
  .orientation-service { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; padding: 14px 12px; }
  .orientation-service-icon { width: 40px; height: 40px; }
  .orientation-service h3 { font-size: 16px; }
  .orientation-service-arrow { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .orientation-service, .orientation-service-arrow, .orientation-actions .button { transition: none; transform: none; }
}