/* Digital Buckeye services: shared architecture with page-specific editorial layouts. */
.service-page {
    background: var(--db-white);
    color: var(--db-ink-950);
}

.service-page main {
    background: var(--db-white);
}

.service-page .db-eyebrow {
    color: var(--db-blue-700);
}

.service-page h1,
.service-page h2,
.service-page h3,
.service-page h4 {
    color: var(--db-ink-950);
    letter-spacing: -0.025em;
    text-transform: none;
}

.service-page h1 {
    font-size: clamp(2.7rem, 5.8vw, 6.4rem);
    letter-spacing: -0.05em;
}

.service-subnav {
    position: sticky;
    z-index: 900;
    top: 4.75rem;
    margin-top: 4.75rem;
    border-bottom: var(--db-border-thin);
    background: rgba(255, 255, 255, 0.97);
}

.service-subnav__inner {
    display: flex;
    min-height: 3.5rem;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: thin;
}

.service-subnav a {
    display: flex;
    min-width: max-content;
    align-items: center;
    padding: 0.8rem 1rem;
    border-right: var(--db-border-thin);
    color: var(--db-gray-700);
    font-family: var(--db-font-display);
    font-size: var(--db-font-size-sm);
    font-weight: var(--db-weight-bold);
    text-decoration: none;
}

.service-subnav a:first-child {
    border-left: var(--db-border-thin);
}

.service-subnav a:hover,
.service-subnav a[aria-current="page"] {
    background: var(--db-blue-700);
    color: var(--db-white);
}

.service-hero {
    padding-block: clamp(4rem, 8vw, 7rem) 0;
    background: var(--db-white);
}

.service-hero__grid {
    display: grid;
    grid-template-columns: minmax(20rem, 1.15fr) minmax(19rem, 0.85fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.service-hero h1 {
    max-width: 12ch;
    margin: 0;
}

.service-hero__summary {
    padding-top: var(--db-space-6);
    border-top: 3px solid var(--db-blue-700);
}

.service-hero__summary p {
    color: var(--db-gray-700);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
}

.service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-space-5);
    align-items: center;
}

.service-hero__media {
    width: min(100% - (2 * var(--db-gutter)), var(--db-width-wide));
    padding: 0;
    border: var(--db-border-thin);
    border-bottom: 0;
}

.service-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

.service-section-heading {
    display: grid;
    grid-template-columns: minmax(13rem, 0.5fr) minmax(20rem, 1.5fr);
    gap: clamp(2rem, 7vw, 7rem);
    margin-bottom: clamp(3rem, 7vw, 5rem);
    padding-bottom: var(--db-space-6);
    border-bottom: var(--db-border-thin);
}

.service-section-heading h2 {
    max-width: 17ch;
}

.service-overview,
.capability-map,
.service-problem,
.software-audiences,
.software-build,
.software-example,
.service-value,
.vr-problem,
.vr-capabilities,
.vr-work,
.video-needs,
.video-process,
.video-case,
.interactive-support {
    padding-block: var(--db-section-space);
}

/* Overview */
.service-hero--overview {
    padding-bottom: var(--db-section-space);
    border-bottom: var(--db-border-thin);
}

.service-paths {
    border-top: var(--db-border-thin);
    border-left: var(--db-border-thin);
}

.service-paths article {
    position: relative;
    display: grid;
    grid-template-columns: minmax(15rem, 0.7fr) minmax(20rem, 1.3fr);
    border-right: var(--db-border-thin);
    border-bottom: var(--db-border-thin);
}

.service-paths article > span {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 0.5rem 0.7rem;
    background: var(--db-blue-700);
    color: var(--db-white);
    font-family: var(--db-font-display);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    font-weight: var(--db-weight-bold);
    line-height: 1;
}

.service-paths img {
    width: 100%;
    height: 100%;
    min-height: 22rem;
    border-right: var(--db-border-thin);
    object-fit: cover;
}

.service-paths article > div {
    padding: clamp(1.5rem, 5vw, 4rem);
}

.service-paths h3 {
    font-size: var(--db-font-size-h2);
}

.service-paths p,
.service-paths li {
    color: var(--db-gray-700);
}

.service-paths ul {
    margin: var(--db-space-6) 0;
    padding: 0;
    list-style: none;
}

.service-paths li {
    padding-block: var(--db-space-2);
    border-top: var(--db-border-thin);
}

.service-paths li:last-child {
    border-bottom: var(--db-border-thin);
}

.capability-map {
    border-block: var(--db-border-thin);
    background: var(--db-gray-100);
}

.capability-map__grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.7fr) minmax(22rem, 1.3fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.capability-map h2 {
    max-width: 12ch;
}

.capability-map ol {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--db-ink-950);
    list-style: none;
}

.capability-map li {
    display: grid;
    grid-template-columns: 2.5rem minmax(12rem, 0.75fr) minmax(15rem, 1.25fr);
    gap: var(--db-space-5);
    padding-block: var(--db-space-5);
    border-bottom: var(--db-border-thin);
}

.capability-map li span {
    color: var(--db-blue-700);
    font-family: var(--db-font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: var(--db-weight-bold);
    line-height: 1;
}

.capability-map li strong {
    font-family: var(--db-font-display);
}

.capability-map li p {
    margin: 0;
    color: var(--db-gray-700);
}

/* Shared detail-page problem and value patterns */
.service-problem,
.vr-problem,
.video-needs {
    border-bottom: var(--db-border-thin);
    background: var(--db-gray-100);
}

.service-problem__grid,
.vr-problem__grid,
.video-needs__grid,
.service-value__grid,
.interactive-support__grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(22rem, 1.2fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.service-problem h2,
.vr-problem h2,
.video-needs h2,
.service-value h2,
.interactive-support h2 {
    max-width: 15ch;
}

.service-problem__grid > div:last-child > p,
.interactive-support__grid > div:last-child > p {
    color: var(--db-gray-700);
    font-size: var(--db-font-size-lg);
}

.service-value {
    border-top: var(--db-border-thin);
    background: var(--db-gray-100);
}

.service-value ul {
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--db-ink-950);
    list-style: none;
}

.service-value li {
    padding: var(--db-space-5) var(--db-space-2);
    border-bottom: var(--db-border-thin);
    font-family: var(--db-font-display);
    font-weight: var(--db-weight-bold);
}

.service-cta {
    padding-block: var(--db-section-space);
    border-top: 5px solid var(--db-blue-700);
    background: var(--db-ink-950);
    color: var(--db-white);
}

.service-cta__inner {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.service-cta .db-eyebrow,
.service-cta h2 {
    color: var(--db-white);
}

.service-cta h2 {
    max-width: 13ch;
}

.service-cta p {
    max-width: 40rem;
    color: var(--db-gray-300);
    font-size: var(--db-font-size-lg);
}

/* Software */
.software-audiences {
    background: var(--db-white);
}

.software-audiences__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--db-border-thin);
    border-left: var(--db-border-thin);
}

.software-audiences article,
.vr-capabilities__grid article {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border-right: var(--db-border-thin);
    border-bottom: var(--db-border-thin);
}

.software-audiences span,
.software-build__list article::before,
.vr-problem__points span,
.vr-capabilities__grid span,
.video-needs__types span,
.video-process__steps span {
    display: block;
    margin-bottom: var(--db-space-6);
    color: var(--db-blue-700);
    font-family: var(--db-font-display);
    font-size: var(--db-font-size-sm);
    font-weight: var(--db-weight-bold);
}

.software-audiences p,
.software-build__list p,
.vr-capabilities__grid p,
.video-needs__types p {
    color: var(--db-gray-700);
}

.software-audiences span,
.software-build__list article::before {
    color: var(--db-cyan-300);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
}

.software-audiences article {
    min-width: 0;
}

.software-build {
    background: var(--db-ink-950);
    color: var(--db-white);
}

.software-build__grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.7fr) minmax(24rem, 1.3fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.software-build .db-eyebrow,
.software-build h2,
.software-build h3 {
    color: var(--db-white);
}

.software-build h2 {
    max-width: 13ch;
}

.software-build__list {
    counter-reset: software-build;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.software-build__list article {
    position: relative;
    display: grid;
    grid-template-columns: minmax(12rem, 0.75fr) minmax(16rem, 1.25fr);
    gap: var(--db-space-6);
    padding: var(--db-space-6) 0 var(--db-space-6) 3.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    counter-increment: software-build;
}

.software-build__list article::before {
    position: absolute;
    top: var(--db-space-6);
    left: 0;
    content: "0" counter(software-build);
    color: var(--db-cyan-300);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
}

.software-build__list h3,
.software-build__list p {
    margin: 0;
}

.software-build__list p {
    color: var(--db-gray-300);
}

.software-example {
    background: #020617;
    color: var(--db-white);
}

.software-example__grid {
    display: grid;
    grid-template-columns: minmax(14rem, 0.6fr) minmax(22rem, 1.4fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.software-example .db-eyebrow,
.software-example h2 {
    color: var(--db-white);
}

.software-example h2 {
    max-width: 16ch;
}

.software-example__grid > div:last-child p {
    max-width: 42rem;
    color: #cbd5e1;
    font-size: var(--db-font-size-lg);
}

.software-example__brand img {
    display: block;
    width: min(100%, 17.5rem);
    height: auto;
    margin-top: var(--db-space-6);
}

.software-example .db-text-link {
    color: var(--db-white);
    text-decoration-color: var(--db-cyan-300);
}

/* VR */
.vr-problem__grid {
    align-items: start;
}

.vr-problem__points {
    border-top: 2px solid var(--db-ink-950);
}

.vr-problem__points article {
    display: grid;
    grid-template-columns: 4rem minmax(9rem, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-block: var(--db-space-5);
    border-bottom: var(--db-border-thin);
}

.vr-problem__points article > * {
    min-width: 0;
}

.vr-problem__points span,
.vr-problem__points h3,
.vr-problem__points p {
    margin: 0;
}

.vr-problem__points span {
    color: var(--db-cyan-300);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1;
}

.vr-problem__points h3 {
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    overflow-wrap: normal;
    word-break: normal;
}

.vr-problem__points p {
    color: var(--db-gray-700);
}

.vr-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--db-border-thin);
    border-left: var(--db-border-thin);
}

.vr-capabilities__grid span {
    margin-bottom: var(--db-space-5);
    color: var(--db-cyan-300);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
}

.vr-work {
    background: var(--db-ink-950);
    color: var(--db-white);
}

.vr-work__grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.65fr) minmax(24rem, 1.35fr);
    gap: clamp(3rem, 8vw, 7rem);
}

.vr-work .db-eyebrow,
.vr-work h2 {
    color: var(--db-white);
}

.vr-work h2 {
    max-width: 13ch;
}

.vr-work__grid > div:first-child > p:not(.db-eyebrow) {
    color: var(--db-gray-300);
}

.vr-work__projects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.vr-work__projects a {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--db-white);
    text-decoration: none;
}

.vr-work__projects img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.vr-work__projects span {
    padding: var(--db-space-4);
    font-family: var(--db-font-display);
    font-weight: var(--db-weight-bold);
}

.vr-work__projects a:hover span {
    color: var(--db-cyan-300);
}

/* Video */
.video-needs__types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 2px solid var(--db-ink-950);
    border-left: var(--db-border-thin);
}

.video-needs__types article {
    min-width: 0;
    padding: var(--db-space-6);
    border-right: var(--db-border-thin);
    border-bottom: var(--db-border-thin);
}

.video-needs__types span,
.video-process__steps span {
    color: var(--db-cyan-300);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
}

.video-needs__types h3 {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.video-process {
    background: var(--db-white);
}

.video-process__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: var(--db-border-thin);
    border-left: var(--db-border-thin);
    list-style: none;
}

.video-process__steps li {
    min-width: 0;
    padding-bottom: var(--db-space-6);
    border-right: var(--db-border-thin);
    border-bottom: var(--db-border-thin);
}

.video-process__steps img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--db-space-5);
    border-bottom: var(--db-border-thin);
}

.video-process__steps span,
.video-process__steps h3,
.video-process__steps p {
    margin-inline: var(--db-space-5);
}

.video-process__steps p {
    color: var(--db-gray-700);
}

.video-process__steps h3 {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.video-case {
    background: var(--db-ink-950);
    color: var(--db-white);
}

.video-case__grid {
    display: grid;
    grid-template-columns: minmax(17rem, 0.7fr) minmax(22rem, 1.3fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.video-case .db-eyebrow,
.video-case h2 {
    color: var(--db-white);
}

.video-case__lead,
.video-case__grid > div:last-child > p,
.video-case li {
    color: var(--db-gray-300);
}

.video-case__grid > div:last-child > ul {
    margin: var(--db-space-6) 0;
    padding-left: 1.25rem;
}

.video-case blockquote {
    margin: var(--db-space-7) 0 0;
    padding: var(--db-space-6);
    border-left: 4px solid var(--db-blue-700);
    background: rgba(255, 255, 255, 0.06);
}

.video-case blockquote p {
    color: var(--db-white);
    font-size: var(--db-font-size-lg);
}

.video-case blockquote footer {
    padding: 0;
    color: var(--db-cyan-300);
    font-family: var(--db-font-display);
    font-size: var(--db-font-size-sm);
}

.interactive-support {
    border-bottom: var(--db-border-thin);
}

@media (max-width: 61.998rem) {
    .service-hero__grid,
    .service-section-heading,
    .capability-map__grid,
    .service-problem__grid,
    .vr-problem__grid,
    .video-needs__grid,
    .service-value__grid,
    .interactive-support__grid,
    .service-cta__inner,
    .software-build__grid,
    .software-example__grid,
    .vr-work__grid,
    .video-case__grid {
        grid-template-columns: 1fr;
    }

    .service-hero h1 {
        max-width: 14ch;
    }

    .service-paths article {
        grid-template-columns: 1fr;
    }

    .service-paths img {
        height: auto;
        min-height: 0;
        border-right: 0;
        border-bottom: var(--db-border-thin);
        object-fit: contain;
    }

    .software-audiences__grid,
    .vr-capabilities__grid,
    .video-process__steps {
        grid-template-columns: 1fr;
    }

    .software-build__list article {
        grid-template-columns: minmax(10rem, 0.75fr) minmax(14rem, 1.25fr);
    }
}

@media (max-width: 47.998rem) {
    .service-subnav {
        top: 4.75rem;
    }

    .service-subnav__inner {
        width: 100%;
    }

    .service-hero {
        padding-top: 3rem;
    }

    .service-hero__grid {
        gap: var(--db-space-7);
    }

    .service-hero__actions .db-button,
    .service-cta .db-button {
        width: 100%;
    }

    .capability-map li,
    .vr-problem__points article,
    .software-build__list article,
    .video-needs__types {
        grid-template-columns: 1fr;
    }

    .capability-map li {
        gap: var(--db-space-3);
    }

    .software-build__list article {
        padding-left: 0;
        padding-top: 4.5rem;
    }

    .software-build__list article::before {
        top: var(--db-space-5);
    }

    .vr-work__projects,
    .video-needs__types {
        grid-template-columns: 1fr;
    }
}