/* ==========================================================================
   Our Services — desktop (1440 x 5238) and mobile (402 x 2344)
   ========================================================================== */

.page--services {
  height: auto; background: #f5f5f5;
  --wash-fade: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(-0.0854 0.5519 -0.5519 -0.5302 0.8382 0.1592)'><stop stop-color='rgb(245,245,245)' stop-opacity='0' offset='0.13982'/><stop stop-color='rgb(245,245,245)' offset='1'/></radialGradient></defs></svg>");
}

/* Header wash: image 129 in luminosity, fading into the page colour */
.wash { position: absolute; left: 0; top: 0; width: 1440px; height: 692px; overflow: hidden; mix-blend-mode: luminosity; }
.wash img { width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.wash::after { content: ""; position: absolute; inset: 0; background: var(--wash-fade); }

/* Grey nav variant (NavBar component, "Dark" theme) */
.nav--grey { color: #595959; }
.nav--grey .nav__link { top: 52px; line-height: 16px; text-transform: none; }
.nav--grey .nav__link--about { left: 72px; }
.nav--grey .nav__link--how { left: 318px; }
.nav--grey .nav__link--careers { left: 1076px; top: 56px; }
.nav--grey .nav__contact { top: 56px; right: 72px; padding: 4px 0; line-height: 16px; border-bottom-color: #595959; text-transform: none; }
.nav--grey .nav__logo { left: 618px; top: 54px; }
.nav--grey .nav__tagline { left: 643px; top: 90px; color: var(--black); }

.ghost-title {
  position: absolute; left: 76px; top: 156px; width: 1288px;
  font-size: 228px; line-height: 1; text-transform: capitalize; text-align: center; white-space: nowrap;
  color: transparent; opacity: .12;
  background: var(--ghost-gradient-gray);
  -webkit-background-clip: text; background-clip: text;
}
.services__lead { position: absolute; left: 123px; top: 352px; width: 1194px; font-size: 32px; line-height: 36px; text-align: center; color: var(--black); }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.services__list { position: relative; display: grid; gap: 32px; padding: 508px 76px 56px; }
.services__empty { text-align: center; padding: 48px; }
.svc-row { position: relative; display: grid; gap: 32px; grid-template-columns: 1fr 584px; width: 1288px; min-height: 416px; padding: 16px; border-radius: 36px; overflow: hidden; background: var(--white); color: var(--black); }
.svc-row--img-left { grid-template-columns: 584px 1fr; }
.svc-row__lines { position: absolute; width: 344.5px; height: 772.869px; pointer-events: none; }
.svc-row__lines--a { left: 344.5px; top: -168.87px; }
.svc-row__lines--b { left: 0; top: -188px; }
.svc-row__photo { position: relative; width: 584px; height: 384px; border-radius: 20px; overflow: hidden; }
.svc-row--img-right .svc-row__photo { order: 2; }
.svc-row__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-row__body { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 24px; min-width: 0; }
.svc-row__title { font-size: 36px; line-height: 40px; font-weight: 600; overflow-wrap: anywhere; }
.svc-row__desc { font-size: 18px; line-height: 20px; opacity: .76; overflow-wrap: anywhere; }
.svc-row__cta { width: 272px; margin-top: 8px; }
.page--services .footer { position: relative; bottom: auto; height: 658px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 899px) {
  .page--services {
    height: auto;
    --wash-fade: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='objectBoundingBox' cx='0' cy='0' r='1' gradientTransform='matrix(-0.0100 0.5399 -0.5960 -0.4245 0.8507 0.4441)'><stop stop-color='rgb(245,245,245)' stop-opacity='0' offset='0'/><stop stop-color='rgb(245,245,245)' offset='1'/></radialGradient></defs></svg>");
  }
  .wash { left: 50%; width: 402px; height: 376px; transform: translateX(-50%); }
  .services__tagline { position: absolute; left: 0; top: 104px; width: 100%; font-size: 12px; line-height: 16px; text-align: center; text-transform: capitalize; color: var(--black); white-space: nowrap; }
  .ghost-title { left: 50%; top: 184px; width: 354px; transform: translateX(-50%); font-size: 60px; }
  .services__lead { left: 50%; top: 236px; width: 314px; transform: translateX(-50%); font-size: 14px; line-height: 16px; }

  .services__list { padding: 324px 24px 80px; gap: 24px; }
  .svc-row { display: flex; flex-direction: column; width: 354px; min-height: 0; padding: 8px; gap: 0; border-radius: 24px; }
  .svc-row__photo, .svc-row--img-right .svc-row__photo { order: 0; width: 338px; height: 184px; border-radius: 16px; }
  .svc-row__body { width: 338px; padding: 20px 12px 16px; gap: 12px; }
  .svc-row__title { font-size: 20px; line-height: 24px; }
  .svc-row__desc { font-size: 12px; line-height: 16px; }
  .svc-row__cta { width: 100%; margin-top: 4px; padding: 14px 32px; font-size: 14px; }
  .svc-row__cta img { width: 16px; height: 16px; }
  .page--services .footer-m { position: relative; left: auto; bottom: auto; margin: 0 auto; }
}

/* Design: footer starts 72px below the last card (56 + 16) */
.services__list { padding-bottom: 72px; }
@media (max-width: 899px) { .services__list { padding-bottom: 80px; } }