/* ── CORPORATE PHOTO COLLAGE ── */
        .corp-collage-col { display: none; }

        .cc-slot, .cm-tile {
            position: relative;
            overflow: hidden;
            border-radius: 2px;
            background: rgba(8,9,64,0.05);
            /* Frame as an outer ring + shadow rather than a border: keeps the photo
               at full slot size (a padded mat would shrink it) and leaves the
               aspect-ratio height math in js/corporate-collage.js untouched.
               .cc-stack is inset horizontally to give the shadow room to fall. */
            box-shadow:
                0 0 0 1px rgba(197,160,89,0.5),
                0 2px 3px rgba(8,9,64,0.06),
                0 24px 36px -22px rgba(8,9,64,0.55);
        }
        .cc-slot { display: none; }
        .cc-slot.cc-live { display: block; }
        .cc-slot-lg { aspect-ratio: 4 / 5; }
        .cc-slot-sm { aspect-ratio: 1 / 1; }

        /* Warm gold wash + edge vignette. The photo library spans 72 very
           differently-lit shots; these two overlays pull them onto one palette
           so the column reads as a single art-directed strip. */
        .cc-slot::before, .cm-tile::before,
        .cc-slot::after, .cm-tile::after {
            content: '';
            position: absolute; inset: 0;
            pointer-events: none; z-index: 2;
        }
        .cc-slot::before, .cm-tile::before {
            background: linear-gradient(158deg, rgba(197,160,89,0.22) 0%, rgba(197,160,89,0) 58%);
            mix-blend-mode: soft-light;
        }
        .cc-slot::after, .cm-tile::after {
            background:
                linear-gradient(180deg, rgba(8,9,64,0.16) 0%, rgba(8,9,64,0) 30%,
                                        rgba(8,9,64,0) 60%, rgba(8,9,64,0.24) 100%),
                radial-gradient(118% 88% at 50% 44%, rgba(8,9,64,0) 42%, rgba(8,9,64,0.18) 100%);
        }

        .cc-img {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0;
            transform: scale(1);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                        transform var(--cc-dwell, 12s) linear;
        }
        .cc-img.cc-img-on { opacity: 1; transform: scale(1.08); }
        .cc-img[src=""] { display: none; }

        /* #corp-collage-col deliberately contributes zero intrinsic height (its only
           child is absolutely positioned) so the grid row height is set by
           #corporate-inner alone, then the column stretches to match it exactly —
           this is what makes the photo count self-adjust to the text height instead
           of a hardcoded number. Do not add align-items:start to the shell; that
           exempts the column from stretch and it collapses to zero height. */
        @media (min-width: 1200px) {
            /* Buy back horizontal room for the two photo columns at laptop widths. */
            #corporate { padding-left: 40px; padding-right: 40px; }
            #corp-collage-shell {
                display: grid;
                grid-template-columns: minmax(120px, 186px) minmax(0, 1fr) minmax(120px, 186px);
                column-gap: 28px;
                max-width: 1572px;
                margin: 0 auto;
            }
            .corp-collage-col {
                display: block;
                position: relative;
                overflow: hidden;
            }
            /* Horizontal inset = room for each slot's drop shadow, which the
               column's overflow:hidden would otherwise clip flat. layout() reads
               the stack's own width (not the column's) so the slot heights stay
               exact despite this inset. */
            .cc-stack {
                position: absolute;
                inset: 0 9px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 18px;
            }
        }
        @media (min-width: 1500px) {
            #corporate { padding-left: 80px; padding-right: 80px; }
            #corp-collage-shell {
                grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) minmax(140px, 220px);
                column-gap: 36px;
            }
        }

        /* ── MOBILE / TABLET MARQUEE ──
           Stand-in for the side collage below 1200px: two rows drifting in
           opposite directions. The tiles share .cc-slot's frame and colour
           grade (selectors above) so both treatments read as one system. */
        #corp-marquee {
            position: relative; z-index: 1;
            margin: 44px -20px 0;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
        }
        @media (min-width: 768px) { #corp-marquee { margin: 60px -80px 0; } }
        @media (min-width: 1200px) { #corp-marquee { display: none; } }

        .cm-row { overflow: hidden; }
        .cm-row + .cm-row { margin-top: 10px; }

        /* Spacing lives on each tile's margin-right, NOT on a flex gap: the
           track is two identical sets and the loop translates it exactly -50%,
           which only lands seamlessly if the trailing tile carries its gap too.
           A flex gap omits the last one and the seam visibly jumps. */
        .cm-track {
            display: flex;
            width: max-content;
            will-change: transform;
        }
        /* animation-play-state must be re-declared after the `animation`
           shorthand on each row — the shorthand resets it back to `running`,
           so setting it once on .cm-track above would silently never apply. */
        .cm-row-left  .cm-track {
            animation: cmDriftLeft 32s linear infinite;
            animation-play-state: paused;
        }
        .cm-row-right .cm-track {
            animation: cmDriftRight 38s linear infinite;
            animation-play-state: paused;
        }
        #corp-marquee.cm-live .cm-track { animation-play-state: running; }

        @keyframes cmDriftLeft {
            from { transform: translate3d(0, 0, 0); }
            to   { transform: translate3d(-50%, 0, 0); }
        }
        @keyframes cmDriftRight {
            from { transform: translate3d(-50%, 0, 0); }
            to   { transform: translate3d(0, 0, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            /* Needs to out-specify .cm-row-left/.cm-row-right above. Belt and
               braces — the JS also declines to add .cm-live under reduced
               motion, and the tracks are paused until it does. */
            #corp-marquee .cm-row .cm-track { animation: none; }
        }

        .cm-tile {
            flex: 0 0 auto;
            height: 150px;
            margin-right: 10px;
        }
        .cm-tile-p { aspect-ratio: 4 / 5; }
        .cm-tile-s { aspect-ratio: 1 / 1; }
        /* Two stacked layers per tile so the rotator can cross-fade, same as
           .cc-img in the desktop columns. The HTML ships layer A with a real
           src and .cc-img-on already applied, so a no-JS visitor sees a static
           strip of photos rather than empty frames. No display:none on the
           empty layer — toggling display would kill the opacity transition and
           make each swap pop instead of dissolve. */
        .cm-img {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .cm-img.cc-img-on { opacity: 1; }
        @media (prefers-reduced-motion: reduce) {
            .cm-img { transition: none; }
        }
        @media (min-width: 600px) { .cm-tile { height: 172px; } }
        @media (min-width: 900px) { .cm-tile { height: 210px; margin-right: 12px; }
                                    .cm-row + .cm-row { margin-top: 12px; } }