.services-alternative { padding: 80px 0; background: #f2faff; color: #112c5b; }
.alternative-row { display: flex; gap: 20px; margin-top: 32px; }
.alternative-row:first-of-type { margin-top: 48px; }
.alternative-card { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0; height: 470px; border-radius: 24px; background: #cbe9fb; transition: flex-grow 600ms cubic-bezier(.22,1,.36,1); }
.alternative-card:nth-child(2) { background: #e4ddf8; }
.alternative-card:nth-child(3) { background: #d9eee6; }
.alternative-card:nth-child(4) { background: #ffead7; }
.alternative-card.is-active { flex-grow: 2.1; }
.alternative-card > img { position: absolute; inset: auto 0 0; width: 100%; height: 330px; max-width: none; object-fit: cover; object-position: center; z-index: -1; }
.alternative-trigger { position: absolute; inset: 0; z-index: 1; width: 100%; cursor: pointer; border-radius: inherit; }
.alternative-trigger:focus-visible { outline: 3px solid #1c5fba; outline-offset: -5px; }
.alternative-copy { margin: 15px; padding: 18px 12px; border-radius: 16px; transition: background 300ms; }
.alternative-copy h3 { font-size: 20px; font-weight: 700; line-height: 1.5; }
.alternative-copy p { font-size: 14px; line-height: 1.8; margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 250ms, max-height 400ms; }
.alternative-card.is-active .alternative-copy { background: #fff; }
.alternative-card.is-active .alternative-copy p { max-height: 150px; opacity: 1; }
.alternative-link { position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg,#18afe7,#1c5fba); color: white; font-size: 14px; font-weight: 700; white-space: nowrap; }
.alternative-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.alternative-link span { display: none; }
.alternative-card.is-active .alternative-link { width: auto; padding: 0 22px; border-radius: 0; clip-path: polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 12px)); }
.alternative-card.is-active .alternative-link span { display: inline; }
/* The shared primary action follows the angular navigation button. */
body .site-primary-button { border-radius: 0; border: 0; color: #fff; background: linear-gradient(135deg,#18afe7,#1c5fba); clip-path: polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 12px)); box-shadow: none; }
body .site-primary-button:hover { color: #fff; background: linear-gradient(135deg,#18afe7,#1c5fba); filter: brightness(1.1); }
body .site-primary-button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #112c5b; }
.feedback-section { overflow: hidden; padding: 80px 0; background: #ecf4fa; color: #112c5b; }
.feedback-window { overflow: hidden; margin-top: 48px; direction: ltr; }
.feedback-track { display: flex; width: max-content; direction: ltr; animation: feedback-scroll 75s linear infinite; }
.feedback-group { display: flex; gap: 16px; padding-right: 16px; }
.feedback-card { display: flex; flex-direction: column; flex: 0 0 292px; width: 292px; min-height: 286px; padding: 24px; background: white; box-shadow: 0 1px 2px rgb(17 44 91 / 6%); }
.feedback-quote { color: #7ed4fa; width: 28px; height: 28px; margin-bottom: 20px; }
.feedback-card blockquote { flex: 1; font-size: 16px; line-height: 1.8; }
.feedback-stars { color: #ffb800; letter-spacing: 4px; margin-top: 12px; }
.feedback-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #edf0f3; }
.feedback-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background-image: url('../images/testimonials/saudi-avatars.png'); background-size: 400% 400%; background-position: var(--avatar-x) var(--avatar-y); }
.feedback-card figcaption strong { display: block; font-size: 16px; }
.feedback-card figcaption small { color: #64748b; }
.feedback-toggle { display: block; margin: 24px auto 0; padding: 8px 18px; border: 1px solid #b6cee2; border-radius: 30px; font-size: 13px; }
.feedback-window:hover .feedback-track, .feedback-window:focus-within .feedback-track, .feedback-section.is-paused .feedback-track { animation-play-state: paused; }
@keyframes feedback-scroll { to { transform: translateX(-50%); } }
@media (max-width: 1023px) { .alternative-row { flex-wrap: wrap; } .alternative-card { flex: 1 1 calc(50% - 20px); } .alternative-card.is-active { flex-grow: 1; } }
@media (max-width: 639px) { .alternative-row { gap: 14px; } .alternative-card { flex-basis: 100%; height: 470px; } .alternative-copy p { max-height: 150px; opacity: 1; } .alternative-copy { background: rgb(255 255 255 / 78%); } .feedback-card { flex-basis: 280px; width: 280px; } }
@media (prefers-reduced-motion: reduce) { .alternative-card, .alternative-card > img, .alternative-copy, .alternative-copy p { transition: none; } .feedback-track { animation: none; } .feedback-window { overflow-x: auto; } .feedback-group[aria-hidden] { display: none; } }

.showcase-card.is-active .showcase-link { border-radius: 0; clip-path: polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 12px)); }