/* JB TECHNOLOGIES - Portfolio tunnel (isolated from the rest of the theme) */
.jb-tunnel{--tunnel-navy:#081d3c;--tunnel-blue:#5ca6e8;--tunnel-heading:#fff;position:relative;height:230svh;width:100%;margin:0;isolation:isolate;background:var(--tunnel-navy);color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.jb-tunnel *, .jb-tunnel *::before, .jb-tunnel *::after{box-sizing:border-box}
.jb-tunnel__stage{height:100svh;min-height:520px;position:sticky;top:0;display:grid;place-items:center;overflow:hidden;perspective:1100px;background:radial-gradient(ellipse at 50% 45%,#143967 0%,#091f40 46%,#05132b 100%);transform-style:preserve-3d}
.jb-tunnel__backdrop,.jb-tunnel__plane{position:absolute;inset:0;pointer-events:none}
.jb-tunnel__backdrop{overflow:hidden;background-image:radial-gradient(rgba(193,219,248,.18) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 82% 85% at center,#000 30%,transparent 100%)}
.jb-tunnel__glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(71,144,231,.24),transparent 68%)}
.jb-tunnel__ring{position:absolute;display:block;left:50%;top:50%;border:1px solid rgba(168,205,243,.17);border-radius:50%;transform:translate(-50%,-50%)}
.jb-tunnel__ring--one{width:48vmin;height:48vmin}.jb-tunnel__ring--two{width:78vmin;height:78vmin;border-style:dashed;border-color:rgba(168,205,243,.12)}
.jb-tunnel__anchor{position:relative;z-index:12;display:flex;align-items:center;flex-direction:column;text-align:center;width:min(92%,680px);padding:24px;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.jb-tunnel__eyebrow{font-size:11px;font-weight:700;letter-spacing:.32em;color:#a8d3ff;margin-bottom:19px}
.jb-tunnel__anchor h2{font-family:inherit;font-size:clamp(60px,8.3vw,132px);font-weight:800;letter-spacing:-.082em;line-height:.87;color:#fff;margin:0;text-wrap:balance}
.jb-tunnel__anchor h2 em{font-style:normal;color:#83bef4}
.jb-tunnel__anchor p{font-size:clamp(13px,1.4vw,16px);line-height:1.75;max-width:470px;margin:24px 0 19px;color:#ccdaef;font-weight:400}
.jb-tunnel__skip{display:inline-flex;align-items:center;gap:18px;border:1px solid rgba(188,217,249,.47);background:rgba(12,37,75,.74);color:#fff!important;padding:12px 18px;border-radius:999px;text-decoration:none!important;font-size:12px;font-weight:700;pointer-events:auto;transition:background .2s,border-color .2s,transform .2s}
.jb-tunnel__skip:hover,.jb-tunnel__skip:focus-visible{background:#174c86;border-color:#9acaff;transform:translateY(-2px);outline-offset:3px}
.jb-tunnel__plane{z-index:8;transform-style:preserve-3d}
.jb-tunnel__card{position:absolute;left:50%;top:50%;width:clamp(155px,18vw,275px);aspect-ratio:4/5;transform-style:preserve-3d;transform:translate3d(-50%,-50%,-1500px);opacity:0;will-change:transform,opacity;filter:drop-shadow(0 18px 30px rgba(1,10,25,.36))}
.jb-tunnel__image-wrap{width:100%;height:100%;border-radius:17px;position:relative;overflow:hidden;border:1px solid rgba(221,240,255,.35);background:#1a3153;box-shadow:0 16px 45px rgba(0,0,0,.35)}
.jb-tunnel__card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92);background:linear-gradient(145deg,#193e70,#c1d5ee)}
.jb-tunnel__image-wrap::after{content:"";position:absolute;inset:26% 0 0;background:linear-gradient(transparent 25%,rgba(1,13,36,.88));pointer-events:none}
.jb-tunnel__image-label{position:absolute;z-index:1;bottom:18px;left:15px;right:12px;color:#fff;font-size:10px;font-weight:750;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.jb-tunnel__bottom{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:max(22px,5vw);right:max(22px,5vw);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:22px;pointer-events:none;color:#a8c6e8;font-size:10px;font-weight:750;letter-spacing:.19em}
.jb-tunnel__progress{flex:1;height:1px;max-width:260px;background:rgba(206,225,250,.28);display:block;position:relative}.jb-tunnel__progress span{display:block;background:#8fcbff;width:0%;height:2px;transition:width .05s linear}
.jb-tunnel__down{color:#fff;margin-left:8px;font-size:16px}
.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card{opacity:.75;filter:none}
.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(1){transform:translate3d(calc(-50% - 260px),calc(-50% - 140px),0) rotate(-9deg)}
.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(2){transform:translate3d(calc(-50% + 260px),calc(-50% - 120px),0) rotate(8deg)}
.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(3){transform:translate3d(calc(-50% - 250px),calc(-50% + 160px),0) rotate(8deg)}
.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(4){transform:translate3d(calc(-50% + 260px),calc(-50% + 150px),0) rotate(-7deg)}
.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(n+5){display:none}
@media(max-width:767px){.jb-tunnel{height:188svh}.jb-tunnel__stage{perspective:750px;min-height:430px}.jb-tunnel__anchor h2{font-size:clamp(54px,12vw,84px)}.jb-tunnel__eyebrow{font-size:9px;letter-spacing:.23em}.jb-tunnel__anchor p{font-size:13px;max-width:310px}.jb-tunnel__card{width:clamp(125px,38vw,180px)}.jb-tunnel__bottom{font-size:8px;letter-spacing:.09em;gap:12px}.jb-tunnel__progress{max-width:65px}.jb-tunnel__bottom>span:first-child{max-width:72px}.jb-tunnel__bottom>span:last-child{max-width:91px;text-align:right}.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(1){transform:translate3d(calc(-50% - 84px),calc(-50% - 100px),0) rotate(-9deg)}.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(2){transform:translate3d(calc(-50% + 92px),calc(-50% + 115px),0) rotate(8deg)}.jb-tunnel:not(.jb-tunnel--ready) .jb-tunnel__card:nth-child(n+3){display:none}}
@media(prefers-reduced-motion:reduce){.jb-tunnel{height:auto!important}.jb-tunnel__stage{position:relative!important;top:0!important;min-height:640px;height:auto!important;display:flex;flex-direction:column;gap:18px;padding:80px 20px 72px;perspective:none!important}.jb-tunnel__anchor{transform:none!important;opacity:1!important}.jb-tunnel__anchor h2{font-size:clamp(45px,9vw,90px)}.jb-tunnel__plane{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,780px);gap:12px;transform:none!important}.jb-tunnel__card{position:relative!important;left:auto;top:auto;width:100%;transform:none!important;opacity:1!important;display:block!important;filter:none;will-change:auto}.jb-tunnel__bottom{display:none}.jb-tunnel__image-label{font-size:8px}.jb-tunnel__image-wrap{border-radius:12px}}
@media(max-width:540px) and (prefers-reduced-motion:reduce){.jb-tunnel__plane{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* JB Portfolio light theme update (2026-10-24)
   Only the BEYOND THE FRAME scroll intro is affected.
   Preserve the JS-driven card transforms, sticky scrolling and mobile layout. */
.jb-tunnel {
    --tunnel-navy: #ffffff;
    --tunnel-blue: #2b629f;
    --tunnel-heading: #0a2347;
    background: #ffffff !important;
    color: #0a2347 !important;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.jb-tunnel .jb-tunnel__stage {
    background: #ffffff !important;
    color: #0a2347 !important;
}
.jb-tunnel .jb-tunnel__backdrop {
    background-color: transparent !important;
    background-image: radial-gradient(rgba(26, 66, 112, .105) .8px, transparent 1px) !important;
    background-size: 28px 28px !important;
    opacity: .75;
}
.jb-tunnel .jb-tunnel__glow {
    background: radial-gradient(ellipse at 50% 45%, rgba(226, 239, 253, .84), rgba(247, 250, 255, .38) 44%, transparent 75%) !important;
}
.jb-tunnel .jb-tunnel__ring {
    border-color: rgba(23, 76, 136, .16) !important;
}
.jb-tunnel .jb-tunnel__ring--two {
    border-color: rgba(23, 76, 136, .11) !important;
}
.jb-tunnel .jb-tunnel__eyebrow {
    color: #3265a0 !important;
}
.jb-tunnel .jb-tunnel__anchor h2 {
    color: #0b274b !important;
    text-shadow: none !important;
}
.jb-tunnel .jb-tunnel__anchor h2 em {
    color: #386da9 !important;
}
.jb-tunnel .jb-tunnel__anchor p {
    color: #586e89 !important;
}
.jb-tunnel .jb-tunnel__skip {
    color: #113865 !important;
    border-color: #b8cee8 !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 5px 24px rgba(16, 59, 106, .07);
}
.jb-tunnel .jb-tunnel__skip:hover,
.jb-tunnel .jb-tunnel__skip:focus-visible {
    color: #ffffff !important;
    border-color: #0b315e !important;
    background: #0b315e !important;
}
.jb-tunnel .jb-tunnel__card {
    filter: drop-shadow(0 20px 28px rgba(22, 50, 85, .17));
}
.jb-tunnel .jb-tunnel__image-wrap {
    border-color: #d7e3f0 !important;
    background: #f3f7fc !important;
    box-shadow: 0 16px 40px rgba(14, 44, 82, .16) !important;
}
.jb-tunnel .jb-tunnel__bottom {
    color: #537094 !important;
}
.jb-tunnel .jb-tunnel__progress {
    background: #d4e1ee !important;
}
.jb-tunnel .jb-tunnel__progress span {
    background: #2865aa !important;
}
.jb-tunnel .jb-tunnel__down {
    color: #17457a !important;
}