/* Services index and service detail pages. Type comes from the .t-* classes in type.css. */
.svc-page { color: var(--otl-ink); }

/* Detail hero: panel colour, as in the home accordion */
.svc-hero { background: var(--svc-bg); color: var(--color-on-accent); padding: 10rem 0 4rem; }
.svc-hero:not(.is-dark) { color: var(--otl-ink); }
.svc-hero__inner { display: grid; gap: 1.5rem; }
.svc-hero__crumb { color: inherit; opacity: .7; text-decoration: none; }
.svc-hero__title { max-width: 20ch; font-size: clamp(2.25rem, 4.6vw, 4rem); overflow-wrap: break-word; }
.svc-hero__lead { max-width: 40rem; opacity: .9; }

/* Image and intro */
.svc-intro { display: grid; gap: 2rem; padding-top: 4rem; padding-bottom: 4rem; }
.svc-intro__media { margin: 0; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--otl-card); }
.svc-intro__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-intro__text { display: grid; gap: 1.25rem; align-content: center; }
.svc-intro__body { color: var(--otl-ink); }

/* Numbered capabilities */
.svc-caps { padding-bottom: 4rem; }
.svc-caps__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(34, 34, 34, .2); }
.svc-cap { display: grid; gap: .75rem; padding: 2rem 0; border-bottom: 1px solid rgba(34, 34, 34, .2); }
.svc-cap__num { color: var(--otl-muted); }
.svc-cap__text { color: var(--otl-text); max-width: 36rem; }

/* Next service */
.svc-next { padding-bottom: 5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .svc-next { grid-template-columns: 1fr 1fr; } }
.svc-next__link--prev { grid-template-columns: auto 1fr; }
.svc-next__link--prev { text-align: right; }
.svc-next__link--prev .svc-next__label { grid-column: 1 / -1; text-align: right; }
.svc-next__link--prev .svc-next__arrow { grid-column: 1; justify-self: start; }
.svc-next__link--prev .svc-next__name { grid-column: 2; text-align: right; justify-self: end; }
.svc-next__link--prev:hover .svc-next__arrow { transform: translateX(-.5rem); }
.svc-next__link { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: end; padding: 2rem 1.5rem; border-radius: 1.25rem; background: var(--svc-bg); color: var(--otl-ink); text-decoration: none; transition: transform .4s var(--otl-ease-expo, ease); }
.svc-next__label { grid-column: 1 / -1; opacity: .7; }
.svc-next__name { overflow-wrap: break-word; }
.svc-next__arrow { font-size: 2rem; line-height: 1; transition: transform .4s var(--otl-ease-expo, ease); }
.svc-next__link:hover .svc-next__arrow { transform: translateX(.5rem); }
.svc-next__link[style*="service-1"], .svc-next__link[style*="service-2"] { color: var(--color-on-accent); }

/* Index cards */
.svc-cards { display: grid; gap: 1rem; padding-bottom: 4rem; }
.svc-card { display: grid; gap: 1rem; align-content: start; padding: 1.75rem; border-radius: 1.25rem; background: var(--svc-bg); color: var(--otl-ink); text-decoration: none; transition: transform .4s var(--otl-ease-expo, ease); }
.svc-card.is-dark { color: var(--color-on-accent); }
.svc-card:hover { transform: translateY(-4px); }
.svc-card__num { opacity: .7; }
.svc-card__title { overflow-wrap: break-word; }
.svc-card__blurb { opacity: .9; }
.svc-card__list { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid currentColor; display: grid; gap: .4rem; text-transform: uppercase; }
.svc-card__more { margin-top: .5rem; }

/* Method strip */
.svc-method { padding-top: 2rem; padding-bottom: 5rem; display: grid; gap: 2.5rem; }
.svc-method__head { display: grid; gap: 1rem; }
.svc-method__lede { color: var(--otl-text); max-width: 36rem; }
.svc-method__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.svc-stage { display: grid; gap: .5rem; padding: 1.5rem; border-radius: 1.25rem; background: var(--otl-card); }
.svc-stage__num { color: var(--otl-muted); }
.svc-stage__text { color: var(--otl-text); }
.svc-method__link { justify-self: start; color: var(--otl-ink); text-decoration: underline; text-underline-offset: .3em; }

@media (min-width: 48em) {
    .svc-hero { padding-top: 12rem; padding-bottom: 6rem; }
    .svc-intro { grid-template-columns: 1fr 1fr; gap: 4rem; padding-top: 6rem; padding-bottom: 6rem; }
    .svc-cap { grid-template-columns: 4rem 1fr 1.2fr; gap: 2rem; align-items: baseline; padding: 2.5rem 0; }
    .svc-next__link { padding: 3rem 2.5rem; }
    .svc-cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .svc-card { padding: 2.25rem; min-height: 26rem; }
    .svc-card__more { margin-top: auto; }
    .svc-method__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    .svc-stage { padding: 2rem; min-height: 14rem; }
}
@media (min-width: 64em) {
    .svc-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .svc-card, .svc-next__link, .svc-next__arrow { transition: none; }
}