/**
 * Case-study detail pages — shared by every pm/cs-* block.
 * One section per block; every section carries its own top border and
 * vertical rhythm, so dropping one from a page leaves no gap to patch.
 * Breakpoints: 1300 / 1080 / 820 / 560.
 */

.pm-cs {
    --cs-accent-bg: rgba(255, 82, 14, .10);
    --cs-accent-line: rgba(255, 82, 14, .45);
    padding: 80px 0;
    border-top: 1px solid var(--line);
    overflow-x: clip;
}

.pm-cs h1,
.pm-cs h2,
.pm-cs h3,
.pm-cs h4,
.pm-cs p,
.pm-cs figure {
    margin: 0;
}

.pm-cs ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-cs .cs-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs h2.cs-h2 {
    margin-top: 14px;
    max-width: 22ch;
    font-size: 31px;
    font-weight: var(--fw-semibold);
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--ink);
}

.pm-cs .cs-lede {
    margin-top: 14px;
    max-width: 58ch;
    font-size: 14px;
    line-height: 1.75;
    color: var(--mut);
}

.pm-cs .cs-lede:empty {
    display: none;
}

.pm-cs .container--cs-narrow {
    max-width: 876px;
}

.pm-cs .btn .ar {
    transition: transform .18s;
}

.pm-cs .btn:hover .ar {
    transform: translateX(3px);
}

/* ====================================================================== */
/* Hero                                                                    */
/* ====================================================================== */
.pm-cs-hero {
    padding: 56px 0 80px;
    border-top: 0;
    overflow: hidden;
}

.pm-cs-hero .cs-crumb {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mut-2);
    display: flex;
    gap: 8px;
    align-items: center;
}

.pm-cs-hero .cs-crumb a {
    color: inherit;
}

.pm-cs-hero .cs-crumb a:hover {
    color: var(--accent);
}

.pm-cs-hero .cs-crumb .cur {
    color: var(--mut);
}

.pm-cs-hero .hgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 52px;
    align-items: center;
}

.pm-cs-hero .hcol {
    min-width: 0;
}

.pm-cs-hero .hlogo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.pm-cs-hero .hlogo {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.pm-cs-hero h1.hbname {
    margin-top: 24px;
    max-width: 18ch;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.pm-cs-hero .hbtag {
    margin-top: 13px;
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.45;
    font-weight: var(--fw-medium);
    letter-spacing: -.01em;
    color: var(--mut);
}

.pm-cs-hero .hbtag em {
    font-style: normal;
    color: var(--accent);
}

.pm-cs-hero .hbdesc {
    margin-top: 18px;
    max-width: 54ch;
    font-size: 14px;
    line-height: 1.75;
    color: var(--mut);
}

.pm-cs-hero .hbtag + .hbdesc {
    margin-top: 14px;
}

.pm-cs-hero .hbacts {
    margin-top: 26px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* stage: performance panel + brand mark */
.pm-cs-hero .hstage {
    position: relative;
    min-width: 0;
}

.pm-cs-hero .hglyph {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -110px;
    width: 600px;
    max-height: 480px;
    height: auto;
    transform: translateY(-40%);
    opacity: var(--glyph-opacity, .10);
    pointer-events: none;
    user-select: none;
    animation: cs-hfloat 9s ease-in-out infinite;
}

@keyframes cs-hfloat {
    0%, 100% { transform: translateY(-40%); }
    50% { transform: translateY(calc(-40% - 16px)); }
}

.pm-cs-hero .hpanel {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

/* "panel" glyph mode: the mark sits behind the card content, sized with
   contain inside an inset box so no edge is ever cropped. */
.pm-cs-hero.glyph-panel .hpanel {
    overflow: hidden;
}

.pm-cs-hero.glyph-panel .hpanel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: var(--glyph-inset, 9% 7% 13% 7%);
    background: var(--case-glyph) center / contain no-repeat;
    opacity: var(--glyph-opacity, .07);
    pointer-events: none;
    user-select: none;
}

.pm-cs-hero.glyph-panel .hpanel > * {
    position: relative;
    z-index: 1;
}

.pm-cs-hero .hp-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.pm-cs-hero .plat {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 5px 10px;
}

.pm-cs-hero .hp-range {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs-hero .hp-key {
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--line);
}

.pm-cs-hero .hp-kn {
    font-family: var(--font-mono);
    font-size: 54px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: var(--fw-medium);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.pm-cs-hero .hp-kl,
.pm-cs-hero .hp-grid .l,
.pm-cs-hero .hp-yoy .l {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs-hero .hp-kl {
    margin-top: 10px;
    font-size: 9.5px;
    letter-spacing: .16em;
}

.pm-cs-hero .hp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    padding: 18px 0;
}

.pm-cs-hero .hp-grid > div {
    min-width: 0;
}

.pm-cs-hero .hp-grid .l {
    display: block;
}

.pm-cs-hero .hp-grid .v {
    display: block;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.pm-cs-hero .hp-yoy {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.pm-cs-hero .yrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
}

.pm-cs-hero .yrow .yk {
    flex: none;
    width: 52px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    color: var(--mut-2);
}

.pm-cs-hero .yrow .bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}

.pm-cs-hero .yrow .bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
}

.pm-cs-hero .yrow.prev .bar i {
    background: var(--line-2);
}

/* value column pinned + right-aligned so both bars end on one edge */
.pm-cs-hero .yrow .yv {
    flex: none;
    min-width: var(--yv-width, 0);
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--mut);
    font-variant-numeric: tabular-nums;
}

/* overview row */
.pm-cs-hero .ov {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(var(--ov-cols, 5), 1fr);
    gap: 1px;
    margin-top: 44px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.pm-cs-hero .ov > div {
    background: var(--panel);
    padding: 18px 20px;
}

.pm-cs-hero .ov h4 {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mut-2);
    font-weight: var(--fw-regular);
}

.pm-cs-hero .ov p {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
}

/* ====================================================================== */
/* Performance reports                                                     */
/* ====================================================================== */
.pm-cs-reports .rtabs {
    margin-top: 32px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pm-cs-reports .rtab {
    appearance: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 14px;
    line-height: 1.3;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    padding: 13px 18px;
    color: var(--mut);
    transition: border-color .2s, background .2s, color .2s;
}

.pm-cs-reports .rtab span {
    display: block;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs-reports .rtab:hover {
    border-color: var(--line-2);
    color: var(--ink);
}

.pm-cs-reports .rtab[aria-selected="true"] {
    border-color: var(--cs-accent-line);
    background: var(--cs-accent-bg);
    color: var(--ink);
}

.pm-cs-reports .rtab[aria-selected="true"] span {
    color: var(--accent);
}

.pm-cs-reports .rview {
    position: relative;
    margin-top: 16px;
}

.pm-cs-reports .rcard {
    display: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
}

.pm-cs-reports .rcard.on {
    display: block;
    animation: cs-rin .3s cubic-bezier(.22, .7, .3, 1) both;
}

@keyframes cs-rin {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.pm-cs-reports .rbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

.pm-cs-reports .rdots {
    display: flex;
    gap: 6px;
    flex: none;
}

.pm-cs-reports .rdots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-2);
}

.pm-cs-reports .rurl {
    flex: none;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-cs-reports .rurl em {
    font-style: normal;
    color: var(--mut-2);
    margin-left: 7px;
}

.pm-cs-reports .rdate {
    margin-left: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mut-2);
    border: 1px solid var(--line-2);
    border-radius: 7px;
    padding: 5px 10px;
}

.pm-cs-reports .rzoom {
    flex: none;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 6px 12px;
    transition: color .2s, border-color .2s;
}


.pm-cs-reports .rzoom:hover {
    color: var(--accent);
    border-color: var(--cs-accent-line);
}

.pm-cs-reports .rpills {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.pm-cs-reports .rpills::-webkit-scrollbar {
    display: none;
}

.pm-cs-reports .rpl {
    flex: none;
    margin-right: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs-reports .rpill {
    flex: none;
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: transparent;
    color: var(--mut);
    padding: 8px 13px;
    transition: border-color .18s, background .18s, color .18s;
}

.pm-cs-reports .rpill:hover {
    color: var(--ink);
    border-color: var(--mut-2);
}

.pm-cs-reports .rpill.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pm-cs-reports .rscroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-height: 780px;
    background: var(--panel-2);
}

.pm-cs-reports .rscroll img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
    background: #fff;
}

.pm-cs-reports .rsum {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}

.pm-cs-reports .rsum > div {
    background: var(--panel);
    padding: 18px 18px 20px;
    min-width: 0;
}

.pm-cs-reports .rsum .l {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs-reports .rsum .v {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: var(--fw-medium);
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* compact: heading + selector + report + metrics budgeted to land in one view */
.pm-cs-reports.is-compact {
    padding: 48px 0;
}

.pm-cs-reports.is-compact h2.cs-h2 {
    margin-top: 10px;
    font-size: 28px;
}

.pm-cs-reports.is-compact .rtabs {
    margin-top: 18px;
    gap: 7px;
}

.pm-cs-reports.is-compact .rtab {
    padding: 10px 15px;
    font-size: 13px;
}

.pm-cs-reports.is-compact .rtab span {
    margin-top: 4px;
}

.pm-cs-reports.is-compact .rview {
    margin-top: 12px;
}

.pm-cs-reports.is-compact .rbar {
    padding: 10px 14px;
}

.pm-cs-reports.is-compact .rpills {
    padding: 9px 14px;
}

.pm-cs-reports.is-compact .rpill {
    padding: 6px 12px;
}

.pm-cs-reports.is-compact .rscroll {
    max-height: var(--shot-h, 330px);
}

.pm-cs-reports.is-compact .rsum > div {
    padding: 12px 16px 14px;
}

.pm-cs-reports.is-compact .rsum .v {
    margin-top: 6px;
    font-size: 18px;
}

/* ====================================================================== */
/* Challenge                                                               */
/* ====================================================================== */
.pm-cs-challenge .chall {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.pm-cs-challenge .chall ul {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.pm-cs-challenge .chall li {
    background: var(--panel);
    padding: 16px 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.6;
    color: var(--mut);
}

.pm-cs-challenge .chall li b {
    flex: none;
    padding-top: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--accent);
    font-weight: var(--fw-regular);
}

/* ====================================================================== */
/* Strategy                                                                */
/* ====================================================================== */
.pm-cs-strategy .paq {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    margin-top: 44px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.pm-cs-strategy .paq article {
    grid-column: span 2;
    background: var(--panel);
    padding: 26px 22px 28px;
}

/* a 5-item set fills its last row instead of leaving a gap */
.pm-cs-strategy .paq article:nth-child(4):nth-last-child(2),
.pm-cs-strategy .paq article:nth-child(5):nth-last-child(1) {
    grid-column: span 3;
}

.pm-cs-strategy .phead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pm-cs-strategy .ix {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--mut-2);
}

.pm-cs-strategy .pic {
    margin-top: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: rgba(255, 255, 255, .035);
    color: var(--accent);
}

.pm-cs-strategy .pic svg {
    width: 20px;
    height: 20px;
    display: block;
}

.pm-cs-strategy .paq h3 {
    margin-top: 15px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink);
}

.pm-cs-strategy .paq p {
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--mut);
}

/* ====================================================================== */
/* Creative gallery                                                        */
/* ====================================================================== */
.pm-cs-creative .clegend {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pm-cs-creative .cs-lede:empty + .clegend {
    margin-top: 22px;
}

.pm-cs-creative .clegend span {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mut);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    background: var(--panel);
}

.pm-cs-creative .clegend b {
    color: var(--accent);
    font-weight: var(--fw-regular);
    margin-left: 6px;
}

.pm-cs-creative .gal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 40px;
}

.pm-cs-creative .tile {
    position: relative;
    aspect-ratio: 4 / 5;
    padding: 0;
    appearance: none;
    font: inherit;
    color: inherit;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, transform .2s;
}

.pm-cs-creative .tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.pm-cs-creative .tile.feat {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.pm-cs-creative .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pm-cs-creative .tile img.fit {
    object-fit: contain;
    background: var(--panel-2);
}

.pm-cs-creative .tile .cap {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink);
    background: rgba(21, 22, 26, .80);
    border: 1px solid var(--line-2);
    padding: 5px 9px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity .2s;
}

.pm-cs-creative .tile:hover .cap,
.pm-cs-creative .tile:focus-visible .cap {
    opacity: 1;
}

/* ====================================================================== */
/* Testimonial                                                             */
/* ====================================================================== */
.pm-cs-testimonial .quote {
    margin-top: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    padding: 46px 48px 38px;
}

.pm-cs-testimonial .qmark {
    font-family: var(--font-mono);
    font-size: 46px;
    color: var(--accent);
    line-height: .7;
}

.pm-cs-testimonial .quote blockquote {
    margin: 22px 0 0;
    padding: 0;
    border: 0;
    max-width: 42ch;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -.015em;
    color: var(--ink);
}

.pm-cs-testimonial .who {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pm-cs-testimonial .av {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--cs-accent-bg);
    border: 1px solid rgba(255, 82, 14, .35);
    color: var(--accent);
}

.pm-cs-testimonial .av svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: .55;
}

.pm-cs-testimonial .av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pm-cs-testimonial .id {
    display: grid;
    gap: 5px;
}

.pm-cs-testimonial .nm {
    font-size: 13.5px;
    font-weight: var(--fw-medium);
    color: var(--ink);
}

.pm-cs-testimonial .rl {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mut-2);
}

.pm-cs-testimonial .tag {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mut-2);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 7px 13px;
}

/* ====================================================================== */
/* System chain                                                            */
/* ====================================================================== */
.pm-cs-system .chain {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.pm-cs-system .chain span {
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 14px 18px;
    color: var(--mut);
    transition: border-color .2s, color .2s;
}

.pm-cs-system .chain span:hover {
    border-color: var(--line-2);
    color: var(--ink);
}

.pm-cs-system .chain i {
    font-style: normal;
    color: var(--mut-2);
    align-self: center;
    font-family: var(--font-mono);
}

/* ====================================================================== */
/* Final CTA                                                               */
/* ====================================================================== */
.pm-cs-final {
    padding: 84px 0;
}

.pm-cs-final .box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    padding: 56px 48px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.pm-cs-final h2 {
    max-width: 16ch;
    font-size: 32px;
    font-weight: var(--fw-semibold);
    letter-spacing: -.03em;
    line-height: 1.12;
    color: var(--ink);
}

.pm-cs-final .box p {
    margin-top: 16px;
    max-width: 52ch;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--mut);
}

.pm-cs-final .acts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ====================================================================== */
/* Overlays: full-size report + creative lightbox (built by case-study.js) */
/* ====================================================================== */
.cs-rlb,
.cs-lb {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(12, 13, 16, .94);
}

.cs-rlb.on,
.cs-lb.on {
    display: flex;
}

.cs-rlb {
    padding: 28px;
}

.cs-rlb .rwrap {
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: #fff;
}

.cs-rlb .rwrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* opened from a small screen: pan the shot at 1:1 */
.cs-rlb.pan .rwrap {
    -webkit-overflow-scrolling: touch;
}

.cs-rlb.pan .rwrap img {
    width: auto;
    max-width: none;
    min-width: 100%;
}

.cs-rlb .rx {
    position: absolute;
    top: 20px;
    right: 22px;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mut);
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 9px 15px;
}

.cs-rlb .rx:hover {
    color: var(--accent);
}

.cs-lb {
    padding: 40px;
    background: rgba(12, 13, 16, .93);
}

.cs-lb .pane {
    width: min(520px, 84vw);
    max-height: 82vh;
    aspect-ratio: 4 / 5;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    overflow: hidden;
}

.cs-lb .pane img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cs-lb .nav-btn {
    flex: none;
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--ink);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 15px;
    margin: 0 16px;
    transition: border-color .16s, color .16s;
}

.cs-lb .nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cs-lb .close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: transparent;
    border: 0;
    color: var(--mut);
    font-size: 22px;
    cursor: pointer;
}

.cs-lb .idx {
    position: absolute;
    bottom: 30px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mut-2);
}

/* ====================================================================== */
/* Breakpoints                                                             */
/* ====================================================================== */
@media (max-width: 1300px) {
    .pm-cs-hero h1.hbname {
        font-size: 39px;
    }
}

@media (max-width: 1080px) {
    .pm-cs-hero .hgrid {
        gap: 38px;
    }

    .pm-cs-hero .hcol {
        margin-top: 26px;
    }

    .pm-cs-hero .hp-kn {
        font-size: 46px;
    }

    .pm-cs-hero .ov {
        grid-template-columns: repeat(2, 1fr);
    }

    .pm-cs-reports.is-compact .rscroll {
        max-height: calc(var(--shot-h, 330px) - 30px);
    }

    .pm-cs-challenge .chall {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pm-cs-strategy .paq {
        grid-template-columns: repeat(4, 1fr);
    }

    .pm-cs-strategy .paq article:nth-child(4):nth-last-child(2) {
        grid-column: span 2;
    }

    .pm-cs-strategy .paq article:nth-child(5):nth-last-child(1) {
        grid-column: span 4;
    }

    .pm-cs-creative .gal {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .pm-cs {
        padding: 60px 0;
    }

    .pm-cs h2.cs-h2 {
        font-size: 26px;
    }

    .pm-cs-hero {
        padding: 40px 0 60px;
    }

    .pm-cs-hero .hgrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pm-cs-hero .hlogo-tile {
        width: 64px;
        height: 64px;
    }

    .pm-cs-hero .hlogo {
        width: 38px;
        height: 38px;
    }

    .pm-cs-hero h1.hbname {
        margin-top: 20px;
        font-size: 32px;
    }

    .pm-cs-hero .hglyph {
        width: 440px;
        max-height: 360px;
        right: -70px;
        opacity: calc(var(--glyph-opacity, .10) * .9);
    }

    .pm-cs-hero .hpanel {
        padding: 20px;
    }

    .pm-cs-hero .hp-kn {
        font-size: 44px;
    }

    .pm-cs-reports .rtabs {
        margin-top: 26px;
    }

    .pm-cs-reports .rsum {
        grid-template-columns: 1fr 1fr;
    }

    .pm-cs-reports .rsum .v {
        font-size: 19px;
    }

    /* default: the shot keeps its native width inside a scroller */
    .pm-cs-reports .rscroll {
        max-height: 460px;
    }

    .pm-cs-reports .rscroll img {
        width: var(--sw);
        max-width: none;
    }

    /* compact: the shot scales to the card width, so the page only ever
       scrolls vertically. Tap the shot (or "Full size") to read it 1:1. */
    .pm-cs-reports.is-compact {
        padding: 40px 0;
    }

    .pm-cs-reports.is-compact .rscroll {
        overflow: hidden;
        max-height: none;
    }

    .pm-cs-reports.is-compact .rscroll img {
        width: 100%;
        max-width: 100%;
        cursor: zoom-in;
    }

    .pm-cs-reports.is-compact .rview {
        margin-top: 14px;
    }

    .pm-cs-creative .clegend {
        margin-top: 22px;
    }

    .pm-cs-creative .gal {
        grid-template-columns: repeat(2, 1fr);
    }

    .pm-cs-testimonial .quote {
        padding: 36px 28px;
    }

    .pm-cs-testimonial .quote blockquote {
        font-size: 19px;
    }

    .pm-cs-final {
        padding: 64px 0;
    }

    .pm-cs-final h2 {
        font-size: 27px;
    }

    .pm-cs-final .box {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 36px 30px;
        gap: 28px;
    }

    .pm-cs-final .acts {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .pm-cs h2.cs-h2 {
        font-size: 23px;
    }

    .pm-cs-hero .hcol {
        margin-top: 24px;
    }

    .pm-cs-hero .hlogo-tile {
        width: 58px;
        height: 58px;
        border-radius: 12px;
    }

    .pm-cs-hero .hlogo {
        width: 34px;
        height: 34px;
    }

    .pm-cs-hero h1.hbname {
        margin-top: 18px;
        font-size: 27px;
    }

    .pm-cs-hero .hbtag {
        font-size: 14.5px;
        max-width: none;
    }

    .pm-cs-hero .hbdesc {
        font-size: 13.5px;
        max-width: none;
    }

    .pm-cs-hero .hbacts {
        width: 100%;
    }

    .pm-cs-hero .hbacts .btn {
        width: 100%;
        justify-content: center;
    }

    .pm-cs-hero .hglyph {
        width: 270px;
        max-height: 240px;
        right: -40px;
        opacity: calc(var(--glyph-opacity, .10) * .85);
    }

    .pm-cs-hero.glyph-panel .hpanel::before {
        inset: 11% 10% 15% 10%;
        opacity: calc(var(--glyph-opacity, .07) * .88);
    }

    .pm-cs-hero .hp-kn {
        font-size: 38px;
    }

    .pm-cs-hero .hp-grid {
        gap: 14px;
    }

    .pm-cs-hero .hp-grid .v {
        font-size: 14.5px;
    }

    .pm-cs-hero .yrow .yk {
        width: 44px;
    }

    .pm-cs-hero .yrow .yv {
        font-size: 10px;
    }

    .pm-cs-hero .ov {
        grid-template-columns: 1fr;
    }

    .pm-cs-reports .rtabs {
        gap: 6px;
    }

    .pm-cs-reports .rtab {
        flex: 1 1 45%;
        padding: 10px 12px;
        font-size: 12.5px;
    }

    .pm-cs-reports .rbar {
        padding: 11px 13px;
    }

    .pm-cs-reports .rurl em,
    .pm-cs-reports .rdate {
        display: none;
    }

    .pm-cs-reports .rzoom {
        margin-left: auto;
    }

    .pm-cs-reports .rpills {
        padding: 12px 13px;
    }

    .pm-cs-reports .rsum > div {
        padding: 13px 14px 15px;
    }

    .pm-cs-reports .rsum .v {
        font-size: 16px;
        margin-top: 8px;
    }

    .pm-cs-strategy .paq {
        grid-template-columns: 1fr;
    }

    .pm-cs-strategy .paq article,
    .pm-cs-strategy .paq article:nth-child(4):nth-last-child(2),
    .pm-cs-strategy .paq article:nth-child(5):nth-last-child(1) {
        grid-column: auto;
    }

    .pm-cs-creative .gal {
        gap: 10px;
    }

    .pm-cs-testimonial .quote {
        padding: 30px 22px;
    }

    .pm-cs-testimonial .quote blockquote {
        font-size: 17px;
    }

    .pm-cs-testimonial .tag {
        margin-left: 0;
    }

    .pm-cs-system .chain {
        gap: 8px;
    }

    .pm-cs-system .chain span {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        padding: 14px 10px;
        font-size: 10px;
    }

    .pm-cs-system .chain i {
        display: none;
    }

    .pm-cs-final h2 {
        font-size: 24px;
    }

    .pm-cs-final .acts {
        width: 100%;
        flex-direction: column;
    }

    .pm-cs-final .acts .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-cs-hero .hglyph {
        animation: none;
    }

    .pm-cs-reports .rcard.on {
        animation: none;
    }

    .pm-cs-creative .tile,
    .pm-cs-creative .tile .cap {
        transition: none;
    }
}