/* Single case study: editorial project narrative for the SH Digital Labs system. */

.case-study-page {
    overflow: hidden;
    background: var(--night-950);
}

.case-study-page h1,
.case-study-page h2,
.case-study-page h3 {
    text-wrap: balance;
}

.case-study-kicker {
    margin: 0;
    color: var(--ice-300);
    font: 500 .75rem/1.5 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.case-study-button {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 52px;
    padding: 14px 23px;
    overflow: hidden;
    border: 1px solid rgba(179, 208, 255, .32);
    border-radius: 999px;
    background: rgba(5, 12, 26, .32);
    color: var(--white);
    font: 500 .9375rem/1.25 var(--font-sans);
    text-decoration: none;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.case-study-button:hover,
.case-study-button:focus-visible {
    border-color: var(--ice-300);
    background: rgba(36, 118, 255, .18);
    color: var(--ice-300);
}

.case-study-button .icon,
.case-study-text-link .icon,
.case-study-next__body strong .icon {
    width: 15px;
    height: 15px;
    transition: transform .25s var(--ease);
}

.case-study-button:hover .icon,
.case-study-button:focus-visible .icon,
.case-study-text-link:hover .icon,
.case-study-text-link:focus-visible .icon,
.case-study-next__card:hover .case-study-next__body strong .icon,
.case-study-next__card:focus-visible .case-study-next__body strong .icon {
    transform: translate(3px, -3px);
}

.case-study-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ice-300);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s var(--ease);
}

.case-study-text-link:hover,
.case-study-text-link:focus-visible {
    color: var(--white);
}

.case-study-text-link--muted {
    color: var(--mist-300);
    font-size: .875rem;
}

/* 01 — split editorial project opening. */
.case-study-hero {
    padding: 154px 0 0;
    background:
        radial-gradient(circle at 90% 18%, rgba(36, 118, 255, .12), transparent 30%),
        var(--night-950);
}

.case-study-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 42px;
    color: var(--mist-300);
    font-size: .75rem;
}

.case-study-breadcrumb a {
    color: var(--white);
    text-decoration: none;
}

.case-study-breadcrumb a:hover,
.case-study-breadcrumb a:focus-visible,
.case-study-breadcrumb > span:not([aria-current]) {
    color: var(--ice-300);
}

.case-study-breadcrumb [aria-current] {
    max-width: min(48vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-study-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr);
    gap: clamp(50px, 7vw, 110px);
    align-items: center;
}

.case-study-hero__copy {
    min-width: 0;
    padding-block: 34px 56px;
}

.case-study-hero__eyebrow {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    max-width: 650px;
    margin-bottom: 32px;
}

.case-study-hero__eyebrow > span {
    color: var(--mist-300);
    font: 500 .75rem/1.3 var(--font-mono);
    letter-spacing: .08em;
}

.case-study-hero h1 {
    max-width: 11ch;
    margin: 0;
    color: var(--white);
    font-size: clamp(3.8rem, 6.4vw, 7.2rem);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: .91;
}

.case-study-hero__lede {
    max-width: 50ch;
    margin: 32px 0 0;
    color: var(--mist-300);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.65;
}

.case-study-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 26px;
    align-items: center;
    margin-top: 36px;
}

.case-study-hero__media {
    position: relative;
    aspect-ratio: 6 / 5;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(169, 199, 255, .22);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(36, 118, 255, .08), rgba(5, 11, 22, .82)),
        var(--slate-850);
    box-shadow: 0 32px 90px rgba(0, 8, 30, .38);
}

.case-study-hero__media::before {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 28px;
    width: 92px;
    height: 2px;
    background: linear-gradient(90deg, var(--ice-300), var(--signal-500), transparent);
    content: "";
}

.case-study-hero__image,
.case-study-hero__fallback,
.case-study-hero__media-veil {
    position: absolute;
    inset: 12px 12px 68px;
    border-radius: calc(var(--radius-lg) - 10px);
}

.case-study-hero__image {
    display: block;
    width: calc(100% - 24px);
    height: calc(100% - 80px);
    object-fit: cover;
    object-position: center;
}

.case-study-hero__fallback {
    background:
        linear-gradient(145deg, rgba(5, 7, 11, .06), rgba(5, 7, 11, .72)),
        url("../pillar-bg-growth-engine.webp") center / cover no-repeat,
        var(--slate-850);
}

.case-study-hero__media-veil {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(3, 7, 15, .03), transparent 55%, rgba(3, 7, 15, .2)),
        linear-gradient(110deg, rgba(1, 88, 248, .06), transparent 55%);
}

.case-study-hero__media figcaption {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 0;
    left: 22px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0;
    border-top: 1px solid rgba(201, 224, 255, .16);
    color: var(--mist-300);
    font: 500 .7rem/1 var(--font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.case-study-hero__media figcaption strong {
    color: var(--white);
    font-size: .78rem;
    font-weight: 500;
}

.case-study-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 72px 0 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(169, 199, 255, .17);
    border-radius: var(--radius-md);
    background: rgba(12, 21, 38, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    backdrop-filter: blur(18px);
}

.case-study-facts--1 {
    grid-template-columns: minmax(0, 1fr);
}

.case-study-facts--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-study-facts--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-study-facts > div {
    display: grid;
    gap: 9px;
    min-height: 122px;
    align-content: center;
    padding: 24px 28px;
    border-right: 1px solid rgba(169, 199, 255, .15);
}

.case-study-facts > div:last-child {
    border-right: 0;
}

.case-study-facts dt {
    color: var(--ice-300);
    font: 500 .7rem/1.4 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.case-study-facts dd {
    margin: 0;
    color: var(--white);
    font-size: .9375rem;
    line-height: 1.5;
}

.case-study-facts__outcome {
    grid-column: span 1;
}

/* 02 — sticky brief and numbered case-study chapters. */
.case-study-story {
    position: relative;
    padding: 132px 0 146px;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 18%, rgba(36, 118, 255, .095), transparent 31%),
        var(--night-950);
}

.case-study-story::after {
    position: absolute;
    right: -10%;
    bottom: 3%;
    width: min(50vw, 760px);
    aspect-ratio: .52;
    background: url("../dh-section-bg.webp") center / contain no-repeat;
    content: "";
    opacity: .08;
    pointer-events: none;
}

.case-study-story__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 3.3fr) minmax(0, 8.7fr);
    gap: clamp(56px, 8vw, 132px);
    align-items: start;
}

.case-study-rail {
    position: sticky;
    top: 118px;
}

.case-study-rail__panel {
    padding: 30px;
    border: 1px solid rgba(169, 199, 255, .18);
    border-radius: var(--radius-md);
    background:
        linear-gradient(145deg, rgba(36, 118, 255, .13), rgba(6, 15, 32, .78)),
        rgba(10, 18, 34, .68);
    box-shadow: 0 26px 70px rgba(0, 6, 22, .22);
    backdrop-filter: blur(18px);
}

.case-study-rail__panel h2 {
    margin: 21px 0 18px;
    color: var(--white);
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1.04;
}

.case-study-rail__panel > p:not(.case-study-kicker) {
    margin: 0;
    color: var(--mist-300);
    font-size: .9375rem;
    line-height: 1.7;
}

.case-study-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.case-study-tags span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid rgba(140, 215, 255, .22);
    border-radius: 999px;
    background: rgba(4, 13, 28, .36);
    color: var(--ice-100);
    font: 500 .7rem/1.35 var(--font-mono);
}

.case-study-rail__actions {
    display: grid;
    gap: 15px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(169, 199, 255, .17);
}

.case-study-content {
    min-width: 0;
}

.case-study-content > .entry-content {
    max-width: 860px;
    counter-reset: case-study-chapter;
}

.case-study-content > .entry-content > h2 {
    position: relative;
    margin: 96px 0 28px;
    padding-top: 29px;
    border-top: 1px solid rgba(174, 184, 200, .2);
    color: var(--white);
    font-size: clamp(2.65rem, 4.2vw, 4.75rem);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .98;
    counter-increment: case-study-chapter;
}

.case-study-content > .entry-content > h2:first-child,
.case-study-content > .entry-content > .concept-note + h2 {
    margin-top: 0;
}

.case-study-content > .entry-content > h2::before {
    position: absolute;
    top: 31px;
    right: 0;
    color: var(--ice-300);
    content: counter(case-study-chapter, decimal-leading-zero);
    font: 500 .75rem/1 var(--font-mono);
    letter-spacing: .08em;
}

.case-study-content > .entry-content > h3 {
    margin: 54px 0 20px;
    color: var(--white);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    letter-spacing: -.03em;
}

.case-study-content > .entry-content > p,
.case-study-content > .entry-content > ul,
.case-study-content > .entry-content > ol,
.case-study-content > .entry-content > blockquote {
    max-width: 72ch;
    color: var(--mist-300);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.82;
}

.case-study-content > .entry-content > p + p {
    margin-top: 22px;
}

.case-study-content > .entry-content > ul,
.case-study-content > .entry-content > ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    max-width: none;
    margin: 34px 0 44px;
    padding: 0;
    list-style: none;
}

.case-study-content > .entry-content > ul li,
.case-study-content > .entry-content > ol li {
    position: relative;
    margin: 0;
    padding: 16px 0 16px 25px;
    border-top: 1px solid rgba(174, 184, 200, .18);
}

.case-study-content > .entry-content > ul li::before,
.case-study-content > .entry-content > ol li::before {
    position: absolute;
    top: 1.65em;
    left: 0;
    width: 12px;
    height: 2px;
    background: var(--ice-300);
    content: "";
    transform: skewX(calc(var(--cut) * -1));
}

.case-study-content .concept-note {
    position: relative;
    max-width: 760px;
    margin: 0 0 74px;
    padding: 24px 26px 24px 54px;
    border: 1px solid rgba(140, 215, 255, .2);
    border-radius: var(--radius-sm);
    background: rgba(36, 118, 255, .08);
    color: var(--ice-100);
    font-size: .9375rem;
    line-height: 1.65;
}

.case-study-content .concept-note::before {
    position: absolute;
    top: 26px;
    left: 25px;
    color: var(--ice-300);
    content: "i";
    font: 500 .75rem/1 var(--font-mono);
}

.case-study-content .wp-block-image,
.case-study-content .wp-block-gallery,
.case-study-content .wp-block-video,
.case-study-content .wp-block-cover {
    max-width: none;
    margin: 58px 0;
}

.case-study-content .wp-block-image img,
.case-study-content .wp-block-gallery img,
.case-study-content .wp-block-video video,
.case-study-content .wp-block-cover {
    border: 1px solid rgba(169, 199, 255, .17);
    border-radius: var(--radius-md);
}

.case-study-content blockquote {
    margin-block: 56px;
    padding: 26px 0 26px 30px;
    border-left: 2px solid var(--ice-300);
    color: var(--white);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.5;
}

.case-study-content .wp-block-buttons {
    margin-top: 40px;
}

.case-study-content__placeholder {
    max-width: 760px;
}

.case-study-outcome {
    max-width: 860px;
    margin-top: 92px;
    padding: 42px;
    border: 1px solid rgba(140, 215, 255, .22);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, rgba(36, 118, 255, .18), rgba(7, 16, 33, .88)),
        var(--slate-850);
    box-shadow: 0 30px 80px rgba(0, 8, 28, .24);
}

.case-study-outcome blockquote {
    max-width: 19ch;
    margin: 24px 0 0;
    color: var(--white);
    font-size: clamp(2rem, 3.5vw, 3.9rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.05;
}

/* 03 — next project handoff. */
.case-study-next {
    padding: 0 0 132px;
    background: var(--night-950);
}

.case-study-next__card {
    display: grid;
    grid-template-columns: minmax(0, 6.8fr) minmax(340px, 5.2fr);
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(169, 199, 255, .18);
    border-radius: var(--radius-lg);
    background: var(--slate-850);
    color: var(--white);
    text-decoration: none;
    box-shadow: 0 32px 90px rgba(0, 7, 26, .3);
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}

.case-study-next__card:hover,
.case-study-next__card:focus-visible {
    border-color: rgba(140, 215, 255, .42);
    box-shadow: 0 36px 100px rgba(0, 14, 50, .34), var(--edge-glow);
    transform: translateY(-5px);
}

.case-study-next__card:focus-visible {
    outline: 2px solid var(--ice-300);
    outline-offset: 4px;
}

.case-study-next__media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

.case-study-next__image,
.case-study-next__fallback,
.case-study-next__media > span:last-child {
    position: absolute;
    inset: 0;
}

.case-study-next__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .55s var(--ease), transform .65s var(--ease);
}

.case-study-next__fallback {
    background: url("../pillar-bg-software-intelligence.webp") center / cover no-repeat var(--slate-850);
}

.case-study-next__media > span:last-child {
    background: linear-gradient(90deg, transparent 50%, rgba(14, 21, 33, .3));
}

.case-study-next__card:hover .case-study-next__image,
.case-study-next__card:focus-visible .case-study-next__image {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.045);
}

.case-study-next__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(42px, 6vw, 80px);
    background:
        radial-gradient(circle at 100% 0, rgba(36, 118, 255, .17), transparent 38%),
        var(--slate-850);
}

.case-study-next__body > span {
    margin: 30px 0 13px;
    color: var(--mist-300);
    font: 500 .75rem/1.4 var(--font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.case-study-next__body h2 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(2.6rem, 4.1vw, 4.7rem);
    font-weight: 500;
    letter-spacing: -.055em;
    line-height: .98;
}

.case-study-next__body > p:not(.case-study-kicker) {
    max-width: 40ch;
    margin: 24px 0 0;
    color: var(--mist-300);
    font-size: .9375rem;
    line-height: 1.65;
}

.case-study-next__body strong {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 34px;
    color: var(--ice-300);
    font-size: .9375rem;
    font-weight: 500;
}

/* 04 — closing quote CTA. */
.case-study-cta {
    padding: 118px 0 126px;
    border-top: 1px solid var(--rule);
    background:
        radial-gradient(circle at 84% 30%, rgba(36, 118, 255, .17), transparent 34%),
        var(--night-950);
}

.case-study-cta__inner {
    display: flex;
    gap: 54px;
    align-items: flex-end;
    justify-content: space-between;
}

.case-study-cta__inner h2 {
    max-width: 11ch;
    margin: 22px 0 20px;
    background: linear-gradient(95deg, var(--ice-300), var(--signal-500) 68%, var(--white));
    background-clip: text;
    color: transparent;
    font-size: clamp(3.4rem, 5.6vw, 6.1rem);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .96;
}

.case-study-cta__inner p:not(.case-study-kicker) {
    max-width: 55ch;
    margin: 0;
    color: var(--mist-300);
    font-size: 1rem;
    line-height: 1.7;
}

@media (max-width: 1120px) {
    .case-study-hero__grid {
        grid-template-columns: minmax(0, 6.6fr) minmax(340px, 5.4fr);
        gap: 44px;
    }

    .case-study-facts > div {
        padding-inline: 22px;
    }

    .case-study-story__layout {
        gap: 56px;
    }
}

@media (max-width: 900px) {
    .case-study-hero {
        padding-top: 126px;
    }

    .case-study-hero__grid {
        grid-template-columns: 1fr;
    }

    .case-study-hero__copy {
        padding-block: 20px 8px;
    }

    .case-study-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 52px;
    }

    .case-study-facts > div:nth-child(2n) {
        border-right: 0;
    }

    .case-study-facts > div:nth-child(n + 3) {
        border-top: 1px solid rgba(169, 199, 255, .15);
    }

    .case-study-story {
        padding-block: 104px 118px;
    }

    .case-study-story__layout {
        grid-template-columns: 1fr;
    }

    .case-study-rail {
        position: static;
    }

    .case-study-rail__panel {
        max-width: 680px;
    }

    .case-study-content > .entry-content {
        max-width: none;
    }

    .case-study-next__card {
        grid-template-columns: 1fr;
    }

    .case-study-next__media {
        min-height: 460px;
    }

    .case-study-cta__inner {
        display: grid;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .case-study-hero {
        padding-top: 108px;
    }

    .case-study-breadcrumb {
        margin-bottom: 32px;
    }

    .case-study-breadcrumb [aria-current] {
        display: none;
    }

    .case-study-breadcrumb > span:nth-last-child(2) {
        display: none;
    }

    .case-study-hero__eyebrow {
        margin-bottom: 24px;
    }

    .case-study-hero h1 {
        font-size: clamp(3.3rem, 15vw, 5rem);
    }

    .case-study-hero__lede {
        margin-top: 25px;
    }

    .case-study-actions {
        display: grid;
        justify-items: start;
        margin-top: 30px;
    }

    .case-study-hero__media {
        border-radius: var(--radius-md);
    }

    .case-study-hero__image,
    .case-study-hero__fallback,
    .case-study-hero__media-veil {
        border-radius: calc(var(--radius-md) - 8px);
    }

    .case-study-facts {
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .case-study-facts > div,
    .case-study-facts > div:nth-child(2n) {
        min-height: 98px;
        border-top: 1px solid rgba(169, 199, 255, .15);
        border-right: 0;
    }

    .case-study-facts > div:first-child {
        border-top: 0;
    }

    .case-study-story {
        padding-block: 86px 96px;
    }

    .case-study-rail__panel {
        padding: 25px;
    }

    .case-study-content > .entry-content > h2 {
        margin-top: 70px;
        padding-right: 34px;
        font-size: clamp(2.45rem, 12.5vw, 3.8rem);
    }

    .case-study-content > .entry-content > ul,
    .case-study-content > .entry-content > ol {
        grid-template-columns: 1fr;
    }

    .case-study-content .concept-note {
        margin-bottom: 56px;
        padding: 22px 22px 22px 48px;
    }

    .case-study-content .concept-note::before {
        left: 21px;
    }

    .case-study-outcome {
        margin-top: 68px;
        padding: 28px;
    }

    .case-study-next {
        padding-bottom: 92px;
    }

    .case-study-next__media {
        min-height: 360px;
    }

    .case-study-next__body {
        padding: 34px 26px 42px;
    }

    .case-study-next__body h2 {
        font-size: clamp(2.6rem, 12.5vw, 3.9rem);
    }

    .case-study-cta {
        padding: 88px 0 96px;
    }

    .case-study-cta__inner {
        gap: 36px;
    }

    .case-study-cta__inner h2 {
        font-size: clamp(3rem, 14vw, 4.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-study-button,
    .case-study-button .icon,
    .case-study-text-link .icon,
    .case-study-next__card,
    .case-study-next__image,
    .case-study-next__body strong .icon {
        transition: none;
    }

    .case-study-next__card:hover,
    .case-study-next__card:focus-visible {
        transform: none;
    }

    .case-study-next__card:hover .case-study-next__image,
    .case-study-next__card:focus-visible .case-study-next__image {
        transform: none;
    }
}