/* Services accordion — layout as on the live site: number | image | title + text */
.services { position: relative; isolation: isolate; }
.service { background: #ecebf0; border-block-end: var(--border-width) solid color-mix(in srgb, var(--color-primary) 18%, transparent); transition: background-color 0.6s var(--ease-out), color 0.6s var(--ease-out); }
.service:first-child { border-block-start: var(--border-width) solid color-mix(in srgb, var(--color-primary) 18%, transparent); }
.service.is-open { background: var(--color-primary); color: var(--color-bg); }
.service__grid { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-5); }
.service__heading { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: inherit; color: inherit; }
.service__toggle { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; width: 100%; padding: var(--space-5) 0; background: none; border: 0; color: inherit; text-align: start; cursor: pointer; }
.service__num { font-size: var(--text-2xl); font-weight: var(--weight-heavy, 900); line-height: 1; min-width: 2.6ch; }
.service__title { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1.15; transition: color 0.5s var(--ease-out), font-size 0.5s var(--ease-out), transform 0.4s var(--ease-out); }
.service__toggle:hover .service__title { color: var(--color-secondary); transform: translateX(-6px); }
.service.is-open .service__title { color: var(--color-secondary); font-size: calc(var(--text-xl) * 1.12); font-weight: var(--weight-bold); transform: none; }
.service__panel { display: contents; }
.service__panel[hidden] { display: none; }
.service__media { grid-column: 1 / -1; padding-block-end: var(--space-5); }
.service__media img { width: 100%; aspect-ratio: 395 / 258; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--color-secondary) 80%, transparent); }
.service__copy { grid-column: 1 / -1; padding-block-end: var(--space-7); font-size: 0.94em; }
.service__lead { margin-block-end: var(--space-2); }
.service__text { opacity: 0.8; margin-block-end: var(--space-5); }
.service .tag { color: inherit; }

@media (min-width: 900px) {
	/* RTL: number on the right, image in the middle, title and text on the left */
	.service__grid { grid-template-columns: minmax(6rem, 0.6fr) 1fr 1fr; column-gap: var(--space-6); padding-inline-end: 6%; }
	.service__num { align-self: start; }
	.service__title { grid-column: 3; }
	.service__media { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-block: var(--space-6); }
	.service__copy { grid-column: 3; grid-row: 2; align-self: start; max-width: 32rem; }
	.service.is-open .service__toggle { padding-block-end: var(--space-3); }
}

/* Content fades in softly while the row grows (height is animated in main.js) */
.js .service.is-opening .service__media { animation: service-in 0.8s var(--ease-out) both 0.1s; }
.js .service.is-opening .service__copy { animation: service-in 0.8s var(--ease-out) both 0.2s; }
@keyframes service-in { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }