/* ==========================================================
   AURASIGN — OBYS STYLE SERVICE INDEX
   V9 FIX: SỬA LỖI NGOẶC CSS
========================================================== */

.aura-work-section,
.aura-work-section > .section-content,
.aura-work-row,
.aura-work-row > .col,
.aura-work-row > .col > .col-inner{
    padding:0 !important;
    margin:0 !important;
    max-width:none !important;
}

.aura-work{
    --aura-blue:#023184;
    --aura-black:#101114;
    --aura-muted:#c9c9c9;
    --aura-bg:#EAEAEA;

    /* FOCUS SVG */
    --aura-lens-size:clamp(250px,20vw,315px);
    --aura-svg-zoom:1.01;
    --aura-split-axis:50%;
    --aura-split-closed:2px;
    --aura-split-open:42px;
    --aura-split-switch:54px;
    --aura-lens-shift-x:0px;
    --aura-lens-shift-y:6px;
    --aura-svg-offset-x:4.47%;
    --aura-svg-offset-y:7.22%;

    position:relative;
    width:100%;
    height:calc(100svh - 90px);
    min-height:650px;
    overflow:hidden;
    background:var(--aura-bg);
    color:var(--aura-black);
    font-family:inherit;
}

.aura-service-nav{
    position:absolute;
    left:14px;
    top:50%;
    z-index:20;
    width:320px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    transform:translateY(-50%);
    transition:
        left .8s cubic-bezier(.76,0,.24,1),
        right .8s cubic-bezier(.76,0,.24,1),
        top .8s cubic-bezier(.76,0,.24,1),
        bottom .8s cubic-bezier(.76,0,.24,1),
        transform .8s cubic-bezier(.76,0,.24,1),
        opacity .45s ease;
}

.aura-service-link{
    appearance:none;
    -webkit-appearance:none;
    display:flex;
    width:auto;
    margin:0 !important;
    padding:0 !important;
    align-items:baseline;
    gap:9px;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:#c7c7c7 !important;
    font-family:inherit;
    font-size:14px;
    font-weight:400;
    line-height:1.12;
    letter-spacing:-.035em;
    text-align:left;
    text-transform:none;
    cursor:pointer;
    transition:
        color .25s ease,
        transform .4s cubic-bezier(.2,.8,.2,1);
}

.aura-service-link:before,
.aura-service-link:after{
    display:none !important;
}

.aura-service-link:hover{
    color:#777 !important;
}

.aura-service-link.is-active{
    color:#101114 !important;
    transform:translateX(2px);
}

.aura-service-code{
    display:none;
    font-size:8px;
    letter-spacing:.06em;
}

.aura-stage{
    position:absolute;
    inset:0;
    z-index:5;
    overflow:hidden;
}

.aura-cards{
    position:absolute;
    inset:0;
}

.aura-card{
    --x:0px;
    --y:0px;
    --scale:1;
    --opacity:1;

    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    width:178px;
    height:220px;
    display:block;
    padding:0;
    background:transparent;
    color:#101114 !important;
    text-decoration:none !important;
    overflow:hidden;
    opacity:var(--opacity);
    transform:
        translate(-50%,-50%)
        translate(var(--x),var(--y))
        scale(var(--scale));
    transform-origin:center;
    transition:
        transform 1s cubic-bezier(.76,0,.24,1),
        opacity .6s ease,
        width .8s cubic-bezier(.76,0,.24,1),
        height .8s cubic-bezier(.76,0,.24,1),
        background .3s ease;
    will-change:transform;
}

/* Circular edge items teleport instead of streaking across the viewport. */
.aura-card.is-wrap-jump{
    visibility:hidden !important;
    opacity:0 !important;
    transition:none !important;
}

.aura-card.is-wrap-jump .aura-card-visual,
.aura-card.is-wrap-jump .aura-card-visual img{
    transition:none !important;
}


.aura-card-visual{
    position:absolute;
    inset:0;
    z-index:0;
    display:block;
    overflow:hidden;
    pointer-events:none;
}

.aura-card-visual img{
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    object-fit:cover;
    object-position:50% 50% !important;
    margin:0 !important;
    filter:grayscale(100%);
    transform:scale(1.015);
    transition:
        filter .55s ease,
        transform .9s cubic-bezier(.76,0,.24,1);
}


.aura-card.is-active .aura-card-visual img{
    filter:grayscale(0%);
    transform:scale(1);
}


.aura-card-number,
.aura-card-inner{
    position:relative;
    z-index:2;
}

.aura-card:hover{
    color:#101114 !important;
}

.aura-card.is-active{
    z-index:4;
    background:transparent;
}

.aura-card-number{
    font-size:9px;
    opacity:.55;
}

.aura-card-inner{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.aura-card-code{
    font-size:9px;
    letter-spacing:.08em;
    color:#777;
}

.aura-card strong{
    font-size:18px;
    line-height:1;
    font-weight:500;
    letter-spacing:-.045em;
}

.aura-focus-logo{
    --split:var(--aura-split-closed);

    position:absolute;
    left:50%;
    top:50%;
    z-index:10;
    width:var(--aura-lens-size);
    height:var(--aura-lens-size);
    transform:translate3d(
        calc(-50% + var(--aura-lens-shift-x)),
        calc(-50% + var(--aura-lens-shift-y)),
        0
    );
    pointer-events:none;
    overflow:visible;
    will-change:width,height,transform;
    transition:
        width .8s cubic-bezier(.76,0,.24,1),
        height .8s cubic-bezier(.76,0,.24,1),
        transform .8s cubic-bezier(.76,0,.24,1);
}

.aura-focus-half{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
    transition:
        transform .82s cubic-bezier(.76,0,.24,1);
}

.aura-focus-left{
    clip-path:inset(0 calc(100% - var(--aura-split-axis)) 0 0);
    -webkit-clip-path:inset(0 calc(100% - var(--aura-split-axis)) 0 0);
    transform:translate3d(calc(var(--split) * -1),0,0);
}

.aura-focus-right{
    clip-path:inset(0 0 0 var(--aura-split-axis));
    -webkit-clip-path:inset(0 0 0 var(--aura-split-axis));
    transform:translate3d(var(--split),0,0);
}

/*
 * Geometry note: magnifier-icon-vector-transparent.svg has a right-side handle,
 * so the visual square center is ~44.88% of the 1254px SVG canvas.
 * +5.12% X offset aligns the intentional white square gap with the 50% clip axis.
 * Do not reset this to 0px unless the SVG viewBox/artwork changes.
 */
.aura-focus-half img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    display:block !important;
    object-fit:contain;
    transform:translate3d(var(--aura-svg-offset-x),var(--aura-svg-offset-y),0) scale(var(--aura-svg-zoom));
    transform-origin:50% 50%;
    image-rendering:auto;
    user-select:none;
    pointer-events:none;
    backface-visibility:hidden;
}

.aura-focus-left img,
.aura-focus-right img{
    left:0 !important;
    right:auto !important;
}

.aura-work.is-focus-open .aura-focus-logo{
    --split:var(--aura-split-open);
}

.aura-work.is-switching .aura-focus-logo{
    --split:var(--aura-split-switch);
}

.aura-work.is-layout-switching .aura-focus-logo{
    --split:var(--aura-split-switch);
}

.aura-service-info{
    position:absolute;
    right:14px;
    top:50%;
    z-index:20;
    width:385px;
    transform:translateY(-50%);
    transition:opacity .45s ease;
}

.aura-service-current{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
    font-size:9px;
    line-height:1;
}

.aura-current-code{
    letter-spacing:.08em;
}

.aura-current-number{
    font-variant-numeric:tabular-nums;
}

.aura-info-content{
    transition:
        opacity .3s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);
}

.aura-work.is-switching .aura-info-content{
    opacity:0;
    transform:translateY(12px);
}

.aura-info-title{
    margin:0 0 15px !important;
    font-family:inherit;
    font-size:16px;
    line-height:1.1;
    font-weight:500;
    letter-spacing:-.035em;
}

.aura-info-description{
    max-width:290px;
    margin:0 0 21px;
    font-size:11px;
    line-height:1.35;
    color:#333;
}

.aura-info-more{
    display:inline-flex;
    align-items:center;
    gap:25px;
    padding-bottom:4px;
    border-bottom:1px solid #101114;
    color:#101114 !important;
    font-size:10px;
    line-height:1;
    text-decoration:none !important;
    transition:gap .3s ease;
}

.aura-info-more:hover{
    gap:34px;
}

.aura-layout-controls{
    position:absolute;
    left:14px;
    bottom:14px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:2px;
    font-size:12px;
}

.aura-layout-btn{
    appearance:none !important;
    min-height:0 !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 0 2px !important;
    border:0 !important;
    border-bottom:1px solid transparent !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:#101114 !important;
    font-family:inherit !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
    text-transform:none !important;
}

.aura-layout-btn:before,
.aura-layout-btn:after{
    display:none !important;
}

.aura-layout-btn.is-active{
    border-bottom-color:#101114 !important;
}

.aura-work[data-layout="vertical"]{
    --aura-lens-size:clamp(225px,18vw,275px);
    --aura-svg-zoom:1;
    --aura-split-open:42px;
    --aura-split-switch:54px;
    --aura-lens-shift-x:0px;
    --aura-lens-shift-y:6px;
    --aura-svg-offset-x:4.47%;
}

.aura-work[data-layout="horizontal"]{
    --aura-lens-size:clamp(220px,17.5vw,268px);
    --aura-svg-zoom:1;
    --aura-split-open:44px;
    --aura-split-switch:56px;
    --aura-lens-shift-x:0px;
    --aura-lens-shift-y:6px;
    --aura-svg-offset-x:4.47%;
}

.aura-work[data-layout="horizontal"] .aura-service-nav{
    left:auto;
    right:14px;
    top:auto;
    bottom:34px;
    transform:none;
    width:385px;
}

.aura-work[data-layout="horizontal"] .aura-service-link{
    font-size:13px;
}

.aura-work[data-layout="horizontal"] .aura-service-info{
    left:50%;
    right:auto;
    top:18%;
    bottom:auto;
    width:min(370px,28vw);
    transform:translateX(-50%);
    z-index:24;
}

/* In Horizontal mode the count belongs to the active image, not the right info block. */
.aura-work[data-layout="horizontal"] .aura-current-number{
    display:none;
}

.aura-stage-counter{
    position:absolute;
    left:50%;
    top:calc(50% + 168px);
    z-index:16;
    display:none;
    min-width:20px;
    transform:translateX(-50%);
    color:#777;
    font-size:9px;
    line-height:1;
    font-variant-numeric:tabular-nums;
    text-align:center;
    pointer-events:none;
}

.aura-work[data-layout="horizontal"].aura-stage-counter{
    display:block;
}

.aura-work[data-layout="grid"]{
    --aura-lens-size:clamp(198px,15.5vw,240px);
    --aura-svg-zoom:1;
    --aura-split-closed:2px;
    --aura-split-open:22px;
    --aura-split-switch:28px;
    --aura-lens-shift-x:0px;
    --aura-lens-shift-y:6px;
    --aura-svg-offset-x:4.47%;
}

.aura-work[data-layout="grid"] .aura-service-nav{
    opacity:0;
    pointer-events:none;
}

.aura-work[data-layout="grid"] .aura-service-info{
    opacity:0;
    pointer-events:none;
}

.aura-work[data-layout="grid"] .aura-card{
    width:136px;
    height:170px;
}

/* Grid keeps the magnifier open around the centered active image. */
.aura-work[data-layout="grid"].is-focus-open .aura-focus-logo{
    --split:var(--aura-split-open);
}


@media (min-width:768px) and (max-width:1200px){
    .aura-work[data-layout="horizontal"] .aura-service-info{
        left:50%;
        right:auto;
        top:15%;
        width:min(340px,40vw);
        transform:translateX(-50%);
    }

    .aura-work[data-layout="horizontal"] .aura-service-nav{
        width:min(320px,28vw);
    }
}

@media (max-width:767px) and (orientation:portrait){

    .aura-work{
        height:calc(100svh - 70px);
        min-height:620px;

        --aura-lens-size:clamp(195px,54vw,240px);
        --aura-svg-zoom:1;
        --aura-split-open:16px;
        --aura-split-switch:22px;
        --aura-lens-shift-y:4px;
        --aura-svg-offset-x:4.47%;
    }

    .aura-service-nav{
        left:18px;
        top:110px;
        width:calc(100% - 36px);
        transform:none;
    }

    .aura-service-link{
        font-size:13px;
    }

    .aura-service-info{
        left:18px;
        right:auto;
        top:auto;
        bottom:80px;
        width:calc(100% - 36px);
        transform:none;
    }

    .aura-service-current{
        display:none;
    }

    .aura-info-description{
        display:none;
    }

    .aura-card{
        width:136px;
        height:172px;
    }

    .aura-layout-controls{
        left:18px;
        bottom:20px;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-lens-size:clamp(195px,54vw,240px);
        --aura-split-open:16px;
        --aura-split-switch:22px;
    }

    .aura-work[data-layout="horizontal"] .aura-service-nav{
        left:18px;
        right:auto;
        top:110px;
        bottom:auto;
        width:calc(100% - 36px);
    }

    .aura-work[data-layout="horizontal"] .aura-service-info{
        left:18px;
        right:18px;
        top:210px;
        bottom:auto;
        width:auto;
        transform:none;
    }

    .aura-work[data-layout="grid"]{
        --aura-lens-size:clamp(178px,50vw,220px);
        --aura-split-open:14px;
        --aura-split-switch:19px;
    }

    .aura-work[data-layout="grid"] .aura-card{
        width:102px;
        height:130px;
    }

}

/* ==========================================================
   V4 SINGLE-PAGE DETAIL EXPERIENCE
   - Header của Flatsome nằm ngoài component nên không bị ẩn.
   - Kính lúp dùng chung giữa index/detail, không bị remove khỏi DOM.
========================================================== */

.aura-work{
    --aura-detail-lens-size:clamp(108px,7.6vw,136px);
    --aura-detail-split:3px;
    --aura-detail-gallery-gap:72vh;
    --aura-detail-media-width:clamp(430px,38vw,640px);
}

/* Cho phép toàn bộ khối index fade nhưng không tác động header */
.aura-service-nav,
.aura-service-info,
.aura-layout-controls,
.aura-cards{
    transition:
        opacity .52s cubic-bezier(.22,.61,.36,1),
        transform .7s cubic-bezier(.76,0,.24,1);
}

/* ---------- DETAIL VIEW ---------- */

.aura-detail-view{
    position:absolute;
    inset:0;
    z-index:4;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .52s ease,
        visibility 0s linear .52s;
}

.aura-detail-left{
    position:absolute;
    inset:0 auto 0 0;
    width:52%;
    z-index:7;
    pointer-events:none;
}

.aura-detail-title-block,
.aura-detail-copy-block{
    position:absolute;
    top:50%;
    opacity:0;
    transform:translateY(calc(-50% + 18px));
    transition:
        opacity .55s ease,
        transform .82s cubic-bezier(.76,0,.24,1);
}

.aura-detail-title-block{
    left:4%;
    width:34%;
    min-width:170px;
}

.aura-detail-copy-block{
    /* Keep copy in the middle-left column but stop well before the lens. */
    left:44%;
    width:22%;
    max-width:280px;
}

.aura-detail-code{
    display:block;
    margin-bottom:8px;
    font-size:9px;
    line-height:1;
    letter-spacing:.08em;
    color:#101114;
}

.aura-detail-title{
    margin:0 !important;
    font-family:inherit;
    font-size:14px;
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.03em;
    text-transform:none;
}

.aura-detail-description{
    margin:0;
    font-size:11px;
    line-height:1.38;
    color:#101114;
}

.aura-detail-cta{
    display:inline-block;
    margin-top:18px;
    padding:0 0 4px;
    border-bottom:1px solid #101114;
    color:#101114 !important;
    font-size:11px;
    line-height:1.1;
    text-decoration:none !important;
    transition:opacity .25s ease,border-color .25s ease;
}

.aura-detail-cta:hover{
    opacity:.55;
}

.aura-detail-cta.is-hidden{
    display:none !important;
}

.aura-detail-back{
    position:absolute;
    left:14px;
    bottom:14px;
    margin:0 !important;
    padding:0 0 3px !important;
    min-height:0 !important;
    width:auto !important;
    height:auto !important;
    border:0 !important;
    border-bottom:1px solid #bdbdbd !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:#bdbdbd !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
    text-transform:none !important;
    pointer-events:auto;
    cursor:pointer;
    opacity:0;
    transform:translateY(8px);
    transition:
        color .25s ease,
        border-color .25s ease,
        opacity .5s ease,
        transform .7s cubic-bezier(.76,0,.24,1);
}

.aura-detail-back:hover{
    color:#101114 !important;
    border-color:#101114 !important;
}

/* ---------- GALLERY RIGHT ---------- */

.aura-detail-gallery{
    position:absolute;
    left:56%;
    right:0;
    top:0;
    bottom:0;
    z-index:5;
    overflow:hidden;
    opacity:0;
    transform:translateX(44px);
    transition:
        opacity .6s ease,
        transform .95s cubic-bezier(.76,0,.24,1);
}

.aura-detail-gallery-rail{
    position:absolute;
    inset:0;
}

.aura-detail-media{
    --gallery-y:0px;
    --gallery-scale:1;
    --gallery-opacity:1;
    --media-aspect:auto;

    position:absolute;
    left:50%;
    top:50%;
    width:var(--aura-detail-media-width);
    height:auto;
    aspect-ratio:var(--media-aspect);
    margin:0 !important;
    display:block;
    overflow:hidden;
    background:transparent;
    opacity:var(--gallery-opacity);
    transform:
        translate3d(-50%,-50%,0)
        translate3d(0,var(--gallery-y),0)
        scale(var(--gallery-scale));
    transform-origin:center;
    will-change:transform,opacity;
    backface-visibility:hidden;
}

.aura-detail-media img{
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    display:block;
    object-fit:contain;
    object-position:50% 50%;
    user-select:none;
    pointer-events:none;
}

.aura-detail-media.is-empty{
    padding:36px;
    text-align:center;
    font-size:12px;
    color:#999;
}

.aura-detail-view::after{
    content:"";
    position:absolute;
    left:56%;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(16,17,20,.04);
    pointer-events:none;
}

/* ---------- INDEX -> DETAIL TRANSITION ---------- */

.aura-work.is-detail-entering .aura-service-nav,
.aura-work.is-detail-entering .aura-service-info,
.aura-work.is-detail-entering .aura-layout-controls,
.aura-work.is-detail-entering .aura-cards,
.aura-work.is-detail .aura-service-nav,
.aura-work.is-detail .aura-service-info,
.aura-work.is-detail .aura-layout-controls,
.aura-work.is-detail .aura-cards{
    opacity:0;
    pointer-events:none;
}

.aura-work.is-detail-entering .aura-service-nav,
.aura-work.is-detail .aura-service-nav{
    transform:translateY(-50%) translateX(-12px);
}

.aura-work.is-detail-entering .aura-service-info,
.aura-work.is-detail .aura-service-info{
    transform:translateY(-50%) translateX(12px);
}

.aura-work.is-detail-entering .aura-layout-controls,
.aura-work.is-detail .aura-layout-controls{
    transform:translateY(10px);
}

.aura-work.is-detail-entering .aura-cards,
.aura-work.is-detail .aura-cards{
    transform:scale(.965);
}

/* Kính lúp KHÔNG biến mất. Nó đóng lại và thu nhỏ về vị trí neo giữa 2 vùng. */
.aura-work.is-detail-entering,
.aura-work.is-detail,
.aura-work.is-detail-leaving{
    --aura-split-axis:50%;
    --aura-svg-offset-x:4.47%;
    --aura-svg-offset-y:7.22%;
    --aura-svg-zoom:1;
}

.aura-work.is-detail-entering .aura-focus-logo,
.aura-work.is-detail .aura-focus-logo,
.aura-work.is-detail-leaving .aura-focus-logo{
    --split:var(--aura-detail-split);
    left:50%;
    top:50%;
    width:var(--aura-detail-lens-size);
    height:var(--aura-detail-lens-size);
    transform:translate3d(-50%,-50%,0);
    z-index:30;
    transition:
        left .9s cubic-bezier(.76,0,.24,1),
        top .9s cubic-bezier(.76,0,.24,1),
        width .9s cubic-bezier(.76,0,.24,1),
        height .9s cubic-bezier(.76,0,.24,1),
        transform .9s cubic-bezier(.76,0,.24,1);
}

.aura-work.is-detail-entering .aura-focus-half,
.aura-work.is-detail .aura-focus-half,
.aura-work.is-detail-leaving .aura-focus-half{
    transition:transform .82s cubic-bezier(.76,0,.24,1);
}

.aura-work.is-detail .aura-detail-view{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
        opacity .5s ease .06s,
        visibility 0s;
}

.aura-work.is-detail.is-detail-ready .aura-detail-title-block,
.aura-work.is-detail.is-detail-ready .aura-detail-copy-block{
    opacity:1;
    transform:translateY(-50%);
}

.aura-work.is-detail.is-detail-ready .aura-detail-gallery{
    opacity:1;
    transform:translateX(0);
}

.aura-work.is-detail.is-detail-ready .aura-detail-back{
    opacity:1;
    transform:translateY(0);
}

.aura-work.is-detail-leaving .aura-detail-view{
    opacity:0;
    pointer-events:none;
}

.aura-work.is-detail-leaving .aura-detail-title-block,
.aura-work.is-detail-leaving .aura-detail-copy-block{
    opacity:0;
    transform:translateY(calc(-50% + 12px));
}

.aura-work.is-detail-leaving .aura-detail-gallery{
    opacity:0;
    transform:translateX(36px);
}

.aura-work.is-detail-leaving .aura-detail-back{
    opacity:0;
    transform:translateY(8px);
}

/* Khi đang detail, stage chỉ giữ kính lúp; card đã fade bằng parent. */
.aura-work.is-detail .aura-stage,
.aura-work.is-detail-entering .aura-stage,
.aura-work.is-detail-leaving .aura-stage{
    overflow:visible;
    pointer-events:none;
}


@media (min-width:768px) and (max-width:1200px){
    .aura-detail-title-block{
        left:4%;
        width:38%;
        min-width:0;
    }

    .aura-detail-copy-block{
        left:50%;
        width:30%;
        max-width:230px;
    }

    .aura-detail-description{
        font-size:11px;
        line-height:1.42;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width:767px) and (orientation:portrait){

    .aura-work{
        --aura-detail-lens-size:88px;
        --aura-detail-split:3px;
        --aura-detail-gallery-gap:58vh;
        --aura-detail-media-width:min(76vw,420px);
    }

    .aura-detail-left{
        width:100%;
    }

    .aura-detail-title-block{
        left:18px;
        right:18px;
        top:78px;
        width:auto;
        min-width:0;
        transform:translateY(12px);
    }

    .aura-detail-copy-block{
        left:50%;
        right:auto;
        top:170px;
        width:min(82vw,420px);
        max-width:none;
        transform:translate(-50%,12px);
    }

    .aura-detail-title{
        font-size:26px;
        line-height:.98;
        max-width:88%;
    }

    .aura-detail-description{
        max-width:100%;
        font-size:13px;
        line-height:1.45;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-title-block{
        transform:translateY(0);
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-copy-block{
        transform:translate(-50%,0);
    }

    .aura-detail-gallery{
        left:0;
        top:270px;
        bottom:56px;
    }

    .aura-detail-view::after{
        display:none;
    }

    .aura-detail-media{
        width:var(--aura-detail-media-width);
        height:auto;
    }

    .aura-detail-back{
        left:18px;
        bottom:20px;
    }

    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail .aura-service-nav{
        transform:translateX(-10px);
    }

    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail .aura-service-info{
        transform:translateX(10px);
    }
}

/* v4.1 direct service Page shell */
.aura-service-shell-main{
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
    width:100%;
    overflow:hidden;
}


/* ==========================================================
   V4.1.5
   - Featured Image được render trên card ở trang index.
   - Detail rail dùng kích thước thật của từng ảnh để các ảnh
     trên/dưới chạm nhau, không dùng một gap cố định.
========================================================== */


/* v4.1.6: index cards are image-only, with no white veil or text overlay. */
.aura-card-veil,
.aura-card-number,
.aura-card-inner,
.aura-card-code,
.aura-card strong{
    display:none !important;
}

.aura-card-visual img{
    opacity:1 !important;
}

.aura-card.is-active .aura-card-visual img{
    opacity:1 !important;
    filter:none;
}


/* ==========================================================
   v4.2.1 geometry corrections
   - The SVG viewBox includes the handle, so its geometric center is not
     the center of the square scanner body. Offset the SVG by +4.47% X
     and +7.22% Y so the square center sits exactly on the active card.
   - Split at the 50% parent axis; after this SVG offset the cut passes
     through the white center gap of the square.
   - Horizontal info is kept above the active image.
========================================================== */
.aura-work{
    --aura-split-axis:50%;
    --aura-svg-offset-x:4.47%;
    --aura-svg-offset-y:7.22%;
}

.aura-work[data-layout="vertical"]{
    --aura-split-open:42px;
    --aura-split-switch:54px;
}

.aura-work[data-layout="horizontal"]{
    --aura-split-open:44px;
    --aura-split-switch:56px;
}

.aura-work[data-layout="grid"]{
    --aura-split-open:36px;
    --aura-split-switch:46px;
}

.aura-card,
.aura-card-visual,
.aura-card-visual img{
    transform-origin:50% 50%;
}

.aura-card-visual img{
    object-position:50% 50% !important;
}

.aura-work[data-layout="horizontal"] .aura-service-info{
    left:50% !important;
    right:auto !important;
    top:15% !important;
    bottom:auto !important;
    width:min(380px,30vw) !important;
    transform:translateX(-50%) !important;
    z-index:24;
}

.aura-work[data-layout="horizontal"] .aura-info-description{
    max-width:320px;
}

.aura-work[data-layout="horizontal"] .aura-stage-counter{
    top:calc(50% + 164px);
}

/* Detail: same exact white-gap cut and square-center correction. */
.aura-work.is-detail-entering,
.aura-work.is-detail,
.aura-work.is-detail-leaving{
    --aura-split-axis:50%;
    --aura-svg-offset-x:4.47%;
    --aura-svg-offset-y:7.22%;
    --aura-svg-zoom:1;
}

.aura-work.is-detail-entering .aura-focus-logo,
.aura-work.is-detail .aura-focus-logo,
.aura-work.is-detail-leaving .aura-focus-logo{
    --split:4px;
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work[data-layout="horizontal"] .aura-service-info{
        top:14% !important;
        width:min(340px,34vw) !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work{
        --aura-svg-offset-x:4.47%;
        --aura-svg-offset-y:7.22%;
    }

    .aura-work[data-layout="vertical"]{
        --aura-split-open:22px;
        --aura-split-switch:30px;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:22px;
        --aura-split-switch:30px;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:18px;
        --aura-split-switch:26px;
    }
}

/* ==========================================================
   v4.2.2 — WIDER LENS + HIGHER HORIZONTAL INFO
   - Open the two SVG halves much farther away from the active image.
   - Target visual clearance: ~30px from the active image on each side.
   - Move Horizontal service information much higher above the image rail.
========================================================== */
.aura-work[data-layout="vertical"]{
    --aura-split-open:68px;
    --aura-split-switch:82px;
}

.aura-work[data-layout="horizontal"]{
    --aura-split-open:76px;
    --aura-split-switch:90px;
}

.aura-work[data-layout="grid"]{
    --aura-split-open:60px;
    --aura-split-switch:72px;
}

.aura-work[data-layout="horizontal"] .aura-service-info{
    left:50% !important;
    right:auto !important;
    top:7% !important;
    bottom:auto !important;
    width:min(400px,32vw) !important;
    transform:translateX(-50%) !important;
    z-index:24;
}

.aura-work[data-layout="horizontal"] .aura-info-description{
    max-width:340px;
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work[data-layout="horizontal"] .aura-service-info{
        top:8% !important;
        width:min(360px,36vw) !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work[data-layout="vertical"]{
        --aura-split-open:34px;
        --aura-split-switch:44px;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:38px;
        --aura-split-switch:48px;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:30px;
        --aura-split-switch:40px;
    }
}


/* ==========================================================
   v4.2.3 — OBYS-WIDE SPLIT
   Previous v4.2.2 deliberately targeted ~30px clearance because that was
   the prior request. This version matches the reference more closely:
   the two lens halves move far away from the centered active image.
========================================================== */

/* Vertical: ~390–420px total opening on common desktop widths. */
.aura-work[data-layout="vertical"]{
    --aura-split-open:clamp(150px,11vw,210px);
    --aura-split-switch:clamp(170px,12.5vw,235px);
}

/* Horizontal: deliberately wider, like the reference horizontal rail. */
.aura-work[data-layout="horizontal"]{
    --aura-split-open:clamp(205px,15vw,290px);
    --aura-split-switch:clamp(225px,16.5vw,315px);
}

/* Grid remains wide but slightly tighter than Horizontal. */
.aura-work[data-layout="grid"]{
    --aura-split-open:clamp(145px,10.5vw,195px);
    --aura-split-switch:clamp(165px,12vw,220px);
}

/* Keep the Horizontal information clearly above the image rail. */
.aura-work[data-layout="horizontal"] .aura-service-info{
    top:4.5% !important;
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work[data-layout="vertical"]{
        --aura-split-open:clamp(115px,14vw,155px);
        --aura-split-switch:clamp(130px,16vw,175px);
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(145px,18vw,205px);
        --aura-split-switch:clamp(165px,20vw,225px);
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(105px,13vw,145px);
        --aura-split-switch:clamp(120px,15vw,165px);
    }

    .aura-work[data-layout="horizontal"] .aura-service-info{
        top:4.5% !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work[data-layout="vertical"]{
        --aura-split-open:58px;
        --aura-split-switch:72px;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:72px;
        --aura-split-switch:86px;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:52px;
        --aura-split-switch:66px;
    }
}


/* ==========================================================
   v4.2.4 — COMPACT HORIZONTAL / GRID COMPOSITION
   - Pull Horizontal + Grid lens halves back toward the active image.
   - Keep the Horizontal lens between the active image and adjacent cards,
     so the blue SVG no longer sits on top of the side images.
   - Compact Grid card positions for a composition closer to Vertical.
========================================================== */

/* Horizontal: keep a deliberate but compact opening. On a 1920px desktop
   this resolves to ~125px per half; with the current 280px lens this places
   the outer lens edge just inside the adjacent card's inner edge. */
.aura-work[data-layout="horizontal"]{
    --aura-split-open:clamp(112px,6.5vw,132px);
    --aura-split-switch:clamp(130px,7.5vw,150px);
}

/* Grid should feel tighter than Horizontal and visually closer to Vertical. */
.aura-work[data-layout="grid"]{
    --aura-split-open:clamp(92px,5.5vw,116px);
    --aura-split-switch:clamp(108px,6.5vw,132px);
}

/* Keep Horizontal information clearly separated above the image rail. */
.aura-work[data-layout="horizontal"] .aura-service-info{
    top:4.5% !important;
    width:min(390px,31vw) !important;
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(92px,10vw,116px);
        --aura-split-switch:clamp(106px,12vw,132px);
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(76px,8vw,96px);
        --aura-split-switch:clamp(90px,10vw,110px);
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work[data-layout="horizontal"]{
        --aura-split-open:52px;
        --aura-split-switch:64px;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:44px;
        --aura-split-switch:56px;
    }
}

/* ==========================================================
   v4.2.7 — PJAX transparency hard reset
   When navigating from another page without a full reload,
   page-specific CSS can remain in <head> and leak a background
   onto the two clipped SVG halves. Force every lens layer and
   the SVG images themselves to stay truly transparent.
========================================================== */
.aura-work .aura-focus-logo,
.aura-work .aura-focus-half,
.aura-work .aura-focus-left,
.aura-work .aura-focus-right,
.aura-work .aura-focus-half img,
.aura-work .aura-focus-left img,
.aura-work .aura-focus-right img{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    border:0 !important;
    outline:0 !important;
}

.aura-work .aura-focus-logo::before,
.aura-work .aura-focus-logo::after,
.aura-work .aura-focus-half::before,
.aura-work .aura-focus-half::after,
.aura-work .aura-focus-left::before,
.aura-work .aura-focus-left::after,
.aura-work .aura-focus-right::before,
.aura-work .aura-focus-right::after{
    content:none !important;
    display:none !important;
    background:transparent !important;
    box-shadow:none !important;
}


/* ==========================================================
   v4.2.8 — DETAIL GALLERY ACTIVE IMAGE ZOOM
   - Ảnh tiến vào tâm gallery sẽ phóng lớn dần như reference Obys.
   - Track vẫn tính bằng kích thước layout gốc nên scale không làm rung rail.
   - Active image được đưa lên layer trên để overlap tự nhiên.
========================================================== */

.aura-detail-media{
    transform-origin:50% 50%;
    contain:layout style;
}

.aura-detail-media.is-gallery-active{
    overflow:visible;
}

.aura-detail-media img{
    backface-visibility:hidden;
    transform:translateZ(0);
}

@media (prefers-reduced-motion:reduce){
    .aura-detail-media{
        --gallery-scale:1 !important;
    }
}


/* ==========================================================
   v4.2.9 — DETAIL GALLERY BORDER / SEAM CLEANUP
   - Bỏ toàn bộ border/background/outline quanh ảnh detail.
   - Bỏ divider 1px của detail view.
   - Tránh nền xám của media container lộ ra khi ảnh active scale.
========================================================== */

.aura-work .aura-detail-media,
.aura-work .aura-detail-media picture,
.aura-work .aura-detail-media img{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}

.aura-work .aura-detail-media::before,
.aura-work .aura-detail-media::after,
.aura-work .aura-detail-media picture::before,
.aura-work .aura-detail-media picture::after{
    content:none !important;
    display:none !important;
}

/* Bỏ đường phân cách mảnh giữa cột nội dung và gallery. */
.aura-work .aura-detail-view::after{
    content:none !important;
    display:none !important;
    width:0 !important;
    background:transparent !important;
}


/* ==========================================================
   v4.3.0 — DETAIL -> SERVICE CINEMATIC RETURN
   ----------------------------------------------------------
   Sequence:
   1. Detail content disappears first.
   2. Lens remains CLOSED and travels back to the Service portal.
   3. Lens opens.
   4. Service index content fades in.

   Header/contact are outside .aura-work, so they remain untouched.
========================================================== */

/*
 * While the lens travels back, keep all Service-index content hidden.
 * Their normal layout/transform is already restored underneath, so when
 * reveal begins there is no geometry jump.
 */
.aura-work.is-detail-returning .aura-service-nav,
.aura-work.is-detail-returning .aura-service-info,
.aura-work.is-detail-returning .aura-layout-controls,
.aura-work.is-detail-returning .aura-cards{
    opacity:0 !important;
    pointer-events:none !important;
}

/*
 * Keep the returning lens fully closed.
 * !important prevents is-focus-open or stale switching classes from
 * reopening it during the travel phase.
 */
.aura-work.is-detail-returning .aura-focus-logo{
    --split:var(--aura-split-closed) !important;

    transition:
        width 1.04s cubic-bezier(.65,0,.18,1),
        height 1.04s cubic-bezier(.65,0,.18,1),
        left 1.04s cubic-bezier(.65,0,.18,1),
        top 1.04s cubic-bezier(.65,0,.18,1),
        transform 1.04s cubic-bezier(.65,0,.18,1);
}

.aura-work.is-detail-returning .aura-focus-half{
    transition:
        transform .7s cubic-bezier(.65,0,.18,1);
}

/*
 * Opening/reveal phase.
 * Lens opens slightly slower than the content fade, matching the site's
 * previous route transitions rather than "popping" open.
 */
.aura-work.is-detail-return-opening .aura-focus-half{
    transition:
        transform 1.08s cubic-bezier(.16,1,.3,1) !important;
}

.aura-work.is-detail-return-opening .aura-service-nav,
.aura-work.is-detail-return-opening .aura-service-info,
.aura-work.is-detail-return-opening .aura-layout-controls,
.aura-work.is-detail-return-opening .aura-cards{
    transition:
        opacity .78s cubic-bezier(.22,.61,.36,1),
        transform 1.02s cubic-bezier(.16,1,.3,1) !important;
}

/*
 * Ensure the Detail layer cannot flash back during the return.
 */
.aura-work.is-detail-returning .aura-detail-view,
.aura-work.is-detail-return-opening .aura-detail-view{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:none !important;
}

@media (prefers-reduced-motion:reduce){
    .aura-work.is-detail-returning .aura-focus-logo,
    .aura-work.is-detail-returning .aura-focus-half,
    .aura-work.is-detail-return-opening .aura-focus-half,
    .aura-work.is-detail-return-opening .aura-service-nav,
    .aura-work.is-detail-return-opening .aura-service-info,
    .aura-work.is-detail-return-opening .aura-layout-controls,
    .aura-work.is-detail-return-opening .aura-cards{
        transition-duration:1ms !important;
    }
}

/* ==========================================================
   v4.3.2 — MOBILE SERVICE INDEX RESPONSIVE
   ----------------------------------------------------------
   Desktop is untouched.  On <= 767px the index gets a real
   single-column composition instead of shrinking absolute desktop blocks:

   1) horizontal swipeable service nav
   2) centered lens + image stage
   3) service copy in normal document flow
   4) layout controls at the bottom

   Detail selectors are intentionally excluded so the existing v4.3.1
   detail experience keeps its own mobile geometry.
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    /* Flatsome wrapper: let the component determine its natural height. */
    .dichvu-section,
    .dichvu-section > .section-content,
    .aura-work-section,
    .aura-work-row,
    .aura-work-row > .col,
    .aura-work-row > .col > .col-inner{
        min-height:0 !important;
        height:auto !important;
        overflow:visible !important;
    }

    /* Header only while the Service component is present. */
    

    

    

    /* INDEX-ONLY layout. Detail states continue using the existing rules. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        --aura-lens-size:clamp(260px,84vw,330px);
        --aura-svg-zoom:1;
        --aura-lens-shift-x:0px;
        --aura-lens-shift-y:0px;
        --aura-svg-offset-x:4.47%;
        --aura-svg-offset-y:7.22%;

        width:100%;
        height:auto !important;
        min-height:100svh !important;
        padding:14px 0 24px !important;
        overflow:visible !important;
        display:flex;
        flex-direction:column;
        background:#EAEAEA;
    }

    /* -------------------------
       1. SERVICE NAV — swipe row
    -------------------------- */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        z-index:30;
        order:1;
        width:100% !important;
        min-width:0;
        padding:10px 18px 12px !important;
        margin:0 !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:22px;
        overflow-x:auto;
        overflow-y:hidden;
        transform:none !important;
        opacity:1 !important;
        pointer-events:auto !important;
        white-space:nowrap;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        overscroll-behavior-x:contain;
    }

    .aura-work .aura-service-nav::-webkit-scrollbar{
        display:none;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-link,
    .aura-work[data-layout="horizontal"] .aura-service-link{
        flex:0 0 auto;
        width:auto !important;
        max-width:none !important;
        padding:0 0 3px !important;
        font-size:12.5px !important;
        line-height:1.12 !important;
        white-space:nowrap;
        scroll-snap-align:start;
        transform:none !important;
    }

    .aura-work .aura-service-link.is-active{
        color:#101114 !important;
        border-bottom:1px solid #101114 !important;
    }

    /* -------------------------
       2. CENTER VISUAL STAGE
    -------------------------- */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        position:relative !important;
        inset:auto !important;
        order:2;
        width:100%;
        height:390px;
        min-height:390px;
        overflow:hidden !important;
        flex:0 0 auto;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-cards{
        position:absolute !important;
        inset:0 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:clamp(144px,42vw,174px) !important;
        height:clamp(180px,52vw,218px) !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:50% !important;
    }

    /* Vertical: compact opening, one faded neighbor above + below. */
    .aura-work[data-layout="vertical"]{
        --aura-split-open:clamp(38px,11vw,48px);
        --aura-split-switch:clamp(48px,14vw,60px);
    }

    /* Horizontal: allow a little more opening without overlapping neighbors. */
    .aura-work[data-layout="horizontal"]{
        --aura-lens-size:clamp(250px,82vw,320px);
        --aura-split-open:clamp(42px,12vw,54px);
        --aura-split-switch:clamp(52px,15vw,66px);
    }

    /* Grid: 2-column peripheral composition around the active center. */
    .aura-work[data-layout="grid"]{
        --aura-lens-size:clamp(220px,72vw,280px);
        --aura-split-open:clamp(30px,9vw,40px);
        --aura-split-switch:clamp(38px,11vw,50px);
    }

    .aura-work[data-layout="grid"] .aura-card{
        width:112px !important;
        height:140px !important;
    }

    /* Desktop-only count location is not useful on this compact stage. */
    .aura-stage-counter{
        display:none !important;
    }

    /* -------------------------
       3. SERVICE INFORMATION
    -------------------------- */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info,
    .aura-work[data-layout="horizontal"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info,
    .aura-work[data-layout="grid"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        z-index:25;
        order:3;
        width:auto !important;
        min-width:0;
        margin:0 !important;
        padding:8px 20px 0 !important;
        transform:none !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    .aura-work .aura-service-current{
        display:flex !important;
        margin-bottom:14px;
        font-size:9px;
    }

    .aura-work .aura-current-number{
        display:inline !important;
    }

    .aura-work .aura-info-title{
        margin:0 0 12px !important;
        max-width:92%;
        font-size:clamp(20px,5.6vw,25px);
        line-height:1.05;
    }

    .aura-work .aura-info-description,
    .aura-work[data-layout="horizontal"] .aura-info-description{
        display:block !important;
        max-width:34em !important;
        margin:0 0 18px !important;
        font-size:13px;
        line-height:1.45;
        color:#333;
    }

    .aura-work .aura-info-more{
        min-height:30px;
        font-size:11px;
        gap:20px;
    }

    /* -------------------------
       4. LAYOUT CONTROLS
    -------------------------- */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-layout-controls{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        order:4;
        width:auto;
        margin:28px 20px 0 !important;
        padding:0 !important;
        align-self:flex-start;
        font-size:12px;
    }

    .aura-work .aura-layout-btn{
        min-height:28px !important;
        display:inline-flex !important;
        align-items:center;
        font-size:12px !important;
    }

    /* Keep layout change animation short on touch screens. */
    .aura-work .aura-card{
        transition:
            transform .72s cubic-bezier(.76,0,.24,1),
            opacity .42s ease,
            width .5s cubic-bezier(.76,0,.24,1),
            height .5s cubic-bezier(.76,0,.24,1),
            background .2s ease;
    }

    .aura-work .aura-focus-logo{
        transition:
            width .55s cubic-bezier(.76,0,.24,1),
            height .55s cubic-bezier(.76,0,.24,1),
            transform .55s cubic-bezier(.76,0,.24,1);
    }
}

/* Small phones: make the stage a little shorter and content denser. */
@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        --aura-lens-size:clamp(245px,84vw,300px);
        padding-top:8px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav{
        gap:18px;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        height:360px;
        min-height:360px;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-layout-controls{
        margin-left:18px !important;
        margin-right:18px !important;
    }
}

/* ==========================================================
   v4.3.3 — MOBILE HEADER + SERVICE NAV COLLISION FIX
   ----------------------------------------------------------
   Fixes:
   - transparent/fixed header no longer sits on top of service nav
   - header menu labels stay on one line
   - mobile logo gets a real parent width, not only img max-width
   - active service can be centered by JS without being clipped
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    /*
     * The exact value is written by JS from the real header height.
     * Fallback covers Flatsome mobile header if JS is late by one frame.
     */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        padding-top:var(--aura-mobile-header-clearance,76px) !important;
    }

    /* Give Flatsome logo container a real width. */
    

    

    /* Prevent DỊCH VỤ / VỀ AURASIGN from breaking into 2 lines. */
    

    

    

    /* Service nav sits clearly below header and keeps breathing room. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav{
        padding-top:4px !important;
        padding-bottom:14px !important;
        scroll-padding-inline:24px;
    }

    /* Slightly shorter stage after adding real header clearance. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        height:350px;
        min-height:350px;
    }

    /* Give the visual a little more air from nav. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        top:52% !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    

    

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        height:338px;
        min-height:338px;
    }
}

/* ==========================================================
   v4.3.4 — MOBILE OBYS-STYLE SERVICE INDEX
   ----------------------------------------------------------
   Mobile no longer tries to show the desktop information system.
   It follows the reference composition:

   - transparent header floats over the visual
   - a single centered vertical image rail
   - all 5 images remain visible around the active item
   - magnifier opens very wide around the active image
   - service nav / copy / layout controls are hidden on mobile
   - tap a neighbour image to select it; tap the active image to open Detail
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    /* ------------------------------------------------------
       HEADER — small, clean, on one row like the reference
    ------------------------------------------------------ */
    

    

    

    

    

    

    /* ------------------------------------------------------
       INDEX ROOT — full viewport visual, no desktop columns
    ------------------------------------------------------ */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        --aura-lens-size:min(96vw,430px);
        --aura-lens-shift-x:0px;
        --aura-lens-shift-y:0px;
        --aura-svg-zoom:1;
        --aura-svg-offset-x:4.47%;
        --aura-svg-offset-y:7.22%;
        --aura-split-open:clamp(94px,27vw,124px);
        --aura-split-switch:clamp(108px,31vw,142px);

        position:relative !important;
        display:block !important;
        width:100% !important;
        height:100svh !important;
        min-height:760px !important;
        padding:0 !important;
        margin:0 !important;
        overflow:visible !important;
        background:#EAEAEA !important;
    }

    /* The reference does not show the desktop navigation/copy UI. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-layout-controls,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage-counter{
        display:none !important;
    }

    /* ------------------------------------------------------
       OBYS-LIKE VERTICAL RAIL
    ------------------------------------------------------ */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-height:760px !important;
        overflow:visible !important;
        z-index:2;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-cards{
        position:absolute !important;
        inset:0 !important;
        overflow:visible !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:clamp(190px,55vw,235px) !important;
        height:clamp(145px,42vw,180px) !important;
        cursor:pointer;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual{
        overflow:hidden !important;
        background:transparent !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img{
        object-fit:cover !important;
        object-position:50% 50% !important;
    }

    /* Active visual sits slightly below viewport center like the sample. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:54% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        z-index:12 !important;
        overflow:visible !important;
    }

    /* Disable the old mobile layout-specific values; mobile is always vertical. */
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"],
    .aura-work[data-layout="vertical"]{
        --aura-lens-size:min(96vw,430px);
        --aura-split-open:clamp(94px,27vw,124px);
        --aura-split-switch:clamp(108px,31vw,142px);
    }

    .aura-work .aura-card{
        transition:
            transform .72s cubic-bezier(.76,0,.24,1),
            opacity .48s ease,
            width .5s cubic-bezier(.76,0,.24,1),
            height .5s cubic-bezier(.76,0,.24,1) !important;
    }

    .aura-work .aura-focus-logo{
        transition:
            width .58s cubic-bezier(.76,0,.24,1),
            height .58s cubic-bezier(.76,0,.24,1),
            transform .58s cubic-bezier(.76,0,.24,1) !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    

    

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        --aura-lens-size:96vw;
        --aura-split-open:clamp(92px,28vw,112px);
        --aura-split-switch:clamp(104px,32vw,128px);
        min-height:720px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        min-height:720px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:clamp(180px,56vw,220px) !important;
        height:clamp(138px,43vw,170px) !important;
    }
}

/* ==========================================================
   v4.3.5 — MOBILE LENS + NATURAL IMAGE HEIGHT FIX
   ----------------------------------------------------------
   - Mobile images have a fixed WIDTH only; height is always natural/auto.
   - No object-fit crop on the Service index.
   - Lens is resized so BOTH split halves stay inside the viewport.
   - Lens and active image share the exact same center.
   - Active image stays above the lens if the artwork edges overlap slightly.
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        /*
         * Total visual width is approximately:
         * lens-size + 2 * split-open.
         * These values keep that total near 96–99vw instead of ~150vw.
         */
        --aura-lens-size:min(78vw,360px) !important;
        --aura-split-open:clamp(32px,10vw,44px) !important;
        --aura-split-switch:clamp(38px,12vw,52px) !important;
    }

    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        --aura-lens-size:min(78vw,360px) !important;
        --aura-split-open:clamp(32px,10vw,44px) !important;
        --aura-split-switch:clamp(38px,12vw,52px) !important;
    }

    /* Exact same center as the active card (card top is 50%). */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        overflow:visible !important;
        z-index:12 !important;
    }

    /*
     * IMPORTANT: only width is controlled.
     * The image decides its own height from the source aspect ratio.
     */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:clamp(178px,54vw,220px) !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual{
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        background:transparent !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img{
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        max-width:100% !important;
        display:block !important;
        object-fit:initial !important;
        object-position:initial !important;
        margin:0 !important;
    }

    /* Never let the frame artwork cover/crop the active photo. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        z-index:14 !important;
    }

    /* Height is no longer animated because mobile image height is intrinsic. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        transition:
            transform .72s cubic-bezier(.76,0,.24,1),
            opacity .48s ease,
            width .5s cubic-bezier(.76,0,.24,1) !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        --aura-lens-size:78vw !important;
        --aura-split-open:clamp(30px,10vw,40px) !important;
        --aura-split-switch:clamp(36px,12vw,46px) !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:54vw !important;
        height:auto !important;
    }
}

/* ==========================================================
   v4.3.6 — MOBILE OBYS SPACING TUNE
   ----------------------------------------------------------
   Goal: match the Obys mobile composition more closely.
   - Active image is a little smaller.
   - Image width only; height always remains intrinsic/auto.
   - Magnifier artwork is slightly smaller but the two halves
     open farther apart, creating more white breathing room.
   - Total lens footprint still stays inside the mobile viewport.
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        /*
         * Approx total width = lens-size + 2 * split-open.
         * 66vw + 30vw = 96vw, so the artwork stays inside viewport
         * while the two halves sit noticeably farther from the image.
         */
        --aura-lens-size:min(66vw,310px) !important;
        --aura-split-open:clamp(48px,15vw,66px) !important;
        --aura-split-switch:clamp(54px,17vw,74px) !important;
    }

    /* Keep lens centered on the active image. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        overflow:visible !important;
    }

    /*
     * Only WIDTH is controlled. Never force image height.
     * Natural aspect ratio from the uploaded image is preserved.
     */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:min(49vw,195px) !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img{
        width:100% !important;
        max-width:100% !important;
        object-fit:initial !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        --aura-lens-size:66vw !important;
        --aura-split-open:15vw !important;
        --aura-split-switch:17vw !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        width:49vw !important;
        height:auto !important;
    }
}

/* ==========================================================
   v4.3.7 — MOBILE LENS FOREGROUND + WIDER BREATHING ROOM
   ----------------------------------------------------------
   Fixes the mobile composition where the active photo was visually
   covering the magnifier artwork.

   - Active photo is smaller, closer to the Obys reference.
   - Image width only; height remains intrinsic/auto.
   - Magnifier halves are pushed farther away from the photo.
   - Magnifier sits ABOVE the active photo as a safety layer.
   - Total footprint still remains inside the mobile viewport.
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        /*
         * 60vw lens + 2 x 18vw split = ~96vw total footprint.
         * The smaller lens + larger split creates the Obys-like white gap.
         */
        --aura-lens-size:min(60vw,282px) !important;
        --aura-split-open:clamp(58px,18vw,78px) !important;
        --aura-split-switch:clamp(64px,20vw,86px) !important;
    }

    /* Magnifier must visually frame the photo, never sit behind it. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        z-index:18 !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    /* Keep every rail image below the magnifier artwork. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        z-index:8 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        z-index:10 !important;
        width:min(43vw,172px) !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
    }

    /* Width only. Never force/crop the original image height. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img{
        width:100% !important;
        max-width:100% !important;
        object-fit:initial !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        --aura-lens-size:60vw !important;
        --aura-split-open:18vw !important;
        --aura-split-switch:20vw !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        width:43vw !important;
        height:auto !important;
    }
}


/* ==========================================================
   v4.3.8 — MOBILE NO-OVERLAP LENS + HEADER CSS DECOUPLED
   ----------------------------------------------------------
   - Plugin no longer styles #header / header logo / header menu.
     Manage those globally in the site's common CSS.
   - Active image width is smaller; height remains intrinsic/auto.
   - The inner gap between magnifier halves is wider than the active image,
     so the artwork sits clearly OUTSIDE the photo instead of overlapping it.
   - Final footprint stays close to the viewport width like the Obys reference.
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        /*
         * Geometry at 375px viewport:
         * lens-size  = 48vw  ~= 180px
         * split-open = 25vw  ~= 94px each side
         * total footprint ~= 98vw
         * inner white opening = 50vw ~= 188px
         * active image = 39vw ~= 146px
         * => ~21px breathing room on EACH side of the photo.
         */
        --aura-lens-size:min(48vw,230px) !important;
        --aura-split-open:clamp(80px,25vw,112px) !important;
        --aura-split-switch:clamp(86px,27vw,120px) !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        overflow:visible !important;
        pointer-events:none !important;
        z-index:18 !important;
    }

    /*
     * Active visual: WIDTH ONLY.
     * No forced height, no crop, no object-fit cover.
     */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        width:min(39vw,166px) !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        z-index:20 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active .aura-card-visual,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active .aura-card-visual img{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        max-width:100% !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active .aura-card-visual{
        overflow:visible !important;
        background:transparent !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active .aura-card-visual img{
        display:block !important;
        object-fit:initial !important;
        object-position:initial !important;
        margin:0 !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening),
    .aura-work[data-layout="vertical"],
    .aura-work[data-layout="horizontal"],
    .aura-work[data-layout="grid"]{
        --aura-lens-size:48vw !important;
        --aura-split-open:25vw !important;
        --aura-split-switch:27vw !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        width:39vw !important;
        height:auto !important;
    }
}


/* ==========================================================
   v4.3.9 — MOBILE DETAIL HORIZONTAL + CLEAN RETURN + SWIPE
   ----------------------------------------------------------
   MOBILE ONLY:
   - Service index stays visual-only: no nav/copy/layout controls flash.
   - Detail gallery is ABOVE and scrolls/swipes HORIZONTALLY.
   - Detail information is BELOW the gallery.
   - Magnifier is hidden throughout mobile Detail.
   - Magnifier only returns when the Service index opening phase begins.
   - Mobile Service index supports vertical wheel/touch swipe interaction.
========================================================== */

@media (max-width:767px) and (orientation:portrait){

    /* ------------------------------------------------------
       A. SERVICE INDEX UI — VISUAL ONLY, ALSO DURING RETURN
       This removes the one-frame flash of all desktop information.
    ------------------------------------------------------ */
    .aura-work .aura-service-nav,
    .aura-work .aura-service-info,
    .aura-work .aura-layout-controls,
    .aura-work .aura-stage-counter{
        display:none !important;
    }

    /* Full visual stage: vertical swipe/scroll controls the rail. */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving) .aura-stage{
        touch-action:none !important;
        overscroll-behavior:contain !important;
    }

    /* ------------------------------------------------------
       B. MOBILE DETAIL ROOT
    ------------------------------------------------------ */
    .aura-work.is-detail-entering,
    .aura-work.is-detail,
    .aura-work.is-detail-leaving,
    .aura-work.is-detail-returning{
        width:100% !important;
        height:100svh !important;
        min-height:680px !important;
        overflow:hidden !important;
    }

    /* No magnifier in Detail on mobile. Keep it invisible while returning
       and reveal it only when the Service index actually opens. */
    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo,
    .aura-work.is-detail-returning .aura-focus-logo{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:opacity .18s ease, visibility 0s linear .18s !important;
    }

    .aura-work.is-detail-return-opening .aura-focus-logo{
        opacity:1 !important;
        visibility:visible !important;
        transition:opacity .34s ease !important;
    }

    /* The detail stage itself should never intercept gestures. */
    .aura-work.is-detail .aura-stage,
    .aura-work.is-detail-entering .aura-stage,
    .aura-work.is-detail-leaving .aura-stage{
        pointer-events:none !important;
    }

    /* ------------------------------------------------------
       C. GALLERY — TOP + HORIZONTAL
    ------------------------------------------------------ */
    .aura-detail-gallery{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        top:72px !important;
        bottom:auto !important;
        width:100% !important;
        height:min(48svh,360px) !important;
        overflow:hidden !important;
        touch-action:none !important;
        overscroll-behavior:contain !important;
        transform:translateY(18px) !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-gallery{
        transform:translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        transform:translateY(-10px) !important;
    }

    .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
        overflow:visible !important;
    }

    .aura-detail-media{
        --gallery-x:0px;
        --gallery-y:0px;
        left:50% !important;
        top:50% !important;
        width:min(68vw,286px) !important;
        height:auto !important;
        max-width:none !important;
        overflow:visible !important;
        background:transparent !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x),0,0)
            scale(var(--gallery-scale)) !important;
        transform-origin:center !important;
        will-change:transform,opacity !important;
    }

    .aura-detail-media img{
        width:100% !important;
        height:auto !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:contain !important;
    }

    /* ------------------------------------------------------
       D. DETAIL INFORMATION — BELOW GALLERY
    ------------------------------------------------------ */
    .aura-detail-left{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        top:calc(72px + min(48svh,360px) + 18px) !important;
        bottom:44px !important;
        width:100% !important;
        padding:0 20px !important;
        overflow:auto !important;
        -webkit-overflow-scrolling:touch;
        pointer-events:auto !important;
    }

    .aura-detail-title-block,
    .aura-detail-copy-block{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        opacity:0;
        transform:translateY(12px) !important;
    }

    .aura-detail-copy-block{
        margin-top:14px !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-copy-block{
        opacity:1 !important;
        transform:translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-title-block,
    .aura-work.is-detail-leaving .aura-detail-copy-block{
        opacity:0 !important;
        transform:translateY(8px) !important;
    }

    .aura-detail-code{
        margin-bottom:7px !important;
        font-size:9px !important;
    }

    .aura-detail-title{
        max-width:100% !important;
        font-size:clamp(22px,6.4vw,28px) !important;
        line-height:1.02 !important;
    }

    .aura-detail-description{
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.45 !important;
    }

    .aura-detail-cta{
        margin-top:14px !important;
    }

    .aura-detail-back{
        left:20px !important;
        bottom:14px !important;
        z-index:20 !important;
    }

    .aura-detail-view::after{
        display:none !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-detail-gallery{
        top:64px !important;
        height:min(46svh,320px) !important;
    }

    .aura-detail-media{
        width:min(70vw,270px) !important;
    }

    .aura-detail-left{
        top:calc(64px + min(46svh,320px) + 14px) !important;
        padding:0 18px !important;
    }
}


/* ==========================================================
   v4.4.0 — MOBILE DETAIL FULL VIEWPORT / NO BOTTOM LEAK
   ----------------------------------------------------------
   Fixes the dark-blue strip that could appear below Detail on mobile.
   The previous 100svh can be shorter than the currently visible dynamic
   viewport on some browsers/devtools.  Use 100dvh for the active viewport
   and keep every Service wrapper white/full-height so the theme/footer
   background cannot peek through.
========================================================== */
@media (max-width:767px) and (orientation:portrait){
    .dichvu-section,
    .dichvu-section > .section-content,
    .aura-work-section,
    .aura-work-row,
    .aura-work-row > .col,
    .aura-work-row > .col > .col-inner{
        min-height:100vh !important;
        min-height:100dvh !important;
        background:#EAEAEA !important;
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }

    .aura-work.is-detail-entering,
    .aura-work.is-detail,
    .aura-work.is-detail-leaving,
    .aura-work.is-detail-returning,
    .aura-work.is-detail-return-opening{
        height:100vh !important;
        height:100dvh !important;
        min-height:100vh !important;
        min-height:100dvh !important;
        max-height:none !important;
        background:#EAEAEA !important;
        margin-bottom:0 !important;
    }

    .aura-detail-view{
        min-height:100% !important;
        background:#EAEAEA !important;
    }
}


/* ==========================================================
   v4.4.1 — DESKTOP INTERNAL DETAIL HEADER CLEARANCE
   ----------------------------------------------------------
   Fix only Service -> Detail transitions. Direct Detail loads are untouched.
   The JS measures actual header/root overlap and exposes the value via
   --aura-detail-header-clearance. Only the right gallery + divider move down;
   the whole Detail page is NOT padded, so the Back button stays visible.
========================================================== */
@media (min-width:768px){
    .aura-work.is-detail-from-index.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail-from-index.is-detail .aura-detail-gallery,
    .aura-work.is-detail-from-index.is-detail-leaving .aura-detail-gallery{
        top:var(--aura-detail-header-clearance, 6px) !important;
        bottom:0 !important;
    }

    .aura-work.is-detail-from-index.is-detail-entering .aura-detail-view::after,
    .aura-work.is-detail-from-index.is-detail .aura-detail-view::after,
    .aura-work.is-detail-from-index.is-detail-leaving .aura-detail-view::after{
        top:var(--aura-detail-header-clearance, 6px) !important;
    }
}


/* ==========================================================
   v4.4.2 — MOBILE FIRST-PAINT GEOMETRY + CLEAN WRAP
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    .aura-work.is-mobile-index-preparing .aura-card{
        visibility:hidden !important;
        transition:none !important;
    }

    .aura-work.is-mobile-index-preparing .aura-card,
    .aura-work.is-mobile-index-preparing .aura-card-visual,
    .aura-work.is-mobile-index-preparing .aura-card-visual img{
        transition:none !important;
    }

    .aura-card.is-wrap-jump{
        visibility:hidden !important;
        opacity:0 !important;
        transition:none !important;
    }

    .aura-card.is-wrap-jump .aura-card-visual,
    .aura-card.is-wrap-jump .aura-card-visual img{
        transition:none !important;
    }
}


/* ==========================================================
   v4.4.3 — DETAIL VIEWPORT FILL + CLICKABLE CTA
   ----------------------------------------------------------
   1) Fill the visible viewport exactly so the theme/footer blue strip cannot
      appear below Detail on desktop or mobile.
   2) The desktop detail-left wrapper intentionally has pointer-events:none;
      re-enable pointer events on the copy block/CTA so links are clickable.
========================================================== */

.aura-work.is-detail-entering,
.aura-work.is-detail,
.aura-work.is-detail-leaving,
.aura-work.is-detail-returning,
.aura-work.is-detail-return-opening{
    height:var(--aura-detail-viewport-height, 100dvh) !important;
    min-height:var(--aura-detail-viewport-height, 100dvh) !important;
    max-height:none !important;
    background:#EAEAEA !important;
}

.aura-work.is-detail-entering .aura-detail-view,
.aura-work.is-detail .aura-detail-view,
.aura-work.is-detail-leaving .aura-detail-view{
    height:100% !important;
    min-height:100% !important;
    background:#EAEAEA !important;
}

.aura-detail-copy-block{
    pointer-events:auto !important;
}

.aura-detail-cta{
    position:relative !important;
    z-index:50 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
}

.aura-detail-cta > *{
    pointer-events:none !important;
}


/* ==========================================================
   v4.4.4 — MOBILE DETAIL BALANCED VERTICAL RHYTHM
   ----------------------------------------------------------
   Keep the detail screen filling the viewport (so the theme's blue footer
   never leaks through), but stop pinning "Quay lại" to the very bottom on
   tall phones.  The gallery also grows a little on taller screens so the
   layout uses the available height more naturally.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    /* Use more of tall-phone height without becoming oversized on short phones. */
    .aura-detail-gallery{
        top:64px !important;
        height:clamp(280px,46dvh,370px) !important;
    }

    /* Information follows the actual gallery height instead of a small fixed cap. */
    .aura-detail-left{
        top:calc(64px + clamp(280px,46dvh,370px) + 16px) !important;
        bottom:auto !important;
        overflow:visible !important;
        padding-bottom:24px !important;
    }

    /* Keep the copy compact. */
    .aura-detail-copy-block{
        margin-top:12px !important;
    }

    /* Place Back in normal content flow instead of pinning it to viewport bottom. */
    .aura-detail-back{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        top:auto !important;
        display:inline-block !important;
        margin:clamp(26px,4.5dvh,44px) 0 0 !important;
        transform:translateY(8px);
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-back{
        transform:translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-back{
        transform:translateY(6px) !important;
    }
}

/* Very short phones: keep everything above the fold. */
@media (max-width:767px) and (orientation:portrait) and (max-height:700px){
    .aura-detail-gallery{
        height:clamp(250px,42dvh,300px) !important;
    }

    .aura-detail-left{
        top:calc(64px + clamp(250px,42dvh,300px) + 12px) !important;
    }

    .aura-detail-back{
        margin-top:22px !important;
    }
}


/* ==========================================================
   v4.5.0 — DESKTOP LAYOUT REFINEMENT
   - Dọc / Ngang / Lưới labels are rendered by PHP.
   - Ngang: service menu centered under the description.
   - Lưới: description left, service menu right, active image + lens center.
   - Detail desktop: image rail centered, two content columns on both sides.
   - Ultrawide: scale the composition proportionally instead of keeping a
     tiny 1920px layout in the middle of a 2K/4K/5K monitor.
========================================================== */

@media (min-width:768px){

    /* ------------------------------------------------------
       HORIZONTAL / NGANG
       Copy and menu share the same center column.
    ------------------------------------------------------ */

    .aura-work[data-layout="horizontal"] .aura-service-info{
        left:50% !important;
        right:auto !important;
        top:7% !important;
        bottom:auto !important;
        width:min(430px,34vw) !important;
        transform:translateX(-50%) !important;
        text-align:left;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-nav{
        left:50% !important;
        right:auto !important;
        top:27% !important;
        bottom:auto !important;
        width:max-content !important;
        max-width:82vw !important;
        transform:translateX(-50%) !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
        gap:clamp(12px,1.3vw,26px) !important;

        opacity:1 !important;
        pointer-events:auto !important;
        white-space:nowrap;
    }

    .aura-work[data-layout="horizontal"] .aura-service-link{
        flex:0 0 auto;
        font-size:clamp(11px,.82vw,14px) !important;
        white-space:nowrap;
    }

    .aura-work[data-layout="horizontal"] .aura-info-description{
        max-width:100% !important;
    }

    .aura-work[data-layout="horizontal"] .aura-stage-counter{
        display:block !important;
    }


    /* ------------------------------------------------------
       GRID / LƯỚI
       Left = current service content
       Center = image constellation + open magnifier
       Right = 5-service menu
    ------------------------------------------------------ */

    .aura-work[data-layout="grid"]{
        --aura-lens-size:clamp(240px,18vw,330px);
        --aura-split-open:clamp(48px,4vw,72px);
        --aura-split-switch:clamp(58px,4.8vw,84px);
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        left:clamp(14px,2vw,42px) !important;
        right:auto !important;
        top:50% !important;
        bottom:auto !important;
        width:min(350px,22vw) !important;
        transform:translateY(-50%) !important;

        opacity:1 !important;
        pointer-events:auto !important;
    }

    .aura-work[data-layout="grid"] .aura-service-nav{
        left:auto !important;
        right:clamp(14px,2vw,42px) !important;
        top:50% !important;
        bottom:auto !important;
        width:min(360px,23vw) !important;
        transform:translateY(-50%) !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;

        opacity:1 !important;
        pointer-events:auto !important;
    }

    .aura-work[data-layout="grid"] .aura-card{
        width:clamp(126px,9vw,170px) !important;
        height:clamp(158px,11.2vw,212px) !important;
    }

    .aura-work[data-layout="grid"].is-focus-open .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }


    /* ------------------------------------------------------
       DETAIL DESKTOP
       Center gallery + lens, text on both sides.
    ------------------------------------------------------ */

    .aura-work{
        --aura-detail-media-width:clamp(190px,14vw,286px);
        --aura-detail-lens-size:clamp(310px,23vw,430px);
        --aura-detail-split-open:clamp(58px,4.2vw,84px);
    }

    .aura-detail-left{
        inset:0 !important;
        width:100% !important;
        pointer-events:none;
    }

    .aura-detail-title-block{
        left:clamp(24px,2vw,56px) !important;
        right:auto !important;
        top:50% !important;
        width:min(360px,22vw) !important;
        min-width:0 !important;
    }

    .aura-detail-copy-block{
        left:auto !important;
        right:clamp(24px,2.5vw,68px) !important;
        top:50% !important;
        width:min(360px,22vw) !important;
        max-width:none !important;
    }

    .aura-detail-copy-block,
    .aura-detail-copy-block *{
        pointer-events:auto;
    }

    .aura-detail-gallery{
        left:32% !important;
        right:32% !important;
        top:0 !important;
        bottom:0 !important;
        overflow:visible !important;

        opacity:0;
        transform:translateY(22px) !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-gallery{
        opacity:1 !important;
        transform:translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        opacity:0 !important;
        transform:translateY(16px) !important;
    }

    .aura-detail-view::after{
        display:none !important;
        content:none !important;
    }

    /*
     * Lens closes while moving into Detail, then opens around the centered
     * active image after the Detail class is committed.
     */
    .aura-work.is-detail-entering .aura-focus-logo{
        --split:var(--aura-detail-split) !important;

        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-lens-size) !important;
        height:var(--aura-detail-lens-size) !important;
        transform:translate3d(-50%,-50%,0) !important;
    }

    .aura-work.is-detail .aura-focus-logo{
        --split:var(--aura-detail-split-open) !important;

        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-lens-size) !important;
        height:var(--aura-detail-lens-size) !important;
        transform:translate3d(-50%,-50%,0) !important;
    }

    .aura-work.is-detail-leaving .aura-focus-logo{
        --split:var(--aura-detail-split) !important;

        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-lens-size) !important;
        height:var(--aura-detail-lens-size) !important;
        transform:translate3d(-50%,-50%,0) !important;
    }

    .aura-detail-media{
        width:var(--aura-detail-media-width) !important;
    }

    .aura-detail-title{
        font-size:clamp(14px,1vw,19px) !important;
    }

    .aura-detail-description{
        font-size:clamp(11px,.78vw,14px) !important;
        line-height:1.42 !important;
    }


    /* ------------------------------------------------------
       DETAIL COPY CHANGES WITH EACH CENTERED IMAGE
    ------------------------------------------------------ */

    .aura-detail-title-block,
    .aura-detail-copy-block{
        transition:
            opacity .28s ease,
            transform .58s cubic-bezier(.22,1,.36,1);
    }
}


/* ==========================================================
   v4.5.0 — ULTRAWIDE / VERY LARGE DESKTOP
   Reference target: 21:9, 32:13, 4K/5K wide screens.
========================================================== */

@media (min-width:1900px) and (min-aspect-ratio:2/1){

    .aura-work{
        min-height:720px;

        --aura-lens-size:clamp(350px,10.5vw,540px);
    }

    .aura-card{
        width:clamp(205px,5.2vw,280px);
        height:clamp(254px,6.45vw,348px);
    }

    .aura-service-nav{
        left:clamp(18px,1vw,54px);
        width:min(520px,20vw);
    }

    .aura-service-link{
        font-size:clamp(14px,.74vw,19px);
        line-height:1.16;
    }

    .aura-service-info{
        right:clamp(18px,1vw,54px);
        width:min(520px,20vw);
    }

    .aura-service-current{
        font-size:clamp(10px,.52vw,13px);
        margin-bottom:clamp(20px,1.4vw,34px);
    }

    .aura-info-title{
        font-size:clamp(18px,.95vw,24px);
        margin-bottom:clamp(14px,.8vw,20px) !important;
    }

    .aura-info-description{
        max-width:440px;
        font-size:clamp(13px,.68vw,17px);
        line-height:1.42;
    }

    .aura-info-more{
        font-size:clamp(11px,.58vw,14px);
    }

    .aura-layout-controls,
    .aura-layout-btn{
        font-size:clamp(12px,.64vw,16px) !important;
    }

    .aura-layout-controls{
        left:clamp(18px,1vw,54px);
        bottom:clamp(16px,1.4vh,30px);
    }


    /* Horizontal keeps copy/menu visibly centered on wide monitors. */
    .aura-work[data-layout="horizontal"] .aura-service-info{
        top:6% !important;
        width:min(620px,24vw) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-nav{
        top:25% !important;
        max-width:88vw !important;
        gap:clamp(22px,1.5vw,42px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-link{
        font-size:clamp(14px,.7vw,18px) !important;
    }


    /* Grid uses generous side columns and a larger centered lens. */
    .aura-work[data-layout="grid"]{
        --aura-lens-size:clamp(360px,10vw,520px);
        --aura-split-open:clamp(72px,3.6vw,110px);
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        left:clamp(26px,1.2vw,70px) !important;
        width:min(520px,19vw) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-nav{
        right:clamp(26px,1.2vw,70px) !important;
        width:min(520px,19vw) !important;
    }

    .aura-work[data-layout="grid"] .aura-card{
        width:clamp(190px,4.6vw,250px) !important;
        height:clamp(235px,5.7vw,310px) !important;
    }


    /* Detail is also scaled to the viewport instead of staying tiny. */
    .aura-work{
        --aura-detail-media-width:clamp(260px,6.2vw,350px);
        --aura-detail-lens-size:clamp(430px,10.5vw,580px);
        --aura-detail-split-open:clamp(82px,4vw,128px);
    }

    .aura-detail-title-block{
        left:clamp(34px,1.4vw,84px) !important;
        width:min(560px,19vw) !important;
    }

    .aura-detail-copy-block{
        right:clamp(34px,1.4vw,84px) !important;
        width:min(560px,19vw) !important;
    }

    .aura-detail-title{
        font-size:clamp(18px,.9vw,26px) !important;
    }

    .aura-detail-description{
        font-size:clamp(13px,.68vw,18px) !important;
    }

    .aura-detail-code{
        font-size:clamp(10px,.52vw,13px) !important;
    }

    .aura-detail-cta,
    .aura-detail-back{
        font-size:clamp(11px,.58vw,14px) !important;
    }
}


/* ==========================================================
   v4.5.1 — LAYOUT CORRECTIONS
   ----------------------------------------------------------
   1. Ngang: hạ menu 5 dịch vụ xuống thấp hơn.
   2. Lưới: menu bên trái, nội dung bên phải.
   3. Lưới: mở kính lúp rộng hơn để không bó sát ảnh.
   4. Detail desktop: kính lúp nhỏ bằng kích thước index Dọc,
      mở rộng hơn và dùng cùng tâm/shift với kính lúp index.
========================================================== */

@media (min-width:768px){

    /* ------------------------------------------------------
       NGANG — hạ menu xuống dưới, tách khỏi phần mô tả
    ------------------------------------------------------ */
    .aura-work[data-layout="horizontal"] .aura-service-nav{
        top:32% !important;
    }


    /* ------------------------------------------------------
       LƯỚI — MENU TRÁI / NỘI DUNG PHẢI
    ------------------------------------------------------ */
    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(72px,5.2vw,98px) !important;
        --aura-split-switch:clamp(84px,6vw,112px) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-nav{
        left:clamp(18px,2vw,46px) !important;
        right:auto !important;
        top:50% !important;
        bottom:auto !important;
        width:min(360px,23vw) !important;
        transform:translateY(-50%) !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        text-align:left !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        left:auto !important;
        right:clamp(18px,2vw,46px) !important;
        top:50% !important;
        bottom:auto !important;
        width:min(360px,23vw) !important;
        transform:translateY(-50%) !important;
        text-align:left !important;
    }


    /* ------------------------------------------------------
       DETAIL — SIZE / OPENING / CENTER
       Standard desktop uses the same lens scale as Dọc index.
    ------------------------------------------------------ */
    .aura-work{
        --aura-detail-media-width:clamp(178px,13vw,220px) !important;
        --aura-detail-lens-size:clamp(250px,20vw,315px) !important;
        --aura-detail-split-open:clamp(88px,6.4vw,108px) !important;
    }

    .aura-detail-gallery{
        left:50% !important;
        right:auto !important;
        top:0 !important;
        bottom:0 !important;
        width:min(34vw,540px) !important;
        transform:translateX(-50%) translateY(22px) !important;
        overflow:visible !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-gallery{
        transform:translateX(-50%) translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        transform:translateX(-50%) translateY(16px) !important;
    }

    .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
    }

    .aura-detail-media{
        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-media-width) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--gallery-scale)) !important;
        transform-origin:50% 50% !important;
    }

    /* Use exactly the same geometric center/shift as the index lens. */
    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-lens-size) !important;
        height:var(--aura-detail-lens-size) !important;
        transform:translate3d(
            calc(-50% + var(--aura-lens-shift-x)),
            calc(-50% + var(--aura-lens-shift-y)),
            0
        ) !important;
    }

    .aura-work.is-detail .aura-focus-logo{
        --split:var(--aura-detail-split-open) !important;
    }

    /* Keep entering/leaving visibly closed for the transition. */
    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo{
        --split:var(--aura-detail-split) !important;
    }
}


/* ==========================================================
   v4.5.1 — ULTRAWIDE OVERRIDES
========================================================== */
@media (min-width:1900px) and (min-aspect-ratio:2/1){

    /* Ngang: menu lower on very wide monitors too. */
    .aura-work[data-layout="horizontal"] .aura-service-nav{
        top:30% !important;
    }

    /* Lưới: menu left / content right, with a wider open lens. */
    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(86px,4.2vw,128px) !important;
        --aura-split-switch:clamp(98px,4.9vw,144px) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-nav{
        left:clamp(26px,1.2vw,70px) !important;
        right:auto !important;
        width:min(520px,19vw) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        left:auto !important;
        right:clamp(26px,1.2vw,70px) !important;
        width:min(520px,19vw) !important;
    }

    /* Detail magnifier tracks the Dọc index size on the same monitor. */
    .aura-work{
        --aura-detail-media-width:clamp(205px,5.2vw,280px) !important;
        --aura-detail-lens-size:clamp(350px,10.5vw,540px) !important;
        --aura-detail-split-open:clamp(112px,4.8vw,158px) !important;
    }

    .aura-detail-gallery{
        width:min(28vw,720px) !important;
    }
}

/* ==========================================================
   v4.5.2 — DETAIL LENS + HORIZONTAL MENU REFINEMENT
   ----------------------------------------------------------
   1. Detail view: lens size now follows the current Service-page lens size.
   2. Detail view: lens opens wider and stays exactly centered over the active image.
   3. Horizontal layout: the 5-service menu moves below the image rail and is distributed evenly.
========================================================== */

@media (min-width:768px){

    /* DETAIL — use the same magnifier size as the current service layout */
    .aura-work{
        --aura-detail-lens-size:var(--aura-lens-size) !important;
        --aura-detail-media-width:clamp(188px,13.2vw,228px) !important;
        --aura-detail-split-open:clamp(102px,7vw,132px) !important;
    }

    .aura-detail-gallery{
        left:50% !important;
        right:auto !important;
        width:min(36vw,560px) !important;
        transform:translateX(-50%) translateY(22px) !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-gallery{
        transform:translateX(-50%) translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        transform:translateX(-50%) translateY(16px) !important;
    }

    .aura-detail-gallery-rail{
        inset:0 !important;
    }

    .aura-detail-media{
        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-media-width) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--gallery-scale)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-lens-size) !important;
        height:var(--aura-detail-lens-size) !important;
        transform:translate3d(-50%,-50%,0) !important;
    }

    .aura-work.is-detail .aura-focus-logo{
        --split:var(--aura-detail-split-open) !important;
    }

    /* HORIZONTAL — put the service menu below the image row */
    .aura-work[data-layout="horizontal"] .aura-service-nav{
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:clamp(84px,10vh,122px) !important;
        width:min(1220px,76vw) !important;
        transform:translateX(-50%) !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:clamp(18px,1.4vw,30px) !important;
        text-align:center !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-link{
        text-align:center !important;
        white-space:nowrap;
    }

    .aura-work[data-layout="horizontal"] .aura-stage-counter{
        top:calc(50% + clamp(168px,18vh,220px)) !important;
    }
}

@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-detail-lens-size:var(--aura-lens-size) !important;
        --aura-detail-media-width:clamp(210px,5.35vw,286px) !important;
        --aura-detail-split-open:clamp(122px,5.2vw,168px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-nav{
        bottom:clamp(78px,8vh,110px) !important;
        width:min(1440px,72vw) !important;
        gap:clamp(22px,1.35vw,36px) !important;
    }
}

/* ==========================================================
   v4.5.3 — DETAIL GEOMETRY MATCHES SERVICE INDEX
   ----------------------------------------------------------
   The previous build matched the lens size but the Detail image was still
   enlarged by the gallery focus scale (up to ~1.34x). That made the image
   nearly as wide as the lens and caused the blue halves to cover it.

   This build mirrors the Dọc/Vertical index geometry:
   - active Detail image stays at index-card scale,
   - lens keeps the same size as the index lens,
   - lens opens farther,
   - image center follows the same lens X/Y shift.
========================================================== */

@media (min-width:768px){

    .aura-work{
        /* Same lens dimension as the active service-page lens. */
        --aura-detail-lens-size:var(--aura-lens-size) !important;

        /* Match the visual scale of the active index card instead of the
           previously enlarged Detail gallery image. */
        --aura-detail-media-width:clamp(172px,10.1vw,188px) !important;

        /* Give the image noticeably more breathing room between both halves. */
        --aura-detail-split-open:clamp(118px,7.4vw,142px) !important;
    }

    /* Keep the Detail gallery geometrically on the exact same anchor as lens. */
    .aura-detail-gallery{
        left:calc(50% + var(--aura-lens-shift-x)) !important;
        right:auto !important;
        width:min(36vw,560px) !important;
        transform:translateX(-50%) translateY(22px) !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-gallery{
        transform:translateX(-50%) translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        transform:translateX(-50%) translateY(16px) !important;
    }

    .aura-detail-media{
        left:50% !important;
        top:calc(50% + var(--aura-lens-shift-y)) !important;
        width:var(--aura-detail-media-width) !important;

        /* JS still updates --gallery-scale for the surrounding rail, but the
           centered Detail image should visually match the index active card. */
        --gallery-scale:1 !important;

        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--gallery-scale)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-detail-lens-size) !important;
        height:var(--aura-detail-lens-size) !important;
        transform:translate3d(
            calc(-50% + var(--aura-lens-shift-x)),
            calc(-50% + var(--aura-lens-shift-y)),
            0
        ) !important;
    }

    .aura-work.is-detail .aura-focus-logo{
        --split:var(--aura-detail-split-open) !important;
    }
}

/* Very wide monitors: use the same active-card scaling rules already used by
   the index instead of letting the Detail image grow disproportionately. */
@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-detail-lens-size:var(--aura-lens-size) !important;
        --aura-detail-media-width:clamp(205px,5.2vw,280px) !important;
        --aura-detail-split-open:clamp(138px,5.6vw,190px) !important;
    }
}


/* ==========================================================
   v4.5.4 — VIDEO MOTION / TRANSITION POLISH
   ----------------------------------------------------------
   Fixes observed in the supplied screen recording:
   - service switches no longer leave an empty magnifier,
   - index -> detail no longer flashes through a blank-lens frame,
   - detail -> index return is shorter and reveals content in sync,
   - layout changes settle faster with less overlap/jump,
   - Grid side columns stay inside the viewport.
========================================================== */

@media (min-width:768px){

    /* Keep outgoing active artwork under the incoming card during a switch. */
    .aura-card.is-switch-origin{
        visibility:visible !important;
        opacity:1 !important;
        z-index:3 !important;
        transform:
            translate(-50%,-50%)
            translate(var(--aura-lens-shift-x),var(--aura-lens-shift-y))
            scale(1) !important;
        transition:opacity .28s ease !important;
    }

    .aura-card.is-switch-origin.is-switch-origin-fading{
        opacity:0 !important;
    }

    .aura-work.is-switching .aura-card{
        transition:
            transform .56s cubic-bezier(.22,1,.36,1),
            opacity .32s ease,
            width .56s cubic-bezier(.22,1,.36,1),
            height .56s cubic-bezier(.22,1,.36,1) !important;
    }

    .aura-work.is-layout-switching .aura-card,
    .aura-work.is-layout-switching .aura-service-nav,
    .aura-work.is-layout-switching .aura-service-info{
        transition-duration:.62s !important;
    }

    /* INDEX -> DETAIL: crossfade the centered image instead of showing
       a white/empty lens while the Detail layer waits for is-detail. */
    .aura-work.is-detail-entering .aura-detail-view{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery{
        opacity:1 !important;
        transform:translateX(-50%) translateY(0) !important;
        transition:opacity .34s ease !important;
    }

    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo{
        --split:var(--aura-detail-split-open) !important;
    }

    .aura-work.is-detail-entering .aura-cards{
        transition:opacity .34s ease, transform .44s cubic-bezier(.22,1,.36,1) !important;
    }

    /* DETAIL -> INDEX: same sequence as before, but without the multi-second
       empty portal phase. */
    .aura-work.is-detail-returning .aura-focus-logo{
        transition:
            width .46s cubic-bezier(.65,0,.18,1),
            height .46s cubic-bezier(.65,0,.18,1),
            left .46s cubic-bezier(.65,0,.18,1),
            top .46s cubic-bezier(.65,0,.18,1),
            transform .46s cubic-bezier(.65,0,.18,1) !important;
    }

    .aura-work.is-detail-returning .aura-focus-half{
        transition:transform .34s cubic-bezier(.65,0,.18,1) !important;
    }

    .aura-work.is-detail-return-opening .aura-focus-half{
        transition:transform .56s cubic-bezier(.16,1,.3,1) !important;
    }

    .aura-work.is-detail-return-opening .aura-service-nav,
    .aura-work.is-detail-return-opening .aura-service-info,
    .aura-work.is-detail-return-opening .aura-layout-controls,
    .aura-work.is-detail-return-opening .aura-cards{
        transition:
            opacity .42s cubic-bezier(.22,.61,.36,1),
            transform .58s cubic-bezier(.16,1,.3,1) !important;
    }

    /* Keep Grid columns fully visible and away from the artwork. */
    .aura-work[data-layout="grid"] .aura-service-nav{
        left:clamp(26px,2.2vw,52px) !important;
        right:auto !important;
        width:min(330px,21vw) !important;
        transform:translateY(-50%) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        left:auto !important;
        right:clamp(26px,2.2vw,52px) !important;
        width:min(330px,21vw) !important;
        transform:translateY(-50%) !important;
    }

    /* A slightly tighter grid spread prevents peripheral cards from crossing
       the text columns during the layout morph. */
    .aura-work[data-layout="grid"] .aura-card:not(.is-active){
        transition-duration:.58s !important;
    }
}

@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work[data-layout="grid"] .aura-service-nav{
        left:clamp(38px,1.4vw,82px) !important;
        width:min(480px,18vw) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        right:clamp(38px,1.4vw,82px) !important;
        width:min(480px,18vw) !important;
    }
}

/* ==========================================================
   v4.5.5 — DETAIL IMAGE + MAGNIFIER MATCH SERVICE INDEX
   ----------------------------------------------------------
   Desktop Detail now reuses the same visual language as Service index:
   - same active-card dimensions,
   - same vertical center-to-center spacing,
   - active image full color,
   - surrounding images smaller / grayscale / low opacity,
   - same magnifier size and opening distance as Service index.

   Mobile Detail is intentionally left unchanged.
========================================================== */

@media (min-width:768px){

    .aura-work{
        --aura-detail-media-width:178px !important;
        --aura-detail-media-height:220px !important;
        --aura-detail-lens-size:var(--aura-lens-size) !important;
        --aura-detail-split:var(--aura-split-closed) !important;
        --aura-detail-split-open:var(--aura-split-open) !important;
    }

    /* The Detail rail uses the same center anchor as the Service index. */
    .aura-detail-gallery{
        left:50% !important;
        right:auto !important;
        top:0 !important;
        bottom:0 !important;
        width:var(--aura-detail-media-width) !important;
        overflow:visible !important;
        transform:translateX(-50%) translateY(22px) !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail.is-detail-ready .aura-detail-gallery{
        opacity:1 !important;
        transform:translateX(-50%) translateY(0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        opacity:0 !important;
        transform:translateX(-50%) translateY(16px) !important;
    }

    .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
        overflow:visible !important;
    }

    /* Match the Service-index card geometry exactly on normal desktop. */
    .aura-detail-media{
        left:50% !important;
        top:calc(50% + var(--aura-lens-shift-y)) !important;
        width:var(--aura-detail-media-width) !important;
        height:var(--aura-detail-media-height) !important;
        aspect-ratio:auto !important;
        overflow:hidden !important;
        background:transparent !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--gallery-scale,1)) !important;
        transform-origin:50% 50% !important;
        transition:
            opacity .6s ease,
            transform 1s cubic-bezier(.76,0,.24,1) !important;
    }

    .aura-detail-media img{
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        max-height:none !important;
        display:block !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
        filter:grayscale(var(--gallery-grayscale,100%)) !important;
        transform:scale(var(--gallery-image-scale,1.015)) !important;
        transition:
            filter .55s ease,
            transform .9s cubic-bezier(.76,0,.24,1) !important;
    }

    .aura-detail-media.is-gallery-active img{
        filter:grayscale(0%) !important;
        transform:scale(1) !important;
    }

    /* Same magnifier geometry as Service index. */
    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        transform:translate3d(
            calc(-50% + var(--aura-lens-shift-x)),
            calc(-50% + var(--aura-lens-shift-y)),
            0
        ) !important;
        z-index:30 !important;
    }

    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }

    .aura-work.is-detail-leaving .aura-focus-logo{
        --split:var(--aura-split-closed) !important;
    }
}

/* Match the larger Service-index card/lens geometry on ultrawide displays. */
@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-detail-media-width:clamp(205px,5.2vw,280px) !important;
        --aura-detail-media-height:clamp(254px,6.45vw,348px) !important;
        --aura-detail-lens-size:var(--aura-lens-size) !important;
        --aura-detail-split-open:var(--aura-split-open) !important;
    }
}

/* ==========================================================
   v4.5.7 — OBYS MOTION FOR VERTICAL / HORIZONTAL / GRID / DETAIL
   ----------------------------------------------------------
   Desktop index:
   - all three layouts use the same requestAnimationFrame rail,
   - remove transform lag while JS is moving cards,
   - the magnifier stays fixed while artwork moves through it,
   - the image reaching the lens zooms continuously,
   - circular wrap fades out before teleporting to the other side.

   Desktop Detail:
   - gallery also disables CSS transform lag while the kinetic rail moves,
   - center zoom / grayscale / opacity are driven per frame by JS.
========================================================== */
@media (min-width:768px){
    .aura-work.is-index-kinetic .aura-card{
        transition:none !important;
        will-change:transform,opacity !important;
    }

    .aura-work.is-index-kinetic .aura-card-visual,
    .aura-work.is-index-kinetic .aura-card-visual img{
        transition:none !important;
    }

    .aura-work.is-index-kinetic .aura-card-visual img,
    .aura-work.is-index-kinetic .aura-card.is-active .aura-card-visual img{
        filter:grayscale(var(--aura-kinetic-gray,100%)) !important;
        transform:scale(var(--aura-kinetic-image-scale,1.015)) !important;
    }

    /* Fixed portal: Vertical / Horizontal / Grid all move behind this lens. */
    .aura-work.is-index-kinetic .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        transform:translate3d(
            calc(-50% + var(--aura-lens-shift-x)),
            calc(-50% + var(--aura-lens-shift-y)),
            0
        ) !important;
        --split:var(--aura-split-open) !important;
    }

    /* Disable the old parked-origin workaround for every kinetic layout. */
    .aura-work.is-index-kinetic .aura-card.is-switch-origin,
    .aura-work.is-index-kinetic .aura-card.is-switch-origin.is-switch-origin-fading{
        visibility:visible !important;
        opacity:var(--opacity) !important;
        transform:
            translate(-50%,-50%)
            translate(var(--x),var(--y))
            scale(var(--scale)) !important;
    }

    /* Detail is already rendered frame-by-frame; CSS tweening caused lag. */
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        transition:none !important;
        will-change:transform,opacity !important;
    }

    .aura-work.is-detail-gallery-kinetic .aura-detail-media img,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media.is-gallery-active img{
        transition:none !important;
        filter:grayscale(var(--gallery-grayscale,100%)) !important;
        transform:scale(var(--gallery-image-scale,1.015)) !important;
    }

    .aura-work.is-detail-gallery-kinetic .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        --split:var(--aura-split-open) !important;
    }
}



/* ==========================================================
   v4.5.8 — DETAIL TRUE CENTER + CENTER ZOOM FIX
   ----------------------------------------------------------
   Fixes two remaining Detail issues:
   1) legacy --gallery-scale:1 !important prevented the active image
      from actually enlarging even though JS calculated the correct scale;
   2) the gallery used a narrow translated container, so its visual center
      could drift a few pixels away from the real magnifier center.

   The Detail rail now spans the full Service viewport. Every media item is
   anchored to the exact same 50%/50% + lens shift coordinates as the lens.
   The image reaching the lens scales continuously up to the JS focus scale.
========================================================== */
@media (min-width:768px){
    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail .aura-detail-gallery,
    .aura-work.is-detail-leaving .aura-detail-gallery,
    .aura-work.is-detail-gallery-kinetic .aura-detail-gallery{
        left:0 !important;
        right:0 !important;
        top:0 !important;
        bottom:0 !important;
        width:100% !important;
        max-width:none !important;
        overflow:visible !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery{
        transform:translate3d(0,22px,0) !important;
    }

    .aura-work.is-detail.is-detail-ready .aura-detail-gallery,
    .aura-work.is-detail-gallery-kinetic .aura-detail-gallery{
        transform:translate3d(0,0,0) !important;
    }

    .aura-work.is-detail-leaving .aura-detail-gallery{
        transform:translate3d(0,16px,0) !important;
    }

    .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:visible !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:calc(50% + var(--aura-lens-shift-x)) !important;
        top:calc(50% + var(--aura-lens-shift-y)) !important;
        width:var(--aura-detail-media-width) !important;
        height:var(--aura-detail-media-height,220px) !important;
        margin:0 !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--aura-detail-kinetic-scale,1)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        transition:none !important;
        will-change:transform,opacity !important;
    }

    .aura-work.is-detail-gallery-kinetic .aura-detail-media img,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media.is-gallery-active img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
        transition:none !important;
        filter:grayscale(var(--gallery-grayscale,100%)) !important;
        transform:scale(var(--gallery-image-scale,1.015)) !important;
    }

    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo,
    .aura-work.is-detail-gallery-kinetic .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        transform:translate3d(
            calc(-50% + var(--aura-lens-shift-x)),
            calc(-50% + var(--aura-lens-shift-y)),
            0
        ) !important;
    }
}


/* ==========================================================
   v4.5.9 — DETAIL WINDOW CENTER + HORIZONTAL/GRID LENS GAP
   ----------------------------------------------------------
   1) Detail: the SVG artwork is optically offset inside its own square
      canvas.  The active media is corrected a few pixels so its visual
      center sits in the actual blue square, not only at the DOM box center.
   2) Horizontal / Grid: open both magnifier halves farther away from the
      active artwork.
   3) The JS rail spacing is widened at the same time, therefore the larger
      opening does not collide with the neighbouring cards.
========================================================== */
@media (min-width:768px){
    .aura-work{
        --aura-detail-center-correct-x:-2px;
        --aura-detail-center-correct-y:-12px;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:calc(
            50% +
            var(--aura-lens-shift-x) +
            var(--aura-detail-center-correct-x)
        ) !important;
        top:calc(
            50% +
            var(--aura-lens-shift-y) +
            var(--aura-detail-center-correct-y)
        ) !important;
    }

    /* Ngang: noticeably more air between the zoomed center image and lens. */
    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(88px,6.2vw,96px) !important;
        --aura-split-switch:clamp(100px,7vw,112px) !important;
    }

    .aura-work[data-layout="horizontal"].is-focus-open .aura-focus-logo,
    .aura-work[data-layout="horizontal"].is-index-kinetic .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }

    /* Lưới: open farther, while keeping the full composition inside the
       text columns.  The rail positions themselves are also spread in JS. */
    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(112px,7.8vw,124px) !important;
        --aura-split-switch:clamp(124px,8.6vw,138px) !important;
    }

    .aura-work[data-layout="grid"].is-focus-open .aura-focus-logo,
    .aura-work[data-layout="grid"].is-index-kinetic .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }

    /* Give the widened Grid artwork a little more side room without letting
       it run into the left/right copy columns. */
    .aura-work[data-layout="grid"] .aura-service-nav{
        left:clamp(20px,1.7vw,38px) !important;
        width:min(305px,19.5vw) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        right:clamp(20px,1.7vw,38px) !important;
        width:min(305px,19.5vw) !important;
    }
}

@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-detail-center-correct-x:-3px;
        --aura-detail-center-correct-y:-16px;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(110px,4.8vw,148px) !important;
        --aura-split-switch:clamp(124px,5.4vw,164px) !important;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(128px,5.2vw,164px) !important;
        --aura-split-switch:clamp(144px,5.8vw,182px) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-nav{
        left:clamp(30px,1.15vw,66px) !important;
        width:min(450px,17vw) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        right:clamp(30px,1.15vw,66px) !important;
        width:min(450px,17vw) !important;
    }
}


/* ==========================================================
   v4.6.0 — DETAIL PORTAL FIT + HORIZONTAL LENS AIR GAP
   ----------------------------------------------------------
   DETAIL
   - Keep the media on the optical center already measured from the real SVG.
   - The previous 1.34x center zoom made the portrait extend well beyond the
     square part of the magnifier, which made a correctly-centered item look
     visually off-center. JS now keeps a smaller but still visible center zoom.
   - Reassert the measured optical correction here so older rules cannot drift.

   HORIZONTAL
   - Open both lens halves farther away from the zoomed active image.
   - The JS rail gap is widened at the same time, so the lens gains breathing
     room without moving onto either neighbouring artwork card.
========================================================== */
@media (min-width:768px){
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:-12px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:calc(
            50% +
            var(--aura-lens-shift-x) +
            var(--aura-detail-center-correct-x)
        ) !important;
        top:calc(
            50% +
            var(--aura-lens-shift-y) +
            var(--aura-detail-center-correct-y)
        ) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(118px,7.6vw,132px) !important;
        --aura-split-switch:clamp(136px,8.6vw,150px) !important;
    }

    .aura-work[data-layout="horizontal"].is-focus-open .aura-focus-logo,
    .aura-work[data-layout="horizontal"].is-index-kinetic .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }
}

@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(150px,5.8vw,190px) !important;
        --aura-split-switch:clamp(168px,6.5vw,210px) !important;
    }
}

/* ==========================================================
   v4.6.2 — TRUE BLUE-SQUARE CENTER + MORE HORIZONTAL AIR
   ----------------------------------------------------------
   DETAIL
   - The active media is aligned to the geometric center of the blue square
     itself, not the center of the complete SVG canvas/handle artwork.
   - Measured from the current 1920x1080 render, the previous negative Y
     correction placed the image about 40px too high. The square center sits
     essentially on the lens anchor, with only a tiny +5px optical correction.
   - X remains exactly on the square center.

   HORIZONTAL
   - Open the two magnifier halves a little farther from the active image.
   - JS widens the horizontal rail by the same revision so neighbouring images
     remain outside the enlarged lens footprint.
========================================================== */
@media (min-width:768px){
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:5px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:calc(
            50% +
            var(--aura-lens-shift-x) +
            var(--aura-detail-center-correct-x)
        ) !important;
        top:calc(
            50% +
            var(--aura-lens-shift-y) +
            var(--aura-detail-center-correct-y)
        ) !important;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(168px,10.2vw,186px) !important;
        --aura-split-switch:clamp(188px,11.2vw,206px) !important;
    }

    .aura-work[data-layout="horizontal"].is-focus-open .aura-focus-logo,
    .aura-work[data-layout="horizontal"].is-index-kinetic .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }
}

@media (min-width:1900px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:6px !important;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(198px,7.2vw,236px) !important;
        --aura-split-switch:clamp(220px,8vw,258px) !important;
    }
}

/* ==========================================================
   v4.6.3 — DESKTOP VERTICAL RAIL TOP-EDGE CLIP FIX
   ----------------------------------------------------------
   Problem:
   The Service rail could travel all the way to the viewport bottom, but
   cards moving upward were clipped at the top boundary of the Flatsome /
   Service wrapper.  The rail itself was correct; an ancestor clipping
   context was cutting the artwork before it reached the browser top edge.

   Fix:
   - only for the desktop Service INDEX in Vertical mode;
   - let the Flatsome shortcode wrappers, Service root, stage and card rail
     paint outside their own top boundary;
   - do not change Detail, Horizontal, Grid or mobile geometry;
   - the header keeps its own z-index, so artwork can travel underneath it
     naturally while the actual viewport remains the visual cut line.
========================================================== */
@media (min-width:768px){
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) #main,
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) .dichvu-section,
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) .dichvu-section > .section-content,
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) .aura-work-section,
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) .aura-work-row,
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) .aura-work-row > .col,
    body.home:has(.aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)) .aura-work-row > .col > .col-inner{
        overflow:visible !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }

    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        overflow:visible !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }

    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage,
    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-cards{
        overflow:visible !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }
}

/* ==========================================================
   v4.6.4 — VERTICAL SMOOTHING + TRUE DETAIL PORTAL ANCHOR
            + STABLE DETAIL RETURN CONTROLS
   ----------------------------------------------------------
   1) Service rail: compositor-only transforms while kinetic motion runs.
      JS no longer reads computed style every frame and now uses a damped
      velocity spring, so reversing Dọc direction does not snap.
   2) Detail: media anchor is supplied by JS from the ACTUAL magnifier box
      center in viewport coordinates, then converted into gallery-local
      coordinates. Because the SVG artwork already offsets itself so the
      blue square center sits on the lens box center, this aligns the image
      to the BLUE SQUARE — not the full SVG/handle bounding box.
   3) Detail -> Service: Dọc / Ngang / Lưới controls are held at their final
      bottom-left coordinates while hidden, then faded in only after the
      index layout has settled. No flash and no position hop.
========================================================== */
@media (min-width:768px){
    .aura-work.is-index-kinetic .aura-card{
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--x),var(--y),0)
            scale(var(--scale)) !important;
        backface-visibility:hidden !important;
        -webkit-backface-visibility:hidden !important;
        will-change:transform,opacity !important;
        transition:none !important;
    }

    .aura-work.is-index-kinetic .aura-card-visual,
    .aura-work.is-index-kinetic .aura-card-visual img{
        backface-visibility:hidden !important;
        -webkit-backface-visibility:hidden !important;
        transition:none !important;
    }

    /* Manual correction values from older revisions are intentionally
       bypassed. JS now gives the exact gallery-local portal coordinate. */
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:0px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:var(--aura-detail-anchor-x,50%) !important;
        top:var(--aura-detail-anchor-y,50%) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--aura-detail-kinetic-scale,1)) !important;
        transform-origin:50% 50% !important;
    }

    /* Keep controls in one immutable geometry throughout Detail -> Index. */
    .aura-work.is-detail-return-controls-hold .aura-layout-controls{
        position:absolute !important;
        left:14px !important;
        right:auto !important;
        top:auto !important;
        bottom:14px !important;
        margin:0 !important;
        transform:none !important;
        opacity:0 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
    }

    .aura-work.is-detail-return-controls-hold.is-detail-return-controls-visible .aura-layout-controls{
        opacity:1 !important;
        transform:none !important;
        transition:opacity .28s ease !important;
    }
}


/* ==========================================================
   v4.6.5 — MONOTONIC RAIL + LIVE DETAIL SQUARE CENTER
            + FLASH-FREE DETAIL RETURN
   ----------------------------------------------------------
   1) Desktop Service index keeps compositor-only card transforms active from
      the first paint. JS now approaches the wheel target monotonically, so a
      quick up/down reversal cannot overshoot and wrap a card for one frame.
   2) Detail media uses the live gallery-local coordinate of the magnifier
      center. JS resamples it while the Detail shell settles, removing the
      stale ~20–30px Y error that remained after the first transition frame.
   3) Detail -> Service keeps a white viewport shell until the index has been
      painted, and Dọc / Ngang / Lưới become visible in the SAME opening phase
      as the Service content. No bottom-edge flash and no delayed control pop.
========================================================== */
@media (min-width:768px){
    /* Stable compositor path for every desktop index frame. */
    .aura-work.is-index-kinetic .aura-card{
        transition:none !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--x),var(--y),0)
            scale(var(--scale)) !important;
        will-change:transform,opacity !important;
        backface-visibility:hidden !important;
        -webkit-backface-visibility:hidden !important;
    }

    .aura-work.is-index-kinetic .aura-card-visual,
    .aura-work.is-index-kinetic .aura-card-visual img{
        transition:none !important;
        backface-visibility:hidden !important;
        -webkit-backface-visibility:hidden !important;
    }

    /* JS owns the exact Detail anchor. Never reintroduce guessed corrections. */
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:0px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:var(--aura-detail-anchor-x,50%) !important;
        top:var(--aura-detail-anchor-y,50%) !important;
    }

    /* Freeze the viewport/background through the Detail -> Index handoff. */
    .aura-work.is-detail-return-shell{
        height:var(--aura-detail-viewport-height,100dvh) !important;
        min-height:var(--aura-detail-viewport-height,100dvh) !important;
        max-height:none !important;
        background:#EAEAEA !important;
        overflow:hidden !important;
    }

    body:has(.aura-work.is-detail-return-shell) #main,
    body:has(.aura-work.is-detail-return-shell) .dichvu-section,
    body:has(.aura-work.is-detail-return-shell) .dichvu-section > .section-content,
    body:has(.aura-work.is-detail-return-shell) .aura-work-section,
    body:has(.aura-work.is-detail-return-shell) .aura-work-row,
    body:has(.aura-work.is-detail-return-shell) .aura-work-row > .col,
    body:has(.aura-work.is-detail-return-shell) .aura-work-row > .col > .col-inner{
        background:#EAEAEA !important;
    }

    /* Final index coordinates are immutable during the handoff. */
    .aura-work.is-detail-return-controls-hold .aura-layout-controls{
        position:absolute !important;
        left:14px !important;
        right:auto !important;
        top:auto !important;
        bottom:14px !important;
        margin:0 !important;
        transform:none !important;
        visibility:visible !important;
        pointer-events:none !important;
    }

    /* Reveal together with the Service content, not after it. */
    .aura-work.is-detail-return-controls-hold.is-detail-return-controls-visible .aura-layout-controls,
    .aura-work.is-detail-return-opening.is-detail-return-controls-visible .aura-layout-controls{
        opacity:1 !important;
        transform:none !important;
        transition:opacity .34s cubic-bezier(.22,.61,.36,1) !important;
    }
}


/* ==========================================================
   v4.6.6 — TRUE INDEX VIEWPORT + FIXED DETAIL PORTAL
            + IMMUTABLE RETURN CONTROLS
   ----------------------------------------------------------
   - Service index desktop is an exact one-screen canvas.  JS measures the
     root's real viewport top and exposes --aura-index-viewport-height.
     Document scrolling is locked only while the Service index is active, so
     wheel input can no longer move the page behind the kinetic rail.
   - Detail gallery becomes a fixed viewport overlay.  JS writes the actual
     blue-square center in viewport coordinates, removing the old coordinate
     mismatch between the magnifier and the transformed gallery wrapper.
   - Layout controls use the same final geometry before, during and after the
     Detail -> Service handoff, so removing transition classes cannot make
     Dọc / Ngang / Lưới jump upward.
========================================================== */
@media (min-width:768px){
    html.aura-service-index-viewport-lock,
    html.aura-service-index-viewport-lock body,
    body.aura-service-index-viewport-lock{
        height:100% !important;
        max-height:100% !important;
        overflow:hidden !important;
        overscroll-behavior:none !important;
    }

    body.aura-service-index-viewport-lock #main{
        overflow:visible !important;
    }

    body.aura-service-index-viewport-lock .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        height:var(--aura-index-viewport-height,calc(100dvh - 90px)) !important;
        min-height:var(--aura-index-viewport-height,calc(100dvh - 90px)) !important;
        max-height:var(--aura-index-viewport-height,calc(100dvh - 90px)) !important;
    }

    /* Detail artwork and magnifier now share the same viewport coordinate map. */
    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail .aura-detail-gallery,
    .aura-work.is-detail-leaving .aura-detail-gallery,
    .aura-work.is-detail-gallery-kinetic .aura-detail-gallery{
        position:fixed !important;
        left:0 !important;
        right:auto !important;
        top:0 !important;
        bottom:auto !important;
        width:100vw !important;
        height:100dvh !important;
        transform:none !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery-rail,
    .aura-work.is-detail .aura-detail-gallery-rail,
    .aura-work.is-detail-leaving .aura-detail-gallery-rail,
    .aura-work.is-detail-gallery-kinetic .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        transform:none !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:var(--aura-detail-anchor-x,50vw) !important;
        top:var(--aura-detail-anchor-y,50dvh) !important;
        pointer-events:auto !important;
    }

    /* One exact final position for the controls in every index/return state. */
    .aura-work{
        --aura-controls-left:clamp(22px,1.35vw,30px);
        --aura-controls-bottom:clamp(18px,1.75vh,24px);
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning) .aura-layout-controls,
    .aura-work.is-detail-return-controls-hold .aura-layout-controls,
    .aura-work.is-detail-return-opening .aura-layout-controls{
        position:absolute !important;
        left:var(--aura-controls-left) !important;
        right:auto !important;
        top:auto !important;
        bottom:var(--aura-controls-bottom) !important;
        margin:0 !important;
        transform:none !important;
    }

    .aura-work.is-detail-return-controls-hold .aura-layout-controls{
        visibility:visible !important;
        pointer-events:none !important;
    }
}

/* ==========================================================
   v4.6.7 — TRUE DETAIL SQUARE CENTER + SMOOTH RETURN ZOOM
   ----------------------------------------------------------
   - Detail anchor is supplied by JS from the optical center of the BLUE
     square body (not the full SVG canvas / handle).
   - Detail -> Service pre-renders the final kinetic card geometry while
     hidden.  The active artwork then uses one dedicated compositor animation
     from ~84% to 100% of that final card size, eliminating the scale hitch at
     the handoff.
========================================================== */
@media (min-width:768px){
    @keyframes aura-detail-return-active-zoom-v467{
        0%{
            transform:translateZ(0) scale(.84);
        }
        100%{
            transform:translateZ(0) scale(1);
        }
    }

    .aura-work.is-detail-return-opening.is-detail-return-image-zoom
    .aura-card.is-active .aura-card-visual{
        animation:
            aura-detail-return-active-zoom-v467
            .58s
            cubic-bezier(.16,1,.3,1)
            both !important;
        transform-origin:50% 50% !important;
        will-change:transform !important;
        backface-visibility:hidden !important;
        -webkit-backface-visibility:hidden !important;
    }

    /* The image itself stays on the kinetic focus transform.  Only its visual
       wrapper performs the return zoom, so removing the temporary class lands
       exactly on the normal Service-index geometry without a final jump. */
    .aura-work.is-detail-return-opening.is-detail-return-image-zoom
    .aura-card.is-active .aura-card-visual img{
        transition:none !important;
        backface-visibility:hidden !important;
        -webkit-backface-visibility:hidden !important;
    }
}


/* ==========================================================
   v4.6.8 — STATIC LENS ON DETAIL -> SERVICE RETURN
   ----------------------------------------------------------
   Keep the magnifier completely still while leaving Detail.
   Only Detail/Service content changes underneath it.
   No close/open, no size tween, no position tween.
========================================================== */
@media (min-width:768px){
    .aura-work.is-detail-return-lens-static .aura-focus-logo{
        left:50% !important;
        top:50% !important;
        width:var(--aura-lens-size) !important;
        height:var(--aura-lens-size) !important;
        transform:translate3d(
            calc(-50% + var(--aura-lens-shift-x)),
            calc(-50% + var(--aura-lens-shift-y)),
            0
        ) !important;
        --split:var(--aura-split-open) !important;
        transition:none !important;
        animation:none !important;
        will-change:auto !important;
    }

    .aura-work.is-detail-return-lens-static .aura-focus-half,
    .aura-work.is-detail-return-lens-static .aura-focus-left,
    .aura-work.is-detail-return-lens-static .aura-focus-right{
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-lens-static .aura-focus-left{
        transform:translate3d(calc(var(--aura-split-open) * -1),0,0) !important;
    }

    .aura-work.is-detail-return-lens-static .aura-focus-right{
        transform:translate3d(var(--aura-split-open),0,0) !important;
    }
}


/* ==========================================================
   v4.6.9 — DETAIL CENTER CALIBRATION + LAYOUT GHOST FIX
   ----------------------------------------------------------
   - Detail image center is supplied by JS from the exact active-card center
     measured against the magnifier while the Service index is still visible.
     This makes Detail inherit the same blue-square optical center as Dọc,
     Ngang and Lưới instead of guessing from the SVG canvas.
   - Horizontal/Grid layout rules use opacity:1 !important on index copy/menu.
     These late rules previously overrode the generic Detail hide state and
     caused duplicate Service information to remain visible in Detail.
========================================================== */
@media (min-width:768px){
    /* JS owns the calibrated viewport anchor. No historical CSS correction. */
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:0px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:var(--aura-detail-anchor-x,50vw) !important;
        top:var(--aura-detail-anchor-y,50dvh) !important;
    }

    /*
     * This block MUST stay after all [data-layout="horizontal/grid"] rules.
     * Their desktop refinements intentionally force index UI visible with
     * !important, so Detail needs a final stronger state override.
     */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-cards,
    .aura-work.is-detail-entering .aura-stage-counter,
    .aura-work.is-detail .aura-service-nav,
    .aura-work.is-detail .aura-service-info,
    .aura-work.is-detail .aura-layout-controls,
    .aura-work.is-detail .aura-cards,
    .aura-work.is-detail .aura-stage-counter,
    .aura-work.is-detail-leaving .aura-service-nav,
    .aura-work.is-detail-leaving .aura-service-info,
    .aura-work.is-detail-leaving .aura-layout-controls,
    .aura-work.is-detail-leaving .aura-cards,
    .aura-work.is-detail-leaving .aura-stage-counter{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
    }

    /* Detail's own title/copy remain the only textual UI above the gallery. */
    .aura-work.is-detail.is-detail-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-gallery,
    .aura-work.is-detail.is-detail-ready .aura-detail-back{
        visibility:visible !important;
    }
}


/* ==========================================================
   v4.7.0 — DETAIL TRUE SQUARE CENTER
   ----------------------------------------------------------
   JS now places Detail media at the live center of the lens wrapper.
   Detail uses a fixed viewport gallery, so no extra X/Y correction is
   allowed here.  Keeping this final override prevents older calibration
   rules from shifting the active image away from the square center.
========================================================== */
@media (min-width:768px){
    .aura-work{
        --aura-detail-center-correct-x:0px !important;
        --aura-detail-center-correct-y:0px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-gallery-kinetic .aura-detail-media{
        left:var(--aura-detail-anchor-x,50vw) !important;
        top:var(--aura-detail-anchor-y,50dvh) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--gallery-y,0px),0)
            scale(var(--aura-detail-kinetic-scale,1)) !important;
        transform-origin:50% 50% !important;
    }
}


/* ==========================================================
   v4.7.1 — UNIFY INTERNAL / DIRECT DETAIL GEOMETRY
   ----------------------------------------------------------
   Legacy v4.4.1 moved only internal Service -> Detail gallery
   down by --aura-detail-header-clearance. Since Detail gallery
   is fixed to the viewport from v4.6.6 onward, that correction
   creates two different Detail positions: click-through vs reload.
   Neutralize it even if a stale is-detail-from-index class survives
   for one frame.
========================================================== */
@media (min-width:768px){
    .aura-work.is-detail-from-index.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail-from-index.is-detail .aura-detail-gallery,
    .aura-work.is-detail-from-index.is-detail-leaving .aura-detail-gallery{
        position:fixed !important;
        left:0 !important;
        right:auto !important;
        top:0 !important;
        bottom:auto !important;
        width:100vw !important;
        height:100dvh !important;
        transform:none !important;
    }

    .aura-work.is-detail-from-index.is-detail-entering .aura-detail-view::after,
    .aura-work.is-detail-from-index.is-detail .aura-detail-view::after,
    .aura-work.is-detail-from-index.is-detail-leaving .aura-detail-view::after{
        top:0 !important;
    }
}

/* ==========================================================
   v4.7.3 — ULTRAWIDE RESPONSIVE COMPOSITION
   ----------------------------------------------------------
   Target: 21:9 / 32:13 / 3440×1330 and similarly wide screens.
   Goal: use the extra horizontal canvas instead of leaving a tiny 1920-style
   composition floating in the middle of a very wide viewport.

   Rules are intentionally limited to very wide desktop viewports so normal
   1366 / 1440 / 1920 layouts and mobile remain unchanged.
========================================================== */
@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work{
        /* Scale the portal from viewport HEIGHT, not raw viewport width.
           This keeps 32:9 / 21:9 screens visually substantial without
           creating an oversized lens on very wide but short displays. */
        --aura-lens-size:clamp(520px,45vh,640px) !important;
        --aura-detail-lens-size:var(--aura-lens-size) !important;
        --aura-detail-media-width:clamp(300px,23vh,380px) !important;

        /* Bring the two information columns toward the artwork instead of
           pinning them to the extreme monitor edges. */
        --aura-ultra-side-inset:clamp(300px,10vw,460px);
        --aura-ultra-copy-width:clamp(470px,15vw,600px);
    }

    /* ---------------- SERVICE INDEX — VERTICAL ---------------- */
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)
    .aura-card{
        width:clamp(270px,22vh,330px) !important;
        height:clamp(338px,27.5vh,414px) !important;
    }

    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)
    .aura-service-nav{
        left:var(--aura-ultra-side-inset) !important;
        right:auto !important;
        width:var(--aura-ultra-copy-width) !important;
    }

    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening)
    .aura-service-info{
        right:var(--aura-ultra-side-inset) !important;
        left:auto !important;
        width:var(--aura-ultra-copy-width) !important;
    }

    .aura-work[data-layout="vertical"] .aura-service-link{
        font-size:clamp(16px,1.15vh,20px) !important;
        line-height:1.18 !important;
    }

    .aura-work[data-layout="vertical"] .aura-info-title{
        font-size:clamp(21px,1.55vh,27px) !important;
    }

    .aura-work[data-layout="vertical"] .aura-info-description{
        max-width:520px !important;
        font-size:clamp(14px,1.05vh,18px) !important;
        line-height:1.45 !important;
    }

    /* ---------------- SERVICE INDEX — HORIZONTAL ---------------- */
    .aura-work[data-layout="horizontal"]{
        /* Keep the larger lens from feeling cramped around the active card. */
        --aura-split-open:clamp(220px,7vw,260px) !important;
        --aura-split-switch:clamp(242px,7.7vw,286px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-info{
        top:5.2% !important;
        width:clamp(620px,22vw,760px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-nav{
        top:23.5% !important;
        max-width:76vw !important;
        gap:clamp(28px,1.25vw,46px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-link{
        font-size:clamp(15px,1.05vh,19px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-info-title{
        font-size:clamp(21px,1.55vh,27px) !important;
    }

    .aura-work[data-layout="horizontal"] .aura-info-description{
        font-size:clamp(14px,1.05vh,18px) !important;
    }

    /* ---------------- SERVICE INDEX — GRID ---------------- */
    .aura-work[data-layout="grid"]{
        --aura-lens-size:clamp(500px,42vh,610px) !important;
        --aura-split-open:clamp(200px,6.4vw,238px) !important;
        --aura-split-switch:clamp(220px,7vw,260px) !important;
    }

    .aura-work[data-layout="grid"] .aura-card{
        width:clamp(245px,19.5vh,300px) !important;
        height:clamp(306px,24.4vh,375px) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-info{
        left:var(--aura-ultra-side-inset) !important;
        right:auto !important;
        width:var(--aura-ultra-copy-width) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-nav{
        right:var(--aura-ultra-side-inset) !important;
        left:auto !important;
        width:var(--aura-ultra-copy-width) !important;
    }

    .aura-work[data-layout="grid"] .aura-service-link{
        font-size:clamp(16px,1.15vh,20px) !important;
        line-height:1.18 !important;
    }

    .aura-work[data-layout="grid"] .aura-info-title{
        font-size:clamp(21px,1.55vh,27px) !important;
    }

    .aura-work[data-layout="grid"] .aura-info-description{
        max-width:520px !important;
        font-size:clamp(14px,1.05vh,18px) !important;
        line-height:1.45 !important;
    }

    /* ---------------- DETAIL ---------------- */
    .aura-detail-title-block{
        left:var(--aura-ultra-side-inset) !important;
        right:auto !important;
        width:var(--aura-ultra-copy-width) !important;
    }

    .aura-detail-copy-block{
        right:var(--aura-ultra-side-inset) !important;
        left:auto !important;
        width:var(--aura-ultra-copy-width) !important;
    }

    .aura-detail-title{
        font-size:clamp(20px,1.5vh,27px) !important;
        line-height:1.14 !important;
    }

    .aura-detail-description{
        font-size:clamp(14px,1.05vh,18px) !important;
        line-height:1.45 !important;
    }

    .aura-detail-code,
    .aura-detail-cta,
    .aura-detail-back{
        font-size:clamp(12px,.9vh,15px) !important;
    }
}

/* Extra-wide 5K / 32:9 refinement.  Keep the composition bounded around the
   center instead of letting side copy drift farther away as width increases. */
@media (min-width:3600px) and (min-aspect-ratio:2.5/1){
    .aura-work{
        --aura-ultra-side-inset:clamp(460px,13vw,700px);
        --aura-ultra-copy-width:clamp(520px,14vw,680px);
        --aura-lens-size:clamp(560px,46vh,680px) !important;
    }
}

/* ==========================================================
   v4.7.4 — ULTRAWIDE HORIZONTAL NAV POSITION FIX
   ----------------------------------------------------------
   v4.7.3 accidentally moved the Horizontal service menu back to a top-based
   position (top:23.5%), overriding the earlier rule that intentionally keeps
   the menu BELOW the artwork rail. On 3440×1330 this put the labels directly
   across the active image and magnifier.

   Keep the ultrawide composition larger, but restore the menu to a stable
   bottom zone and keep the counter just below the active artwork.
========================================================== */
@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work[data-layout="horizontal"] .aura-service-nav{
        top:auto !important;
        bottom:clamp(72px,7.5vh,108px) !important;
        left:50% !important;
        right:auto !important;
        width:min(1540px,72vw) !important;
        max-width:72vw !important;
        transform:translateX(-50%) !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:center !important;
        gap:clamp(34px,1.4vw,54px) !important;
        white-space:nowrap !important;
        z-index:22 !important;
    }

    .aura-work[data-layout="horizontal"] .aura-service-link{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }

    .aura-work[data-layout="horizontal"] .aura-stage-counter{
        top:calc(50% + clamp(250px,22vh,310px)) !important;
        bottom:auto !important;
    }
}

@media (min-width:3600px) and (min-aspect-ratio:2.5/1){
    .aura-work[data-layout="horizontal"] .aura-service-nav{
        bottom:clamp(84px,8vh,126px) !important;
        width:min(1720px,68vw) !important;
        max-width:68vw !important;
        gap:clamp(42px,1.25vw,62px) !important;
    }
}


/* Move Dọc / Ngang / Lưới slightly inward on ultrawide screens so the
   controls no longer hug the bottom-left edge. */
@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-controls-left:clamp(30px,1.7vw,48px);
        --aura-controls-bottom:clamp(22px,2.15vh,32px);
    }
}

@media (min-width:3600px) and (min-aspect-ratio:2.5/1){
    .aura-work{
        --aura-controls-left:clamp(36px,1.9vw,56px);
        --aura-controls-bottom:clamp(24px,2.25vh,36px);
    }
}

/* ==========================================================
   v4.7.6 — AURASIGN ORBIT FOCUS MARK
   ----------------------------------------------------------
   Ported onto the user's v4.7.5 controls-inset build.

   Geometry rules:
   - ONE shared 2:1 orbit SVG is used for both sides.
   - the source is clipped at the exact 50% vertical axis.
   - opening/closing moves ONLY the two clipped halves.
   - no legacy magnifier optical offset/handle compensation.
   - active media stays above the orbit so the hidden center reads
     as one continuous pair of orbital paths behind the image.
========================================================== */

.aura-work{
    --aura-split-axis:50% !important;
    --aura-svg-offset-x:0% !important;
    --aura-svg-offset-y:0% !important;
    --aura-svg-zoom:1 !important;
    --aura-split-closed:0px !important;
}

/* Exact left/right crops of the SAME source coordinate system. */
.aura-work .aura-focus-left{
    clip-path:inset(0 50% 0 0) !important;
    -webkit-clip-path:inset(0 50% 0 0) !important;
}

.aura-work .aura-focus-right{
    clip-path:inset(0 0 0 50%) !important;
    -webkit-clip-path:inset(0 0 0 50%) !important;
}

/* Remove every legacy magnifier artwork offset and keep SVG vector-clean. */
.aura-work .aura-focus-half img,
.aura-work .aura-focus-left img,
.aura-work .aura-focus-right img{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    object-fit:contain !important;
    object-position:50% 50% !important;
    transform:none !important;
    transform-origin:50% 50% !important;
    image-rendering:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    outline:0 !important;
    opacity:1 !important;
}

/* The orbit opens smoothly while preserving its original geometry. */
.aura-work .aura-focus-half{
    transition:transform .88s cubic-bezier(.16,1,.3,1) !important;
}

/* Keep the orbit behind the active media, including the old mobile rule that
   previously forced the magnifier above the photo. */
.aura-work .aura-focus-logo{
    z-index:9 !important;
}

.aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
    z-index:14 !important;
}

/* Desktop split distance: the visible side arcs sit around the active image. */
@media (min-width:768px){
    .aura-work{
        --aura-split-open:clamp(78px,5.6vw,118px) !important;
        --aura-split-switch:clamp(90px,6.4vw,132px) !important;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(82px,5.8vw,122px) !important;
        --aura-split-switch:clamp(94px,6.6vw,136px) !important;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(70px,5vw,106px) !important;
        --aura-split-switch:clamp(82px,5.8vw,120px) !important;
    }

    /* 4.7.5 return-state fix stays static; only replace the split geometry. */
    .aura-work.is-detail-return-lens-static .aura-focus-logo{
        --split:var(--aura-split-open) !important;
    }
}

/* Mobile uses the same crop logic with a physically smaller separation. */
@media (max-width:767px) and (orientation:portrait){
    .aura-work{
        --aura-split-open:clamp(42px,13vw,64px) !important;
        --aura-split-switch:clamp(50px,15vw,72px) !important;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(36px,11vw,56px) !important;
        --aura-split-switch:clamp(44px,13vw,64px) !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        z-index:9 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        z-index:14 !important;
    }
}

/* Detail uses the same orbit coordinate model. The v4.7.5 JS already anchors
   media to the live geometric center of .aura-focus-logo, so no JS rewrite is
   required after removing the old SVG handle offsets. */
.aura-work.is-detail-entering,
.aura-work.is-detail,
.aura-work.is-detail-leaving,
.aura-work.is-detail-returning,
.aura-work.is-detail-return-opening{
    --aura-split-axis:50% !important;
    --aura-svg-offset-x:0% !important;
    --aura-svg-offset-y:0% !important;
    --aura-svg-zoom:1 !important;
}

@media (min-width:768px){
    .aura-work.is-detail,
    .aura-work.is-detail-entering,
    .aura-work.is-detail-leaving,
    .aura-work.is-detail-returning,
    .aura-work.is-detail-return-opening{
        --aura-detail-split-open:clamp(72px,5vw,112px) !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-detail,
    .aura-work.is-detail-entering,
    .aura-work.is-detail-leaving,
    .aura-work.is-detail-returning,
    .aura-work.is-detail-return-opening{
        --aura-detail-split-open:clamp(38px,12vw,58px) !important;
    }
}

/* Ultrawide: preserve v4.7.5's enlarged composition while keeping orbit split
   proportional to the active image instead of the old magnifier square. */
@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-split-open:clamp(130px,4.4vw,180px) !important;
        --aura-split-switch:clamp(150px,5vw,205px) !important;
    }

    .aura-work[data-layout="horizontal"]{
        --aura-split-open:clamp(145px,4.8vw,195px) !important;
        --aura-split-switch:clamp(165px,5.4vw,220px) !important;
    }

    .aura-work[data-layout="grid"]{
        --aura-split-open:clamp(120px,4vw,168px) !important;
        --aura-split-switch:clamp(140px,4.6vw,190px) !important;
    }
}


/* ==========================================================
   v4.8.4 — SINGLE-SVG ORBIT WRAP
   ----------------------------------------------------------
   Uses ONLY /wp-content/uploads/2026/10/orbit-symbol-dark-single-node-large.svg.
   No left/right split artwork is shown anymore.

   Visual stack:
   1) full orbit behind the active image
   2) active image in the middle
   3) same orbit again, clipped to its LOWER half, above the image

   This makes the top arcs feel tucked behind the photo while the lower
   arcs pass in front, giving the impression that the image is wrapped by
   the two nebula/orbit paths.
========================================================== */

.aura-work{
    --aura-wrap-width:clamp(560px,42vw,790px);
    --aura-wrap-height:calc(var(--aura-wrap-width) * .50);
    --aura-wrap-shift-x:0px;
    --aura-wrap-shift-y:6px;
    --aura-wrap-scale-rest:.94;
    --aura-wrap-scale-open:1;
    --aura-wrap-scale-switch:1.025;
    --aura-wrap-front-cut:46%;
}

/* The actual visible orbit: same SVG rendered twice in one geometry. */
.aura-orbit-wrap{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--aura-wrap-width);
    height:var(--aura-wrap-height);
    pointer-events:none;
    overflow:visible;
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-rest));
    transform-origin:50% 50%;
    transition:
        transform .88s cubic-bezier(.16,1,.3,1),
        opacity .35s ease;
    will-change:transform;
}

.aura-orbit-wrap img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    object-fit:contain !important;
    object-position:50% 50% !important;
    transform:none !important;
    transform-origin:50% 50% !important;
    user-select:none;
    pointer-events:none;
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

/* Full SVG under the photo. */
.aura-orbit-wrap-back{
    z-index:8;
}

/* Same SVG above the photo, but only its lower portion is visible. */
.aura-orbit-wrap-front{
    z-index:16;
    clip-path:inset(var(--aura-wrap-front-cut) 0 0 0);
    -webkit-clip-path:inset(var(--aura-wrap-front-cut) 0 0 0);
}

/* Keep the current active image between the two orbit layers. */
.aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
    z-index:14 !important;
}

/* The old focus element remains only as the geometry anchor used by JS. */
.aura-focus-anchor{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.aura-focus-anchor .aura-focus-half,
.aura-focus-anchor .aura-focus-half img{
    opacity:0 !important;
}

/* Existing focus-open/switch states now create a subtle cinematic expansion,
   not a split-apart movement. */
.aura-work.is-focus-open .aura-orbit-wrap{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-open));
}

.aura-work.is-switching .aura-orbit-wrap,
.aura-work.is-layout-switching .aura-orbit-wrap,
.aura-work.is-index-kinetic .aura-orbit-wrap{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-switch));
}

/* Do not leave the wrap artwork parked at the viewport center while Detail
   has switched to its own gallery composition. The invisible anchor remains
   available to the existing Detail JS. */
.aura-work.is-detail-entering .aura-orbit-wrap,
.aura-work.is-detail .aura-orbit-wrap,
.aura-work.is-detail-leaving .aura-orbit-wrap,
.aura-work.is-detail-returning .aura-orbit-wrap{
    opacity:0;
}

.aura-work.is-detail-return-opening .aura-orbit-wrap{
    opacity:1;
}

@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-wrap-width:clamp(760px,28vw,980px);
        --aura-wrap-shift-y:8px;
        --aura-wrap-front-cut:45%;
    }
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work{
        --aura-wrap-width:clamp(500px,58vw,650px);
        --aura-wrap-front-cut:47%;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work{
        --aura-wrap-width:min(94vw,470px);
        --aura-wrap-height:calc(var(--aura-wrap-width) * .52);
        --aura-wrap-shift-y:2px;
        --aura-wrap-scale-rest:.97;
        --aura-wrap-scale-open:1;
        --aura-wrap-scale-switch:1.015;
        --aura-wrap-front-cut:48%;
    }

    .aura-orbit-wrap-front{
        z-index:16;
    }
}


/* ==========================================================
   v4.8.5 — GUARANTEED WRAP LAYERING + INTRO HANDOFF
   ----------------------------------------------------------
   Fixes two issues seen after Logo Intro:
   1) the lower orbit segment could still sit behind the active card because
      kinetic JS assigns card z-index values up to ~200;
   2) the front orbit must already be visible on the first post-intro frame,
      without waiting for wheel/touch input.

   Composition:
   - full SVG behind the active image
   - same SVG above the active image, but clipped to the central lower region
     only, so it reads as the orbit passing in front of the photo
========================================================== */

.aura-work{
    --aura-wrap-front-cut:41%;
    --aura-wrap-front-side-cut:31%;
}

/* Establish a predictable local stacking context. */
.aura-stage{
    isolation:isolate;
}

/* Back orbit always remains under kinetic cards. */
.aura-orbit-wrap-back{
    z-index:6 !important;
    opacity:1 !important;
    visibility:visible !important;
}

/*
 * Kinetic JS gives cards z-index values up to 200.  Put the front orbit above
 * that range, but keep it inside .aura-stage so it cannot cover site header/
 * navigation outside the artwork stage.
 */
.aura-orbit-wrap-front{
    z-index:320 !important;
    opacity:1 !important;
    visibility:visible !important;
    clip-path:inset(
        var(--aura-wrap-front-cut)
        var(--aura-wrap-front-side-cut)
        0
        var(--aura-wrap-front-side-cut)
    ) !important;
    -webkit-clip-path:inset(
        var(--aura-wrap-front-cut)
        var(--aura-wrap-front-side-cut)
        0
        var(--aura-wrap-front-side-cut)
    ) !important;
}

/* Stable index state must show both real layers immediately after intro. */
.aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning) .aura-orbit-wrap{
    opacity:1 !important;
    visibility:visible !important;
}

/* Correct the open-state transform and keep both orbit copies pixel-aligned. */
.aura-work.is-focus-open .aura-orbit-wrap{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-open)) !important;
}

.aura-work.is-switching .aura-orbit-wrap,
.aura-work.is-layout-switching .aura-orbit-wrap,
.aura-work.is-index-kinetic .aura-orbit-wrap{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-switch)) !important;
}

/* During the short post-intro actor lock, keep the wrap fully formed. */
html.aura-logo-intro-real-actor-lock .aura-orbit-wrap,
html.aura-logo-intro-handoff .aura-orbit-wrap{
    opacity:1 !important;
    visibility:visible !important;
    transition:none !important;
    animation:none !important;
}

@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-wrap-front-cut:40%;
        --aura-wrap-front-side-cut:33%;
    }
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work{
        --aura-wrap-front-cut:40%;
        --aura-wrap-front-side-cut:29%;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work{
        --aura-wrap-front-cut:43%;
        --aura-wrap-front-side-cut:24%;
    }

    .aura-orbit-wrap-front{
        z-index:320 !important;
    }
}

/* ==========================================================
   v4.8.6 — SEAM-SAFE ORBIT FRONT / NO HARD EDGE CUT
   ----------------------------------------------------------
   v4.8.5 clipped the FRONT orbit to a central rectangle whose left/right
   edges were too close to the active image edges. Because the BACK copy sits
   below the image, that hard clip could expose a tiny break in the lower
   ellipse exactly where the artwork enters/leaves the photo.

   Fix:
   - keep the same BACK-under / FRONT-over threading composition;
   - keep the vertical lower-band cut exactly as before;
   - extend FRONT horizontally beyond the old side cut by a responsive seam
     overlap. FRONT and BACK use the exact same SVG + geometry, so this overlap
     is pixel-aligned and hides the clip boundary outside the photo instead of
     cutting a stroke at the photo edge.
========================================================== */
.aura-work{
    --aura-wrap-front-seam-x:clamp(26px,2.4vw,46px);
}

.aura-orbit-wrap-front{
    clip-path:inset(
        var(--aura-wrap-front-cut)
        calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
        0
        calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
    ) !important;
    -webkit-clip-path:inset(
        var(--aura-wrap-front-cut)
        calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
        0
        calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
    ) !important;
}

@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work{
        --aura-wrap-front-seam-x:clamp(42px,1.9vw,58px);
    }
}

@media (min-width:768px) and (max-width:1200px){
    .aura-work{
        --aura-wrap-front-seam-x:clamp(28px,3vw,36px);
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work{
        --aura-wrap-front-seam-x:clamp(30px,8vw,40px);
    }
}


/* ==========================================================
   v4.8.7.3 — DETAIL ORBIT THREADING + CLEAN RETURN ONLY
   ----------------------------------------------------------
   Scope is intentionally narrow:
   1) Detail gets the SAME visual stack as Service index:
      BACK orbit < Detail media < FRONT clipped orbit.
   2) Detail -> Service uses opacity-only handoff. The Detail image is fully
      gone before the already-final Service cards fade in, so there is no
      center-image overlay, lens close/open, or return zoom.

   No Service layout, spacing, scale, typography, rail geometry or normal
   Service animation is changed here.
========================================================== */
@media (min-width:768px){
    /* Break the index-stage stacking context ONLY while Detail is visible.
       This lets the two orbit copies straddle .aura-detail-view (z-index:4). */
    .aura-work.is-detail-entering .aura-stage,
    .aura-work.is-detail .aura-stage,
    .aura-work.is-detail-leaving .aura-stage,
    .aura-work.is-detail-clean-exit .aura-stage{
        z-index:auto !important;
        isolation:auto !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    /* Detail media/text live at z=4. Put the full orbit under it. */
    .aura-work.is-detail-entering .aura-orbit-wrap-back,
    .aura-work.is-detail .aura-orbit-wrap-back,
    .aura-work.is-detail-leaving .aura-orbit-wrap-back,
    .aura-work.is-detail-clean-exit .aura-orbit-wrap-back{
        position:fixed !important;
        left:calc(var(--aura-detail-anchor-x,50vw) + var(--aura-wrap-shift-x)) !important;
        top:calc(var(--aura-detail-anchor-y,50dvh) + var(--aura-wrap-shift-y)) !important;
        z-index:3 !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
    }

    /* Same SVG, same geometry, clipped lower segment ABOVE Detail. */
    .aura-work.is-detail-entering .aura-orbit-wrap-front,
    .aura-work.is-detail .aura-orbit-wrap-front,
    .aura-work.is-detail-leaving .aura-orbit-wrap-front,
    .aura-work.is-detail-clean-exit .aura-orbit-wrap-front{
        position:fixed !important;
        left:calc(var(--aura-detail-anchor-x,50vw) + var(--aura-wrap-shift-x)) !important;
        top:calc(var(--aura-detail-anchor-y,50dvh) + var(--aura-wrap-shift-y)) !important;
        z-index:6 !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
    }

    /* Keep Detail's existing position/scale exactly as-is; only make its
       fade-out deterministic for the clean handoff. */
    .aura-work.is-detail-clean-exit .aura-detail-view{
        opacity:0 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:opacity .18s ease !important;
    }

    .aura-work.is-detail-clean-exit .aura-detail-gallery,
    .aura-work.is-detail-clean-exit .aura-detail-title-block,
    .aura-work.is-detail-clean-exit .aura-detail-copy-block,
    .aura-work.is-detail-clean-exit .aura-detail-back{
        opacity:0 !important;
        transition:opacity .18s ease !important;
    }

    /* Index geometry is already final; hide pixels for one committed paint,
       then fade them in. Do NOT animate transforms or scales. */
    .aura-work.is-index-clean-reveal .aura-service-nav,
    .aura-work.is-index-clean-reveal .aura-service-info,
    .aura-work.is-index-clean-reveal .aura-layout-controls,
    .aura-work.is-index-clean-reveal .aura-stage-counter,
    .aura-work.is-index-clean-reveal .aura-cards{
        opacity:0 !important;
        transition:none !important;
    }

    .aura-work.is-index-clean-reveal.is-index-clean-reveal-ready .aura-service-nav,
    .aura-work.is-index-clean-reveal.is-index-clean-reveal-ready .aura-service-info,
    .aura-work.is-index-clean-reveal.is-index-clean-reveal-ready .aura-layout-controls,
    .aura-work.is-index-clean-reveal.is-index-clean-reveal-ready .aura-stage-counter,
    .aura-work.is-index-clean-reveal.is-index-clean-reveal-ready .aura-cards{
        opacity:1 !important;
        transition:opacity .22s cubic-bezier(.22,.61,.36,1) !important;
    }

    /* Orbit stays still through the handoff. */
    .aura-work.is-index-clean-reveal .aura-orbit-wrap,
    .aura-work.is-index-clean-reveal.is-index-clean-reveal-ready .aura-orbit-wrap{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.4 — DETAIL FULL ORBIT + ATOMIC RETURN FIX
   ----------------------------------------------------------
   Fix scope ONLY:
   A) Detail must show the same complete BACK / PHOTO / FRONT orbit stack
      as Service index.  The two Detail copies live INSIDE .aura-detail-view,
      so no cross-stacking-context trick is required.
   B) Detail -> Service is an atomic visibility swap after hidden geometry
      prep.  No blank orbit frame, no double center image, no return zoom.
   C) Service rail velocity/snap is reset in JS before handoff.

   No typography, text position, Service card spacing, normal Service scale,
   or standard Service kinetic motion is changed here.
========================================================== */

/* Detail orbit does not participate on mobile; preserve the existing mobile
   composition exactly as before. */
.aura-detail-orbit{
    display:none;
}

@media (min-width:768px){
    /* Neutralize the older attempt to make the INDEX stage straddle Detail.
       The new dedicated Detail layers make that unnecessary and predictable. */
    .aura-work.is-detail-entering .aura-stage,
    .aura-work.is-detail .aura-stage,
    .aura-work.is-detail-leaving .aura-stage,
    .aura-work.is-detail-return-prep .aura-stage,
    .aura-work.is-detail-return-cut .aura-stage{
        z-index:5 !important;
        isolation:isolate !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    /* While entering Detail, keep the original Service orbit intact until the
       Detail state is committed. This prevents the full orbit from collapsing
       into only the lower clipped segment during the handoff. */
    .aura-work.is-detail-entering .aura-stage .aura-orbit-wrap{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* Once Detail owns the frame, hide the index-stage orbit completely.
       Only the dedicated Detail BACK/FRONT pair is visible. */
    .aura-work.is-detail .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-leaving .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-return-prep .aura-stage .aura-orbit-wrap{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
    }

    /* Dedicated Detail orbit uses the SAME source geometry as Service index. */
    .aura-detail-orbit{
        display:block;
        position:fixed !important;
        left:calc(var(--aura-detail-anchor-x,50vw) + var(--aura-wrap-shift-x)) !important;
        top:calc(var(--aura-detail-anchor-y,50dvh) + var(--aura-wrap-shift-y)) !important;
        width:var(--aura-wrap-width) !important;
        height:var(--aura-wrap-height) !important;
        margin:0 !important;
        padding:0 !important;
        pointer-events:none !important;
        overflow:visible !important;
        opacity:0;
        visibility:hidden;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
        transform-origin:50% 50% !important;
        transition:
            transform .88s cubic-bezier(.16,1,.3,1),
            opacity .18s linear;
        will-change:transform,opacity;
    }

    .aura-detail-orbit img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        object-fit:contain !important;
        object-position:50% 50% !important;
        transform:none !important;
        filter:none !important;
        opacity:1 !important;
        background:transparent !important;
        border:0 !important;
        outline:0 !important;
        box-shadow:none !important;
        pointer-events:none !important;
        user-select:none !important;
    }

    /* Exact same visual order as the Service index:
         full BACK orbit < gallery/media < clipped FRONT orbit < Detail text. */
    .aura-detail-orbit-back{
        z-index:3 !important;
    }

    .aura-detail-gallery{
        z-index:5 !important;
    }

    .aura-detail-orbit-front{
        z-index:6 !important;
        clip-path:inset(
            var(--aura-wrap-front-cut)
            calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
            0
            calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
        ) !important;
        -webkit-clip-path:inset(
            var(--aura-wrap-front-cut)
            calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
            0
            calc(var(--aura-wrap-front-side-cut) - var(--aura-wrap-front-seam-x))
        ) !important;
    }

    .aura-detail-left{
        z-index:7 !important;
    }

    /* Show the complete Detail orbit in the stable Detail state. */
    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit,
    .aura-work.is-detail-return-prep .aura-detail-orbit{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* Match Service's subtle kinetic orbit expansion while scrolling Detail. */
    .aura-work.is-detail-gallery-kinetic .aura-detail-orbit{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-switch)) !important;
    }

    /* RETURN PREP:
       Detail media/orbit remain on screen. Service index is fully prepared but
       cannot paint yet. Only Detail text softens out; no center-image fade. */
    .aura-work.is-detail-return-prep .aura-service-nav,
    .aura-work.is-detail-return-prep .aura-service-info,
    .aura-work.is-detail-return-prep .aura-layout-controls,
    .aura-work.is-detail-return-prep .aura-stage-counter,
    .aura-work.is-detail-return-prep .aura-cards{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
    }

    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:0 !important;
        transition:opacity .10s linear !important;
    }

    /* ATOMIC CUT FRAME:
       Detail pixels disappear and Service pixels appear in the SAME style
       commit. All transforms/transitions are frozen for that one frame. */
    .aura-work.is-detail-return-cut .aura-detail-view,
    .aura-work.is-detail-return-cut .aura-detail-gallery,
    .aura-work.is-detail-return-cut .aura-detail-orbit{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-cut .aura-service-nav,
    .aura-work.is-detail-return-cut .aura-service-info,
    .aura-work.is-detail-return-cut .aura-layout-controls,
    .aura-work.is-detail-return-cut .aura-stage-counter,
    .aura-work.is-detail-return-cut .aura-cards{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-cut .aura-stage .aura-orbit-wrap{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-cut .aura-card,
    .aura-work.is-detail-return-cut .aura-card-visual,
    .aura-work.is-detail-return-cut .aura-card-visual img{
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.5 — SERVICE -> DETAIL: FADE ONLY / STATIC ORBIT
   ----------------------------------------------------------
   Scope is intentionally narrow:
   - NO image grow/shrink/translate during Service -> Detail;
   - Detail images are already at their final geometry and only fade 0 -> 1;
   - the orbit is visually frozen: same position, size and open scale;
   - the Service orbit -> Detail orbit actor swap is transition-less;
   - normal Service layout, Detail layout, rail spacing and kinetic scrolling
     are NOT changed.
========================================================== */
@media (min-width:768px){
    /* The visible orbit must never tween while changing page state. */
    .aura-detail-orbit,
    .aura-work.is-detail-entering .aura-detail-orbit,
    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit,
    .aura-work.is-detail-leaving .aura-detail-orbit,
    .aura-work.is-detail-return-prep .aura-detail-orbit,
    .aura-work.is-detail-gallery-kinetic .aura-detail-orbit{
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
        transition:none !important;
        animation:none !important;
        will-change:auto !important;
    }

    /* Swap orbit actors in one geometry-identical paint. The Service copy is
       disabled exactly when the Detail copy becomes visible. */
    .aura-work.is-detail-entering .aura-stage .aura-orbit-wrap{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-orbit,
    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit,
    .aura-work.is-detail-return-prep .aura-detail-orbit{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* Keep the Detail viewport visible from the first transition frame, but do
       not move it. Only its gallery opacity is allowed to change. */
    .aura-work.is-detail-entering .aura-detail-view{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery{
        opacity:0 !important;
        visibility:visible !important;
        transform:none !important;
        transition:opacity .36s cubic-bezier(.22,.61,.36,1) !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-detail-gallery{
        opacity:1 !important;
    }

    /* The media are positioned at final Detail geometry before becoming
       visible. Prevent every historical transform/scale transition from
       producing the small -> large effect seen in the recording. */
    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail-entering .aura-detail-media img,
    .aura-work.is-detail-entering .aura-detail-media picture{
        transition:none !important;
        animation:none !important;
    }

    /* Do not shrink/move the old Service rail during the state change. It is
       hidden by the existing Detail state; this rule only blocks transform
       motion that could still paint for one frame. */
    .aura-work.is-detail-entering .aura-cards,
    .aura-work.is-detail-entering .aura-card,
    .aura-work.is-detail-entering .aura-card-visual,
    .aura-work.is-detail-entering .aura-card-visual img{
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering .aura-cards{
        transform:none !important;
    }

    /* The legacy focus actor is only a geometry anchor in Detail. Never let
       its own size/split transition create a second orbit animation. */
    .aura-work.is-detail-entering .aura-focus-logo,
    .aura-work.is-detail .aura-focus-logo,
    .aura-work.is-detail-leaving .aura-focus-logo,
    .aura-work.is-detail-return-prep .aura-focus-logo,
    .aura-work.is-detail-entering .aura-focus-half,
    .aura-work.is-detail .aura-focus-half,
    .aura-work.is-detail-leaving .aura-focus-half{
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.6 — TWO-WAY FADE TRANSITION / SAME IMAGE SIZE
   ----------------------------------------------------------
   Only transition behavior is changed here:
   - Service -> Detail: old Service pixels fade out as Detail pixels fade in.
   - Detail -> Service: exact reverse fade.
   - No translate / scale / orbit animation.
   - Detail center scale is matched in JS to Service (1.34 / 1.30 ultrawide).
========================================================== */
@media (min-width:768px){
    /* The orbit is a static visual anchor for the entire transition. */
    .aura-work.is-detail-entering .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-entering .aura-detail-orbit,
    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail-return-prep .aura-detail-orbit,
    .aura-work.is-detail-return-prep .aura-stage .aura-orbit-wrap{
        transition:none !important;
        animation:none !important;
    }

    /* -------- SERVICE -> DETAIL -------- */
    .aura-work.is-detail-entering .aura-cards,
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter{
        opacity:1 !important;
        visibility:visible !important;
        transition:opacity .52s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail-entering .aura-detail-back{
        opacity:0 !important;
        visibility:visible !important;
        transition:opacity .52s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-cards,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-service-nav,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-service-info,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-layout-controls,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-stage-counter{
        opacity:0 !important;
    }

    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-detail-gallery,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-detail-title-block,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-detail-copy-block,
    .aura-work.is-detail-entering.is-detail-enter-fade-ready .aura-detail-back{
        opacity:1 !important;
    }

    /* No size/movement interpolation on either image set. */
    .aura-work.is-detail-entering .aura-card,
    .aura-work.is-detail-entering .aura-card-visual,
    .aura-work.is-detail-entering .aura-card-visual img,
    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail-entering .aura-detail-media img{
        animation:none !important;
    }

    /* -------- DETAIL -> SERVICE -------- */
    .aura-work.is-detail-return-prep .aura-detail-gallery,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:1 !important;
        visibility:visible !important;
        transition:opacity .52s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-return-prep .aura-cards,
    .aura-work.is-detail-return-prep .aura-service-nav,
    .aura-work.is-detail-return-prep .aura-service-info,
    .aura-work.is-detail-return-prep .aura-layout-controls,
    .aura-work.is-detail-return-prep .aura-stage-counter{
        opacity:0 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:opacity .52s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-detail-gallery,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-detail-title-block,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-detail-copy-block,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-detail-back{
        opacity:0 !important;
    }

    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-cards,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-service-nav,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-service-info,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-layout-controls,
    .aura-work.is-detail-return-prep.is-detail-return-fade-ready .aura-stage-counter{
        opacity:1 !important;
    }

    .aura-work.is-detail-return-prep .aura-card,
    .aura-work.is-detail-return-prep .aura-card-visual,
    .aura-work.is-detail-return-prep .aura-card-visual img,
    .aura-work.is-detail-return-prep .aura-detail-media,
    .aura-work.is-detail-return-prep .aura-detail-media img{
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.7 — ATOMIC CROSSFADE / STATIC ORBIT / SIZE MATCH
   ----------------------------------------------------------
   - Service <-> Detail image transition is a true two-image crossfade.
   - Both transition images occupy exactly the SAME pixel rect.
   - Stable Detail media uses the same base width/height and center offset as
     the current Service active card, so the final visual size matches.
   - Orbit does not fade, move, scale or animate during either direction.
   - Existing text positions, rail spacing and normal kinetic behavior remain.
========================================================== */
@media (min-width:768px){
    /* Stable Detail image center/size comes from the Service card snapshot. */
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail.is-detail-ready .aura-detail-media,
    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail-return-prep .aura-detail-media{
        left:calc(50% + var(--aura-detail-match-x,var(--aura-lens-shift-x))) !important;
        top:calc(50% + var(--aura-detail-match-y,var(--aura-lens-shift-y))) !important;
        width:var(--aura-detail-media-width) !important;
        height:var(--aura-detail-media-height,220px) !important;
    }

    /* Dedicated image transition layer. It lives inside Detail's stacking
       context so BACK orbit remains below and FRONT orbit remains above. */
    .aura-detail-crossfade{
        position:fixed !important;
        z-index:5 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        pointer-events:none !important;
        background:transparent !important;
        opacity:1;
        visibility:visible;
        transform:none !important;
        transition:none !important;
        animation:none !important;
        will-change:opacity;
    }

    .aura-detail-crossfade img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
        filter:none !important;
        transform:none !important;
        transition:none !important;
        animation:none !important;
        backface-visibility:hidden;
    }

    /* The orbit is one static anchor during BOTH directions. */
    .aura-work.is-detail-atomic-enter .aura-detail-orbit,
    .aura-work.is-detail-atomic-return .aura-detail-orbit,
    .aura-work.is-detail-enter-swap-ready .aura-detail-orbit,
    .aura-work.is-detail-return-swap-ready .aura-detail-orbit{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
        transition:none !important;
        animation:none !important;
        will-change:auto !important;
    }

    .aura-work.is-detail-atomic-enter .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-atomic-return .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-enter-swap-ready .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-return-prep:not(.is-detail-return-swap-ready) .aura-stage .aura-orbit-wrap{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    /* While the proxy is crossfading, suppress only the REAL image layers.
       Text shells continue their normal opacity fade. */
    .aura-work.is-detail-atomic-enter .aura-cards,
    .aura-work.is-detail-atomic-enter .aura-detail-gallery,
    .aura-work.is-detail-atomic-return .aura-cards,
    .aura-work.is-detail-atomic-return .aura-detail-gallery{
        opacity:0 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    /* One frame before proxy removal, paint the destination image underneath. */
    .aura-work.is-detail-enter-swap-ready .aura-detail-gallery{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
    }

    .aura-work.is-detail-return-swap-ready .aura-cards{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-swap-ready .aura-stage .aura-orbit-wrap{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-swap-ready .aura-detail-orbit{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    /* Absolutely no image size/motion tween in transition states. */
    .aura-work.is-detail-atomic-enter .aura-card,
    .aura-work.is-detail-atomic-enter .aura-card-visual,
    .aura-work.is-detail-atomic-enter .aura-card-visual img,
    .aura-work.is-detail-atomic-enter .aura-detail-media,
    .aura-work.is-detail-atomic-enter .aura-detail-media img,
    .aura-work.is-detail-atomic-return .aura-card,
    .aura-work.is-detail-atomic-return .aura-card-visual,
    .aura-work.is-detail-atomic-return .aura-card-visual img,
    .aura-work.is-detail-atomic-return .aura-detail-media,
    .aura-work.is-detail-atomic-return .aura-detail-media img{
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.8 — FULL RAIL SLIDE FROM BELOW / STATIC ORBIT
   ----------------------------------------------------------
   The destination artwork RAIL, not a scale/zoom proxy, is animated.
   It starts fully outside the bottom of the viewport and slides upward as one
   rigid unit. Orbit geometry remains static and only its destination copy is
   visible during the transition.
========================================================== */
@media (min-width:768px){
    /* SERVICE -> DETAIL: switch to Detail orbit immediately, but without any
       orbit animation. Old Service art disappears; incoming Detail rail begins
       completely below the viewport and JS moves only its Y translation. */
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-stage .aura-orbit-wrap{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-orbit{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
        transition:none !important;
        animation:none !important;
        will-change:auto !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-cards{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-view,
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-gallery{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-gallery{
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-gallery-rail{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    /* Disable the v4.8.7.7 proxy on desktop. The real destination rail is now
       the only image actor that moves. */
    .aura-work.is-detail-rail-enter .aura-detail-crossfade,
    .aura-work.is-detail-rail-return .aura-detail-crossfade{
        display:none !important;
    }

    /* DETAIL -> SERVICE: same direction and same motion. Destination Service
       orbit is swapped in statically first, then the whole Service rail rises. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-orbit{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-stage .aura-orbit-wrap{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(
            calc(-50% + var(--aura-wrap-shift-x)),
            calc(-50% + var(--aura-wrap-shift-y)),
            0
        ) scale(var(--aura-wrap-scale-open)) !important;
        transition:none !important;
        animation:none !important;
        will-change:auto !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-gallery{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-cards{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    /* Keep card/item transforms themselves untouched. The JS transition only
       translates the common parent rail/container. */
    .aura-work.is-detail-rail-enter .aura-detail-media,
    .aura-work.is-detail-rail-enter .aura-detail-media img,
    .aura-work.is-detail-rail-return .aura-card,
    .aura-work.is-detail-rail-return .aura-card-visual,
    .aura-work.is-detail-rail-return .aura-card-visual img{
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.10 — DETAIL -> SERVICE THREADED RAIL RETURN
   ----------------------------------------------------------
   Reverse-only fix.

   DO NOT translate .aura-cards itself: transform on that parent creates a new
   stacking context, so cards can no longer sit BETWEEN orbit BACK and FRONT.
   Instead every real Service card receives the SAME inherited Y offset. The
   rail therefore behaves as one rigid strip while preserving this stack:

       orbit BACK  (z 8)
       incoming cards (z 10 / active 14)
       orbit FRONT (z 16)

   Result: the strip comes from completely below the viewport and visually
   pierces through the static ellipse in one continuous movement.
========================================================== */
@media (min-width:768px){
    /* Parent must NOT establish a transformed stacking context. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-cards,
    .aura-work.is-detail-return-swap-ready .aura-cards{
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
        overflow:visible !important;
    }

    /* Same Y offset for every card = one continuous rail. Keep the original
       x/y/scale geometry untouched, adding only the temporary return offset. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card,
    .aura-work.is-detail-return-swap-ready .aura-card{
        transform:
            translate(-50%,-50%)
            translate(
                var(--x),
                calc(var(--y) + var(--aura-return-rail-y,0px))
            )
            scale(var(--scale)) !important;
        opacity:var(--opacity) !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
        will-change:transform !important;
        z-index:10 !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active{
        z-index:14 !important;
    }

    /* Lock the ellipse completely static while the strip passes through it. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-orbit-wrap,
    .aura-work.is-detail-return-swap-ready .aura-orbit-wrap{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(
            calc(-50% + var(--aura-wrap-shift-x)),
            calc(-50% + var(--aura-wrap-shift-y)),
            0
        ) scale(var(--aura-wrap-scale-open)) !important;
        transition:none !important;
        animation:none !important;
        will-change:auto !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-orbit-wrap-back,
    .aura-work.is-detail-return-swap-ready .aura-orbit-wrap-back{
        z-index:8 !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-orbit-wrap-front,
    .aura-work.is-detail-return-swap-ready .aura-orbit-wrap-front{
        z-index:16 !important;
    }

    /* The outgoing Detail artwork disappears before the incoming Service rail
       enters, but the fixed orbit remains visually continuous. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-gallery{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.12 — ORBIT NODES: ONE FULL TURN DURING RAIL SLIDE
   ----------------------------------------------------------
   Ellipse strokes remain completely static. The four circular nodes are
   independent DOM actors so JS can move them one full revolution while the
   incoming image rail slides upward. Their resting coordinates exactly match
   the original SVG artwork.
========================================================== */
.aura-orbit-node-layer .aura-orbit-node,
.aura-detail-orbit-node-layer .aura-orbit-node{
    position:absolute !important;
    width:4% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    transform:translate3d(-50%,-50%,0) !important;
    transform-origin:50% 50% !important;
    pointer-events:none !important;
    user-select:none !important;
    z-index:2;
    will-change:left,top;
}

.aura-orbit-node--dark{
    background:#1554E8 !important;
}

.aura-orbit-node--light{
    background:#7EB1FF !important;
}

.aura-orbit-node--dark-a{
    left:83.378667%;
    top:18.338000%;
}

.aura-orbit-node--dark-b{
    left:23.810833%;
    top:85.073167%;
}

.aura-orbit-node--light-a{
    left:9.401250%;
    top:31.254000%;
}

.aura-orbit-node--light-b{
    left:85.289750%;
    top:80.029500%;
}


/* ==========================================================
   v4.8.7.15 — PAGE-SWITCH TEXT = FADE ONLY
   ----------------------------------------------------------
   Service <-> Detail:
   - left/right text keeps its final position from the first frame;
   - only opacity is animated;
   - no translateX / translateY entrance or exit motion;
   - image rail / orbit / node animations remain untouched.
========================================================== */

@media (min-width:768px){
    /* Detail text: keep the final vertical anchor in every transition state. */
    .aura-detail-title-block,
    .aura-detail-copy-block,
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-copy-block,
    .aura-work.is-detail-leaving .aura-detail-title-block,
    .aura-work.is-detail-leaving .aura-detail-copy-block{
        transform:translateY(-50%) !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    /* Vertical/default Service text stays exactly where it normally lives. */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail .aura-service-nav,
    .aura-work.is-detail-leaving .aura-service-nav,
    .aura-work.is-detail-returning .aura-service-nav,
    .aura-work.is-detail-return-opening .aura-service-nav{
        transform:translateY(-50%) !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail .aura-service-info,
    .aura-work.is-detail-leaving .aura-service-info,
    .aura-work.is-detail-returning .aura-service-info,
    .aura-work.is-detail-return-opening .aura-service-info{
        transform:translateY(-50%) !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    /* Horizontal layout has different resting anchors; preserve them too. */
    .aura-work[data-layout="horizontal"].is-detail-entering .aura-service-nav,
    .aura-work[data-layout="horizontal"].is-detail .aura-service-nav,
    .aura-work[data-layout="horizontal"].is-detail-leaving .aura-service-nav,
    .aura-work[data-layout="horizontal"].is-detail-returning .aura-service-nav,
    .aura-work[data-layout="horizontal"].is-detail-return-opening .aura-service-nav{
        transform:none !important;
    }

    .aura-work[data-layout="horizontal"].is-detail-entering .aura-service-info,
    .aura-work[data-layout="horizontal"].is-detail .aura-service-info,
    .aura-work[data-layout="horizontal"].is-detail-leaving .aura-service-info,
    .aura-work[data-layout="horizontal"].is-detail-returning .aura-service-info,
    .aura-work[data-layout="horizontal"].is-detail-return-opening .aura-service-info{
        transform:translateX(-50%) !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    /* Mobile detail copy is flow-positioned, so its stable transform is none. */
    .aura-detail-title-block,
    .aura-detail-copy-block,
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready .aura-detail-copy-block,
    .aura-work.is-detail-leaving .aura-detail-title-block,
    .aura-work.is-detail-leaving .aura-detail-copy-block{
        transform:none !important;
        transition:opacity .34s cubic-bezier(.22,.61,.36,1) !important;
    }
}


/* ==========================================================
   v4.8.7.16 — TEXT AFTER ARTWORK / ZERO POSITION FLASH
   ----------------------------------------------------------
   Page switch sequencing:
   1) outgoing text fades away;
   2) image rail completes its full slide;
   3) final page geometry is painted while incoming text is hidden;
   4) incoming text fades in at its FINAL position.

   No transition state is allowed to animate text position.
========================================================== */

@media (min-width:768px){
    /* ---------- STATIC ANCHORS: DETAIL ---------- */
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-text-pending .aura-detail-title-block,
    .aura-work.is-detail-text-pending .aura-detail-copy-block,
    .aura-work.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail-text-ready .aura-detail-copy-block{
        transform:translateY(-50%) !important;
        animation:none !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail-return-prep .aura-detail-back,
    .aura-work.is-detail-text-pending .aura-detail-back,
    .aura-work.is-detail-text-ready .aura-detail-back{
        transform:translateY(0) !important;
        animation:none !important;
        transition:
            opacity .38s cubic-bezier(.22,.61,.36,1),
            color .25s ease,
            border-color .25s ease !important;
    }

    /* Detail copy NEVER appears while the artwork is still entering. */
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-back{
        opacity:0 !important;
        visibility:visible !important;
    }

    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-back{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* Outgoing Detail copy fades away at the start of return. */
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:0 !important;
    }

    /* ---------- STATIC ANCHORS: SERVICE ---------- */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-return-prep .aura-service-nav,
    .aura-work.is-detail-return-prep .aura-service-info,
    .aura-work.is-index-text-pending .aura-service-nav,
    .aura-work.is-index-text-pending .aura-service-info{
        transform:translateY(-50%) !important;
        animation:none !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work[data-layout="horizontal"].is-detail-entering .aura-service-nav,
    .aura-work[data-layout="horizontal"].is-detail-return-prep .aura-service-nav,
    .aura-work[data-layout="horizontal"].is-index-text-pending .aura-service-nav{
        transform:none !important;
    }

    .aura-work[data-layout="horizontal"].is-detail-entering .aura-service-info,
    .aura-work[data-layout="horizontal"].is-detail-return-prep .aura-service-info,
    .aura-work[data-layout="horizontal"].is-index-text-pending .aura-service-info{
        transform:translateX(-50%) !important;
    }

    /* Controls/counter also wait for artwork completion, but never move. */
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-return-prep .aura-layout-controls,
    .aura-work.is-index-text-pending .aura-layout-controls{
        transform:none !important;
        animation:none !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    .aura-work.is-detail-entering .aura-stage-counter,
    .aura-work.is-detail-return-prep .aura-stage-counter,
    .aura-work.is-index-text-pending .aura-stage-counter{
        transform:translateX(-50%) !important;
        animation:none !important;
        transition:opacity .38s cubic-bezier(.22,.61,.36,1) !important;
    }

    /* Old Service copy goes away first; new Detail copy stays hidden. */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter{
        opacity:0 !important;
    }

    /* Service content is hidden for the ENTIRE Detail -> Service rail slide. */
    .aura-work.is-detail-return-prep .aura-service-nav,
    .aura-work.is-detail-return-prep .aura-service-info,
    .aura-work.is-detail-return-prep .aura-layout-controls,
    .aura-work.is-detail-return-prep .aura-stage-counter,
    .aura-work.is-index-text-pending .aura-service-nav,
    .aura-work.is-index-text-pending .aura-service-info,
    .aura-work.is-index-text-pending .aura-layout-controls,
    .aura-work.is-index-text-pending .aura-stage-counter{
        opacity:0 !important;
        visibility:visible !important;
        pointer-events:none !important;
    }

    /* Reveal only AFTER return classes are gone and final index layout is painted. */
    .aura-work.is-index-text-pending.is-index-text-ready:not([data-layout="grid"]) .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready:not([data-layout="grid"]) .aura-service-info,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-layout-controls,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-stage-counter{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* Grid intentionally keeps side copy hidden. */
    .aura-work[data-layout="grid"].is-index-text-pending .aura-service-nav,
    .aura-work[data-layout="grid"].is-index-text-pending .aura-service-info{
        opacity:0 !important;
        visibility:hidden !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    /* Same sequencing on mobile, but mobile text is flow-positioned. */
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-text-pending .aura-detail-title-block,
    .aura-work.is-detail-text-pending .aura-detail-copy-block{
        transform:none !important;
        transition:opacity .34s cubic-bezier(.22,.61,.36,1) !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-copy-block{
        opacity:0 !important;
    }

    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block{
        opacity:1 !important;
    }
}


/* ==========================================================
   v4.8.7.17 — PAGE-SWITCH TEXT WIPE / BOTTOM -> TOP
   ----------------------------------------------------------
   Requirement:
   - Outgoing page copy does NOT crossfade into incoming copy.
   - During page switch, outgoing text is erased vertically from the
     bottom edge ("chân chữ") toward the top edge.
   - Incoming page copy is still released ONLY after artwork finishes,
     using the existing stationary opacity reveal from v4.8.7.16.
   - No translate / position animation is introduced here.
========================================================== */

@keyframes aura-page-text-wipe-bottom-to-top{
    0%{
        clip-path:inset(0 0 0 0);
        -webkit-clip-path:inset(0 0 0 0);
        opacity:1;
    }
    100%{
        clip-path:inset(0 0 100% 0);
        -webkit-clip-path:inset(0 0 100% 0);
        opacity:1;
    }
}

@media (min-width:768px){
    /* ------------------------------------------------------
       SERVICE -> DETAIL: erase ONLY the outgoing Service UI.
       Detail copy remains hidden by is-detail-text-pending.
    ------------------------------------------------------ */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:
            aura-page-text-wipe-bottom-to-top
            .30s
            cubic-bezier(.76,0,.24,1)
            both !important;
        will-change:clip-path;
    }

    /* Keep every outgoing Service block on its NORMAL resting anchor. */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info{
        transform:translateY(-50%) !important;
    }

    .aura-work[data-layout="horizontal"].is-detail-entering .aura-service-nav{
        transform:none !important;
    }

    .aura-work[data-layout="horizontal"].is-detail-entering .aura-service-info{
        transform:translateX(-50%) !important;
    }

    .aura-work.is-detail-entering .aura-layout-controls{
        transform:none !important;
    }

    .aura-work.is-detail-entering .aura-stage-counter{
        transform:translateX(-50%) !important;
    }

    /* ------------------------------------------------------
       DETAIL -> SERVICE: erase ONLY the outgoing Detail copy.
       Service copy remains hidden by is-index-text-pending.
    ------------------------------------------------------ */
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:
            aura-page-text-wipe-bottom-to-top
            .30s
            cubic-bezier(.76,0,.24,1)
            both !important;
        will-change:clip-path;
    }

    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block{
        transform:translateY(-50%) !important;
    }

    .aura-work.is-detail-return-prep .aura-detail-back{
        transform:translateY(0) !important;
    }

    /* Incoming DETAIL stays completely absent until artwork has settled. */
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-back{
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }

    /* Incoming SERVICE likewise starts unclipped, then only fades in at rest. */
    .aura-work.is-index-text-pending .aura-service-nav,
    .aura-work.is-index-text-pending .aura-service-info,
    .aura-work.is-index-text-pending .aura-layout-controls,
    .aura-work.is-index-text-pending .aura-stage-counter{
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transform:none !important;
        transition:none !important;
        animation:
            aura-page-text-wipe-bottom-to-top
            .28s
            cubic-bezier(.76,0,.24,1)
            both !important;
    }

    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-copy-block,
    .aura-work.is-index-text-pending .aura-service-nav,
    .aura-work.is-index-text-pending .aura-service-info{
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }
}


/* ==========================================================
   v4.8.7.18 — JS-MANAGED LEAF TEXT WIPE
   ----------------------------------------------------------
   v4.8.7.17 animated the large parent containers after the page-state class
   was already active. Older opacity rules could therefore win first and make
   the wipe look unchanged / instantaneous.

   v4.8.7.18 moves the wipe BEFORE the state switch and applies it directly to
   the visible text leaves via Web Animations API. These rules only neutralize
   the obsolete parent animation. They DO NOT alter layout or resting anchors.
========================================================== */
.aura-work.is-detail-entering .aura-service-nav,
.aura-work.is-detail-entering .aura-service-info,
.aura-work.is-detail-entering .aura-layout-controls,
.aura-work.is-detail-entering .aura-stage-counter,
.aura-work.is-detail-return-prep .aura-detail-title-block,
.aura-work.is-detail-return-prep .aura-detail-copy-block,
.aura-work.is-detail-return-prep .aura-detail-back{
    animation:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
}

/* Incoming copy remains a pure stationary fade AFTER artwork completion. */
.aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-title-block,
.aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-copy-block,
.aura-work.is-detail.is-detail-ready.is-detail-text-pending .aura-detail-back,
.aura-work.is-index-text-pending .aura-service-nav,
.aura-work.is-index-text-pending .aura-service-info,
.aura-work.is-index-text-pending .aura-layout-controls,
.aura-work.is-index-text-pending .aura-stage-counter{
    animation:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
}


/* ==========================================================
   v4.8.7.19 — HARD PAGE-TEXT SEPARATION + WHITE SWITCH CANVAS
   ----------------------------------------------------------
   Fixes two regressions left by v4.8.7.17/18:
   1) v4.8.7.17 forced outgoing parents back to opacity:1 during the
      transition. When the WAAPI leaf wipe was cancelled, old page copy
      became visible again underneath/alongside the new page.
   2) During Service -> Detail the Service root could be shorter than the
      remaining viewport, exposing the blue section/footer below it.

   The wipe itself still happens BEFORE these state rules. Once the wipe has
   completed and the page-state class is applied, the outgoing page is kept
   hard-hidden until the artwork transition ends. Incoming copy is still
   released only by the existing *-text-ready classes after artwork settles.
========================================================== */

@media (min-width:768px){
    /* Old SERVICE text must never reappear after its wipe finishes. */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        animation:none !important;
        transition:none !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }

    /* Old DETAIL text must never reappear after its wipe finishes. */
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        animation:none !important;
        transition:none !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
    }

    /* One white canvas for the ENTIRE page switch. The height is measured by
       JS from the Service root's actual viewport top, so no footer/next-section
       color can leak through at the bottom while the rail is moving. */
    .aura-work.is-aura-page-switching{
        height:var(--aura-detail-viewport-height,calc(100dvh - 90px)) !important;
        min-height:var(--aura-detail-viewport-height,calc(100dvh - 90px)) !important;
        max-height:var(--aura-detail-viewport-height,calc(100dvh - 90px)) !important;
        background:#EAEAEA !important;
        overflow:hidden !important;
    }

    body:has(.aura-work.is-aura-page-switching) #main,
    body:has(.aura-work.is-aura-page-switching) .dichvu-section,
    body:has(.aura-work.is-aura-page-switching) .dichvu-section > .section-content,
    body:has(.aura-work.is-aura-page-switching) .aura-work-section,
    body:has(.aura-work.is-aura-page-switching) .aura-work-section > .section-content,
    body:has(.aura-work.is-aura-page-switching) .aura-work-row,
    body:has(.aura-work.is-aura-page-switching) .aura-work-row > .col,
    body:has(.aura-work.is-aura-page-switching) .aura-work-row > .col > .col-inner{
        background:#EAEAEA !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        animation:none !important;
        transition:none !important;
    }

    .aura-work.is-aura-page-switching{
        background:#EAEAEA !important;
    }
}


/* ==========================================================
   v4.8.7.20 — INCOMING TEXT = REVERSE WIPE, NOT FADE
   ----------------------------------------------------------
   JS primes each real text leaf at clip-bottom:100%, then reveals it to 0%.
   Parent blocks become visible instantly at their final anchors; therefore no
   opacity crossfade and no position animation can mask the glyph reveal.
========================================================== */
@media (min-width:768px){
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-back,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-info,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-layout-controls,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-stage-counter{
        transition:none !important;
        animation:none !important;
        visibility:visible !important;
    }

    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-back{
        opacity:1 !important;
    }

    .aura-work.is-index-text-pending.is-index-text-ready:not([data-layout="grid"]) .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready:not([data-layout="grid"]) .aura-service-info,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-layout-controls,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-stage-counter{
        opacity:1 !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-info{
        transition:none !important;
        animation:none !important;
        opacity:1 !important;
        visibility:visible !important;
    }
}


/* ==========================================================
   v4.8.7.22 — FINAL PAGE-SWITCH TEXT + ULTRAWIDE GHOST FIX
   ----------------------------------------------------------
   - Page text never translates or opacity-crossfades during a page switch.
   - JS owns the only text animation: one block-level vertical clip wipe.
   - Incoming blocks stay completely absent until artwork has settled.
   - On Service -> Detail the real Service card layer is hard-hidden so no
     duplicate/ghost rail can paint at the left edge on ultrawide viewports.
========================================================== */

@media (min-width:768px){
    /* No page-switch state is allowed to animate a text position. */
    .aura-work.is-aura-page-switching .aura-service-nav,
    .aura-work.is-aura-page-switching .aura-service-info,
    .aura-work.is-aura-page-switching .aura-layout-controls,
    .aura-work.is-aura-page-switching .aura-stage-counter,
    .aura-work.is-aura-page-switching .aura-detail-title-block,
    .aura-work.is-aura-page-switching .aura-detail-copy-block,
    .aura-work.is-aura-page-switching .aura-detail-back{
        animation:none !important;
        transition:none !important;
    }

    /* Static resting anchors only. */
    .aura-work.is-aura-page-switching .aura-service-nav,
    .aura-work.is-aura-page-switching .aura-service-info{
        transform:translateY(-50%) !important;
    }

    .aura-work[data-layout="horizontal"].is-aura-page-switching .aura-service-nav{
        transform:none !important;
    }

    .aura-work[data-layout="horizontal"].is-aura-page-switching .aura-service-info{
        transform:translateX(-50%) !important;
    }

    .aura-work.is-aura-page-switching .aura-detail-title-block,
    .aura-work.is-aura-page-switching .aura-detail-copy-block{
        transform:translateY(-50%) !important;
    }

    .aura-work.is-aura-page-switching .aura-detail-back,
    .aura-work.is-aura-page-switching .aura-layout-controls{
        transform:none !important;
    }

    .aura-work.is-aura-page-switching .aura-stage-counter{
        transform:translateX(-50%) !important;
    }

    /* AFTER the outgoing block wipe has completed, old-page parents are fully
       absent. The wipe itself runs before these state classes are applied. */
    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-entering .aura-layout-controls,
    .aura-work.is-detail-entering .aura-stage-counter,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back{
        opacity:1 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* Incoming page copy remains absent for the complete artwork transition. */
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-back,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-service-nav,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-service-info,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-layout-controls,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-stage-counter{
        opacity:1 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* The ready class only makes the already-clipped block paintable. JS then
       reveals its clip mask. No fade and no movement occur here. */
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-back,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-info,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-layout-controls,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-stage-counter{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    /* Grid intentionally has no side copy. */
    .aura-work[data-layout="grid"].is-index-text-pending .aura-service-nav,
    .aura-work[data-layout="grid"].is-index-text-pending .aura-service-info{
        visibility:hidden !important;
    }

    /* Absolute hard-stop for the outgoing Service rail during forward switch.
       JS also sets inline visibility:hidden so this survives every legacy rule. */
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-cards{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }
}

@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-aura-page-switching .aura-service-nav,
    .aura-work.is-aura-page-switching .aura-service-info,
    .aura-work.is-aura-page-switching .aura-detail-title-block,
    .aura-work.is-aura-page-switching .aura-detail-copy-block,
    .aura-work.is-aura-page-switching .aura-detail-back{
        transform:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering .aura-service-nav,
    .aura-work.is-detail-entering .aura-service-info,
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-copy-block,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-service-nav,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-service-info{
        visibility:hidden !important;
        opacity:1 !important;
    }

    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-info{
        visibility:visible !important;
        opacity:1 !important;
    }
}



/* ==========================================================
   v4.8.7.23 — ULTRAWIDE RETURN SIZE LOCK + DETERMINISTIC TEXT
   ----------------------------------------------------------
   1) The return rail owns the SAME base card dimensions as the stable
      ultrawide Service index before it becomes visible. This removes the
      small-card -> large-card pop when .is-detail is finally removed.
   2) During either artwork slide, outgoing and incoming page copy is hard
      absent. JS owns the only text mask and reveals it only after artwork has
      reached the final frame.
========================================================== */

@media (min-width:2400px) and (min-aspect-ratio:2/1){
    .aura-work[data-layout="vertical"].is-detail-return-prep .aura-card,
    .aura-work[data-layout="vertical"].is-detail-return-swap-ready .aura-card,
    .aura-work[data-layout="vertical"].is-detail-rail-return .aura-card{
        width:clamp(270px,22vh,330px) !important;
        height:clamp(338px,27.5vh,414px) !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work[data-layout="grid"].is-detail-return-prep .aura-card,
    .aura-work[data-layout="grid"].is-detail-return-swap-ready .aura-card,
    .aura-work[data-layout="grid"].is-detail-rail-return .aura-card{
        width:clamp(245px,19.5vh,300px) !important;
        height:clamp(306px,24.4vh,375px) !important;
        transition:none !important;
        animation:none !important;
    }
}

@media (min-width:768px){
    /* No Detail copy may survive into the incoming Service rail. */
    .aura-work.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-detail-return-prep .aura-detail-back,
    .aura-work.is-detail-rail-return .aura-detail-title-block,
    .aura-work.is-detail-rail-return .aura-detail-copy-block,
    .aura-work.is-detail-rail-return .aura-detail-back{
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* Incoming Service copy is absent until JS adds is-index-text-ready AFTER
       the rail has settled and all return classes have been removed. */
    .aura-work.is-detail-return-prep .aura-service-nav,
    .aura-work.is-detail-return-prep .aura-service-info,
    .aura-work.is-detail-return-prep .aura-layout-controls,
    .aura-work.is-detail-return-prep .aura-stage-counter,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-service-nav,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-service-info,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-layout-controls,
    .aura-work.is-index-text-pending:not(.is-index-text-ready) .aura-stage-counter{
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* Same rule in the forward direction: Detail copy only becomes paintable
       after the incoming Detail rail has fully reached its final geometry. */
    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending:not(.is-detail-text-ready) .aura-detail-back{
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-nav,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-service-info,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-layout-controls,
    .aura-work.is-index-text-pending.is-index-text-ready .aura-stage-counter,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-title-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-copy-block,
    .aura-work.is-detail.is-detail-ready.is-detail-text-pending.is-detail-text-ready .aura-detail-back{
        visibility:visible !important;
        opacity:1 !important;
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.23.1 — VỀ AURASIGN: REPLACE SPLIT WITH SHRINK ONLY
   ----------------------------------------------------------
   This block is intentionally isolated behind a temporary <html> class.
   It changes ONLY the visible SVG motion while leaving the existing PJAX,
   text, image rail, Service <-> Detail and every other animation untouched.
========================================================== */

/* The old transition actor is the split magnifier/focus pair. Never let it
   become visible during this one exit; this removes the left/right split frame
   and also prevents the old magnifier artwork from flashing in. */
html.aura-about-shrink-exit .aura-focus-logo,
html.aura-about-shrink-exit .aura-focus-half,
html.aura-about-shrink-exit .aura-focus-half img{
    opacity:0 !important;
    visibility:hidden !important;
    animation:none !important;
    transition:none !important;
}

/* SERVICE INDEX: animate the exact orbit already on screen. Nothing moves
   left/right; BACK and FRONT receive the exact same transform. */
html.aura-about-shrink-from-index .aura-work .aura-stage .aura-orbit-wrap{
    opacity:1 !important;
    visibility:visible !important;
    animation:none !important;
    transition:transform .82s cubic-bezier(.16,1,.3,1) !important;
    transform-origin:50% 50% !important;
}

html.aura-about-shrink-from-index.aura-about-shrink-exit-active .aura-work .aura-stage .aura-orbit-wrap{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(.34) !important;
}

/* DETAIL: use the dedicated Detail BACK/FRONT pair that is already visible.
   Keep the hidden Service orbit hidden so there can never be a double actor. */
@media (min-width:768px){
    html.aura-about-shrink-from-detail .aura-work .aura-stage .aura-orbit-wrap{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    html.aura-about-shrink-from-detail .aura-work .aura-detail-orbit{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        animation:none !important;
        transition:transform .82s cubic-bezier(.16,1,.3,1) !important;
        transform-origin:50% 50% !important;
    }

    html.aura-about-shrink-from-detail.aura-about-shrink-exit-active .aura-work .aura-detail-orbit{
        transform:translate3d(-50%,-50%,0) scale(.34) !important;
    }
}

.aura-orbit-wrap-front img,
.aura-detail-orbit-front img{
    opacity:.55 !important;
}


.aura-orbit-node-layer{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--aura-wrap-width);
    height:var(--aura-wrap-height);
    margin:0;
    padding:0;
    pointer-events:none;
    overflow:visible;
    opacity:1;
    visibility:visible;
    z-index:7;
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-rest));
    transform-origin:50% 50%;
    transition:transform .88s cubic-bezier(.16,1,.3,1);
    will-change:transform;
}

.aura-work.is-focus-open .aura-orbit-node-layer{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-open));
}

.aura-work.is-switching .aura-orbit-node-layer,
.aura-work.is-layout-switching .aura-orbit-node-layer,
.aura-work.is-index-kinetic .aura-orbit-node-layer{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(var(--aura-wrap-scale-switch));
}

.aura-work.is-detail .aura-orbit-node-layer,
.aura-work.is-detail-leaving .aura-orbit-node-layer,
.aura-work.is-detail-returning .aura-orbit-node-layer{
    opacity:0;
    visibility:hidden;
}

.aura-work.is-detail-return-opening .aura-orbit-node-layer,
.aura-work.is-detail-return-cut .aura-orbit-node-layer{
    opacity:1 !important;
    visibility:visible !important;
}

html.aura-logo-intro-real-actor-lock .aura-orbit-node-layer,
html.aura-logo-intro-handoff .aura-orbit-node-layer{
    opacity:1 !important;
    visibility:visible !important;
    transition:none !important;
    animation:none !important;
}

.aura-detail-orbit-node-layer{
    display:none;
}

@media (min-width:768px){
    .aura-detail-orbit-node-layer{
        display:block;
        position:fixed !important;
        left:calc(var(--aura-detail-anchor-x,50vw) + var(--aura-wrap-shift-x)) !important;
        top:calc(var(--aura-detail-anchor-y,50dvh) + var(--aura-wrap-shift-y)) !important;
        width:var(--aura-wrap-width) !important;
        height:var(--aura-wrap-height) !important;
        margin:0 !important;
        padding:0 !important;
        pointer-events:none !important;
        overflow:visible !important;
        opacity:0;
        visibility:hidden;
        z-index:7 !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-open)) !important;
        transform-origin:50% 50% !important;
        transition:transform .88s cubic-bezier(.16,1,.3,1), opacity .18s linear;
        will-change:transform,opacity;
    }

    .aura-work.is-detail .aura-detail-orbit-node-layer,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit-node-layer,
    .aura-work.is-detail-return-prep .aura-detail-orbit-node-layer{
        opacity:1 !important;
        visibility:visible !important;
    }

    .aura-work.is-detail-gallery-kinetic .aura-detail-orbit-node-layer{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate3d(-50%,-50%,0) scale(var(--aura-wrap-scale-switch)) !important;
    }

    .aura-work.is-detail-return-cut .aura-detail-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }
}


html.aura-about-shrink-from-index .aura-work .aura-stage .aura-orbit-node-layer{
    opacity:1 !important;
    visibility:visible !important;
    animation:none !important;
    transition:transform .82s cubic-bezier(.16,1,.3,1) !important;
    transform-origin:50% 50% !important;
}

html.aura-about-shrink-from-index.aura-about-shrink-exit-active .aura-work .aura-stage .aura-orbit-node-layer{
    transform:translate3d(
        calc(-50% + var(--aura-wrap-shift-x)),
        calc(-50% + var(--aura-wrap-shift-y)),
        0
    ) scale(.34) !important;
}

@media (min-width:768px){
    html.aura-about-shrink-from-detail .aura-work .aura-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    html.aura-about-shrink-from-detail .aura-work .aura-detail-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        animation:none !important;
        transition:transform .82s cubic-bezier(.16,1,.3,1) !important;
        transform-origin:50% 50% !important;
    }

    html.aura-about-shrink-from-detail.aura-about-shrink-exit-active .aura-work .aura-detail-orbit-node-layer{
        transform:translate3d(-50%,-50%,0) scale(.34) !important;
    }
}

/* Index background hard override */
.aura-work-section,
.aura-work-section > .section-content,
.aura-work-row,
.aura-work-row > .col,
.aura-work-row > .col > .col-inner{
    background:#EAEAEA !important;
    background-color:#EAEAEA !important;
}

.aura-work[data-aura-app="1"]{
    --aura-bg:#EAEAEA !important;
    background:#EAEAEA !important;
    background-color:#EAEAEA !important;
}

.aura-work[data-aura-app="1"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
    background:#EAEAEA !important;
    background-color:#EAEAEA !important;
}

.dichvu-section:has(.aura-work[data-aura-app="1"]),
.dichvu-section:has(.aura-work[data-aura-app="1"]) > .section-bg,
.dichvu-section:has(.aura-work[data-aura-app="1"]) > .section-content{
    background:#EAEAEA !important;
    background-color:#EAEAEA !important;
}

@media (max-width:767px) and (orientation:portrait){
    html:has(.aura-work[data-aura-app="1"]),
    body:has(.aura-work[data-aura-app="1"]),
    body:has(.aura-work[data-aura-app="1"]) #wrapper,
    body:has(.aura-work[data-aura-app="1"]) #main,
    body:has(.aura-work[data-aura-app="1"]) .page-wrapper,
    body:has(.aura-work[data-aura-app="1"]) .page-main{
        background:#EAEAEA !important;
        background-color:#EAEAEA !important;
    }

    body:has(.aura-work[data-aura-app="1"]) #wrapper,
    body:has(.aura-work[data-aura-app="1"]) #main{
        min-height:100dvh !important;
    }

    .dichvu-section:has(.aura-work[data-aura-app="1"]),
    .dichvu-section:has(.aura-work[data-aura-app="1"]) > .section-bg,
    .dichvu-section:has(.aura-work[data-aura-app="1"]) > .section-content,
    .aura-work-section,
    .aura-work-section > .section-content,
    .aura-work-row,
    .aura-work-row > .col,
    .aura-work-row > .col > .col-inner{
        background:#EAEAEA !important;
        background-color:#EAEAEA !important;
    }

    .dichvu-section:has(.aura-work[data-aura-app="1"]){
        min-height:100dvh !important;
        margin-bottom:0 !important;
        padding-bottom:0 !important;
    }
}

/* v4.8.7.37 — BALANCED SERVICE SIDE COPY ON DESKTOP */
@media (min-width:901px) and (max-width:1899px){
    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav{
        left:clamp(90px,6vw,110px) !important;
        right:auto !important;
    }
}

@media (min-width:1900px) and (max-aspect-ratio:2/1){
    .aura-work[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav{
        left:clamp(90px,6vw,110px) !important;
        right:auto !important;
    }
}


/* v4.8.7.38 — MOBILE: SERVICE COPY ABOVE + TWO-IMAGE RAIL */
@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        min-height:760px !important;
        overflow:hidden !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-layout-controls,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage-counter{
        display:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        display:block !important;
        position:absolute !important;
        left:24px !important;
        right:24px !important;
        top:94px !important;
        bottom:auto !important;
        z-index:32 !important;
        width:auto !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        transform:none !important;
        pointer-events:none;
        opacity:1 !important;
        visibility:visible !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-current,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-more{
        display:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-content{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        opacity:1 !important;
        transform:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-title{
        max-width:310px !important;
        margin:0 0 8px !important;
        color:#101114 !important;
        font-family:inherit !important;
        font-size:20px !important;
        font-weight:500 !important;
        line-height:1.15 !important;
        letter-spacing:-.035em !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-description{
        max-width:325px !important;
        margin:0 !important;
        color:#333 !important;
        font-size:12px !important;
        font-weight:400 !important;
        line-height:1.45 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        top:0 !important;
        bottom:0 !important;
        height:100% !important;
        min-height:760px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card{
        visibility:hidden !important;
        pointer-events:none !important;
        --opacity:0 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"],
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        visibility:visible !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        --x:0px !important;
        --y:36px !important;
        --scale:1 !important;
        --opacity:1 !important;
        pointer-events:auto !important;
        z-index:20 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        --x:0px !important;
        --y:250px !important;
        --scale:.76 !important;
        --opacity:.18 !important;
        pointer-events:auto !important;
        z-index:8 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:calc(50% + 36px) !important;
        z-index:18 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        transform:translateY(36px);
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        left:20px !important;
        right:20px !important;
        top:90px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-title{
        max-width:285px !important;
        font-size:19px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-description{
        max-width:300px !important;
        font-size:11.5px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        --y:42px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        --y:245px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        top:calc(50% + 42px) !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        transform:translateY(42px);
    }
}


/* v4.8.7.39 — MOBILE BALANCED TWO-IMAGE COMPOSITION + ORBIT/NODE LOCK */
@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        min-height:760px !important;
        overflow:hidden !important;

        --aura-wrap-width:clamp(330px,88vw,390px);
        --aura-wrap-height:calc(var(--aura-wrap-width) * .50);
        --aura-wrap-shift-x:0px;
        --aura-wrap-shift-y:-25px;
        --aura-wrap-scale-rest:1;
        --aura-wrap-scale-open:1.015;
        --aura-wrap-scale-switch:1.025;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        left:24px !important;
        right:24px !important;
        top:94px !important;
        width:auto !important;
        max-width:none !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-content{
        max-width:340px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-title{
        max-width:330px !important;
        margin:0 0 8px !important;
        font-size:21px !important;
        line-height:1.18 !important;
        letter-spacing:-.03em !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-description{
        display:block !important;
        max-width:330px !important;
        margin:0 !important;
        font-size:12.5px !important;
        line-height:1.48 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-stage{
        min-height:760px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        width:156px !important;
        height:184px !important;
        --x:0px !important;
        --y:-25px !important;
        --scale:1 !important;
        --opacity:1 !important;
        z-index:20 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        width:124px !important;
        height:154px !important;
        --x:0px !important;
        --y:205px !important;
        --scale:1 !important;
        --opacity:.20 !important;
        z-index:8 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"] .aura-card-visual img{
        filter:grayscale(100%) brightness(1.08) !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        left:50% !important;
        top:calc(50% - 25px) !important;
        z-index:18 !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        left:50% !important;
        top:50% !important;
        width:var(--aura-wrap-width) !important;
        height:var(--aura-wrap-height) !important;
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-rest)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-focus-open:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-focus-open:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-open)) !important;
    }

    .aura-work.is-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-layout-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-index-kinetic:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer,
    .aura-work.is-layout-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer,
    .aura-work.is-index-kinetic:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-switch)) !important;
    }
}

@media (max-width:480px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening){
        --aura-wrap-width:clamp(315px,86vw,365px);
        --aura-wrap-shift-y:-22px;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        left:22px !important;
        right:22px !important;
        top:92px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-title{
        max-width:300px !important;
        font-size:20px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-description{
        max-width:305px !important;
        font-size:12px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        width:150px !important;
        height:178px !important;
        --y:-22px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        width:120px !important;
        height:148px !important;
        --y:198px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-focus-logo{
        top:calc(50% - 22px) !important;
    }
}


/* v4.8.7.40 — MOBILE ACTIVE IMAGE VERTICALLY CENTERED INSIDE ORBIT */
@media (max-width:767px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        --y:8px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        --y:238px !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        --y:12px !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        --y:234px !important;
    }
}


/* v4.8.7.41 — MOBILE TRUE CENTER: ACTIVE IMAGE SHARES THE ORBIT CENTER */
@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"]{
        left:50% !important;
        top:50% !important;
        --x:0px !important;
        --y:var(--aura-wrap-shift-y) !important;
        transform:
            translate(-50%,-50%)
            translate(var(--x),var(--y))
            scale(var(--scale)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"] .aura-card-visual{
        inset:0 !important;
        display:block !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"] .aura-card-visual img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
        transform-origin:50% 50% !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        left:50% !important;
        top:50% !important;
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-rest)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-focus-open:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-focus-open:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-open)) !important;
    }

    .aura-work.is-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-layout-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-index-kinetic:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-wrap,
    .aura-work.is-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer,
    .aura-work.is-layout-switching:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer,
    .aura-work.is-index-kinetic:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-orbit-node-layer{
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-switch)) !important;
    }
}


/* v4.8.7.42 — MOBILE: CENTER ACTIVE IMAGE BY ITS REAL INTRINSIC HEIGHT */
@media (max-width:767px) and (orientation:portrait){

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"],
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        left:50% !important;
        top:50% !important;
        width:min(39vw,166px) !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        --x:0px !important;
        --y:var(--aura-wrap-shift-y) !important;
        transform:
            translate(-50%,-50%)
            translate(var(--x),var(--y))
            scale(var(--scale)) !important;
        transform-origin:50% 50% !important;
        overflow:visible !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"] .aura-card-visual,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active .aura-card-visual{
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:hidden !important;
    }

    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"] .aura-card-visual img,
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active .aura-card-visual img{
        position:relative !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        max-width:100% !important;
        object-fit:initial !important;
        object-position:50% 50% !important;
        margin:0 !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="0"],
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card.is-active{
        width:39vw !important;
    }
}


/* v4.8.7.43 — MOBILE: REDUCE GAP BETWEEN ACTIVE CARD AND NEXT CARD */
@media (max-width:767px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        --y:186px !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"]{
        --y:180px !important;
    }
}


/* v4.8.7.44 — MOBILE DETAIL: NO ORBIT + EQUAL-HEIGHT GALLERY MEDIA */
@media (max-width:767px) and (orientation:portrait){

    /* Detail mobile does not use the ellipse/orbit visual. */
    .aura-work.is-detail-entering .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-leaving .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-returning .aura-stage .aura-orbit-wrap,
    .aura-work.is-detail-entering .aura-orbit-node-layer,
    .aura-work.is-detail .aura-orbit-node-layer,
    .aura-work.is-detail-leaving .aura-orbit-node-layer,
    .aura-work.is-detail-returning .aura-orbit-node-layer,
    .aura-work.is-detail-entering .aura-detail-orbit,
    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail-leaving .aura-detail-orbit,
    .aura-work.is-detail-returning .aura-detail-orbit,
    .aura-work.is-detail-entering .aura-detail-orbit-node-layer,
    .aura-work.is-detail .aura-detail-orbit-node-layer,
    .aura-work.is-detail-leaving .aura-detail-orbit-node-layer,
    .aura-work.is-detail-returning .aura-detail-orbit-node-layer{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        animation:none !important;
        transition:none !important;
    }

    /* Keep the horizontal gallery compact and consistent. */
    .aura-detail-gallery{
        top:72px !important;
        height:min(44svh,300px) !important;
    }

    .aura-detail-media{
        width:min(76vw,300px) !important;
        height:min(40svh,272px) !important;
        aspect-ratio:auto !important;
        overflow:hidden !important;
        border-radius:14px !important;
        background:transparent !important;
    }

    .aura-detail-media img,
    .aura-detail-media picture,
    .aura-detail-media picture img{
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        max-height:none !important;
    }

    .aura-detail-media img,
    .aura-detail-media picture img{
        display:block !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
    }

    .aura-detail-left{
        top:calc(72px + min(44svh,300px) + 16px) !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-detail-gallery{
        top:64px !important;
        height:min(43svh,286px) !important;
    }

    .aura-detail-media{
        width:min(78vw,292px) !important;
        height:min(38svh,254px) !important;
    }

    .aura-detail-left{
        top:calc(64px + min(43svh,286px) + 14px) !important;
    }
}


/* v4.8.7.45 — MOBILE DETAIL MATCHES SERVICE COMPOSITION
   Same orbit geometry + same orbit phase, so Service <-> Detail reads as one continuous motion. */
@media (max-width:767px) and (orientation:portrait){

    /* ------------------------------------------------------
       1. DETAIL SHELL: SAME COMPOSITION LANGUAGE AS SERVICE
    ------------------------------------------------------ */
    .aura-work.is-detail-entering .aura-detail-view,
    .aura-work.is-detail .aura-detail-view,
    .aura-work.is-detail-leaving .aura-detail-view,
    .aura-work.is-detail-returning .aura-detail-view{
        overflow:hidden !important;
    }

    /* Detail copy moves to the same top-left area as Service copy. */
    .aura-work.is-detail-entering .aura-detail-left,
    .aura-work.is-detail .aura-detail-left,
    .aura-work.is-detail-leaving .aura-detail-left,
    .aura-work.is-detail-returning .aura-detail-left{
        position:absolute !important;
        left:22px !important;
        right:22px !important;
        top:92px !important;
        bottom:auto !important;
        width:auto !important;
        height:auto !important;
        max-height:none !important;
        padding:0 !important;
        overflow:visible !important;
        z-index:20 !important;
        pointer-events:auto !important;
    }

    .aura-work.is-detail-entering .aura-detail-title-block,
    .aura-work.is-detail .aura-detail-title-block,
    .aura-work.is-detail-leaving .aura-detail-title-block,
    .aura-work.is-detail-returning .aura-detail-title-block,
    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail .aura-detail-copy-block,
    .aura-work.is-detail-leaving .aura-detail-copy-block,
    .aura-work.is-detail-returning .aura-detail-copy-block{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        max-width:330px !important;
        min-width:0 !important;
        margin:0 !important;
    }

    /* Service index does not show the service code, so Detail mobile does not either. */
    .aura-work.is-detail-entering .aura-detail-code,
    .aura-work.is-detail .aura-detail-code,
    .aura-work.is-detail-leaving .aura-detail-code,
    .aura-work.is-detail-returning .aura-detail-code{
        display:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-title,
    .aura-work.is-detail .aura-detail-title,
    .aura-work.is-detail-leaving .aura-detail-title,
    .aura-work.is-detail-returning .aura-detail-title{
        max-width:310px !important;
        margin:0 0 8px !important;
        font-size:20px !important;
        font-weight:500 !important;
        line-height:1.15 !important;
        letter-spacing:-.035em !important;
    }

    .aura-work.is-detail-entering .aura-detail-copy-block,
    .aura-work.is-detail .aura-detail-copy-block,
    .aura-work.is-detail-leaving .aura-detail-copy-block,
    .aura-work.is-detail-returning .aura-detail-copy-block{
        margin-top:0 !important;
    }

    .aura-work.is-detail-entering .aura-detail-description,
    .aura-work.is-detail .aura-detail-description,
    .aura-work.is-detail-leaving .aura-detail-description,
    .aura-work.is-detail-returning .aura-detail-description{
        max-width:315px !important;
        margin:0 !important;
        font-size:12px !important;
        line-height:1.48 !important;
    }

    .aura-work.is-detail-entering .aura-detail-cta,
    .aura-work.is-detail .aura-detail-cta,
    .aura-work.is-detail-leaving .aura-detail-cta,
    .aura-work.is-detail-returning .aura-detail-cta{
        margin-top:11px !important;
        font-size:10px !important;
    }

    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail .aura-detail-back,
    .aura-work.is-detail-leaving .aura-detail-back,
    .aura-work.is-detail-returning .aura-detail-back{
        left:22px !important;
        bottom:18px !important;
        z-index:30 !important;
    }

    /* ------------------------------------------------------
       2. DETAIL MEDIA: SAME CENTER + SAME WIDTH AS SERVICE CARD
    ------------------------------------------------------ */
    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail .aura-detail-gallery,
    .aura-work.is-detail-leaving .aura-detail-gallery,
    .aura-work.is-detail-returning .aura-detail-gallery{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:hidden !important;
        transform:none !important;
        z-index:5 !important;
        pointer-events:auto !important;
    }

    .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
        overflow:visible !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-returning .aura-detail-media{
        left:50% !important;
        top:50% !important;
        width:39vw !important;
        max-width:166px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        border-radius:14px !important;
        overflow:hidden !important;
        background:transparent !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--gallery-x,0px),var(--aura-wrap-shift-y),0)
            scale(var(--gallery-scale,1)) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-detail-entering .aura-detail-media img,
    .aura-work.is-detail .aura-detail-media img,
    .aura-work.is-detail-leaving .aura-detail-media img,
    .aura-work.is-detail-returning .aura-detail-media img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        max-height:none !important;
        object-fit:initial !important;
        object-position:50% 50% !important;
    }

    /* ------------------------------------------------------
       3. DETAIL ORBIT: SAME GEOMETRY AS SERVICE ORBIT
       paintOrbitNodePhase() already drives both node layers from one phase.
    ------------------------------------------------------ */

    /* Hide the old Service-stage copy once Detail owns the frame.
       Detail gets an identical BACK / IMAGE / FRONT stack instead. */
    .aura-work.is-detail-entering .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-leaving .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-returning .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-entering .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-detail .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-detail-leaving .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-detail-returning .aura-stage > .aura-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-orbit,
    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail-leaving .aura-detail-orbit,
    .aura-work.is-detail-returning .aura-detail-orbit,
    .aura-work.is-detail-entering .aura-detail-orbit-node-layer,
    .aura-work.is-detail .aura-detail-orbit-node-layer,
    .aura-work.is-detail-leaving .aura-detail-orbit-node-layer,
    .aura-work.is-detail-returning .aura-detail-orbit-node-layer{
        display:block !important;
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:var(--aura-wrap-width) !important;
        height:var(--aura-wrap-height) !important;
        margin:0 !important;
        padding:0 !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-rest)) !important;
        transform-origin:50% 50% !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-orbit-back,
    .aura-work.is-detail .aura-detail-orbit-back,
    .aura-work.is-detail-leaving .aura-detail-orbit-back,
    .aura-work.is-detail-returning .aura-detail-orbit-back{
        z-index:3 !important;
    }

    .aura-work.is-detail-entering .aura-detail-orbit-front,
    .aura-work.is-detail .aura-detail-orbit-front,
    .aura-work.is-detail-leaving .aura-detail-orbit-front,
    .aura-work.is-detail-returning .aura-detail-orbit-front{
        z-index:6 !important;
        clip-path:inset(
            var(--aura-wrap-front-cut)
            var(--aura-wrap-front-side-cut)
            0
            var(--aura-wrap-front-side-cut)
        ) !important;
        -webkit-clip-path:inset(
            var(--aura-wrap-front-cut)
            var(--aura-wrap-front-side-cut)
            0
            var(--aura-wrap-front-side-cut)
        ) !important;
    }

    .aura-work.is-detail-entering .aura-detail-orbit img,
    .aura-work.is-detail .aura-detail-orbit img,
    .aura-work.is-detail-leaving .aura-detail-orbit img,
    .aura-work.is-detail-returning .aura-detail-orbit img{
        display:block !important;
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        object-position:50% 50% !important;
    }

    .aura-work.is-detail-entering .aura-detail-orbit-node-layer,
    .aura-work.is-detail .aura-detail-orbit-node-layer,
    .aura-work.is-detail-leaving .aura-detail-orbit-node-layer,
    .aura-work.is-detail-returning .aura-detail-orbit-node-layer{
        z-index:7 !important;
        overflow:visible !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work.is-detail-entering .aura-detail-left,
    .aura-work.is-detail .aura-detail-left,
    .aura-work.is-detail-leaving .aura-detail-left,
    .aura-work.is-detail-returning .aura-detail-left{
        left:20px !important;
        right:20px !important;
        top:90px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-returning .aura-detail-media{
        width:39vw !important;
        max-width:156px !important;
    }

    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail .aura-detail-back,
    .aura-work.is-detail-leaving .aura-detail-back,
    .aura-work.is-detail-returning .aura-detail-back{
        left:20px !important;
    }
}


/* v4.8.7.46 — MOBILE DETAIL MATCHES SERVICE INDEX EXACTLY
   One active card inside the ellipse + one faded card below. */
@media (max-width:767px) and (orientation:portrait){

    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail .aura-detail-gallery,
    .aura-work.is-detail-leaving .aura-detail-gallery,
    .aura-work.is-detail-returning .aura-detail-gallery{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:hidden !important;
        z-index:5 !important;
    }

    .aura-work.is-detail-entering .aura-detail-gallery-rail,
    .aura-work.is-detail .aura-detail-gallery-rail,
    .aura-work.is-detail-leaving .aura-detail-gallery-rail,
    .aura-work.is-detail-returning .aura-detail-gallery-rail{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-returning .aura-detail-media{
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:39vw !important;
        max-width:166px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        border-radius:14px !important;
        overflow:hidden !important;
        background:transparent !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0, calc(var(--aura-wrap-shift-y) + 0px), 0)
            scale(.86) !important;
        transform-origin:50% 50% !important;
        transition:
            opacity .22s ease,
            transform .22s ease,
            filter .22s ease !important;
        z-index:5 !important;
    }

    .aura-work.is-detail-entering .aura-detail-media img,
    .aura-work.is-detail .aura-detail-media img,
    .aura-work.is-detail-leaving .aura-detail-media img,
    .aura-work.is-detail-returning .aura-detail-media img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        max-height:none !important;
        object-fit:initial !important;
        object-position:50% 50% !important;
    }

    /* Active image: exactly the image living at the ellipse center. */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-active,
    .aura-work.is-detail .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-active{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        filter:none !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0, var(--aura-wrap-shift-y), 0)
            scale(1) !important;
        z-index:6 !important;
    }

    /* Only one support card is shown, faded below, same as the mobile Service layout. */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-next,
    .aura-work.is-detail .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-next{
        opacity:.14 !important;
        visibility:visible !important;
        filter:grayscale(100%) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0, calc(var(--aura-wrap-shift-y) + 188px), 0)
            scale(.92) !important;
        z-index:2 !important;
    }

    .aura-work.is-detail-entering .aura-detail-media.is-gallery-next img,
    .aura-work.is-detail .aura-detail-media.is-gallery-next img,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-next img,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-next img{
        filter:grayscale(100%) !important;
    }

    /* Explicitly suppress previous / far images so Detail reads like the Service screen. */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-prev,
    .aura-work.is-detail .aura-detail-media.is-gallery-prev,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-prev,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-prev{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work.is-detail-entering .aura-detail-media,
    .aura-work.is-detail .aura-detail-media,
    .aura-work.is-detail-leaving .aura-detail-media,
    .aura-work.is-detail-returning .aura-detail-media{
        width:39vw !important;
        max-width:158px !important;
    }

    .aura-work.is-detail-entering .aura-detail-media.is-gallery-next,
    .aura-work.is-detail .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-next{
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0, calc(var(--aura-wrap-shift-y) + 182px), 0)
            scale(.92) !important;
    }
}


/* ==========================================================
   v4.8.7.51 — CLEAN MOBILE PORT OF THE WORKING DESKTOP TRANSITION
   ----------------------------------------------------------
   This block intentionally replaces the experimental v47-v50 approach.

   Mobile now follows the desktop contract:
   1) Service -> Detail:
      - Service orbit actor is swapped atomically to Detail orbit actor.
      - Both actors have IDENTICAL mobile geometry + same orbit phase.
      - Only the REAL Detail rail slides from below.
   2) Detail -> Service:
      - Detail orbit actor is swapped atomically to Service orbit actor.
      - Only the REAL Service cards receive a common Y rail offset.
   3) No viewport-fixed orbit, no proxy crossfade, no mixed actor ownership.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    /* Never use the old mobile image proxy during rail transitions. */
    .aura-work.is-detail-rail-enter .aura-detail-crossfade,
    .aura-work.is-detail-rail-return .aura-detail-crossfade{
        display:none !important;
    }

    /* ------------------------------------------------------
       CANONICAL MOBILE ORBIT GEOMETRY
       Service actor and Detail actor MUST be pixel-identical.
    ------------------------------------------------------ */
    .aura-work{
        --aura-wrap-width:clamp(315px,86vw,365px) !important;
        --aura-wrap-height:calc(var(--aura-wrap-width) * .50) !important;
        --aura-wrap-shift-x:0px !important;
        --aura-wrap-shift-y:-22px !important;
        --aura-wrap-scale-rest:1 !important;
        --aura-wrap-scale-open:1 !important;
        --aura-wrap-scale-switch:1.025 !important;
    }

    .aura-stage > .aura-orbit-wrap,
    .aura-stage > .aura-orbit-node-layer,
    .aura-detail-orbit,
    .aura-detail-orbit-node-layer{
        left:50% !important;
        top:50% !important;
        width:var(--aura-wrap-width) !important;
        height:var(--aura-wrap-height) !important;
        transform:
            translate3d(
                calc(-50% + var(--aura-wrap-shift-x)),
                calc(-50% + var(--aura-wrap-shift-y)),
                0
            )
            scale(var(--aura-wrap-scale-open)) !important;
        transform-origin:50% 50% !important;
        transition:none !important;
        animation:none !important;
    }

    /* Detail duplicate actor is available on mobile only for the same atomic
       actor swap desktop already uses. */
    .aura-detail-orbit,
    .aura-detail-orbit-node-layer{
        display:block !important;
        position:absolute !important;
        margin:0 !important;
        padding:0 !important;
        pointer-events:none !important;
    }

    .aura-detail-orbit-back{
        z-index:3 !important;
    }

    .aura-detail-gallery{
        z-index:5 !important;
    }

    .aura-detail-orbit-front{
        z-index:6 !important;
        clip-path:inset(
            var(--aura-wrap-front-cut)
            var(--aura-wrap-front-side-cut)
            0
            var(--aura-wrap-front-side-cut)
        ) !important;
        -webkit-clip-path:inset(
            var(--aura-wrap-front-cut)
            var(--aura-wrap-front-side-cut)
            0
            var(--aura-wrap-front-side-cut)
        ) !important;
    }

    .aura-detail-orbit-node-layer{
        z-index:7 !important;
        overflow:visible !important;
    }

    /* ------------------------------------------------------
       SERVICE -> DETAIL — SAME AS DESKTOP
       Atomic orbit actor swap; REAL Detail rail rises from below.
    ------------------------------------------------------ */
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-stage > .aura-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-orbit,
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-orbit-node-layer{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-cards{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-view,
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-gallery,
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-gallery-rail{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-gallery{
        transform:none !important;
    }

    /* Keep mobile's Service-like Detail composition while the WHOLE rail
       receives the JS translateY. */
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-media,
    .aura-work.is-detail.is-detail-ready .aura-detail-media{
        transition:none !important;
        animation:none !important;
    }

    /* ------------------------------------------------------
       STABLE DETAIL
    ------------------------------------------------------ */
    .aura-work.is-detail .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-detail.is-detail-ready .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail.is-detail-ready .aura-stage > .aura-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
    }

    .aura-work.is-detail .aura-detail-orbit,
    .aura-work.is-detail .aura-detail-orbit-node-layer,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit-node-layer{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* ------------------------------------------------------
       DETAIL -> SERVICE — SAME THREADED RETURN AS DESKTOP
       Swap to Service orbit BEFORE rail motion, then move every Service
       card with the exact same temporary Y offset.
    ------------------------------------------------------ */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-orbit,
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-detail-return-swap-ready .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-return-swap-ready .aura-stage > .aura-orbit-node-layer{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-gallery{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* Parent must NEVER move — same desktop stacking rule. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-cards,
    .aura-work.is-detail-return-swap-ready .aura-cards{
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
        overflow:visible !important;
    }

    /* Hide all cards by default in mobile return state. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card,
    .aura-work.is-detail-return-swap-ready .aura-card{
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* Active Service image: same final geometry as stable mobile index,
       with ONLY the shared return Y offset added. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active{
        left:50% !important;
        top:50% !important;
        width:39vw !important;
        max-width:166px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;
        z-index:14 !important;
        transform:
            translate(-50%,-50%)
            translate(
                0,
                calc(var(--aura-wrap-shift-y) + var(--aura-return-rail-y,0px))
            )
            scale(1) !important;
        transform-origin:50% 50% !important;
        will-change:transform !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active .aura-card-visual,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active .aura-card-visual{
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active .aura-card-visual img,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active .aura-card-visual img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        object-fit:initial !important;
        object-position:50% 50% !important;
    }

    /* Exactly one faded next image below, matching stable mobile Service. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card[data-aura-delta="1"],
    .aura-work.is-detail-return-swap-ready .aura-card[data-aura-delta="1"]{
        left:50% !important;
        top:50% !important;
        width:120px !important;
        height:148px !important;
        visibility:visible !important;
        opacity:.14 !important;
        pointer-events:none !important;
        z-index:10 !important;
        transform:
            translate(-50%,-50%)
            translate(
                0,
                calc(var(--aura-wrap-shift-y) + 180px + var(--aura-return-rail-y,0px))
            )
            scale(1) !important;
        transform-origin:50% 50% !important;
        will-change:transform !important;
        overflow:hidden !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card[data-aura-delta="1"] img,
    .aura-work.is-detail-return-swap-ready .aura-card[data-aura-delta="1"] img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
        filter:grayscale(100%) brightness(1.08) !important;
    }

    /* Explicit BACK < CARDS < FRONT ordering during return. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-orbit-wrap-back,
    .aura-work.is-detail-return-swap-ready .aura-orbit-wrap-back{
        z-index:8 !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-orbit-wrap-front,
    .aura-work.is-detail-return-swap-ready .aura-orbit-wrap-front{
        z-index:16 !important;
    }

    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-orbit-node-layer,
    .aura-work.is-detail-return-swap-ready .aura-orbit-node-layer{
        z-index:17 !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active{
        max-width:158px !important;
    }
}



/* ==========================================================
   v4.8.7.57 — MOBILE DETAIL -> SERVICE ROOT-GEOMETRY LOCK
   ----------------------------------------------------------
   The reverse rail already uses the same threaded engine as desktop.
   The remaining mobile hitch came from changing the ROOT coordinate system
   after the rail had visually finished.

   These rules do only two things:
   1) keep Detail -> Service inside the exact root/stage height captured from
      the stable Service page before entering Detail;
   2) disable ordinary CSS tweens for the single atomic final commit.

   They do NOT change card/orbit opacity, width, height, filter, object-fit,
   clip-path, z-index, or the working Service -> Detail transition.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    .aura-work.is-aura-page-switching.is-mobile-reverse-index-geometry{
        height:var(
            --aura-mobile-index-return-height,
            760px
        ) !important;
        min-height:var(
            --aura-mobile-index-return-height,
            760px
        ) !important;
        max-height:var(
            --aura-mobile-index-return-height,
            760px
        ) !important;
    }

    .aura-work.is-mobile-reverse-index-geometry .aura-stage{
        height:var(
            --aura-mobile-index-return-stage-height,
            760px
        ) !important;
        min-height:var(
            --aura-mobile-index-return-stage-height,
            760px
        ) !important;
        max-height:var(
            --aura-mobile-index-return-stage-height,
            760px
        ) !important;
    }

    .aura-work.is-mobile-reverse-commit,
    .aura-work.is-mobile-reverse-commit .aura-stage,
    .aura-work.is-mobile-reverse-commit .aura-cards,
    .aura-work.is-mobile-reverse-commit .aura-card,
    .aura-work.is-mobile-reverse-commit .aura-card-visual,
    .aura-work.is-mobile-reverse-commit .aura-card-visual img,
    .aura-work.is-mobile-reverse-commit .aura-orbit-wrap,
    .aura-work.is-mobile-reverse-commit .aura-orbit-wrap img,
    .aura-work.is-mobile-reverse-commit .aura-orbit-node-layer,
    .aura-work.is-mobile-reverse-commit .aura-orbit-node{
        transition:none !important;
        animation:none !important;
    }
}

/* ==========================================================
   v4.8.7.58 — MOBILE CONTINUOUS SERVICE <-> DETAIL HANDOFF
   ----------------------------------------------------------
   Video diagnosis (2026-10-08):
   - v4.8.7.44 still had high-specificity display:none rules for the
     Service-stage orbit while .is-detail remained on the root.
   - v4.8.7.51 restored opacity/visibility during reverse, but did not
     restore display, so the incoming Service rail moved for several frames
     with NO ellipse and the ellipse popped back only at the final commit.
   - v4.8.7.57 then used a separate mobile-only final commit, producing a
     second visual handoff instead of the single desktop timeline.

   This block makes actor ownership explicit on mobile:
   * forward: Detail orbit exists for the whole rail slide;
   * reverse: Service orbit exists for the whole rail slide;
   * both copies share one canonical geometry and never tween at handoff;
   * root/stage geometry stays locked through the shared desktop-style commit.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    /* Forward: keep the destination Detail ellipse alive from the first
       switching frame, defeating the older mobile display:none rule. */
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-orbit,
    .aura-work.is-detail-entering.is-detail-rail-enter .aura-detail-orbit-node-layer,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit,
    .aura-work.is-detail.is-detail-ready .aura-detail-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    /* Reverse: v4.8.7.44 sets the Service-stage ellipse to display:none
       while .is-detail is present. Opacity alone cannot revive it. */
    .aura-work.is-detail.is-detail-return-prep.is-detail-rail-return .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail.is-detail-return-prep.is-detail-rail-return .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-detail-return-prep.is-detail-return-swap-ready .aura-stage > .aura-orbit-wrap,
    .aura-work.is-detail-return-prep.is-detail-return-swap-ready .aura-stage > .aura-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* The destination Service ellipse owns the whole reverse slide. Keep the
       outgoing Detail copy hidden, with no crossfade/double-stroke frame. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-orbit,
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-detail-orbit-node-layer{
        display:block !important;
        opacity:0 !important;
        visibility:hidden !important;
        transition:none !important;
        animation:none !important;
    }

    /* Both orbit actors use one immutable geometry throughout page switching. */
    .aura-work.is-aura-page-switching .aura-stage > .aura-orbit-wrap,
    .aura-work.is-aura-page-switching .aura-stage > .aura-orbit-node-layer,
    .aura-work.is-aura-page-switching .aura-detail-orbit,
    .aura-work.is-aura-page-switching .aura-detail-orbit-node-layer{
        left:50% !important;
        top:50% !important;
        width:var(--aura-wrap-width) !important;
        height:var(--aura-wrap-height) !important;
        transform:translate3d(
            calc(-50% + var(--aura-wrap-shift-x)),
            calc(-50% + var(--aura-wrap-shift-y)),
            0
        ) scale(var(--aura-wrap-scale-open)) !important;
        transform-origin:50% 50% !important;
        transition:none !important;
        animation:none !important;
    }

    /* Keep the exact saved Service coordinate system active even after the
       is-detail class is removed by the shared desktop return timeline. */
    .aura-work.is-mobile-reverse-index-geometry{
        height:var(--aura-mobile-index-return-height,760px) !important;
        min-height:var(--aura-mobile-index-return-height,760px) !important;
        max-height:var(--aura-mobile-index-return-height,760px) !important;
    }

    .aura-work.is-mobile-reverse-index-geometry .aura-stage{
        height:var(--aura-mobile-index-return-stage-height,760px) !important;
        min-height:var(--aura-mobile-index-return-stage-height,760px) !important;
        max-height:var(--aura-mobile-index-return-stage-height,760px) !important;
    }

    /* Freeze the last actor/state handoff: the rail is already at 0px here. */
    .aura-work.is-detail-return-swap-ready .aura-card,
    .aura-work.is-detail-return-swap-ready .aura-card-visual,
    .aura-work.is-detail-return-swap-ready .aura-card-visual img,
    .aura-work.is-detail-return-swap-ready .aura-orbit-wrap,
    .aura-work.is-detail-return-swap-ready .aura-orbit-node-layer{
        transition:none !important;
        animation:none !important;
    }
}

/* ==========================================================
   v4.8.7.59 — MOBILE PIXEL-IDENTICAL SERVICE / DETAIL REST STATE
   ----------------------------------------------------------
   The remaining mobile hitch was not a timing problem.  The two pages
   finished on different coordinate systems:

   - Service rests on its own 760px/min-height interaction stage.
   - Detail changed the root to --aura-detail-viewport-height.
   - Because both actors use top:50%, that root-height change moved the
     entire image/orbit composition by roughly 60px on the recorded phone.
   - Detail's faded support image also had a different size/Y/opacity from
     Service, so even after the main image settled the composition changed.

   v59 makes the resting artwork geometry one immutable contract.  The
   captured Service root/stage size from v57 is now kept for the COMPLETE
   Detail state, not only for the reverse transition.  Text is also aligned
   to the exact mobile Service anchor.  Desktop is intentionally untouched.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    /* ------------------------------------------------------
       1. ONE ROOT / STAGE COORDINATE SYSTEM ON BOTH PAGES
       ------------------------------------------------------ */
    .aura-work.is-detail-entering,
    .aura-work.is-detail,
    .aura-work.is-detail-leaving,
    .aura-work.is-detail-returning,
    .aura-work.is-detail-return-opening,
    .aura-work.is-detail-return-prep{
        height:var(
            --aura-mobile-index-return-height,
            var(--aura-detail-viewport-height,760px)
        ) !important;
        min-height:var(
            --aura-mobile-index-return-height,
            var(--aura-detail-viewport-height,760px)
        ) !important;
        max-height:var(
            --aura-mobile-index-return-height,
            var(--aura-detail-viewport-height,760px)
        ) !important;
    }

    .aura-work.is-detail-entering .aura-stage,
    .aura-work.is-detail .aura-stage,
    .aura-work.is-detail-leaving .aura-stage,
    .aura-work.is-detail-returning .aura-stage,
    .aura-work.is-detail-return-opening .aura-stage,
    .aura-work.is-detail-return-prep .aura-stage,
    .aura-work.is-detail-entering .aura-detail-view,
    .aura-work.is-detail .aura-detail-view,
    .aura-work.is-detail-leaving .aura-detail-view,
    .aura-work.is-detail-returning .aura-detail-view,
    .aura-work.is-detail-return-opening .aura-detail-view,
    .aura-work.is-detail-return-prep .aura-detail-view{
        height:var(
            --aura-mobile-index-return-stage-height,
            var(
                --aura-mobile-index-return-height,
                var(--aura-detail-viewport-height,760px)
            )
        ) !important;
        min-height:var(
            --aura-mobile-index-return-stage-height,
            var(
                --aura-mobile-index-return-height,
                var(--aura-detail-viewport-height,760px)
            )
        ) !important;
        max-height:var(
            --aura-mobile-index-return-stage-height,
            var(
                --aura-mobile-index-return-height,
                var(--aura-detail-viewport-height,760px)
            )
        ) !important;
    }

    /* ------------------------------------------------------
       2. DETAIL COPY = EXACT SERVICE MOBILE COPY ANCHOR
       ------------------------------------------------------ */
    .aura-work.is-detail-entering .aura-detail-left,
    .aura-work.is-detail .aura-detail-left,
    .aura-work.is-detail-leaving .aura-detail-left,
    .aura-work.is-detail-returning .aura-detail-left{
        left:24px !important;
        right:24px !important;
        top:94px !important;
        width:auto !important;
        max-width:none !important;
    }

    .aura-work.is-detail-entering .aura-detail-title,
    .aura-work.is-detail .aura-detail-title,
    .aura-work.is-detail-leaving .aura-detail-title,
    .aura-work.is-detail-returning .aura-detail-title{
        max-width:330px !important;
        margin:0 0 8px !important;
        font-size:21px !important;
        line-height:1.18 !important;
        letter-spacing:-.03em !important;
        font-weight:500 !important;
    }

    .aura-work.is-detail-entering .aura-detail-description,
    .aura-work.is-detail .aura-detail-description,
    .aura-work.is-detail-leaving .aura-detail-description,
    .aura-work.is-detail-returning .aura-detail-description{
        max-width:330px !important;
        margin:0 !important;
        font-size:12.5px !important;
        line-height:1.48 !important;
        font-weight:400 !important;
    }

    /* Back remains extra Detail-only content, but it starts on the same
       left edge instead of receiving a second relative left offset. */
    .aura-work.is-detail-entering .aura-detail-back,
    .aura-work.is-detail .aura-detail-back,
    .aura-work.is-detail-leaving .aura-detail-back,
    .aura-work.is-detail-returning .aura-detail-back{
        left:0 !important;
        right:auto !important;
        bottom:auto !important;
    }

    /* ------------------------------------------------------
       3. ACTIVE DETAIL IMAGE = EXACT SERVICE ACTIVE IMAGE
       ------------------------------------------------------ */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-active,
    .aura-work.is-detail .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-active{
        left:50% !important;
        top:50% !important;
        width:min(39vw,166px) !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        opacity:1 !important;
        visibility:visible !important;
        filter:none !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0,var(--aura-wrap-shift-y),0)
            scale(1) !important;
        transform-origin:50% 50% !important;
    }

    /* ------------------------------------------------------
       4. FADED NEXT DETAIL IMAGE = EXACT SERVICE DELTA +1 CARD
       Service <=767: 124x154, Y=186, opacity=.20.
       ------------------------------------------------------ */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-next,
    .aura-work.is-detail .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-next{
        left:50% !important;
        top:50% !important;
        width:124px !important;
        height:154px !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;
        opacity:.20 !important;
        visibility:visible !important;
        filter:grayscale(100%) brightness(1.08) !important;
        overflow:hidden !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0,186px,0)
            scale(1) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work.is-detail-entering .aura-detail-media.is-gallery-next img,
    .aura-work.is-detail .aura-detail-media.is-gallery-next img,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-next img,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-next img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:50% 50% !important;
        filter:grayscale(100%) brightness(1.08) !important;
    }

    /* Reverse rail must land on the SAME width rule used by stable Service. */
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active{
        width:min(39vw,166px) !important;
        max-width:none !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    /* Exact stable Service copy anchor at <=480. */
    .aura-work.is-detail-entering .aura-detail-left,
    .aura-work.is-detail .aura-detail-left,
    .aura-work.is-detail-leaving .aura-detail-left,
    .aura-work.is-detail-returning .aura-detail-left{
        left:22px !important;
        right:22px !important;
        top:92px !important;
    }

    .aura-work.is-detail-entering .aura-detail-title,
    .aura-work.is-detail .aura-detail-title,
    .aura-work.is-detail-leaving .aura-detail-title,
    .aura-work.is-detail-returning .aura-detail-title{
        max-width:300px !important;
        font-size:20px !important;
    }

    .aura-work.is-detail-entering .aura-detail-description,
    .aura-work.is-detail .aura-detail-description,
    .aura-work.is-detail-leaving .aura-detail-description,
    .aura-work.is-detail-returning .aura-detail-description{
        max-width:305px !important;
        font-size:12px !important;
    }

    /* Stable Service intentionally removes the 166px cap below 480px. */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-active,
    .aura-work.is-detail .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-active,
    .aura-work.is-detail-return-prep.is-detail-rail-return .aura-card.is-active,
    .aura-work.is-detail-return-swap-ready .aura-card.is-active{
        width:39vw !important;
        max-width:none !important;
    }

    /* Exact stable Service delta +1 geometry at <=480. */
    .aura-work.is-detail-entering .aura-detail-media.is-gallery-next,
    .aura-work.is-detail .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-leaving .aura-detail-media.is-gallery-next,
    .aura-work.is-detail-returning .aura-detail-media.is-gallery-next{
        width:120px !important;
        height:148px !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(0,180px,0)
            scale(1) !important;
    }
}

/* ==========================================================
   v4.8.7.59.2 — MOBILE FINAL-HANDOFF STABILITY
   ----------------------------------------------------------
   Narrow fix on top of v4.8.7.59 only:
   - Service -> Detail: freeze the already-settled Detail image and make the
     Detail orbit the only orbit actor during the final class handoff.
   - Detail -> Service: freeze the already-settled Service image and make the
     Service orbit the only orbit actor during the final class handoff.
   - No rail geometry, sizing, timing or desktop behavior is changed.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    /* ---------- FORWARD: Service -> Detail ---------- */
    .aura-work.is-mobile-forward-commit .aura-stage > .aura-orbit-wrap,
    .aura-work.is-mobile-forward-commit .aura-stage > .aura-orbit-node-layer{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-forward-commit .aura-detail-orbit,
    .aura-work.is-mobile-forward-commit .aura-detail-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* The legacy split/magnifier actor must never re-paint in the commit. */
    .aura-work.is-mobile-forward-commit .aura-focus-logo,
    .aura-work.is-mobile-forward-commit .aura-focus-half,
    .aura-work.is-mobile-forward-commit .aura-focus-left,
    .aura-work.is-mobile-forward-commit .aura-focus-right{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-forward-commit .aura-detail-view,
    .aura-work.is-mobile-forward-commit .aura-detail-gallery,
    .aura-work.is-mobile-forward-commit .aura-detail-gallery-rail{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-forward-commit .aura-detail-media,
    .aura-work.is-mobile-forward-commit .aura-detail-media img,
    .aura-work.is-mobile-forward-commit .aura-detail-media picture{
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-forward-commit .aura-detail-media.is-gallery-active,
    .aura-work.is-mobile-forward-commit .aura-detail-media.is-gallery-active img{
        opacity:1 !important;
        visibility:visible !important;
    }

    /* ---------- REVERSE: Detail -> Service ---------- */
    .aura-work.is-mobile-reverse-commit .aura-detail-orbit,
    .aura-work.is-mobile-reverse-commit .aura-detail-orbit-node-layer{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-commit .aura-stage > .aura-orbit-wrap,
    .aura-work.is-mobile-reverse-commit .aura-stage > .aura-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-commit .aura-cards{
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-commit .aura-card,
    .aura-work.is-mobile-reverse-commit .aura-card-visual,
    .aura-work.is-mobile-reverse-commit .aura-card-visual img{
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-commit .aura-card.is-active,
    .aura-work.is-mobile-reverse-commit .aura-card.is-active .aura-card-visual,
    .aura-work.is-mobile-reverse-commit .aura-card.is-active .aura-card-visual img{
        opacity:1 !important;
        visibility:visible !important;
    }
}


/* ==========================================================
   v4.8.7.59.2.2 — MOBILE REVERSE TRANSITION RELEASE LOCK
   ----------------------------------------------------------
   Reverse-only fix. The final Service visual state is committed while all
   artwork transitions remain disabled. The lock is removed two paint frames
   later, after computed opacity/visibility/geometry are already stable.
   No opacity, geometry, rail timing or forward transition is changed here.
========================================================== */
@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-mobile-reverse-release-lock .aura-stage,
    .aura-work.is-mobile-reverse-release-lock .aura-cards,
    .aura-work.is-mobile-reverse-release-lock .aura-card,
    .aura-work.is-mobile-reverse-release-lock .aura-card-visual,
    .aura-work.is-mobile-reverse-release-lock .aura-card-visual img,
    .aura-work.is-mobile-reverse-release-lock .aura-orbit-wrap,
    .aura-work.is-mobile-reverse-release-lock .aura-orbit-wrap img,
    .aura-work.is-mobile-reverse-release-lock .aura-orbit-node-layer,
    .aura-work.is-mobile-reverse-release-lock .aura-orbit-node,
    .aura-work.is-mobile-reverse-release-lock .aura-detail-orbit,
    .aura-work.is-mobile-reverse-release-lock .aura-detail-orbit img,
    .aura-work.is-mobile-reverse-release-lock .aura-detail-orbit-node-layer,
    .aura-work.is-mobile-reverse-release-lock .aura-detail-orbit-node{
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.59.2.3 — MOBILE DETAIL -> SERVICE STABLE VISUAL GUARD
   ----------------------------------------------------------
   Reverse-only flash fix.

   The recorded flash is the base Service opacity transition restarting after
   the reverse commit (orbit .35s / index layer .52s). Keep the final Service
   visual owner pinned at opacity 1 after the reverse handoff. This guard is
   removed by JS BEFORE the next Service -> Detail transition begins, while the
   resting Service values are already identical, so its removal cannot animate.

   No geometry, rail timing, card spacing, forward transition or desktop rule
   is changed here.
========================================================== */
@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-mobile-reverse-stable-guard .aura-cards{
        opacity:1 !important;
        visibility:visible !important;
    }

    .aura-work.is-mobile-reverse-stable-guard .aura-card.is-active,
    .aura-work.is-mobile-reverse-stable-guard .aura-card[data-aura-delta="0"]{
        opacity:1 !important;
        visibility:visible !important;
        --opacity:1 !important;
    }

    .aura-work.is-mobile-reverse-stable-guard .aura-stage > .aura-orbit-wrap,
    .aura-work.is-mobile-reverse-stable-guard .aura-stage > .aura-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
    }

    /* Do not allow the outgoing Detail compositor layer to repaint above the
       already-final Service actor after the reverse handoff. */
    .aura-work.is-mobile-reverse-stable-guard .aura-detail-view,
    .aura-work.is-mobile-reverse-stable-guard .aura-detail-gallery,
    .aura-work.is-mobile-reverse-stable-guard .aura-detail-orbit,
    .aura-work.is-mobile-reverse-stable-guard .aura-detail-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }
}

/* ==========================================================
   v4.8.7.59.2.5 — MOBILE DETAIL KINETIC RAIL + TRUE REVERSE THREAD
   ----------------------------------------------------------
   Rebuilt from v4.8.7.59.2.3. This block intentionally does NOT
   touch the mobile Service-index switching rules added in 59.2.4.

   A) Detail gallery on mobile:
      - vertical pointer/rail motion, same direction as Service/desktop;
      - active / previous / next actors remain visible while moving;
      - transform is driven by the live JS gallery position, not class jumps.

   B) Detail -> Service on mobile:
      - outgoing REAL Detail active image moves from center -> above;
      - incoming REAL Service active card moves from below -> center;
      - both share exactly one travel span and the Service ellipse stays alive;
      - no clone, no bridge image, no second ellipse, no blank center interval.
========================================================== */
@media (max-width:767px) and (orientation:portrait){

    /* ---------- A. DETAIL: REAL VERTICAL KINETIC IMAGE RAIL ---------- */
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-gallery,
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-gallery-rail{
        overflow:visible !important;
        opacity:1 !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-media{
        left:50% !important;
        top:50% !important;
        width:39vw !important;
        max-width:166px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        opacity:var(--gallery-opacity,0) !important;
        visibility:hidden !important;
        pointer-events:none !important;
        filter:none !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(
                0,
                calc(var(--aura-wrap-shift-y) + var(--gallery-y,0px)),
                0
            )
            scale(var(--aura-detail-kinetic-scale,1)) !important;
        transform-origin:50% 50% !important;
        transition:none !important;
        animation:none !important;
        will-change:transform, opacity !important;
        overflow:hidden !important;
    }

    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-media.is-gallery-active,
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-media.is-gallery-next,
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-media.is-gallery-prev{
        visibility:visible !important;
    }

    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-media img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        max-height:none !important;
        object-fit:initial !important;
        object-position:50% 50% !important;
        filter:
            grayscale(var(--gallery-grayscale,0%))
            brightness(1.08) !important;
        transform:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* ---------- B. DETAIL -> SERVICE: ONE REAL THREADED STRIP ---------- */
    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-view,
    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-gallery,
    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-gallery-rail{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-gallery{
        z-index:12 !important;
        overflow:visible !important;
    }

    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-media{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-media.is-gallery-active{
        left:50% !important;
        top:50% !important;
        width:39vw !important;
        max-width:166px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        opacity:calc(
            1 - .80 * var(--aura-mobile-reverse-progress,0)
        ) !important;
        visibility:visible !important;
        z-index:14 !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(
                0,
                calc(
                    var(--aura-wrap-shift-y)
                    + var(--aura-return-rail-y,0px)
                    - var(--aura-mobile-reverse-span,180px)
                ),
                0
            )
            scale(1) !important;
        transform-origin:50% 50% !important;
        transition:none !important;
        animation:none !important;
        will-change:transform, opacity !important;
    }

    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-media.is-gallery-active img{
        display:block !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        max-height:none !important;
        object-fit:initial !important;
        object-position:50% 50% !important;
        filter:none !important;
        transform:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* Incoming Service active image is the lower member of the SAME strip.
       At progress 0 it occupies the normal faded-next position; at 1 it is the
       fully opaque centered Service image. */
    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-card.is-active{
        opacity:calc(
            .20 + .80 * var(--aura-mobile-reverse-progress,0)
        ) !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
        will-change:transform, opacity !important;
    }

    /* Service owns the ONLY ellipse for the complete reverse animation. */
    .aura-work.is-mobile-reverse-threaded .aura-detail-orbit,
    .aura-work.is-mobile-reverse-threaded .aura-detail-orbit-node-layer{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }

    .aura-work.is-mobile-reverse-threaded .aura-stage > .aura-orbit-wrap,
    .aura-work.is-mobile-reverse-threaded .aura-stage > .aura-orbit-node-layer{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transition:none !important;
    }
}

@media (max-width:480px) and (orientation:portrait){
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-media,
    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return .aura-detail-media.is-gallery-active{
        width:39vw !important;
        max-width:none !important;
    }
}


/* ==========================================================
   v4.8.7.59.2.6 — MOBILE DETAIL TEXT CLIP + REVERSE COMMIT HARD GUARD
   ----------------------------------------------------------
   Scope is intentionally narrow:
   1) while a Detail gallery gesture is moving, crop artwork below the real
      Detail text/back bottom edge measured by JS;
   2) after Detail -> Service finishes, keep the old Detail DOM non-painting
      across the state-class handoff so no legacy large gallery frame can flash.
========================================================== */
@media (max-width:767px) and (orientation:portrait){
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-gallery{
        overflow:hidden !important;
        clip-path:inset(
            var(--aura-mobile-detail-clip-top,0px)
            0
            0
            0
        ) !important;
        -webkit-clip-path:inset(
            var(--aura-mobile-detail-clip-top,0px)
            0
            0
            0
        ) !important;
    }

    /* The rail may remain geometrically overflow-visible; the gallery itself is
       now the single clipping viewport, so images can move continuously but can
       never paint over the Detail copy. */
    .aura-work.is-detail.is-mobile-detail-gallery-moving .aura-detail-gallery-rail{
        overflow:visible !important;
    }

    /* The outgoing Detail actor must be completely gone at the end of the
       reverse thread. It must not remain as a faded card above the Service lens. */
    .aura-work.is-mobile-reverse-threaded.is-detail-return-prep.is-detail-rail-return
    .aura-detail-media.is-gallery-active{
        opacity:calc(1 - var(--aura-mobile-reverse-progress,0)) !important;
    }

    /* Persistent guard across reverse commit. aria-hidden alone does not stop
       painting; these properties do. This class is released only after the next
       incoming Detail rail has already been primed off-screen. */
    .aura-work.is-mobile-reverse-detail-hard-hidden .aura-detail-view,
    .aura-work.is-mobile-reverse-detail-hard-hidden .aura-detail-gallery,
    .aura-work.is-mobile-reverse-detail-hard-hidden .aura-detail-gallery-rail,
    .aura-work.is-mobile-reverse-detail-hard-hidden .aura-detail-media,
    .aura-work.is-mobile-reverse-detail-hard-hidden .aura-detail-orbit,
    .aura-work.is-mobile-reverse-detail-hard-hidden .aura-detail-orbit-node-layer{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:none !important;
        animation:none !important;
    }
}


/* ==========================================================
   v4.8.7.59.2.7 — PHONE LANDSCAPE DESKTOP-LIKE HORIZONTAL VIEW
   ----------------------------------------------------------
   Portrait phones keep the existing mobile composition untouched.
   Phones rotated to landscape use a compact version of desktop Ngang:
   copy above, one horizontal artwork rail, service names in one row below.
========================================================== */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
    .aura-work.is-phone-landscape-desktop{
        height:calc(100svh - 56px) !important;
        min-height:0 !important;
        overflow:hidden !important;

        --aura-wrap-width:clamp(300px,48vw,410px) !important;
        --aura-wrap-height:calc(var(--aura-wrap-width) * .50) !important;
        --aura-wrap-shift-x:0px !important;
        --aura-wrap-shift-y:12px !important;
        --aura-wrap-scale-rest:.97 !important;
        --aura-wrap-scale-open:1 !important;
        --aura-wrap-scale-switch:1.012 !important;
        --aura-wrap-front-cut:47% !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-info{
        left:50% !important;
        right:auto !important;
        top:4% !important;
        bottom:auto !important;
        width:min(300px,48vw) !important;
        transform:translateX(-50%) !important;
        z-index:24 !important;
        text-align:left !important;
        opacity:1 !important;
        pointer-events:auto !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-service-current{
        margin-bottom:7px !important;
        font-size:6px !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-info-title{
        margin:0 0 5px !important;
        font-size:11px !important;
        line-height:1.12 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-info-description{
        max-width:100% !important;
        margin:0 0 7px !important;
        font-size:7.5px !important;
        line-height:1.28 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-info-more{
        gap:12px !important;
        padding-bottom:2px !important;
        font-size:7px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-nav{
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:10px !important;
        width:calc(100% - 92px) !important;
        max-width:none !important;
        transform:translateX(-50%) !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
        gap:clamp(7px,1.45vw,12px) !important;
        white-space:nowrap !important;
        opacity:1 !important;
        pointer-events:auto !important;
        z-index:22 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-link{
        flex:0 1 auto !important;
        min-width:0 !important;
        font-size:clamp(6.5px,1.35vw,8.5px) !important;
        line-height:1.05 !important;
        letter-spacing:-.035em !important;
        white-space:nowrap !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-card{
        width:clamp(96px,18vh,118px) !important;
        height:clamp(120px,22.5vh,148px) !important;
        border-radius:10px !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-card-visual{
        border-radius:inherit !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-orbit-wrap,
    .aura-work.is-phone-landscape-desktop .aura-orbit-node-layer{
        top:53% !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-stage-counter{
        display:block !important;
        top:calc(53% + 84px) !important;
        bottom:auto !important;
        font-size:6px !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-layout-controls{
        left:10px !important;
        bottom:9px !important;
        gap:1px !important;
        font-size:7px !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-layout-btn{
        font-size:7px !important;
        padding-bottom:1px !important;
    }

    /* Desktop-like Detail when the phone remains landscape. */
    .aura-work.is-phone-landscape-desktop.is-detail,
    .aura-work.is-phone-landscape-desktop.is-detail-entering,
    .aura-work.is-phone-landscape-desktop.is-detail-leaving,
    .aura-work.is-phone-landscape-desktop.is-detail-returning,
    .aura-work.is-phone-landscape-desktop.is-detail-return-prep{
        --aura-detail-media-width:clamp(92px,17vh,116px) !important;
        --aura-detail-lens-size:var(--aura-wrap-width) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-title-block{
        left:12px !important;
        right:auto !important;
        top:50% !important;
        width:150px !important;
        transform:translateY(-50%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-copy-block{
        right:12px !important;
        left:auto !important;
        top:50% !important;
        width:160px !important;
        transform:translateY(-50%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-title{
        font-size:11px !important;
        line-height:1.12 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-description{
        font-size:7.5px !important;
        line-height:1.3 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-code,
    .aura-work.is-phone-landscape-desktop .aura-detail-cta,
    .aura-work.is-phone-landscape-desktop .aura-detail-back{
        font-size:7px !important;
    }
}

/* ==========================================================
   v4.8.7.59.2.8 — MOBILE REVERSE TEXT CONTINUITY + LANDSCAPE FIT
   ----------------------------------------------------------
   1) Portrait Detail -> Service keeps the identical title/description painted
      through the artwork return and swaps text ownership atomically at commit.
      No wipe -> blank -> reveal cycle on this direction.
   2) Phone landscape uses the REAL visible height left below the site header,
      measured by JS, instead of assuming 100svh - 56px.
========================================================== */
@media (max-width:767px) and (orientation:portrait){
    /* Keep outgoing Detail copy continuously visible while the reverse artwork
       rail moves. These selectors deliberately override the legacy
       is-detail-return-prep hard-hide rule. */
    .aura-work.is-mobile-reverse-text-continuity.is-detail-return-prep .aura-detail-title-block,
    .aura-work.is-mobile-reverse-text-continuity.is-detail-return-prep .aura-detail-copy-block,
    .aura-work.is-mobile-reverse-text-continuity.is-detail-rail-return .aura-detail-title-block,
    .aura-work.is-mobile-reverse-text-continuity.is-detail-rail-return .aura-detail-copy-block{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
        transition:none !important;
        animation:none !important;
    }

    /* At commit, Service copy is made paintable in the SAME frame that Detail
       DOM is hard-hidden. Because both use the same mobile anchor, there is no
       empty frame and no duplicate visible frame. */
    .aura-work.is-mobile-reverse-text-service-ready .aura-service-info{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
        transition:none !important;
        animation:none !important;
    }
}

@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
    .aura-work.is-phone-landscape-desktop{
        height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
        max-height:var(--aura-phone-landscape-height, none) !important;
        min-height:220px !important;
        overflow:hidden !important;

        --aura-wrap-width:clamp(
            230px,
            min(46vw, calc(var(--aura-phone-landscape-height, 360px) * 1.08)),
            390px
        ) !important;
        --aura-wrap-height:calc(var(--aura-wrap-width) * .50) !important;
        --aura-wrap-shift-y:4px !important;
    }

    /* Compact desktop-like composition inside the ACTUAL remaining height. */
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-info{
        top:7px !important;
        width:min(300px,46vw) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-card{
        width:clamp(
            78px,
            calc(var(--aura-phone-landscape-height, 360px) * .285),
            112px
        ) !important;
        height:clamp(
            98px,
            calc(var(--aura-phone-landscape-height, 360px) * .355),
            140px
        ) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-orbit-wrap,
    .aura-work.is-phone-landscape-desktop .aura-orbit-node-layer{
        top:56% !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-stage-counter{
        top:calc(56% + clamp(58px, calc(var(--aura-phone-landscape-height, 360px) * .19), 76px)) !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-nav{
        bottom:6px !important;
        width:calc(100% - 72px) !important;
        gap:clamp(5px,1.25vw,10px) !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-link{
        font-size:clamp(6px,1.2vw,8px) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-layout-controls{
        bottom:6px !important;
    }

    /* Detail must use the same fitted stage height in landscape. */
    .aura-work.is-phone-landscape-desktop.is-detail,
    .aura-work.is-phone-landscape-desktop.is-detail-entering,
    .aura-work.is-phone-landscape-desktop.is-detail-leaving,
    .aura-work.is-phone-landscape-desktop.is-detail-returning,
    .aura-work.is-phone-landscape-desktop.is-detail-return-prep{
        height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
        min-height:220px !important;
    }
}


/* ==========================================================
   v4.8.7.59.2.11 — NATIVE PHOTO RASTER + RESPONSIVE DPR
   ----------------------------------------------------------
   Quality only. No geometry / animation / layout changes.
   - HQ images bypass lazy/LQIP placeholders.
   - Active artwork is never softened by residual filters.
   - Resting artwork drops permanent will-change hints so Chrome can rasterize
     the full-resolution source at the final on-screen size instead of keeping
     a lower-resolution transition texture alive.
========================================================== */
.aura-work img.aura-hq-image{
    image-rendering:auto !important;
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
}

.aura-work:not(.is-switching):not(.is-index-kinetic):not(.is-layout-switching)
.aura-card.is-active,
.aura-work:not(.is-switching):not(.is-index-kinetic):not(.is-layout-switching)
.aura-card.is-active .aura-card-visual,
.aura-work:not(.is-switching):not(.is-index-kinetic):not(.is-layout-switching)
.aura-card.is-active img.aura-hq-image,
.aura-work.is-detail:not(.is-detail-gallery-kinetic):not(.is-mobile-detail-gallery-moving)
.aura-detail-media.is-gallery-active,
.aura-work.is-detail:not(.is-detail-gallery-kinetic):not(.is-mobile-detail-gallery-moving)
.aura-detail-media.is-gallery-active img.aura-hq-image{
    will-change:auto !important;
}

.aura-work .aura-card.is-active img.aura-hq-image,
.aura-work .aura-detail-media.is-gallery-active img.aura-hq-image{
    opacity:1 !important;
    filter:none !important;
    image-rendering:auto !important;
}


/* v4.8.7.59.2.11 — PHOTO QUALITY SAFEGUARD
   Never use pixel/contrast interpolation on photographic artwork. */
.aura-work .aura-card img.aura-hq-image,
.aura-work .aura-detail-media img.aura-hq-image{
    image-rendering:auto !important;
    -webkit-backface-visibility:visible !important;
    backface-visibility:visible !important;
}


/* Phone landscape uses the Ngang layout. */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"]{
        height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
        max-height:var(--aura-phone-landscape-height, none) !important;
        min-height:220px !important;
        overflow:hidden !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-info{
        left:50% !important;
        right:auto !important;
        top:6px !important;
        bottom:auto !important;
        width:min(48vw,340px) !important;
        max-width:340px !important;
        transform:translateX(-50%) !important;
        text-align:left !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-nav{
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:8px !important;
        width:calc(100% - 70px) !important;
        max-width:none !important;
        transform:translateX(-50%) !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
        gap:clamp(6px,1.3vw,11px) !important;
        white-space:nowrap !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-link{
        flex:0 1 auto !important;
        min-width:0 !important;
        font-size:clamp(6px,1.15vw,8px) !important;
        line-height:1.05 !important;
        letter-spacing:-.03em !important;
        white-space:nowrap !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-card{
        width:clamp(82px, calc(var(--aura-phone-landscape-height, 340px) * .29), 112px) !important;
        height:clamp(102px, calc(var(--aura-phone-landscape-height, 340px) * .36), 138px) !important;
        border-radius:10px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-orbit-wrap,
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-orbit-node-layer{
        left:50% !important;
        top:55% !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-stage-counter{
        display:block !important;
        top:calc(55% + 72px) !important;
        bottom:auto !important;
        font-size:6px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-layout-controls{
        left:8px !important;
        bottom:6px !important;
        font-size:6.5px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-layout-btn{
        font-size:6.5px !important;
    }
}

/* Phone landscape horizontal fit */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"]{
        --aura-wrap-width:clamp(240px, 31vw, 320px) !important;
        --aura-wrap-height:calc(var(--aura-wrap-width) * .52) !important;
        --aura-wrap-shift-x:0px !important;
        --aura-wrap-shift-y:-6px !important;
        --aura-wrap-scale-rest:.965 !important;
        --aura-wrap-scale-open:1 !important;
        --aura-wrap-scale-switch:1.005 !important;
        --aura-wrap-front-cut:47% !important;
        height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
        min-height:220px !important;
        max-height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
        overflow:hidden !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-info{
        top:10px !important;
        width:min(34vw, 320px) !important;
        max-width:320px !important;
        z-index:24 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-current{
        margin-bottom:8px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-info-title{
        font-size:clamp(11px, 1.55vw, 16px) !important;
        line-height:1.14 !important;
        margin:0 0 7px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-info-description{
        font-size:clamp(7.5px, 1.05vw, 10px) !important;
        line-height:1.32 !important;
        margin:0 0 8px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-info-more{
        font-size:clamp(7px, .95vw, 9px) !important;
        gap:12px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-card{
        width:clamp(70px, calc(var(--aura-phone-landscape-height, 340px) * .24), 98px) !important;
        height:clamp(92px, calc(var(--aura-phone-landscape-height, 340px) * .31), 126px) !important;
        border-radius:10px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-orbit-wrap,
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-orbit-node-layer,
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-focus-logo{
        left:50% !important;
        top:50.5% !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-stage-counter{
        top:calc(50.5% + 66px) !important;
        font-size:6px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-nav{
        bottom:10px !important;
        width:calc(100% - 52px) !important;
        gap:clamp(5px, .95vw, 9px) !important;
        z-index:22 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-link{
        font-size:clamp(6px, .92vw, 7.6px) !important;
        line-height:1.06 !important;
        letter-spacing:-.025em !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-layout-controls{
        left:8px !important;
        bottom:8px !important;
        font-size:6px !important;
        z-index:23 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-layout-btn{
        font-size:6px !important;
    }

    .aura-work.is-phone-landscape-desktop.is-detail,
    .aura-work.is-phone-landscape-desktop.is-detail-entering,
    .aura-work.is-phone-landscape-desktop.is-detail-leaving,
    .aura-work.is-phone-landscape-desktop.is-detail-returning,
    .aura-work.is-phone-landscape-desktop.is-detail-return-opening,
    .aura-work.is-phone-landscape-desktop.is-detail-return-prep{
        --aura-detail-media-width:clamp(74px, 10.5vw, 104px) !important;
        --aura-detail-lens-size:clamp(250px, 33vw, 340px) !important;
        height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
        min-height:220px !important;
        max-height:var(--aura-phone-landscape-height, calc(100svh - 56px)) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-orbit,
    .aura-work.is-phone-landscape-desktop .aura-detail-orbit-node-layer{
        left:50% !important;
        top:50.5% !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-title-block{
        left:16px !important;
        right:auto !important;
        top:55% !important;
        width:min(24vw, 190px) !important;
        transform:translateY(-50%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-copy-block{
        right:16px !important;
        left:auto !important;
        top:55% !important;
        width:min(24vw, 210px) !important;
        transform:translateY(-50%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-title{
        font-size:clamp(11px, 1.5vw, 16px) !important;
        line-height:1.14 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-description{
        font-size:clamp(7.5px, 1.03vw, 9.8px) !important;
        line-height:1.34 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-code,
    .aura-work.is-phone-landscape-desktop .aura-detail-cta,
    .aura-work.is-phone-landscape-desktop .aura-detail-back{
        font-size:clamp(7px, .95vw, 9px) !important;
    }
}

/* Landscape mobile compact layout */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px){
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"]{
        --aura-lens-shift-x:-2.2vw !important;
        --aura-lens-shift-y:0px !important;
        --aura-wrap-shift-x:-2.2vw !important;
        --aura-wrap-shift-y:0px !important;
        --aura-wrap-width:clamp(220px, 29vw, 286px) !important;
        --aura-wrap-height:calc(var(--aura-wrap-width) * .52) !important;
        height:var(--aura-phone-landscape-height, 100svh) !important;
        min-height:220px !important;
        max-height:var(--aura-phone-landscape-height, 100svh) !important;
        overflow:hidden !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-info{
        left:50% !important;
        right:auto !important;
        top:calc(var(--aura-phone-landscape-top-inset, 0px) + 4px) !important;
        width:min(44vw, 330px) !important;
        max-width:330px !important;
        transform:translateX(-50%) !important;
        text-align:left !important;
        z-index:24 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-current{
        margin-bottom:5px !important;
        font-size:6.5px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-info-title{
        margin:0 0 5px !important;
        font-size:clamp(10px, 1.35vw, 14px) !important;
        line-height:1.12 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-info-description{
        max-width:100% !important;
        margin:0 0 6px !important;
        font-size:clamp(7px, .9vw, 9px) !important;
        line-height:1.28 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-info-more{
        gap:10px !important;
        padding-bottom:2px !important;
        font-size:clamp(6.8px, .82vw, 8.2px) !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-card{
        top:var(--aura-phone-landscape-stage-y, 58%) !important;
        width:clamp(68px, calc(var(--aura-phone-landscape-content-height, 250px) * .29), 92px) !important;
        height:clamp(88px, calc(var(--aura-phone-landscape-content-height, 250px) * .37), 118px) !important;
        border-radius:9px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-focus-logo,
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-orbit-wrap,
    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-orbit-node-layer{
        left:50% !important;
        top:var(--aura-phone-landscape-stage-y, 58%) !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-stage-counter{
        display:block !important;
        top:calc(var(--aura-phone-landscape-stage-y, 58%) + 56px) !important;
        font-size:5.5px !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-nav{
        left:47% !important;
        right:auto !important;
        top:auto !important;
        bottom:6px !important;
        width:calc(100% - 150px) !important;
        max-width:none !important;
        transform:translateX(-50%) !important;
        gap:clamp(4px, .7vw, 7px) !important;
        justify-content:center !important;
        overflow:hidden !important;
        z-index:22 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-service-link{
        flex:0 1 auto !important;
        min-width:0 !important;
        font-size:clamp(5.6px, .72vw, 6.8px) !important;
        line-height:1.04 !important;
        letter-spacing:-.02em !important;
        white-space:nowrap !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-layout-controls{
        left:7px !important;
        bottom:6px !important;
        font-size:5.5px !important;
        z-index:23 !important;
    }

    .aura-work.is-phone-landscape-desktop[data-layout="horizontal"] .aura-layout-btn{
        font-size:5.5px !important;
    }

    .aura-work.is-phone-landscape-desktop.is-detail,
    .aura-work.is-phone-landscape-desktop.is-detail-entering,
    .aura-work.is-phone-landscape-desktop.is-detail-leaving,
    .aura-work.is-phone-landscape-desktop.is-detail-returning,
    .aura-work.is-phone-landscape-desktop.is-detail-return-opening,
    .aura-work.is-phone-landscape-desktop.is-detail-return-prep{
        --aura-detail-media-width:clamp(68px, 9.5vw, 92px) !important;
        --aura-detail-lens-size:clamp(220px, 30vw, 292px) !important;
        height:var(--aura-phone-landscape-height, 100svh) !important;
        min-height:220px !important;
        max-height:var(--aura-phone-landscape-height, 100svh) !important;
        overflow:hidden !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-gallery{
        left:32% !important;
        right:32% !important;
        top:0 !important;
        bottom:0 !important;
        transform:none !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-media{
        top:var(--aura-phone-landscape-detail-y, 56%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-orbit,
    .aura-work.is-phone-landscape-desktop .aura-detail-orbit-node-layer{
        left:50% !important;
        top:var(--aura-phone-landscape-detail-y, 56%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-title-block{
        left:14px !important;
        right:auto !important;
        top:var(--aura-phone-landscape-detail-y, 56%) !important;
        width:min(23vw, 170px) !important;
        transform:translateY(-50%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-copy-block{
        right:88px !important;
        left:auto !important;
        top:var(--aura-phone-landscape-detail-y, 56%) !important;
        width:min(22vw, 180px) !important;
        transform:translateY(-50%) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-title{
        font-size:clamp(10px, 1.28vw, 13px) !important;
        line-height:1.12 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-description{
        font-size:clamp(6.8px, .88vw, 8.8px) !important;
        line-height:1.28 !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-code,
    .aura-work.is-phone-landscape-desktop .aura-detail-cta,
    .aura-work.is-phone-landscape-desktop .aura-detail-back{
        font-size:clamp(6.5px, .8vw, 8px) !important;
    }

    .aura-work.is-phone-landscape-desktop .aura-detail-back{
        left:10px !important;
        bottom:7px !important;
    }
}



/* Ảnh nét xuyên suốt thao tác trượt, không đổi radius sau khi dừng. */
@media (min-width:768px) and (min-height:601px) {
    .aura-work.is-index-kinetic.aura-index-native-resolution:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card {
        width:var(--aura-native-full-width) !important;
        height:var(--aura-native-full-height) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--x),var(--y),0)
            scale(var(--aura-native-motion-scale,1)) !important;
        transition:none !important;
    }
}

/* Đồng bộ góc bo ảnh phụ trong Intro và sau khi bàn giao. */
@media (min-width:768px) and (min-height:601px) {
    .aura-work.is-index-kinetic.aura-index-native-resolution:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card:not(.is-active) {
        border-radius:var(--aura-thumbnail-radius,12px) !important;
        overflow:hidden !important;
    }
    .aura-work.is-index-kinetic.aura-index-native-resolution:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card:not(.is-active) .aura-card-visual {
        border-radius:inherit !important;
        overflow:hidden !important;
    }
    #aura-logo-intro .aura-logo-intro__unified-card:not(.is-active),
    #aura-logo-intro .aura-logo-intro__unified-card:not(.is-active) .aura-card-visual {
        border-radius:12px !important;
        overflow:hidden !important;
    }
}


/* Chỉ căn hai cột nội dung ở tablet và cửa sổ gần vuông */
@media (min-width:768px) and (max-width:1359px) and (min-height:650px) and (max-aspect-ratio:3/2){
    /* Giữ nguyên elip, ảnh chính, ảnh phụ và tất cả hiệu ứng */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav{
        left:clamp(12px,1.5vw,18px) !important;
        right:auto !important;
        top:50% !important;
        bottom:auto !important;
        width:clamp(98px,calc(50% - var(--aura-wrap-width) / 2 - 32px),310px) !important;
        max-width:none !important;
        box-sizing:border-box !important;
        transform:translateY(-50%) !important;
    }

    /* Danh sách bên trái được xuống dòng trong vùng an toàn */
    .aura-work[data-aura-app="1"][data-layout="vertical"] .aura-service-link{
        max-width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        overflow-wrap:normal !important;
        font-size:clamp(10px,1.05vw,13px) !important;
        line-height:1.25 !important;
    }

    /* Đẩy phần mô tả sang phải, tránh đè lên ảnh và đường elip */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info{
        left:auto !important;
        right:clamp(12px,1.5vw,18px) !important;
        top:50% !important;
        bottom:auto !important;
        width:clamp(98px,calc(50% - var(--aura-wrap-width) / 2 - 32px),310px) !important;
        max-width:none !important;
        box-sizing:border-box !important;
        transform:translateY(-50%) !important;
    }

    /* Giữ tên và mô tả dịch vụ gọn trong cột phải */
    .aura-work[data-aura-app="1"][data-layout="vertical"] .aura-service-current{
        margin-bottom:clamp(10px,1.8vw,22px) !important;
    }

    .aura-work[data-aura-app="1"][data-layout="vertical"] .aura-info-title{
        font-size:clamp(12px,1.3vw,16px) !important;
        line-height:1.25 !important;
        overflow-wrap:break-word;
    }

    .aura-work[data-aura-app="1"][data-layout="vertical"] .aura-info-description{
        max-width:100% !important;
        font-size:clamp(9.5px,1.05vw,11px) !important;
        line-height:1.4 !important;
        overflow-wrap:break-word;
    }

    .aura-work[data-aura-app="1"][data-layout="vertical"] .aura-info-more{
        max-width:100% !important;
        gap:clamp(5px,1vw,15px) !important;
        font-size:clamp(9px,.85vw,10px) !important;
    }
}


/* Căn hai cột nội dung ở cửa sổ tablet ngang khoảng 1100–1359px */
@media (min-width:1100px) and (max-width:1359px) and (min-height:650px) and (min-aspect-ratio:3/2) and (max-aspect-ratio:9/5) {
    /* Chỉ chỉnh menu dịch vụ bên trái */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav {
        left:clamp(30px,5vw,62px) !important;
        right:auto !important;
        width:clamp(170px,calc((100vw - 800px) / 2),240px) !important;
        max-width:none !important;
        top:50% !important;
        bottom:auto !important;
        transform:translateY(-50%) !important;
        box-sizing:border-box !important;
    }

    /* Giới hạn chữ của menu trong cột trái */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-link {
        max-width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        overflow-wrap:break-word !important;
        font-size:clamp(11px,1vw,13px) !important;
        line-height:1.3 !important;
    }

    /* Đặt mô tả dịch vụ vào vùng trống bên phải elip */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info {
        left:auto !important;
        right:clamp(18px,2vw,26px) !important;
        width:clamp(170px,calc((100vw - 760px) / 2),240px) !important;
        max-width:none !important;
        top:50% !important;
        bottom:auto !important;
        transform:translateY(-50%) !important;
        box-sizing:border-box !important;
    }

    /* Căn phần chỉ số của dịch vụ */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-current {
        margin-bottom:clamp(10px,1.5vw,18px) !important;
        width:100% !important;
    }

    /* Giữ tên và mô tả nằm trong cột phải */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-title {
        max-width:100% !important;
        font-size:clamp(14px,1.2vw,16px) !important;
        line-height:1.3 !important;
        overflow-wrap:break-word !important;
    }

    /* Mô tả dịch vụ không tràn vào elip */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-description {
        max-width:100% !important;
        font-size:clamp(11px,0.98vw,13px) !important;
        line-height:1.45 !important;
        overflow-wrap:break-word !important;
    }
}


/* Cân đối elip riêng ở cửa sổ desktop trung bình, tự trở về kích thước gốc trước 1650px */
@media (min-width:1360px) and (max-width:1649px) and (min-height:650px) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) {
        --aura-wrap-width:calc(
            clamp(560px, 42vw, 790px) -
            min(
                clamp(0px, calc((100vw - 1360px) * .9), 80px),
                clamp(0px, calc((1650px - 100vw) * .4), 80px)
            )
        );
    }
}

/* Mở rộng và dịch vùng mô tả sang trái, không đè vào quỹ đạo elip */
@media (min-width:1360px) and (max-width:1649px) and (min-height:650px) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info {
        left:auto !important;
        right:clamp(24px, 2.1vw, 36px) !important;
        width:clamp(320px, 24vw, 385px) !important;
        max-width:none !important;
        top:50% !important;
        bottom:auto !important;
        box-sizing:border-box !important;
        transform:translateY(-50%) !important;
    }

    /* Giữ chữ mô tả dễ đọc, tận dụng chiều rộng cột mới */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-title {
        max-width:100% !important;
        font-size:clamp(16px, 1.17vw, 18px) !important;
        line-height:1.25 !important;
    }

    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-info-description {
        max-width:100% !important;
        font-size:clamp(11.5px, .88vw, 13px) !important;
        line-height:1.45 !important;
    }
}

/* Cân đối elip và khoảng lề riêng cho màn hình desktop 1201–1359px */
@media (min-width:1201px) and (max-width:1359px) and (min-height:650px) {
    /* Giảm elip nhiều nhất khoảng 12.5% tại 1275–1290px, tự trở về kích thước cũ ở hai đầu breakpoint */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) {
        --aura-wrap-width:calc(
            clamp(560px,42vw,790px) -
            min(
                clamp(0px,calc((100vw - 1200px) * .9),70px),
                clamp(0px,calc((1360px - 100vw) * .9),70px)
            )
        );
    }

    /* Tạo khoảng lề thoáng hơn cho danh sách dịch vụ */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-nav {
        left:clamp(46px,4.6vw,64px) !important;
    }

    /* Tạo khoảng lề cân đối cho phần mô tả bên phải */
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-service-info {
        right:clamp(46px,4.6vw,64px) !important;
    }
}

/* Nút Quay lại cố định ở góc dưới trái khung Dịch vụ trên desktop */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-detail-left > .aura-detail-back {
        position:absolute !important;
        top:auto !important;
        right:auto !important;
        bottom:28px !important;
        left:28px !important;
        margin:0 !important;
        z-index:50 !important;
        pointer-events:auto !important;
    }

    /* Vùng bấm và focus không thay đổi thiết kế */
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-detail-left > .aura-detail-back::after {
        content:"";
        position:absolute;
        inset:-14px -18px;
        background:transparent;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-detail-left > .aura-detail-back:focus-visible {
        outline:1px solid currentColor;
        outline-offset:5px;
    }
}

/* Khôi phục nét elip mờ phía trước ảnh ở màn hình rộng */
@media (min-width:1600px) and (min-height:650px) {
    .aura-work:not(.is-phone-landscape-desktop):is(.is-detail, .is-detail-entering, .is-detail-leaving, .is-detail-returning) .aura-detail-orbit-front img {
        opacity:.55 !important;
    }
}
/* Giữ elip liền nét qua mép ảnh ở trang chi tiết màn hình rộng */
@media (min-width:1600px) and (min-height:650px) {
    .aura-work:not(.is-phone-landscape-desktop):is(.is-detail, .is-detail-entering, .is-detail-leaving, .is-detail-returning, .is-detail-return-prep) .aura-detail-orbit-front {
        clip-path: inset(var(--aura-wrap-front-cut) 0 0 0) !important;
        -webkit-clip-path: inset(var(--aura-wrap-front-cut) 0 0 0) !important;
    }
}


/* Giữ tỷ lệ gốc cho ảnh dịch vụ và căn giữa quỹ đạo */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card {
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        max-width:var(--aura-photo-width-limit, 100vw) !important;
        aspect-ratio:var(--aura-photo-ratio, 178 / 220) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual {
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:hidden !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card-visual img {
        display:block !important;
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        transform:none !important;
    }
}

/* Gallery chi tiết: chiều cao thay đổi theo tỷ lệ ảnh, tâm vẫn tại điểm neo elip */
.aura-work[data-aura-app="1"] .aura-detail-media:not(.is-empty) {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    max-width:var(--aura-photo-width-limit, 100vw) !important;
    aspect-ratio:var(--media-aspect, 178 / 220) !important;
    transform-origin:50% 50% !important;
}

.aura-work[data-aura-app="1"] .aura-detail-media:not(.is-empty) img,
.aura-work[data-aura-app="1"] .aura-detail-media:not(.is-empty) picture img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}

/* Điện thoại dùng chiều cao tự nhiên, không ép ảnh vào khung cũ */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work[data-aura-app="1"] .aura-detail-media:not(.is-empty) {
        max-width:min(78vw, var(--aura-photo-width-limit, 78vw)) !important;
        height:auto !important;
        aspect-ratio:var(--media-aspect, 178 / 220) !important;
    }
}

/* Ảnh phụ mobile dùng tỷ lệ gốc và giữ khoảng cách an toàn với ảnh chính */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work[data-aura-app="1"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card {
        height:auto !important;
        max-height:none !important;
        max-width:var(--aura-photo-width-limit, 100vw) !important;
        aspect-ratio:var(--aura-photo-ratio, 178 / 220) !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card .aura-card-visual {
        position:relative !important;
        inset:auto !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        aspect-ratio:var(--aura-photo-ratio, 178 / 220) !important;
        overflow:hidden !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card .aura-card-visual img {
        position:relative !important;
        width:100% !important;
        height:auto !important;
        max-width:100% !important;
        max-height:none !important;
        object-fit:contain !important;
        object-position:center center !important;
        transform:none !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card[data-aura-delta="1"] {
        --y:var(--aura-photo-mobile-next-y, 238px) !important;
    }
}


/* Bo góc ảnh chính mà không đổi tỷ lệ hoặc vị trí trên elip */
.aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-card.is-active .aura-card-visual {
    border-radius:14px !important;
    overflow:hidden !important;
}

/* Giữ ảnh thật khớp góc bo của khung hiển thị */
.aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-card.is-active .aura-card-visual img {
    border-radius:inherit !important;
}

/* Đồng bộ bo góc cho ảnh trên trang chi tiết */
.aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-detail-media:not(.is-empty) {
    border-radius:14px !important;
    overflow:hidden !important;
}

.aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-detail-media:not(.is-empty) img {
    border-radius:inherit !important;
}

/* Giữ đúng tỷ lệ ảnh riêng của từng dịch vụ cả khi slider kinetic đang chạy */
@media (min-width:768px) and (min-height:601px) {
    .aura-work.is-index-kinetic.aura-index-native-resolution[data-aura-app="1"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card {
        height:auto !important;
        aspect-ratio:var(--aura-photo-ratio,178 / 220) !important;
        transform-origin:50% 50% !important;
    }
}

/* Giữ tỷ lệ ảnh dịch vụ trong toàn bộ lượt quay về từ trang chi tiết */
@media (min-width:768px) and (min-height:601px) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is(.is-detail-return-prep.is-detail-rail-return, .is-detail-return-swap-ready) .aura-card {
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        max-width:var(--aura-photo-width-limit,100vw) !important;
        aspect-ratio:var(--aura-photo-ratio,178 / 220) !important;
        transform-origin:50% 50% !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is(.is-detail-return-prep.is-detail-rail-return, .is-detail-return-swap-ready) .aura-card-visual {
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:hidden !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is(.is-detail-return-prep.is-detail-rail-return, .is-detail-return-swap-ready) .aura-card-visual img {
        display:block !important;
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
        object-position:50% 50% !important;
        transform:none !important;
    }

    /* Dùng cùng kích thước và hệ số scale của ảnh trang danh sách khi bàn giao */
    .aura-work.aura-index-native-resolution[data-aura-app="1"]:not(.is-phone-landscape-desktop):is(.is-detail-return-prep.is-detail-rail-return, .is-detail-return-swap-ready) .aura-card {
        width:var(--aura-native-full-width,178px) !important;
        transform:
            translate3d(-50%,-50%,0)
            translate3d(var(--x,0px),calc(var(--y,0px) + var(--aura-return-rail-y,0px)),0)
            scale(var(--aura-native-motion-scale,1)) !important;
    }
}


/* Đồng bộ elip khi chuyển giữa Dịch vụ và Chi tiết */
@media (min-width:768px) {
    /* Detail phải có cùng scale với elip index ở trạng thái kinetic. */
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is(
        .is-detail, .is-detail-entering, .is-detail-leaving,
        .is-detail-return-prep, .is-detail-returning,
        .is-detail-return-opening, .is-detail-return-swap-ready
    ) {
        --aura-wrap-scale-open:var(--aura-wrap-scale-switch) !important;
    }

    /* Cùng một hình học đã đo ở index cho cả hai bộ SVG và chấm elip. */
    html body .aura-work[data-aura-app="1"].aura-shared-orbit:not(.is-phone-landscape-desktop) .aura-stage > .aura-orbit-wrap,
    html body .aura-work[data-aura-app="1"].aura-shared-orbit:not(.is-phone-landscape-desktop) .aura-stage > .aura-orbit-node-layer,
    html body .aura-work[data-aura-app="1"].aura-shared-orbit:not(.is-phone-landscape-desktop) .aura-detail-orbit,
    html body .aura-work[data-aura-app="1"].aura-shared-orbit:not(.is-phone-landscape-desktop) .aura-detail-orbit-node-layer {
        position:fixed !important;
        left:var(--aura-shared-orbit-x) !important;
        top:var(--aura-shared-orbit-y) !important;
        width:var(--aura-shared-orbit-width) !important;
        height:var(--aura-shared-orbit-height) !important;
        transform:translate3d(-50%,-50%,0) !important;
        transform-origin:center center !important;
        transition-property:opacity !important;
        animation:none !important;
    }
}

/* Kích thước responsive index cần được bảo toàn ở chi tiết khi chưa có số đo chuyển trang. */
@media (min-width:1360px) and (max-width:1649px) and (min-height:650px) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):is(
        .is-detail, .is-detail-entering, .is-detail-return-prep,
        .is-detail-returning, .is-detail-leaving
    ) {
        --aura-wrap-width:calc(
            clamp(560px,42vw,790px) -
            min(
                clamp(0px,calc((100vw - 1360px) * .9),80px),
                clamp(0px,calc((1650px - 100vw) * .4),80px)
            )
        );
    }
}

@media (min-width:1201px) and (max-width:1359px) and (min-height:650px) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):is(
        .is-detail, .is-detail-entering, .is-detail-return-prep,
        .is-detail-returning, .is-detail-leaving
    ) {
        --aura-wrap-width:calc(
            clamp(560px,42vw,790px) -
            min(
                clamp(0px,calc((100vw - 1200px) * .9),70px),
                clamp(0px,calc((1360px - 100vw) * .9),70px)
            )
        );
    }
}

/* Elip lien mach: chia hai lop theo truc nghiêng, khong cat hai dau */
html body .aura-work[data-aura-app="1"] .aura-orbit-wrap-front,
html body .aura-work[data-aura-app="1"]:is(
    .is-detail, .is-detail-entering, .is-detail-leaving,
    .is-detail-returning, .is-detail-return-prep, .is-detail-return-opening,
    .is-detail-return-swap-ready
) .aura-detail-orbit-front,
html body .aura-work[data-aura-app="1"]:not(.is-detail):not(.is-detail-entering) .aura-detail-orbit-front {
    clip-path: polygon(0 70%, 100% 23%, 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 70%, 100% 23%, 100% 100%, 0 100%) !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Elip đè lên ảnh mờ nhẹ; elip phía sau giữ nguyên màu xanh */
.aura-work[data-aura-app="1"] .aura-orbit-wrap-front > img,
.aura-work[data-aura-app="1"] .aura-detail-orbit-front > img {
    opacity: .55 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Lớp đảo màu pixel chỉ hiển thị trên nét elip nằm trong ảnh */
.aura-orbit-pixel-invert-overlay,
.aura-orbit-node-pixel-invert-overlay {
    position:fixed !important;
    z-index:2147482000 !important;
    overflow:hidden !important;
    display:block !important;
    pointer-events:none !important;
    user-select:none !important;
    background:transparent !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-mode:alpha !important;
}

/* Đảo màu chính ảnh bên dưới như hiệu ứng elip Đối tác */
.aura-orbit-pixel-invert-overlay > img,
.aura-orbit-node-pixel-invert-overlay > img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:inherit !important;
    filter:invert(1) !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:none !important;
}

/* Chấm chạy trên elip chỉ đảo màu trong phần FRONT giao với ảnh */
.aura-orbit-node-pixel-invert-overlay {
    z-index:2147482001 !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
}

/* Căn menu theo viewport tại desktop tỷ lệ rộng, không đổi các chế độ khác */
@media (min-width:1360px) and (max-width:1999px) and (min-height:650px) and (max-height:1050px) and (min-aspect-ratio:39/20) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav {
        left:clamp(34px,2.4vw,46px) !important;
        right:auto !important;
    }
}


/* Mở rộng menu trái về phía elip trên desktop ngang, giữ nguyên lề trái */
@media (min-width:1650px) and (max-width:1999px) and (min-height:720px) and (max-height:1050px) and (min-aspect-ratio:39/20) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav {
        width:clamp(420px,26.2vw,485px) !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }

    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav .aura-service-link {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
    }
}


/* 17.24: Menu desktop trải đủ một dòng, không dịch elip hoặc nội dung phải */
@media (min-width:1650px) and (max-width:1999px) and (min-height:720px) and (max-height:1050px) and (min-aspect-ratio:39/20) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav {
        width:clamp(500px,28vw,545px) !important;
        min-width:0 !important;
        max-width:none !important;
        overflow:visible !important;
    }
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav .aura-service-link {
        display:flex !important;
        flex:0 0 auto !important;
        width:max-content !important;
        max-width:none !important;
        min-width:0 !important;
        white-space:nowrap !important;
    }
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav .aura-service-link > span:last-child {
        display:block !important;
        flex:0 0 auto !important;
        width:max-content !important;
        max-width:none !important;
        white-space:nowrap !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }
}

/* 17.24: Ảnh phụ mobile Dịch vụ giữ tỷ lệ gốc và lớn hơn vừa phải */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-prep):not(.is-detail-return-swap-ready) .aura-card[data-aura-delta="1"] {
        width:clamp(140px,34vw,168px) !important;
        height:auto !important;
        max-height:none !important;
        aspect-ratio:var(--aura-photo-ratio,178 / 220) !important;
        border-radius:12px !important;
        --opacity:.29 !important;
    }
}

/* Menu trái một dòng theo viewport thực trên desktop */
@media (min-width:1450px) and (max-width:1999px) and (min-height:690px) and (orientation:landscape) {
  .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav {
    width:min(540px,calc(50vw - 72px)) !important;
    min-width:470px !important;
    max-width:none !important;
    overflow:visible !important;
  }
  .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav .aura-service-link,
  .aura-work[data-aura-app="1"][data-layout="vertical"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-service-nav .aura-service-link > span:last-child {
    display:flex !important;
    flex:0 0 auto !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

/* Mobile dùng một hệ tọa độ và một bộ nội suy cho Dịch vụ/Chi tiết */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work.aura-mobile-unified-rail[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-prep):not(.is-detail-return-opening) .aura-card {
        left:50% !important;
        top:50% !important;
        width:min(50vw,190px) !important;
        height:auto !important;
        max-height:none !important;
        min-height:0 !important;
        aspect-ratio:var(--aura-photo-ratio,178 / 220) !important;
        opacity:var(--aura-unified-opacity,0) !important;
        visibility:visible !important;
        background:transparent !important;
        filter:grayscale(var(--aura-unified-gray,0%)) !important;
        transform:translate3d(-50%,-50%,0)
                  translate3d(0,calc(var(--aura-wrap-shift-y,0px) + var(--aura-unified-y,0px)),0)
                  scale(var(--aura-unified-scale,1)) !important;
        transition:none !important;
        will-change:transform,opacity;
    }
    .aura-work.aura-mobile-unified-rail[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-prep):not(.is-detail-return-opening) .aura-card .aura-card-visual,
    .aura-work.aura-mobile-unified-rail[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-prep):not(.is-detail-return-opening) .aura-card img {
        border-radius:12px !important;
        background:transparent !important;
    }
    .aura-work.aura-mobile-unified-rail:is(.is-detail,.is-detail-entering) .aura-detail-gallery,
    .aura-work.aura-mobile-unified-rail:is(.is-detail,.is-detail-entering) .aura-detail-gallery-rail {
        overflow:visible !important;
        visibility:visible !important;
        background:transparent !important;
    }
    .aura-work.aura-mobile-unified-rail:is(.is-detail,.is-detail-entering) .aura-detail-media:not(.is-empty) {
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:min(50vw,190px) !important;
        min-height:0 !important;
        max-height:none !important;
        height:auto !important;
        aspect-ratio:var(--media-aspect,178 / 220) !important;
        opacity:var(--aura-unified-opacity,0) !important;
        visibility:visible !important;
        pointer-events:none !important;
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
        filter:grayscale(var(--aura-unified-gray,0%)) !important;
        transform:translate3d(-50%,-50%,0)
                  translate3d(0,calc(var(--aura-wrap-shift-y,0px) + var(--aura-unified-y,0px)),0)
                  scale(var(--aura-unified-scale,1)) !important;
        transition:none !important;
        animation:none !important;
        will-change:transform,opacity;
    }
    .aura-work.aura-mobile-unified-rail:is(.is-detail,.is-detail-entering) .aura-detail-media:not(.is-empty)::before,
    .aura-work.aura-mobile-unified-rail:is(.is-detail,.is-detail-entering) .aura-detail-media:not(.is-empty)::after {
        content:none !important;
    }
    .aura-work.aura-mobile-unified-rail:is(.is-detail,.is-detail-entering) .aura-detail-media:not(.is-empty) img {
        width:100% !important;
        height:100% !important;
        display:block !important;
        object-fit:contain !important;
        filter:none !important;
    }
}

/* v17.30: prevent the old Detail gallery painting over the committed Service index */
@media (max-width:767px) and (orientation:portrait) {
  .aura-work.aura-mobile-index-committed .aura-detail-view,
  .aura-work.aura-mobile-index-committed .aura-detail-gallery,
  .aura-work.aura-mobile-index-committed .aura-detail-orbit-back,
  .aura-work.aura-mobile-index-committed .aura-detail-orbit-front {
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:none !important;
    animation:none !important;
  }
}
/* v17.30: image viewer always floats above the plugin and keeps native aspect */
.aura-photo-lightbox {
  position:fixed; inset:0; z-index:2147483000; background:rgba(7,12,21,.96);
  color:white; display:flex; flex-direction:column; font-family:inherit;
  touch-action:pan-x pan-y; overscroll-behavior:contain;
}
.aura-photo-lightbox__top,.aura-photo-lightbox__bottom {
  flex:none; min-height:62px; display:flex; align-items:center; justify-content:center;
  gap:12px; padding:10px 16px; background:rgba(12,19,33,.92);
}
.aura-photo-lightbox__top { justify-content:flex-end; }
.aura-photo-lightbox__counter { margin-right:auto; font-variant-numeric:tabular-nums; }
.aura-photo-lightbox__original { color:#fff !important; text-decoration:underline !important; font-size:13px; }
.aura-photo-lightbox button { background:#1b2b43 !important; color:#fff !important; border:1px solid #607391 !important;
  width:44px; height:40px; padding:0 !important; border-radius:8px; cursor:pointer;
  font-size:20px; box-shadow:none !important; margin:0 !important; }
.aura-photo-lightbox__close {font-size:29px !important;}
.aura-photo-lightbox__stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:transparent; touch-action:none; }
.aura-photo-lightbox__image { display:block; max-width:96vw; max-height:calc(100dvh - 140px); width:auto; height:auto;
  min-width:0; min-height:0; object-fit:contain !important; border-radius:0 !important; box-shadow:none !important;
  filter:none !important; transition:none !important; transform-origin:center center; user-select:none; }
.aura-photo-lightbox__bottom button { font-size:22px; }
.aura-work.aura-detail-lightbox-open .aura-photo-lightbox { visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
@media(max-width:480px) {
  .aura-photo-lightbox__top {gap:8px;padding:8px;min-height:50px;}
  .aura-photo-lightbox__top .aura-photo-lightbox__zoom-label {font-size:12px;}
  .aura-photo-lightbox__stage { flex:1; }
  .aura-photo-lightbox__image {max-width:100vw;max-height:calc(100dvh - 120px);}
  .aura-photo-lightbox__bottom {min-height:55px;gap:8px;padding:6px;}
}

/* 17.31: mobile active preview stays tappable with fractional delta values */
@media (max-width:767px) and (orientation:portrait) {
  .aura-work.aura-mobile-unified-rail[data-layout="vertical"]:not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-return-prep):not(.is-detail-returning) .aura-card.is-active {
    pointer-events:auto !important;
    cursor:pointer !important;
  }
  /* Only the active outgoing Detail image survives while Service rail enters. */
  .aura-work.aura-reverse-single-owner .aura-detail-media:not(.is-gallery-active) {
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .aura-work.aura-reverse-single-owner .aura-detail-gallery {
    pointer-events:none !important;
  }
}

/* v17.32: Mobile Detail/Index actor handoff – one opaque source at a time. */
@media (max-width:767px) and (orientation:portrait) {
    /* Remove old placeholder canvases; only actual images and the SVG orbit paint. */
    .aura-work[data-aura-app="1"] .aura-detail-gallery,
    .aura-work[data-aura-app="1"] .aura-detail-gallery-rail,
    .aura-work[data-aura-app="1"] .aura-detail-media,
    .aura-work[data-aura-app="1"] .aura-detail-media.is-empty,
    .aura-work[data-aura-app="1"] .aura-detail-crossfade,
    .aura-work[data-aura-app="1"] .aura-stage > .aura-orbit-wrap,
    .aura-work[data-aura-app="1"] .aura-detail-orbit {
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
    }
    .aura-work[data-aura-app="1"] .aura-detail-media::before,
    .aura-work[data-aura-app="1"] .aura-detail-media::after {
        content:none !important;
        background:none !important;
    }
    /* Returning uses the SAME rail CSS variables as the stable Service state. */
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded[data-layout="vertical"] .aura-card {
        left:50% !important;
        top:50% !important;
        width:min(50vw,190px) !important;
        min-height:0 !important;
        max-height:none !important;
        height:auto !important;
        aspect-ratio:var(--aura-photo-ratio,178 / 220) !important;
        opacity:var(--aura-unified-opacity,0) !important;
        visibility:visible !important;
        background:transparent !important;
        filter:grayscale(var(--aura-unified-gray,0%)) !important;
        transform:translate3d(-50%,-50%,0)
                  translate3d(0,calc(var(--aura-wrap-shift-y,0px) + var(--aura-unified-y,0px)),0)
                  scale(var(--aura-unified-scale,1)) !important;
        transition:none !important;
        animation:none !important;
    }
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded[data-layout="vertical"] .aura-card .aura-card-visual,
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded[data-layout="vertical"] .aura-card .aura-card-visual img {
        background:transparent !important;
        border-radius:12px !important;
    }
    /* No old square/canvas may become visible between Service and Detail. */
    .aura-work.is-detail-entering .aura-detail-gallery,
    .aura-work.is-detail .aura-detail-gallery,
    .aura-work.is-detail-return-prep .aura-detail-gallery {
        background-color:transparent !important;
    }
}

/* 17.33: Giữ thứ tự lớp BACK < IMAGE < FRONT trong suốt lượt Quay lại trên mobile. */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded .aura-stage > .aura-orbit-wrap-back,
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-commit .aura-stage > .aura-orbit-wrap-back {
        z-index:8 !important;
    }
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded .aura-stage > .aura-cards,
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-commit .aura-stage > .aura-cards {
        z-index:12 !important;
    }
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded .aura-stage > .aura-orbit-wrap-front,
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-commit .aura-stage > .aura-orbit-wrap-front {
        z-index:16 !important;
    }
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-threaded .aura-stage > .aura-orbit-node-layer,
    .aura-work.aura-mobile-unified-rail.is-mobile-reverse-commit .aura-stage > .aura-orbit-node-layer {
        z-index:17 !important;
    }
}

/* Direct desktop Detail load: one immutable anchor for the gallery and ellipse. */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"].is-detail.is-detail-ready.aura-direct-detail-ready .aura-detail-media {
        left:var(--aura-detail-anchor-x,50vw) !important;
        top:var(--aura-detail-anchor-y,50dvh) !important;
    }
}

/* Direct URL Detail must render in its final place without inherited index transitions. */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"].aura-direct-detail-ready .aura-detail-gallery,
    .aura-work[data-aura-app="1"].aura-direct-detail-ready .aura-detail-view,
    .aura-work[data-aura-app="1"].aura-direct-detail-ready .aura-detail-media {
        transition:none !important;
    }
}

/* Ảnh chính desktop được tính theo kích thước thật của vòng elip. */
@media (min-width:1280px) and (min-height:650px) {
    .aura-work.is-index-kinetic.aura-index-native-resolution[data-aura-app="1"]:not(.is-phone-landscape-desktop):not(.is-detail):not(.is-detail-entering):not(.is-detail-leaving):not(.is-detail-returning):not(.is-detail-return-opening) .aura-card {
        max-width:none !important;
        min-width:0 !important;
    }
}


/* Nút Quay lại theo sát khối tiêu đề ở desktop và mobile ngang. */
.aura-work[data-aura-app="1"] .aura-detail-title-block > .aura-detail-back {
    position:absolute !important;
    top:calc(100% + clamp(15px,2.4vh,25px)) !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    display:inline-block !important;
    margin:0 !important;
    z-index:50 !important;
    pointer-events:auto !important;
}

/* Mobile dọc: nút Quay lại nằm dưới phần mô tả và liên kết dịch vụ. */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work[data-aura-app="1"] .aura-detail-copy-block > .aura-detail-back {
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        display:table !important;
        margin:clamp(16px,2.8vh,24px) 0 0 !important;
        z-index:50 !important;
        pointer-events:auto !important;
    }
}

/* Mobile ngang: giữ khoảng cách vừa đủ trên màn hình thấp. */
.aura-work[data-aura-app="1"].is-phone-landscape-desktop .aura-detail-title-block > .aura-detail-back {
    top:calc(100% + 10px) !important;
}

/* Menu dịch vụ dạng cột: khoảng cách giữa các khối chữ luôn bằng nhau. */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is([data-layout="vertical"],[data-layout="grid"]) .aura-service-nav {
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:flex-start !important;
        row-gap:clamp(16px,2.4vh,24px) !important;
        height:auto !important;
        min-height:0 !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is([data-layout="vertical"],[data-layout="grid"]) .aura-service-nav > .aura-service-link {
        display:flex !important;
        flex:0 0 auto !important;
        align-items:flex-start !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 !important;
    }

    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is([data-layout="vertical"],[data-layout="grid"]) .aura-service-nav > .aura-service-link > span:last-child {
        line-height:inherit !important;
        margin:0 !important;
        padding:0 !important;
    }
}


/* Mobile Detail: loại bỏ lớp ảnh danh sách còn lưu phía sau ảnh chính */
@media (max-width:767px) and (orientation:portrait){
  .aura-work[data-aura-app="1"].is-detail.is-detail-ready:not(.is-detail-entering):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-stage > .aura-cards,
  .aura-work[data-aura-app="1"].is-detail.is-detail-ready:not(.is-detail-entering):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-stage > .aura-cards .aura-card{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Chỉ ảnh gallery và SVG elip mới được vẽ trong màn hình chi tiết */
  .aura-work[data-aura-app="1"].is-detail .aura-stage,
  .aura-work[data-aura-app="1"].is-detail .aura-detail-view,
  .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery,
  .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery-rail,
  .aura-work[data-aura-app="1"].is-detail .aura-detail-media:not(.is-empty){
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  /* Khung crossfade cũ không còn hiển thị sau khi màn chi tiết đã ổn định */
  .aura-work[data-aura-app="1"].is-detail.is-detail-ready:not(.is-detail-entering):not(.is-detail-return-prep):not(.is-detail-returning) .aura-detail-crossfade{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* v17.46: Mobile Detail chỉ giữ gallery thật sau khi chuyển qua Về AURASIGN. */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work[data-aura-app="1"].is-detail.is-detail-ready:not(.is-detail-entering):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-leaving):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-stage > .aura-cards,
    .aura-work[data-aura-app="1"].is-detail.is-detail-ready:not(.is-detail-entering):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-leaving):not(.is-detail-return-opening):not(.is-detail-return-swap-ready) .aura-stage > .aura-cards .aura-card {
        display:none !important;
    }

    .aura-work[data-aura-app="1"].is-detail.is-detail-ready:not(.is-detail-entering):not(.is-detail-return-prep):not(.is-detail-returning):not(.is-detail-leaving) .aura-detail-crossfade {
        display:none !important;
    }

    .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery,
    .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery-rail,
    .aura-work[data-aura-app="1"].is-detail .aura-detail-media,
    .aura-work[data-aura-app="1"].is-detail .aura-detail-view,
    .aura-work[data-aura-app="1"].is-detail .aura-stage {
        background-color:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery::before,
    .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery::after,
    .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery-rail::before,
    .aura-work[data-aura-app="1"].is-detail .aura-detail-gallery-rail::after {
        content:none !important;
    }
}

/* V49: Canvas tương phản không sử dụng CSS mask dễ lỗi sau PJAX. */
.aura-orbit-pixel-invert-overlay .aura-orbit-invert-canvas,
.aura-orbit-node-pixel-invert-overlay .aura-orbit-invert-canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    filter:invert(1) !important;
    -webkit-filter:invert(1) !important;
    pointer-events:none !important;
}

/* V50: nguồn SVG mobile chỉ chứa nét elip, không có lớp nền hoặc handle chéo. */
@media (max-width:767px) and (orientation:portrait) {
    .aura-work[data-aura-app="1"] .aura-stage > .aura-orbit-wrap,
    .aura-work[data-aura-app="1"] .aura-detail-orbit {
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
    }
    .aura-work[data-aura-app="1"] .aura-stage > .aura-orbit-wrap::before,
    .aura-work[data-aura-app="1"] .aura-stage > .aura-orbit-wrap::after,
    .aura-work[data-aura-app="1"] .aura-detail-orbit::before,
    .aura-work[data-aura-app="1"] .aura-detail-orbit::after {
        content:none !important;
    }
    .aura-work[data-aura-app="1"] .aura-stage > .aura-orbit-wrap > img,
    .aura-work[data-aura-app="1"] .aura-detail-orbit > img {
        background:transparent !important;
        background-image:none !important;
        filter:none !important;
    }
}


/* V51: Mobile dùng 2 SVG đã tách sẵn front/back, không cắt lại bằng clip-path để tránh đường chéo xuyên ảnh. */
@media (max-width:767px) and (orientation:portrait) {
    html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-mobile"] .aura-orbit-wrap-front,
    html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-mobile"] .aura-detail-orbit-front,
    html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-mobile"] .aura-orbit-wrap-back,
    html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-mobile"] .aura-detail-orbit-back {
        clip-path:none !important;
        -webkit-clip-path:none !important;
        mask-image:none !important;
        -webkit-mask-image:none !important;
    }
}


/* V52: Hai bản elip cùng màu, nguồn SVG chỉ có nét, không có đường chéo. */
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-orbit-wrap-front,
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-detail-orbit-front,
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-orbit-wrap-back,
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-detail-orbit-back {
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
}

/* Hai lớp có cùng độ đậm để toàn bộ đường elip liền nét. */
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-orbit-wrap-front > img,
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-detail-orbit-front > img,
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-orbit-wrap-back > img,
html body .aura-work[data-aura-app="1"][data-aura-clean-orbit-state="split-all"] .aura-detail-orbit-back > img {
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
}

/* V56: Đồng bộ biến vị trí đang được CSS gốc thực sự sử dụng. */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is([data-layout="vertical"], [data-layout="grid"]) {
        --aura-controls-left:clamp(34px,2.4vw,46px);
        --aura-controls-bottom:calc(clamp(18px,1.75vh,24px) + 30px);
    }
}

/* Giữ khoảng đáy theo cấu hình gốc ở màn hình siêu rộng. */
@media (min-width:2400px) and (min-aspect-ratio:2/1) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is([data-layout="vertical"], [data-layout="grid"]) {
        --aura-controls-bottom:calc(clamp(22px,2.15vh,32px) + 30px);
    }
}
@media (min-width:3600px) and (min-aspect-ratio:2.5/1) {
    .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop):is([data-layout="vertical"], [data-layout="grid"]) {
        --aura-controls-bottom:calc(clamp(24px,2.25vh,36px) + 30px);
    }
}


/* V57: Nút chọn bố cục giữ đúng một vị trí viewport ở Dọc, Ngang và Lưới. */
@media (min-width:768px) {
    html body .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-layout-controls {
        position:fixed !important;
        left:var(--aura-controls-stable-left, clamp(34px, 2.4vw, 46px)) !important;
        right:auto !important;
        top:auto !important;
        bottom:calc(clamp(18px, 1.75vh, 24px) + 30px) !important;
        margin:0 !important;
        translate:none !important;
        transform:none !important;
    }
}

@media (min-width:2400px) and (min-aspect-ratio:2/1) {
    html body .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-layout-controls {
        bottom:calc(clamp(22px, 2.15vh, 32px) + 30px) !important;
    }
}

@media (min-width:3600px) and (min-aspect-ratio:2.5/1) {
    html body .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) .aura-layout-controls {
        bottom:calc(clamp(24px, 2.25vh, 36px) + 30px) !important;
    }
}


/* V58: Phủ kín nền phía dưới khung Dịch vụ trên màn hình siêu rộng. */
@media (min-width:2400px) and (min-aspect-ratio:2/1) {
    html:has(body.aura-service-index-viewport-lock .aura-work[data-aura-app="1"]),
    body.aura-service-index-viewport-lock,
    body.aura-service-index-viewport-lock #wrapper,
    body.aura-service-index-viewport-lock #main,
    body.aura-service-index-viewport-lock #main > .page-wrapper,
    body.aura-service-index-viewport-lock #main .page-main,
    body.aura-service-index-viewport-lock .dichvu-section:has(.aura-work[data-aura-app="1"]),
    body.aura-service-index-viewport-lock .dichvu-section:has(.aura-work[data-aura-app="1"]) > .section-bg,
    body.aura-service-index-viewport-lock .dichvu-section:has(.aura-work[data-aura-app="1"]) > .section-content,
    body.aura-service-index-viewport-lock .aura-work-section:has(.aura-work[data-aura-app="1"]),
    body.aura-service-index-viewport-lock .aura-work-row:has(.aura-work[data-aura-app="1"]),
    body.aura-service-index-viewport-lock .aura-work-row:has(.aura-work[data-aura-app="1"]) > .col,
    body.aura-service-index-viewport-lock .aura-work-row:has(.aura-work[data-aura-app="1"]) > .col > .col-inner {
        background-color:#EAEAEA !important;
    }

    /* Bỏ khoảng đệm Flatsome còn dư bên dưới shortcode. */
    body.aura-service-index-viewport-lock .dichvu-section:has(.aura-work[data-aura-app="1"]),
    body.aura-service-index-viewport-lock .aura-work-section:has(.aura-work[data-aura-app="1"]),
    body.aura-service-index-viewport-lock .aura-work-row:has(.aura-work[data-aura-app="1"]) {
        padding-bottom:0 !important;
        margin-bottom:0 !important;
    }

    /* Không thay đổi chiều cao root do JS tính và không đụng vị trí nút. */
}

/* Khung Chi tiết tải trực tiếp dùng cùng viewport với trang Dịch vụ. */
@media (min-width:768px) and (min-height:650px) {
    .aura-service-shell-main .aura-work[data-aura-app="1"]:not(.is-phone-landscape-desktop) {
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;
        margin:0 !important;
    }
}

/* Khóa elip sau khi đã áp dụng scale mở, không lấy scale nghỉ 0,94. */
@media (min-width:768px) {
    .aura-work[data-aura-app="1"].aura-direct-geometry-prep .aura-orbit-wrap,
    .aura-work[data-aura-app="1"].aura-direct-geometry-prep .aura-orbit-node-layer {
        transition:none !important;
        animation:none !important;
    }
}