/* HumanoSys ERMS operating deck — split-tone editorial first fold. */

.hs-studio-hero--deck{
    --deck-accent:#ff6b5d;
    position:relative;
    min-height:100svh;
    padding:78px 0 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 34%,color-mix(in srgb,var(--deck-accent) 13%,transparent),transparent 30%),
        linear-gradient(135deg,#0c1115 0%,#102127 55%,#0a0e12 100%);
}

/* Light editorial copy field. It starts below the navigation so the header remains dark. */
.hs-studio-hero--deck::after{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    top:76px;
    bottom:0;
    width:45%;
    background:#f2eee5;
    clip-path:polygon(0 0,93% 0,100% 100%,0 100%);
    box-shadow:36px 0 90px rgba(0,0,0,.08);
    pointer-events:none;
}

.hs-studio-hero--deck .hs-container{
    width:min(1540px,calc(100% - 72px));
    max-width:none;
}

.hs-studio-hero--deck .hs-studio-hero__grid{
    position:relative;
    z-index:2;
    min-height:calc(100svh - 78px);
    display:grid;
    grid-template-columns:minmax(360px,.64fr) minmax(680px,1.36fr);
    gap:clamp(28px,3.4vw,58px);
    align-items:center;
}

.hs-studio-hero--deck .hs-studio-copy{
    position:relative;
    z-index:3;
    max-width:520px;
    padding:18px 34px 22px 0;
    transform:none;
}

.hs-studio-hero--deck .hs-studio-kicker{
    color:#77736b;
}
.hs-studio-hero--deck .hs-studio-kicker i{background:#c59300}

.hs-studio-hero--deck .hs-studio-copy h1{
    max-width:520px;
    margin:0;
    color:#171a1f;
    font-size:clamp(3.15rem,4.35vw,5.05rem);
    line-height:.94;
    letter-spacing:-.07em;
}
.hs-studio-hero--deck .hs-studio-copy h1 em{
    display:block;
    color:#b77d00;
    font-style:normal;
}

.hs-studio-hero--deck .hs-studio-copy__lower{
    max-width:480px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(17,20,25,.16);
}
.hs-studio-hero--deck .hs-studio-copy__lower p{
    max-width:455px;
    margin-bottom:24px;
    color:#5e5b55;
    font-size:.9rem;
    line-height:1.62;
}
.hs-studio-hero--deck .hs-studio-proof{display:none}
.hs-studio-hero--deck .hs-link-arrow--light{color:#16191e!important}
.hs-studio-hero--deck .hs-link-arrow--light:hover{color:#8f6500!important}

/* The deck owns most of the right field instead of floating in empty black. */
.hs-ops-deck{
    position:relative;
    min-width:0;
    width:100%;
    height:clamp(610px,73svh,720px);
    display:grid;
    grid-template-rows:44px minmax(0,1fr) 44px;
    border:1px solid rgba(255,255,255,.14);
    background:#0d1116;
    box-shadow:0 44px 120px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.02);
    overflow:hidden;
    isolation:isolate;
}
.hs-ops-deck::before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    border-top:2px solid var(--deck-accent);
    pointer-events:none;
    transition:border-color .45s ease;
}

.hs-ops-deck__bar,.hs-ops-deck__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 16px;
    color:#7c7973;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.hs-ops-deck__bar{border-bottom:1px solid rgba(255,255,255,.08)}
.hs-ops-deck__footer{border-top:1px solid rgba(255,255,255,.08)}
.hs-ops-deck__bar strong{color:var(--deck-accent);font-weight:800;transition:color .45s ease}
.hs-ops-deck__footer span:last-child{color:#98958f}

.hs-ops-deck__panels{
    min-width:0;
    display:flex;
    overflow:hidden;
    background:#0a0c10;
}

.hs-ops-panel{
    --panel-accent:#f4c62f;
    position:relative;
    min-width:0;
    flex:0 0 10%;
    height:100%;
    padding:0;
    border:0;
    border-right:1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 28% 18%,color-mix(in srgb,var(--panel-accent) 16%,transparent),transparent 38%),
        linear-gradient(135deg,#182027,#0d1116 66%);
    color:#fff;
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    transition:flex-basis .72s cubic-bezier(.18,.85,.22,1),filter .35s ease,opacity .35s ease;
    isolation:isolate;
}
.hs-ops-panel:last-child{border-right:0}
.hs-ops-panel.is-active{flex-basis:60%;filter:none}
.hs-ops-panel:not(.is-active){filter:saturate(.4) brightness(.58)}
.hs-ops-panel:not(.is-active):hover{filter:saturate(.72) brightness(.78)}

.hs-ops-panel__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transform:scale(1.045);
    transition:opacity .32s ease,transform 1.15s cubic-bezier(.2,.8,.2,1),filter .45s ease;
    will-change:opacity,transform;
}
.hs-ops-panel.is-image-ready .hs-ops-panel__image{opacity:1}
.hs-ops-panel.is-active .hs-ops-panel__image{
    transform:scale(1);
    filter:saturate(.9) brightness(.8) contrast(1.04);
}

.hs-ops-panel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg,rgba(5,7,10,.18),rgba(5,7,10,.04) 38%,rgba(5,7,10,.92) 100%),
        linear-gradient(90deg,color-mix(in srgb,var(--panel-accent) 22%,transparent),transparent 43%);
}
.hs-ops-panel:not(.is-active)::before{background:linear-gradient(180deg,rgba(6,8,11,.34),rgba(6,8,11,.84))}

.hs-ops-panel::after{
    content:"";
    position:absolute;
    z-index:5;
    left:0;right:0;top:0;
    height:2px;
    transform:scaleX(0);
    transform-origin:left;
    background:var(--panel-accent);
}
.hs-ops-panel.is-active::after{animation:hs-deck-progress 5.6s linear forwards}

.hs-ops-panel__rail{
    position:absolute;
    z-index:4;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    padding:18px 8px 20px;
    pointer-events:none;
    transition:opacity .28s ease;
}
.hs-ops-panel__rail span{color:var(--panel-accent);font-size:.52rem;font-weight:850;letter-spacing:.13em}
.hs-ops-panel__rail strong{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:#f0ede5;
    font-size:.66rem;
    font-weight:760;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.hs-ops-panel.is-active .hs-ops-panel__rail{opacity:0}

.hs-ops-panel__content{
    position:absolute;
    z-index:4;
    left:0;right:0;bottom:0;
    padding:112px 30px 28px;
    background:linear-gradient(transparent,rgba(7,9,12,.95) 58%);
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
    transition:opacity .32s ease .2s,transform .48s cubic-bezier(.2,.8,.2,1) .18s;
}
.hs-ops-panel.is-active .hs-ops-panel__content{opacity:1;transform:none}
.hs-ops-panel__eyebrow{display:flex;align-items:center;gap:10px;color:var(--panel-accent);font-size:.56rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.hs-ops-panel__eyebrow i{width:34px;height:1px;background:currentColor}
.hs-ops-panel__content h3{margin:9px 0 7px;color:#fff;font-size:clamp(1.7rem,2.15vw,2.55rem);line-height:1;letter-spacing:-.045em;font-weight:650}
.hs-ops-panel__content p{max-width:470px;margin:0;color:#b0ada6;font-size:.8rem;line-height:1.52}
.hs-ops-panel__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.hs-ops-panel__tags span{padding:5px 8px;border:1px solid rgba(255,255,255,.13);background:rgba(9,11,14,.5);color:#d3cfc7;font-size:.52rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.hs-ops-deck__corner{
    position:absolute;
    z-index:8;
    right:0;top:44px;
    width:68px;height:68px;
    background:var(--deck-accent);
    clip-path:polygon(100% 0,100% 100%,0 0);
    opacity:.94;
    pointer-events:none;
    transition:background .45s ease;
}

/* The baseline was visually redundant and created another empty strip. */
.hs-studio-hero--deck .hs-studio-baseline{display:none!important}

@keyframes hs-deck-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:1260px){
    .hs-studio-hero--deck .hs-container{width:min(1380px,calc(100% - 48px))}
    .hs-studio-hero--deck .hs-studio-hero__grid{grid-template-columns:minmax(320px,.7fr) minmax(560px,1.3fr);gap:30px}
    .hs-ops-deck{height:clamp(560px,69svh,650px)}
    .hs-ops-panel{flex-basis:9.5%}.hs-ops-panel.is-active{flex-basis:62%}
}

@media(max-width:1000px){
    .hs-studio-hero--deck{
        min-height:auto;
        padding:88px 0 54px;
        background:linear-gradient(#f2eee5 0 42%,#0e171b 42% 100%);
    }
    .hs-studio-hero--deck::after{display:none}
    .hs-studio-hero--deck .hs-container{width:min(900px,calc(100% - 40px))}
    .hs-studio-hero--deck .hs-studio-hero__grid{min-height:auto;grid-template-columns:1fr;gap:42px}
    .hs-studio-hero--deck .hs-studio-copy{max-width:700px;padding-right:0}
    .hs-studio-hero--deck .hs-studio-copy h1{font-size:clamp(2.8rem,8vw,4.45rem)}
    .hs-ops-deck{height:540px}
}

@media(max-width:700px){
    .hs-studio-hero--deck{padding:84px 0 44px;background:linear-gradient(#f2eee5 0 39%,#0e171b 39% 100%)}
    .hs-studio-hero--deck .hs-container{width:calc(100% - 28px)}
    .hs-studio-hero--deck .hs-studio-copy h1{font-size:clamp(2.5rem,12vw,3.65rem)}
    .hs-studio-hero--deck .hs-studio-copy__lower p{font-size:.84rem}
    .hs-ops-deck{height:auto;grid-template-rows:38px auto 38px}
    .hs-ops-deck__panels{display:grid;grid-template-columns:1fr;overflow:visible}
    .hs-ops-panel,.hs-ops-panel.is-active{flex:none;height:68px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);transition:height .58s cubic-bezier(.2,.8,.2,1)}
    .hs-ops-panel.is-active{height:330px}
    .hs-ops-panel__rail{flex-direction:row;align-items:center;padding:0 16px}
    .hs-ops-panel__rail strong{writing-mode:horizontal-tb;transform:none}
    .hs-ops-panel__content{padding:82px 18px 20px}
    .hs-ops-panel__content h3{font-size:1.7rem}
    .hs-ops-deck__corner{top:38px;width:44px;height:44px}
}

@media(max-height:760px) and (min-width:1001px){
    .hs-studio-hero--deck{padding-top:70px}
    .hs-studio-hero--deck::after{top:68px}
    .hs-studio-hero--deck .hs-studio-hero__grid{min-height:calc(100svh - 70px)}
    .hs-ops-deck{height:clamp(500px,72svh,570px)}
    .hs-studio-hero--deck .hs-studio-copy h1{font-size:clamp(2.8rem,3.7vw,4.15rem)}
}

@media(prefers-reduced-motion:reduce){
    .hs-ops-panel,.hs-ops-panel__image,.hs-ops-panel__content{transition:none!important}
    .hs-ops-panel.is-active::after{animation:none;transform:scaleX(1)}
}