/* Services — capability architecture. */
.wl-service-principle { margin-top: 34px; min-height: 126px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 22px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wl-service-principle > div { display: grid; gap: 7px; }
.wl-service-principle span { color: var(--mid); font-size: calc(8px * var(--text-scale)); letter-spacing: .1em; text-transform: uppercase; }
.wl-service-principle strong { font-size: calc(14px * var(--text-scale)); font-weight: 600; }
.wl-service-principle > i { color: var(--sky); font-style: normal; }
.wl-service-catalog { padding-block: clamp(100px,11vw,160px); }
.wl-service-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding: 1px; background: var(--line); }
.wl-service-card { min-height: 430px; padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; background: var(--surface); transition: background .22s, transform .22s, box-shadow .22s; }
.wl-service-card:nth-child(4n/**/+1) { background: color-mix(in srgb,var(--surface) 94%,var(--sky)); }
.wl-service-card:hover { z-index: 2; transform: translateY(-3px); box-shadow: 0 20px 48px rgba(var(--shadow-ink-rgb),.1); }
.wl-service-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--mid); font-size: 9px; letter-spacing: .1em; }
.wl-service-card-top b { color: var(--ink); font-size: 18px; font-weight: 400; }
.wl-service-card h3 { max-width: 650px; margin: clamp(56px,6vw,90px) 0 16px; font-size: clamp(calc(27px * var(--title-scale)),calc(3vw * var(--title-scale)),calc(45px * var(--title-scale))); line-height: 1.04; letter-spacing: -.05em; font-weight: 610; }
.wl-service-card > p { max-width: 600px; margin: 0; color: var(--gray); font-size: calc(13px * var(--text-scale)); line-height: 1.7; }
.wl-service-card ul { margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; color: var(--gray); }
.wl-service-card li { padding-left: 11px; position: relative; font-size: calc(9px * var(--text-scale)); }
.wl-service-card li::before { content:""; position:absolute; left:0; top:.72em; width:4px; height:4px; background:var(--sky); transform:rotate(45deg); }
.wl-service-card > a { margin-top: auto; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--blue); font-size: calc(10px * var(--text-scale)); font-weight: 650; }
.wl-engineering-layer { padding-block: clamp(100px,11vw,160px); background: var(--graphite); color: var(--inverse-text); }
.wl-engineering-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(var(--inverse-text-rgb),.16); border-left: 1px solid rgba(var(--inverse-text-rgb),.16); }
.wl-engineering-grid > div { min-height: 145px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; border-right: 1px solid rgba(var(--inverse-text-rgb),.16); border-bottom: 1px solid rgba(var(--inverse-text-rgb),.16); transition: background .18s, transform .15s; }
.wl-engineering-grid > div:hover { background: rgba(var(--inverse-action-rgb),.08); transform: translateY(-2px); }
.wl-engineering-grid span { color: var(--sky); font-size: 8px; letter-spacing: .1em; }
.wl-engineering-grid strong { max-width: 210px; font-size: calc(12px * var(--text-scale)); line-height: 1.45; font-weight: 540; }
[data-theme="dark"] .wl-service-card > p,[data-theme="dark"] .wl-service-card ul { color: var(--dark-text-muted); }
@media (max-width: 980px) { .wl-engineering-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .wl-service-principle { padding-block: 24px; grid-template-columns: 1fr; gap: 16px; }
  .wl-service-principle > i { transform: rotate(90deg); transform-origin: left; }
  .wl-service-grid { grid-template-columns: 1fr; }
  .wl-service-card { min-height: 380px; }
  .wl-engineering-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .wl-engineering-grid { grid-template-columns: 1fr; } }
