/* LB HUMAN — work in motion. Original brand symbol, CSS depth, SVG line scenes. */
body.intro-running{overflow:hidden}
.intro-running #main *, .intro-running .site-header *{animation-play-state:paused!important}
.work-intro{display:block;background:#121322;color:#dfe3f0;transition:opacity .55s ease,visibility .55s;isolation:isolate}
.work-intro:before{inset:0;background:radial-gradient(ellipse at 50% 44%,#30215888,transparent 46%),linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:auto,64px 64px,64px 64px;animation:none;z-index:-1}
.intro-topline{position:absolute;left:4.5%;top:37px;display:flex;align-items:center;gap:13px;font-size:9px;letter-spacing:.19em;font-weight:650}
.work-intro #skip-intro{position:absolute;top:25px;right:4.5%;z-index:5;color:#e8e7f2;border:1px solid #ffffff2b;background:#ffffff04;border-radius:99px;padding:12px 17px;font-size:10px;display:flex;align-items:center;gap:25px;transition:background .2s,border-color .2s}
.work-intro #skip-intro:hover{background:#ffffff10;border-color:#57d4dc}
.work-intro #skip-intro:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.work-universe{position:absolute;width:min(1200px,96vw);aspect-ratio:1200/650;left:50%;top:49%;transform:translate(-50%,-50%)}
.work-drawing{width:100%;height:100%;position:absolute;inset:0;stroke:none;stroke-width:2;fill:none;overflow:visible}
.work-drawing .scene{color:#a3a9c3;stroke:currentColor}
.work-drawing .scene-accent{stroke:#57d4dc;opacity:.75}
.work-drawing .scene-detail{stroke:#707a9e}
.work-drawing .scene-cleaning .scene-accent,.work-drawing .clean-spark{stroke:#7ed957}
.draw-line{stroke-dasharray:1;stroke-dashoffset:1;animation:work-draw 1.6s .12s ease-out forwards}
.scene-cleaning .draw-line{animation-delay:.3s}
.scene-logistics .draw-line{animation-delay:.48s}
.scene-office .draw-line{animation-delay:.62s}
.scene .scene-detail{animation-delay:.7s;animation-duration:1.5s}
.work-drawing .connection{stroke:#6b5a9f;stroke-dasharray:1;stroke-dashoffset:1;animation:work-draw 1.1s 1.45s ease-in-out forwards}
.work-drawing .connection-b,.work-drawing .connection-d{stroke:#4c878f;animation-delay:1.65s}
.work-drawing .connection-node{stroke:#57d4dc;fill:#121322;opacity:0;animation:work-appear .5s 2.1s forwards}
.moving-package{animation:package-move 1.4s 1.2s ease-in-out 2}
.worker-arm{transform-box:fill-box;transform-origin:left top;animation:worker-reach 1.1s 1.5s ease-in-out 2}
.mop-stroke{transform-box:fill-box;transform-origin:top left;animation:mop-sweep 1.15s 1.4s ease-in-out 2}
.clean-spark{opacity:0;animation:clean-glint 1.1s 1.6s ease-in-out 2}
.logistics-person{animation:carry-box 1.15s 1.5s ease-in-out 2}
.office-person{transform-box:fill-box;transform-origin:center bottom;animation:desk-work 1.1s 1.6s ease-in-out 2}
.intro-identity{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;width:310px}
.logo-space{position:relative;perspective:900px;aspect-ratio:400/386;width:180px;isolation:isolate}
.logo-solid{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(9deg) rotateY(-18deg) rotateZ(-5deg)}
.logo-layer,.logo-flat{position:absolute;inset:0;display:block;background:url('/lb-human-v2/assets/logo-horizontal.png') left center/454.25% 100% no-repeat;backface-visibility:visible}
.logo-layer{transform:translateZ(var(--depth,0px));filter:brightness(var(--shade,1))}
.logo-layer.logo-front{filter:none}
.logo-flat{transform:rotate(-5deg)}
.intro-logo{width:206px;margin:0 auto 25px;animation:logo-rise .9s var(--ease) both}
.intro-logo .logo-solid{animation:brand-turn 3.6s .05s cubic-bezier(.22,.68,.2,1) both}
.intro-wordmark{font-size:25px;color:white;font-weight:500;letter-spacing:-.06em;animation:wordmark-in .7s .45s both}
.intro-wordmark b{font-weight:780;letter-spacing:.035em;margin-left:4px}
.intro-tagline{font-size:10px;letter-spacing:.025em;color:#aaa8bd;margin-top:12px;animation:wordmark-in .65s .65s both}
.scene-caption{position:absolute;font-size:8px;letter-spacing:.19em;font-weight:600;color:#848ca9;animation:wordmark-in .8s 1.1s both}
.caption-factory{top:53%;left:8%}.caption-cleaning{top:54%;right:10%}.caption-logistics{top:89%;left:14%}.caption-office{top:89%;right:15%}
.intro-bottom{position:absolute;bottom:34px;left:4.5%;right:4.5%;display:grid;grid-template-columns:1fr minmax(130px,250px) 1fr;align-items:center;gap:34px;font-size:8px;letter-spacing:.13em;color:#8188a0}
.intro-bottom>span:last-child{text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:20px}
.intro-counter{color:#57d4dc;font-size:25px}
.work-progress{height:2px;background:#ffffff13;overflow:hidden}
.work-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#5b22e8,#57d4dc,#7ed957);transform-origin:left;animation:work-progress 3.9s cubic-bezier(.3,.1,.2,1) both}
.work-intro.finished .work-universe{opacity:0;transform:translate(-50%,-50%) scale(1.06);transition:transform .55s ease,opacity .4s ease}
/* The application hero uses the real mark instead of a decorative seal. */
.career-art{position:relative;flex:0 0 220px;height:230px;display:flex;align-items:center;justify-content:center;margin-left:15px}
.career-logo{width:150px;margin-top:0}
.career-logo .logo-solid{animation:career-turn 1.8s .15s var(--ease) both,career-float 7.5s 1.95s ease-in-out infinite}
.career-connections{position:absolute;inset:0;width:100%;height:100%;stroke:#5b22e8;stroke-width:1.3;opacity:.27}
.career-connections path{stroke-dasharray:420;stroke-dashoffset:420;animation:career-lines 2s .4s ease forwards}

.application-hero>div:first-child{position:relative;z-index:1;min-width:0}
.application-hero:after{content:'';position:absolute;width:45%;height:200%;top:-50%;left:-70%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);transform:rotate(20deg);pointer-events:none;animation:hero-light 2.1s .35s ease-out both}
.application-hero h1{text-decoration:underline;text-decoration-color:#57d4dc88;text-decoration-thickness:.08em;text-underline-offset:.15em}
/* Text highlights and pointer-responsive illumination. */
.gate-heading h1>span,.hero-copy h1 em,h2 em{background-image:linear-gradient(transparent 75%,#57d4dc80 75%,#57d4dc80 91%,transparent 91%);background-repeat:no-repeat;background-size:100% 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:text-highlight 1.2s .45s var(--ease) both}
.role-card h2 em{background-image:linear-gradient(transparent 80%,#57d4dc32 80%,#57d4dc32 95%,transparent 95%)}
.highlight-surface{--light-x:50%;--light-y:50%;--tilt-x:0deg;--tilt-y:0deg}
.highlight-surface .pointer-light{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(390px circle at var(--light-x) var(--light-y),#57d4dc24,transparent 72%);opacity:0;transition:opacity .35s;z-index:0}
.highlight-surface.is-pointed .pointer-light{opacity:1}
.role-card.highlight-surface.is-pointed{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px)}
.job-card.highlight-surface.is-pointed{border-color:#5b22e85c;box-shadow:inset 3px 0 0 #5b22e8,0 14px 28px #40208a0c}
.role-card .circle-arrow,.button .arrow,.hero-apply .arrow{transition:transform .35s var(--ease),background .35s}
.button:hover .arrow,.hero-apply:hover .arrow{transform:translate(3px,-3px)}
.role-card:focus-visible,.job-card:focus-within{outline:2px solid #5b22e8;outline-offset:4px}
.application-form .form-row:focus-within label{color:#5b22e8}
@keyframes work-draw{to{stroke-dashoffset:0}}
@keyframes work-appear{to{opacity:1}}
@keyframes package-move{0%,100%{transform:translateX(0)}55%{transform:translateX(24px)}}
@keyframes worker-reach{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes mop-sweep{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes clean-glint{0%,100%{opacity:0}40%,65%{opacity:1}}
@keyframes carry-box{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-2px)}}
@keyframes desk-work{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes logo-rise{from{opacity:0;transform:translateY(24px) scale(.75)}to{opacity:1;transform:none}}
@keyframes brand-turn{0%{transform:rotateX(28deg) rotateY(-125deg) rotateZ(-18deg)}44%{transform:rotateX(-12deg) rotateY(25deg) rotateZ(5deg)}72%{transform:rotateX(12deg) rotateY(-23deg) rotateZ(-6deg)}100%{transform:rotateX(7deg) rotateY(-10deg) rotateZ(-3deg)}}
@keyframes career-turn{0%{transform:rotateX(24deg) rotateY(-65deg) rotateZ(-12deg)}55%{transform:rotateX(-8deg) rotateY(22deg) rotateZ(3deg)}100%{transform:rotateX(9deg) rotateY(-18deg) rotateZ(-5deg)}}
@keyframes career-float{0%,100%{transform:translateY(0) rotateX(9deg) rotateY(-18deg) rotateZ(-5deg)}35%{transform:translateY(-6px) rotateX(-7deg) rotateY(18deg) rotateZ(2deg)}70%{transform:translateY(-2px) rotateX(13deg) rotateY(6deg) rotateZ(-2deg)}}
@keyframes wordmark-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes work-progress{0%{transform:scaleX(0)}35%{transform:scaleX(.33)}70%{transform:scaleX(.73)}100%{transform:scaleX(1)}}
@keyframes career-lines{to{stroke-dashoffset:0}}
@keyframes hero-light{to{left:120%}}
@keyframes text-highlight{from{background-size:0 100%}to{background-size:100% 100%}}
@media(max-width:1050px){.career-art{flex-basis:170px;height:190px;margin-left:0}.career-logo{width:118px}.intro-logo{width:175px;margin-bottom:18px}.intro-wordmark{font-size:23px}.intro-identity{top:21%}.intro-tagline{font-size:9px}.intro-bottom{gap:20px;font-size:7px}}
@media(max-width:680px){
 .intro-topline{left:24px;top:30px;font-size:7px;letter-spacing:.12em;gap:8px}.intro-topline .brand-dots{display:none}
 .work-intro #skip-intro{right:20px;top:19px;padding:10px 13px;font-size:8px;gap:12px}
 .work-universe{width:100%;height:470px;aspect-ratio:auto;top:47%}
 .intro-identity{top:7px;width:270px}.intro-logo{width:145px;margin-bottom:20px}.intro-wordmark{font-size:24px}.intro-tagline{font-size:10px;margin-top:11px}
 .work-drawing{width:700px;height:379px;left:50%;top:180px;transform:translateX(-50%)}
 .work-drawing .scene{stroke-width:2.5}.work-drawing .scene-factory{transform:translateX(210px)}.work-drawing .scene-cleaning{transform:translateX(-210px)}
 .scene-logistics,.scene-office,.work-connections,.caption-logistics,.caption-office{display:none}
 .caption-factory{top:388px;left:12%;font-size:7px}.caption-cleaning{top:388px;right:11%;font-size:7px}
 .intro-bottom{bottom:27px;left:24px;right:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:19px;font-size:6px;letter-spacing:.1em}
 .intro-bottom>span:first-child{max-width:180px;line-height:1.6}.intro-bottom>span:last-child{gap:10px}.intro-counter{font-size:19px}.work-progress{order:-1;width:100%;flex:0 0 100%}
 .career-art{display:none}.application-hero:after{animation-duration:1.6s}.application-hero h1{text-decoration-thickness:.07em}
}
@media(max-height:610px) and (min-width:681px){.work-universe{width:min(870px,90vw)}.intro-logo{width:138px;margin-bottom:13px}.intro-wordmark{font-size:20px}.intro-tagline{font-size:8px}.intro-topline{top:24px}.work-intro #skip-intro{top:15px}.intro-bottom{bottom:18px}}
@media(max-height:650px) and (max-width:680px){.work-universe{transform:translate(-50%,-50%) scale(.8);top:46%}.intro-bottom{bottom:17px}.work-intro.finished .work-universe{transform:translate(-50%,-50%) scale(.85)}}
@media(prefers-reduced-motion:reduce){
 .work-intro{display:none!important}body.intro-running{overflow:auto}
 .logo-solid{transform:rotateY(-10deg)}.logo-space *,.career-connections path,.application-hero:after,.gate-heading h1>span,.hero-copy h1 em,h2 em{animation:none!important}
 .career-connections path{stroke-dashoffset:0}.application-hero:after{display:none}.highlight-surface.is-pointed{transform:none!important}.pointer-light{display:none}
 .gate-heading h1>span,.hero-copy h1 em,h2 em{background-size:100% 100%}.button:hover .arrow,.hero-apply:hover .arrow{transform:none}
}

#main[tabindex="-1"]:focus{outline:none}

.highlight-surface{position:relative;isolation:isolate}
/* Refined architectural drawing with brand wordmark. */
.refined-intro{background:#0b1222}
.refined-intro:before{background:radial-gradient(ellipse at 50% 48%,#25284b80,transparent 55%),linear-gradient(#c0dafa03 1px,transparent 1px),linear-gradient(90deg,#c0dafa03 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
.refined-intro .work-universe{width:min(1340px,98vw);aspect-ratio:1200/700;top:49%}
.refined-intro .intro-identity{top:34%;width:270px}
.refined-intro .intro-logo{width:228px;margin:0 auto}
.refined-intro #skip-intro{width:45px;height:45px;display:grid;place-items:center;padding:0;top:28px;right:32px;background:#ffffff02;border-color:#b4d6f023}
.refined-intro #skip-intro svg{width:21px;height:21px;stroke:#adc4db;stroke-width:1.2;fill:none}
.refined-intro #skip-intro:focus-visible{outline:1px solid #57d4dc;outline-offset:4px}
.refined-intro>.work-progress{position:absolute;bottom:39px;width:190px;height:1px;left:50%;transform:translateX(-50%);background:#ffffff0e}
.architectural-work{stroke-linecap:round;stroke-linejoin:round}
.architectural-work .draft-line{fill:none;stroke:#aecbdf;stroke-width:1.15;stroke-dasharray:1;stroke-dashoffset:1;animation:work-draw 1.25s var(--draw-delay,0s) cubic-bezier(.35,.05,.25,1) forwards}
.architectural-work .draft-outline{stroke:#dcecf7;stroke-width:1.55;filter:drop-shadow(0 0 4px #68baf533)}
.architectural-work .draft-structure{stroke:#b9d7eb;stroke-width:1.15}
.architectural-work .draft-person{stroke:#d3e7f2;stroke-width:1.4}
.architectural-work .draft-detail{stroke:#8eb3cc;stroke-width:.85}
.architectural-work .draft-cladding{stroke:#7795b4;stroke-width:.65;opacity:.6}
.architectural-work .draft-ground{stroke:#5f7e9d;stroke-width:.85;opacity:.75}
.architectural-work .draft-accent{stroke:#82d9dc;stroke-width:1.1}
.architectural-work .draft-reflection{stroke:#c4e2ef;stroke-width:.7;opacity:.6}
.architectural-work .draft-guide{stroke:#708aab;stroke-width:.8;opacity:.45}
.architectural-work .draft-guides{fill:none;stroke:#718db1;stroke-width:.6;stroke-dasharray:3 8;opacity:0;animation:draft-guides-in .8s .1s forwards}
.architectural-work .draft-face{stroke:none;opacity:0;animation:draft-surfaces-in 1.5s .8s forwards}
.architectural-work .face-glass{fill:url('#work-glass')}.architectural-work .face-roof{fill:url('#work-roof')}
.architectural-work .face-shade{fill:#7288c7;fill-opacity:.065}.architectural-work .face-ground{fill:#87b7d9;fill-opacity:.025}.architectural-work .face-hatch{fill:url('#work-hatch')}
.architectural-work .draft-connection{stroke:#56758f;stroke-width:.85;opacity:.55}
.architectural-work .draft-nodes{stroke:none;fill:#7ed8df;opacity:0;animation:draft-nodes-in .9s 1.8s forwards}
.architectural-work .draft-package{animation:draft-package-motion 1.3s 1.6s ease-in-out 2}
.architectural-work .draft-mop{transform-box:fill-box;transform-origin:top left;animation:draft-mop-motion 1.2s 1.6s ease-in-out 2}
.refined-intro.finished .work-universe{transform:translate(-50%,-50%) scale(1.035)}
@keyframes draft-guides-in{to{opacity:.25}}
@keyframes draft-surfaces-in{to{opacity:1}}
@keyframes draft-nodes-in{to{opacity:.7}}
@keyframes draft-package-motion{0%,100%{transform:none}50%{transform:translate(12px,4.3px)}}
@keyframes draft-mop-motion{0%,100%{transform:none}50%{transform:rotate(7deg)}}
@media(max-width:1050px) and (min-width:681px){.refined-intro .intro-logo{width:180px}.refined-intro .intro-identity{top:34%}}
@media(max-width:680px){
 .refined-intro .work-universe{width:100%;height:500px;aspect-ratio:auto;top:46%}
 .refined-intro .intro-identity{top:32px;width:210px}.refined-intro .intro-logo{width:168px}
 .refined-intro .work-drawing{width:600px;height:350px;top:210px;left:50%;transform:translateX(-50%)}
 .refined-intro .scene-factory{transform:translateX(170px)}.refined-intro .scene-cleaning{transform:translateX(-185px)}
 .architectural-work .draft-line{stroke-width:1.5}.architectural-work .draft-outline{stroke-width:2}.architectural-work .draft-person{stroke-width:1.8}
 .architectural-work .draft-cladding,.architectural-work .draft-reflection{stroke-width:1}.architectural-work .draft-guides{stroke-width:1}
 .refined-intro #skip-intro{right:22px;top:22px;width:40px;height:40px}.refined-intro>.work-progress{bottom:35px;width:150px}
}
@media(max-height:650px) and (min-width:681px){.refined-intro .work-universe{width:min(940px,92vw)}.refined-intro .intro-logo{width:168px}.refined-intro>.work-progress{bottom:23px}}
@media(max-height:650px) and (max-width:680px){.refined-intro .work-universe{transform:translate(-50%,-50%) scale(.78);top:47%}}
@media(prefers-reduced-motion:reduce){.architectural-work *{animation:none!important}.architectural-work .draft-line{stroke-dashoffset:0}.architectural-work .draft-face{opacity:1}.architectural-work .draft-guides{opacity:.25}.architectural-work .draft-nodes{opacity:.7}}

/* Brand signature beneath the animated symbol. */
.refined-intro .intro-wordmark{margin-top:16px;color:#f2f7ff;font-size:21px;line-height:1.2;font-weight:650;letter-spacing:.22em;padding-left:.22em;text-shadow:0 2px 18px #0005}
@media(max-width:680px){.refined-intro .intro-wordmark{margin-top:12px;font-size:17px}}