/* Standalone hero / key visual, full width, natural ratio */
        .project-content--hsbc .hsbc-figure--natural {
            margin: var(--space-xl) 0;
            width: 100%;
        }

        .project-content--hsbc .hsbc-figure--natural img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: var(--radius-lg);
        }

        /* Aligned pairs & grids: equal cells, cover crop for flush edges */
        .project-content--hsbc .hsbc-tile {
            margin: 0;
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 4 / 3;
            background: var(--color-bg-alt, #f0f0f0);
        }

        .project-content--hsbc .hsbc-tile img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .project-content--hsbc .hsbc-tile--wide {
            aspect-ratio: 2 / 1;
        }

        .project-content--hsbc .hsbc-pair--aligned {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-lg);
            margin: var(--space-xl) 0;
        }

        @media (min-width: 768px) {
            .project-content--hsbc .hsbc-pair--aligned {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .project-images-press-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-lg);
            margin: var(--space-2xl) 0;
            width: 100%;
        }

        .project-images-press-strip .hsbc-tile {
            aspect-ratio: 4 / 5;
        }

        @media (max-width: 600px) {
            .project-images-press-strip {
                grid-template-columns: repeat(2, 1fr);
            }

            .project-images-press-strip .hsbc-tile:last-child {
                grid-column: 1 / -1;
                max-width: 50%;
                margin: 0 auto;
            }
        }

        /* Touchpoints gallery */
        .hsbc-touchpoints-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-lg);
            margin: var(--space-2xl) 0;
        }

        .hsbc-touchpoints-grid>.hsbc-tile--wide {
            grid-column: 1 / -1;
            aspect-ratio: 21 / 9;
        }

        .hsbc-touchpoints-grid>.hsbc-tile--cards {
            grid-column: 1 / -1;
            aspect-ratio: 2 / 1;
        }

        .hsbc-touchpoints-triple {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-lg);
        }

        @media (max-width: 767px) {
            .hsbc-touchpoints-triple {
                grid-template-columns: 1fr;
            }
        }