/* ───── Hero (case-study) ───── */
      .case-hero {
        position: relative;
        min-height: 86vh;
        color: #fff;
        padding: 130px 0 64px;
        overflow: hidden;
      }
      .case-hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: #08080b;
      }
      .case-hero-photo {
        position: absolute;
        inset: 0;
      }
      .case-hero-photo img,
      .case-hero-media > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 1;
        filter: saturate(0.82) contrast(1.05) brightness(0.82);
      }
      .case-hero-media .placeholder {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 80% 60% at 75% 40%, rgba(235,35,71,0.07), transparent 60%),
          linear-gradient(180deg, #15151a 0%, #08080b 100%);
      }
      .case-hero-media svg.diagram {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0.55;
      }
      .case-hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
      }
      .case-hero-inner {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 64px;
        min-height: calc(86vh - 130px - 64px);
      }
      .case-eyebrow {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
      }
      .case-eyebrow .accent { color: var(--c-accent); }
      .case-hero h1 {
        font-family: var(--f-sans);
        font-weight: 500;
        color: #fff;
        font-size: var(--fs-h1);
        line-height: 1;
        letter-spacing: -0.02em;
        margin: 28px 0 0;
        max-width: 16ch;
      }
      .case-sub {
        font-family: var(--f-sans);
        font-weight: 400;
        font-size: var(--fs-body-lg);
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.78);
        max-width: 56ch;
        margin: 28px 0 0;
      }
      .case-meta-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        padding-top: 36px;
        margin-top: 36px;
        border-top: 1px solid rgba(255,255,255,0.18);
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        letter-spacing: 0.06em;
        color: rgba(255,255,255,0.7);
      }
      .case-meta-bar .item .l {
        color: rgba(255,255,255,0.45);
        text-transform: uppercase;
      }
      .case-meta-bar .item .v {
        color: #fff;
        margin-top: 4px;
        font-size: var(--fs-body-sm);
      }
      .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border: 1px solid rgba(235,35,71,0.55);
        border-radius: 999px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #fff;
      }
      .status-pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--c-accent);
        animation: pulse 2s var(--ease) infinite;
      }
      @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(235,35,71,0.6); }
        70% { box-shadow: 0 0 0 8px rgba(235,35,71,0); }
        100% { box-shadow: 0 0 0 0 rgba(235,35,71,0); }
      }

      /* Breadcrumb */
      .crumbs {
        display: flex;
        gap: 10px;
        align-items: center;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.08em;
        color: rgba(255,255,255,0.55);
        text-transform: uppercase;
      }
      .crumbs a:hover { color: #fff; }
      .crumbs .sep { opacity: 0.4; }

      /* ───── Lead block ───── */
      .lead-block {
        max-width: 880px;
        font-family: var(--f-sans);
        font-weight: 400;
        font-size: var(--fs-h3);
        line-height: 1.35;
        letter-spacing: -0.012em;
        color: var(--c-ink);
        margin-top: 32px;
        text-wrap: pretty;
      }

      /* ───── Key info table ───── */
      .keyinfo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin-top: 48px;
        border-top: 1px solid var(--c-line);
        border-left: 1px solid var(--c-line);
      }
      .keyinfo-row {
        display: contents;
      }
      .keyinfo .l, .keyinfo .v {
        padding: 22px 24px;
        border-right: 1px solid var(--c-line);
        border-bottom: 1px solid var(--c-line);
      }
      .keyinfo .l {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-text-2);
        background: var(--c-bg-warm);
      }
      .keyinfo .v {
        font-size: var(--fs-body-md);
        color: var(--c-ink);
        font-weight: 500;
      }
      @media (max-width: 700px) {
        .keyinfo { grid-template-columns: 1fr; }
      }

      /* ───── Tech-spec ───── */
      .specs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--c-line);
        margin-top: 56px;
        border: 1px solid var(--c-line);
      }
      .spec {
        background: #fff;
        padding: 48px 36px 40px;
        position: relative;
        --corner-cut: 28px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
      }
      .spec::before {
        content: "";
        position: absolute;
        top: 28px;
        left: 36px;
        width: 28px;
        height: 1px;
        background: var(--c-accent);
      }
      .spec .v {
        font-family: var(--f-sans);
        font-weight: 700;
        font-size: var(--fs-numeric-md);
        line-height: 0.95;
        letter-spacing: -0.025em;
        color: var(--c-ink);
        font-variant-numeric: tabular-nums;
        margin-top: 24px;
      }
      .spec .v sup {
        font-size: 0.45em;
        font-weight: 500;
        margin-left: 4px;
        vertical-align: super;
        color: var(--c-text-2);
      }
      .spec .l {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-md);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-text-2);
        margin-top: 16px;
      }
      .spec .meta-line {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        color: var(--c-text-3);
        margin-top: 6px;
      }
      @media (max-width: 700px) {
        .specs { grid-template-columns: 1fr; }
      }

      /* ───── Description (editorial) ───── */
      .description {
        max-width: 720px;
        font-size: var(--fs-body-lg);
        line-height: 1.65;
        color: var(--c-text);
        margin-top: 32px;
      }
      .description p + p { margin-top: 24px; }

      /* ───── Scope list ───── */
      .scope-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 56px;
        margin-top: 48px;
        max-width: 1100px;
      }
      .scope-item {
        display: flex;
        gap: 24px;
        padding: 22px 0;
        border-top: 1px solid var(--c-line);
      }
      .scope-num {
        font-family: var(--f-mono);
        font-size: var(--fs-body-sm);
        font-weight: 500;
        color: var(--c-accent-deep);
        letter-spacing: 0.04em;
        min-width: 36px;
      }
      .scope-text {
        font-size: var(--fs-body-md);
        color: var(--c-ink);
        font-weight: 500;
        line-height: 1.4;
      }
      .scope-text small {
        display: block;
        margin-top: 4px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--c-text-2);
        font-weight: 400;
      }
      @media (max-width: 700px) {
        .scope-grid { grid-template-columns: 1fr; }
      }

      /* ───── Challenge / Solution ───── */
      .challenge-grid {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 64px;
        margin-top: 32px;
        padding: 32px 0;
        border-top: 1px solid var(--c-line);
      }
      .challenge-grid + .challenge-grid { border-top: 1px solid var(--c-line); }
      .challenge-grid .h {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-text-2);
      }
      .challenge-grid .h.accent { color: var(--c-accent-deep); }
      .challenge-grid .body-lg {
        font-size: var(--fs-body-lg);
        line-height: 1.55;
        color: var(--c-ink);
        max-width: 780px;
        margin: 0;
      }
      @media (max-width: 800px) {
        .challenge-grid { grid-template-columns: 1fr; gap: 16px; }
      }

      /* ───── Gallery ───── */
      .gallery {
        margin-top: 48px;
        display: grid;
        gap: 24px;
      }
      .gallery .full {
        aspect-ratio: 21 / 9;
        background: var(--c-bg-warm);
        border: 1px solid var(--c-line);
        overflow: hidden;
        position: relative;
        --corner-cut: 24px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
        box-shadow: 0 12px 36px rgba(15, 15, 18, 0.05);
      }
      .gallery .full svg { width: 100%; height: 100%; }
      .gallery .duo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      .gallery .duo.duo--single {
        grid-template-columns: 1fr;
        max-width: min(100%, 720px);
      }
      .gallery .duo .tile {
        aspect-ratio: 4 / 3;
        background: var(--c-bg-warm);
        border: 1px solid var(--c-line);
        overflow: hidden;
        --corner-cut: 16px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
      }
      .gallery .duo .tile svg { width: 100%; height: 100%; }
      .gallery .duo .tile .ampro-photo--fill,
      .gallery .triple .tile .ampro-photo--fill,
      .related-card .img .ampro-photo--fill {
        position: absolute;
        inset: 0;
      }
      .gallery .duo .tile,
      .gallery .triple .tile,
      .related-card .img {
        position: relative;
        overflow: hidden;
      }
      .gallery .triple {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 24px;
      }
      .gallery .triple .tile {
        aspect-ratio: 4 / 3;
        background: var(--c-bg-warm);
        border: 1px solid var(--c-line);
        overflow: hidden;
        --corner-cut: 16px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corner-cut)), calc(100% - var(--corner-cut)) 100%, 0 100%);
      }
      .gallery .triple .tile svg { width: 100%; height: 100%; }
      .gallery .label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: var(--f-mono);
        font-size: var(--fs-mono-xs);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--c-text-2);
        margin-top: 12px;
        padding-left: 2px;
      }
      .gallery .label::before {
        content: '';
        width: 32px;
        height: 2px;
        background: var(--c-accent);
        flex-shrink: 0;
      }
      @media (max-width: 800px) {
        .gallery .duo, .gallery .triple { grid-template-columns: 1fr; }
      }

      /* ───── Effect ───── */
      .effect-block {
        margin-top: 32px;
        padding: 56px 48px;
        background: var(--c-bg-warm);
        border-left: 3px solid var(--c-accent);
        max-width: 920px;
      }
      .effect-block p {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h3);
        line-height: 1.35;
        letter-spacing: -0.01em;
        color: var(--c-ink);
        margin: 0;
      }

      /* ───── Recommendation ───── */
      .reco {
        position: relative;
        color: #fff;
        padding: clamp(80px, 10vw, 140px) 0;
      }
      .reco-quote-mark {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: 160px;
        line-height: 0.7;
        color: var(--c-accent);
        position: absolute;
        top: 60px;
        left: var(--pad);
        pointer-events: none;
      }
      .reco-inner {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
      }
      .reco-q {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h2);
        line-height: 1.2;
        letter-spacing: -0.018em;
        color: #fff;
        margin: 0;
        text-wrap: pretty;
      }
      .reco-attr {
        margin-top: 48px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        display: flex;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }
      .reco-attr .who { color: #fff; font-size: var(--fs-body-md); font-weight: 500; }
      .reco-attr .who small { display: block; font-family: var(--f-mono); font-size: var(--fs-mono-sm); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 6px; font-weight: 400;}
      .reco-attr .doc { font-family: var(--f-mono); font-size: var(--fs-mono-md); color: rgba(255,255,255,0.6); }

      /* ───── Related ───── */
      .related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        margin-top: 48px;
      }
      .related-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .related-card .img {
        aspect-ratio: 4 / 3;
        background: var(--c-bg-warm);
        border: 1px solid var(--c-line);
        overflow: hidden;
      }
      .related-card .img svg { width: 100%; height: 100%; }
      .related-card h4 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h4);
        line-height: 1.2;
        margin: 0;
        color: var(--c-ink);
        letter-spacing: -0.01em;
      }
      .related-card .arrow { transition: transform 0.3s var(--ease); }
      .related-card:hover .arrow { transform: translateX(6px); color: var(--c-accent); }
      @media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

      /* ───── End CTA ───── */
      .end-cta {
        color: #fff;
        padding: clamp(80px, 10vw, 160px) 0;
        position: relative;
        overflow: hidden;
      }
      .end-cta-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 64px;
        align-items: end;
      }
      .end-cta h2 {
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: var(--fs-h1);
        line-height: 1;
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0;
        max-width: 14ch;
      }
      .end-cta p {
        font-size: var(--fs-body-lg);
        line-height: 1.5;
        color: rgba(255,255,255,0.7);
        margin: 24px 0 0;
        max-width: 50ch;
      }
      .end-cta-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      @media (max-width: 800px) {
        .end-cta-grid { grid-template-columns: 1fr; }
      }

      /* ───── In-page table of contents (left rail desktop) ───── */
      .toc {
        position: sticky;
        top: 100px;
        align-self: start;
      }
      .toc h5 {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--c-text-3);
        margin: 0 0 14px;
        font-weight: 500;
      }
      .toc ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 8px;
      }
      .toc a {
        font-family: var(--f-mono);
        font-size: var(--fs-mono-sm);
        letter-spacing: 0.04em;
        color: var(--c-text-2);
        display: flex;
        gap: 12px;
        padding: 4px 0;
        transition: color 0.2s var(--ease);
      }
      .toc a:hover { color: var(--c-ink); }
      .toc a .n { color: var(--c-accent-deep); width: 28px; flex-shrink: 0; }

      .case-layout {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 64px;
      }
      @media (max-width: 1100px) {
        .case-layout { grid-template-columns: 1fr; }
        .toc { display: none; }
      }