/* USDS Cloud Portfolio 1.4.1 — stable mobile scroll + horizontal overflow fix. */
.usds-cp {
    --usds-cp-vw:100vw; --usds-cp-stage-h:100vh; --usds-cp-travel:310vh;
    --usds-cp-top:0px; --usds-cp-bleed:0px; --usds-cp-overlap:42vh;
    --usds-cp-curtain-rise:0; --usds-cp-title-o:0; --usds-cp-view-o:0; --usds-cp-view-y:24px; --usds-cp-gallery-y:0px;
    position:relative; z-index:30; width:100%; max-width:100%; min-width:0;
    height:calc(var(--usds-cp-stage-h) + var(--usds-cp-travel) + var(--usds-cp-overlap));
    margin:calc(-1 * var(--usds-cp-overlap)) 0 0; padding:0;
    background:transparent; isolation:isolate;
}
.usds-cp,.usds-cp *,.usds-cp *::before,.usds-cp *::after { box-sizing:border-box; }
.usds-cp-host,.usds-cp-host > .elementor-widget-container,.usds-cp-unclip { overflow:visible !important; }
.usds-cp-stage {
    position:-webkit-sticky; position:sticky; top:var(--usds-cp-top);
    width:var(--usds-cp-vw); max-width:none !important; height:var(--usds-cp-stage-h);
    margin-left:var(--usds-cp-bleed); overflow:hidden; background:transparent; isolation:isolate;
}
.usds-cp-atmosphere { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.usds-cp-curtain {
    position:absolute; left:0; right:0; top:-100%; height:200%;
    background:linear-gradient(to bottom,rgba(5,5,5,0) 0%,rgba(55,11,5,.92) 9%,#a72c12 18%,#e85525 26%,#ff965d 34%,#ffd2b4 41%,#fff 50%,#fff 100%);
    transform:translate3d(0,calc((1 - var(--usds-cp-curtain-rise))*60%),0);
    will-change:transform;
}
.usds-cp-content { position:absolute; z-index:5; inset:0; overflow:hidden; color:#090909; font-family:Arial,Helvetica,sans-serif; }
.usds-cp-title {
    position:absolute; z-index:1; left:50%; top:50%; width:100%; margin:0; padding:0 3vw;
    transform:translate3d(-50%,-50%,0); color:#0b0b0b !important;
    font-family:Arial,Helvetica,sans-serif !important; font-size:clamp(68px,10.6vw,188px);
    font-weight:800 !important; line-height:.82 !important; letter-spacing:-.07em;
    text-align:center; text-transform:uppercase; white-space:nowrap; opacity:var(--usds-cp-title-o);
}
/* Four narrow columns, three staggered rows, matching the supplied reference. */
.usds-cp-gallery {
    --cp-gap:clamp(10px,1.65vw,22px);
    position:absolute; z-index:3; left:50%; top:50%;
    width:min(1180px,calc((var(--usds-cp-stage-h) - 90px)*1.12),calc(100% - 48px));
    height:auto; aspect-ratio:1.12; max-width:none;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(3,minmax(0,1fr));
    column-gap:var(--cp-gap); row-gap:calc(var(--cp-gap)*1.9);
    transform:translate3d(-50%,-50%,0);
    overflow:visible; pointer-events:none;
}
.usds-cp-item {
    --cp-entry:110px; --cp-rest-y:0%;
    position:relative; z-index:2; min-width:0; min-height:0; width:100%; height:100%;
    margin:0; overflow:hidden; background:#ececec; pointer-events:auto;
    opacity:var(--cp-opacity,0);
    transform:translate3d(0,calc(var(--cp-rest-y) + var(--cp-shift,var(--cp-entry))),0);
    transition:none; will-change:transform,opacity;
}
.usds-cp-item img { display:block; width:100%; height:100%; max-width:none !important; object-fit:cover; }
.usds-cp-item:nth-child(-n+5) { --cp-entry:-110px; }
.usds-cp-item:nth-child(1) { grid-column:2; grid-row:1; }
.usds-cp-item:nth-child(2) { grid-column:4; grid-row:1; }
.usds-cp-item:nth-child(3) { grid-column:2; grid-row:2; }
.usds-cp-item:nth-child(4) { grid-column:3; grid-row:2; }
.usds-cp-item:nth-child(5) { grid-column:4; grid-row:2; }
.usds-cp-item:nth-child(6) { grid-column:1; grid-row:3; }
.usds-cp-item:nth-child(7) { grid-column:2; grid-row:3; }
.usds-cp-item:nth-child(8) { grid-column:3; grid-row:3; }
.usds-cp-item:nth-child(9) { grid-column:4; grid-row:3; }
.usds-cp-item:nth-child(10) { grid-column:1; grid-row:2; }
/* Alternating columns sit 41% of a tile higher, matching the reference. */
.usds-cp-item:nth-child(4),.usds-cp-item:nth-child(6),
.usds-cp-item:nth-child(8),.usds-cp-item:nth-child(10) { --cp-rest-y:-41%; }
.usds-cp-view-more {
    position:absolute; z-index:6; left:50%; bottom:clamp(14px,2.2vh,28px);
    color:#0a0a0a !important;
    font-size:10px; font-weight:500; line-height:1; letter-spacing:.08em;
    text-transform:uppercase; text-decoration:none !important; opacity:var(--usds-cp-view-o); white-space:nowrap; transform:translate3d(-50%,var(--usds-cp-view-y),0);
}
.usds-cp-view-more::after { content:'↗'; margin-left:7px; font-size:12px; }
.usds-cp-empty { position:absolute; z-index:7; left:50%; top:60%; transform:translate(-50%,-50%); padding:12px 16px; background:rgba(255,255,255,.92); border:1px solid #ddd; color:#111; font-size:13px; }
@media(max-width:767px) {
    /*
     * Mobile keeps the SAME scroll-driven orange -> white cloud transition as desktop.
     * The stage stays sticky and the portfolio becomes a 2-column moving collage so all
     * ten images can remain large enough to read without losing the desktop-style effect.
     */
    .usds-cp {
        --usds-cp-overlap:0px;
        height:calc(var(--usds-cp-stage-h) + var(--usds-cp-travel));
        min-height:0; margin:0; overflow:visible;
    }
    .usds-cp-stage {
        position:-webkit-sticky; position:sticky; top:var(--usds-cp-top);
        height:var(--usds-cp-stage-h); min-height:0;
        overflow:hidden; background:transparent;
    }
    .usds-cp-atmosphere { display:block; position:absolute; inset:0; overflow:hidden; }
    .usds-cp-curtain {
        display:block;
        background:linear-gradient(to bottom,
            rgba(5,5,5,0) 0%,
            rgba(55,11,5,.92) 9%,
            #a72c12 18%,
            #e85525 26%,
            #ff965d 34%,
            #ffd2b4 41%,
            #fff 50%,
            #fff 100%);
    }
    .usds-cp-content {
        position:absolute; inset:0; min-height:0; padding:0;
        display:block; overflow:hidden;
    }
    .usds-cp-title {
        position:absolute; left:50%; top:50%; width:100%;
        padding:0 14px; transform:translate3d(-50%,-50%,0);
        font-size:clamp(46px,14.5vw,78px); line-height:.84 !important;
        letter-spacing:-.065em; white-space:normal; text-wrap:balance;
    }
    .usds-cp-gallery {
        --cp-gap:10px;
        position:absolute; z-index:3; left:50%; top:0;
        width:min(92vw,430px); height:auto; aspect-ratio:auto;
        display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:none; grid-auto-rows:auto;
        column-gap:var(--cp-gap); row-gap:var(--cp-gap);
        transform:translate3d(-50%,var(--usds-cp-gallery-y),0);
        will-change:transform; overflow:visible;
    }
    .usds-cp-item,
    .usds-cp-item:nth-child(n) {
        grid-column:auto; grid-row:auto;
        width:100%; height:auto; min-height:0; margin:0;
        aspect-ratio:4/5; --cp-rest-y:0%;
    }
    .usds-cp-item:nth-child(odd) { --cp-entry:-86px; }
    .usds-cp-item:nth-child(even) { --cp-entry:86px; }
    .usds-cp-view-more {
        position:absolute; z-index:7; left:50%; bottom:16px;
        display:inline-block; margin:0;
        font-size:11px;
        transform:translate3d(-50%,var(--usds-cp-view-y),0);
    }
    .usds-cp-empty {
        position:absolute; left:50%; top:58%;
        transform:translate(-50%,-50%); margin:0;
    }
}

/* Mobile stability / horizontal overflow guard. */
@media(max-width:767px) {
    /*
     * Do not let Elementor wrappers become horizontal scroll containers.
     * overflow-x:clip does not create a scroll container, so sticky remains reliable.
     */
    .usds-cp-host,
    .usds-cp-host > .elementor-widget-container,
    .usds-cp-unclip {
        overflow-x:clip !important;
        overflow-y:visible !important;
        max-width:100% !important;
    }

    .usds-cp {
        width:100% !important;
        max-width:100% !important;
        overflow-x:clip !important;
        overscroll-behavior-x:none;
        touch-action:pan-y;
    }

    .usds-cp-stage {
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        left:auto !important;
        right:auto !important;
        overflow:hidden !important;
        contain:paint;
    }

    .usds-cp-atmosphere,
    .usds-cp-content {
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
    }

    .usds-cp-gallery {
        max-width:calc(100% - 24px) !important;
    }
}

@media(max-width:767px) and (max-height:650px) {
    .usds-cp-gallery { width:min(78vw,350px); --cp-gap:8px; }
    .usds-cp-title { font-size:clamp(40px,12.8vw,64px); }
}
@media(prefers-reduced-motion:reduce) {
    .usds-cp { height:auto; min-height:var(--usds-cp-stage-h); margin-top:0; }
    .usds-cp-stage { position:relative; top:auto; height:auto; min-height:var(--usds-cp-stage-h); background:#fff; }
    .usds-cp-atmosphere { display:none; }
    .usds-cp-content { position:relative; inset:auto; min-height:var(--usds-cp-stage-h); overflow:visible; padding:34px 16px 24px; display:flex; flex-direction:column; align-items:center; }
    .usds-cp-title { position:absolute; top:45%; }
    .usds-cp-gallery { position:relative; left:auto; top:auto; width:min(100%,720px); height:auto; aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; gap:12px; transform:none; }
    .usds-cp-item,.usds-cp-item:nth-child(n) { grid-column:auto; grid-row:auto; margin:0; --cp-rest-y:0%; width:100%; height:auto; aspect-ratio:4/5; opacity:1 !important; transform:none !important; transition:none !important; }
    .usds-cp-title { opacity:.13 !important; }
    .usds-cp-view-more { position:relative; left:auto; bottom:auto; display:inline-block; margin-top:36px; opacity:1 !important; transform:none !important; }
}