/* =====================================================================
   Alsudais — services page
   ===================================================================== */

/* ---------- Intro: statement + stats ---------- */
.svc-intro { padding-block: clamp(56px, 7vw, 100px) 0; }
.svc-intro__inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.svc-intro .manifesto { margin: 0; }
.svc-intro__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.stat--ink { padding-inline-start: 18px; border-inline-start: 1px solid var(--c-line-2); }
.stat--ink .stat__num { color: var(--c-ink); font-size: clamp(2rem, 3vw, 2.8rem); }
.stat--ink .stat__label { color: var(--c-text); }
@media (max-width: 900px) { .svc-intro__inner { grid-template-columns: 1fr; } }

/* ---------- Core services: feature rows ---------- */
.svc-mains--v2 { padding-block: var(--section); }
.svc-feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(24px, 4vw, 56px); }
.svc-feature + .svc-feature { border-top: 1px solid var(--c-line); }
.svc-feature--alt .svc-feature__media { order: 2; }
.svc-feature__media { position: relative; aspect-ratio: 5/4; border-radius: 14px; overflow: hidden; background: var(--c-ink); }
.svc-feature__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: saturate(0.72) contrast(1.06); }
.svc-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39,42,51,0.05), rgba(3,5,10,0.55)); }
.svc-feature__num { position: absolute; inset-inline-start: 28px; bottom: 18px; z-index: 2; font-family: var(--font-en); font-weight: 200; font-size: clamp(4rem, 9vw, 8rem); line-height: 1; letter-spacing: -0.05em; color: #fff; opacity: 0.9; }
.svc-feature__icon { position: absolute; top: 22px; inset-inline-end: 22px; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.14); backdrop-filter: blur(8px); color: #fff; }
.svc-feature__icon .ico { width: 24px; height: 24px; }
.svc-feature__points { margin: 22px 0 28px; display: grid; gap: 12px; }
.svc-feature__points li { position: relative; padding-inline-start: 28px; color: var(--c-ink); line-height: 1.7; }
.svc-feature__points li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.75em; width: 14px; height: 1px; background: var(--c-slate); }
.svc-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.svc-feature__actions .link-arrow { margin-top: 0; }
@media (max-width: 900px) {
	.svc-feature { grid-template-columns: 1fr; }
	.svc-feature--alt .svc-feature__media { order: 0; }
}

/* ---------- Promise strip ---------- */
.promise { padding-block: clamp(48px, 6vw, 88px); background: var(--c-paper); }
.promise__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promise__item { padding: 28px 30px; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.promise__item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(39,42,51,0.08); }
.promise__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--c-ink); color: #fff; margin-bottom: 18px; }
.promise__icon .ico { width: 22px; height: 22px; }
.promise__title { font-size: 1.15rem; margin-bottom: 6px; }
.promise__item p { margin: 0; color: var(--c-text); font-size: 0.95rem; }
@media (max-width: 760px) { .promise__grid { grid-template-columns: 1fr; } }

/* The mosaic on the services page sits on white, so let the tiles carry the contrast. */
.page-template-page-services .gallery--mosaic { background: #fff; }